From 4918cf1055c428943fec011b7223f77375f228a4 Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Fri, 1 Nov 2024 15:35:28 -0400
Subject: [PATCH 1/7] refactor: theme builder styles to use tailwind

---
 config/webpack/demo/webpack.config.dev.js     |   6 +-
 demo/styles.scss                              |  25 --
 demo/ts/app.tsx                               |   1 -
 demo/ts/components/theme-builder/button.tsx   |   5 +-
 .../theme-builder/color-scale-options.tsx     |  16 +-
 .../theme-builder/config-preview.tsx          |  16 +-
 demo/ts/components/theme-builder/index.tsx    |  28 +-
 demo/ts/components/theme-builder/select.tsx   |   6 +-
 demo/ts/components/theme-builder/tailwind.css |   9 +
 .../theme-builder/theme-builder.scss          | 241 ----------------
 package.json                                  |   5 +-
 pnpm-lock.yaml                                | 267 ++++++++----------
 postcss.config.js                             |   6 +
 tailwind.config.js                            |  25 ++
 14 files changed, 204 insertions(+), 452 deletions(-)
 delete mode 100644 demo/styles.scss
 create mode 100644 demo/ts/components/theme-builder/tailwind.css
 delete mode 100644 demo/ts/components/theme-builder/theme-builder.scss
 create mode 100644 postcss.config.js
 create mode 100644 tailwind.config.js

diff --git a/config/webpack/demo/webpack.config.dev.js b/config/webpack/demo/webpack.config.dev.js
index 3c86de942..95fd7a9de 100644
--- a/config/webpack/demo/webpack.config.dev.js
+++ b/config/webpack/demo/webpack.config.dev.js
@@ -54,13 +54,9 @@ module.exports = {
           options: require("../../../.babelrc.js"),
         },
       },
-      {
-        test: /\.scss$/,
-        use: ["style-loader", "css-loader", "sass-loader"],
-      },
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"],
+        use: ["style-loader", "css-loader", "postcss-loader"],
       },
     ],
   },
diff --git a/demo/styles.scss b/demo/styles.scss
deleted file mode 100644
index 76277da81..000000000
--- a/demo/styles.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@use "ts/components/theme-builder/theme-builder.scss";
-
-// Global resets
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: "Roboto", sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  color: #333;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: 0.5em;
-}
diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx
index e9c1a89bb..11e281675 100644
--- a/demo/ts/app.tsx
+++ b/demo/ts/app.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import "../styles.scss";
 
 import AccessibilityDemo from "./components/accessibility-demo";
 import AnimationDemo from "./components/animation-demo";
diff --git a/demo/ts/components/theme-builder/button.tsx b/demo/ts/components/theme-builder/button.tsx
index 207b81d0f..bf35a5fd8 100644
--- a/demo/ts/components/theme-builder/button.tsx
+++ b/demo/ts/components/theme-builder/button.tsx
@@ -16,12 +16,15 @@ const Button = ({
   disabled = false,
   ...props
 }: ButtonProps) => {
+  const baseClasses =
+    "py-2 px-5 border-0 rounded-md cursor-pointer text-sm bg-primary text-white hover:bg-secondary disabled:bg-gray-200 disabled:cursor-not-allowed";
+
   return (
     <button
       onClick={onClick}
       disabled={disabled}
       aria-label={ariaLabel || undefined}
-      className={`button ${className}`}
+      className={`${baseClasses} ${className}`}
       {...props}
     >
       {children}
diff --git a/demo/ts/components/theme-builder/color-scale-options.tsx b/demo/ts/components/theme-builder/color-scale-options.tsx
index f42d033b0..f6d7fc518 100644
--- a/demo/ts/components/theme-builder/color-scale-options.tsx
+++ b/demo/ts/components/theme-builder/color-scale-options.tsx
@@ -60,24 +60,30 @@ const ColorPicker = ({
   const [isPickerOpen, setIsPickerOpen] = React.useState(false);
 
   return (
-    <div className={`color-picker ${isPickerOpen ? "open" : ""}`}>
+    <div className="relative group">
       <label
         htmlFor={`color-${index}`}
-        className="color-picker__label"
+        className="block w-[40px] h-[40px] rounded-full border-2 border-transparent cursor-pointer transition-all justify-center items-center after:content-[''] after:block after:w-full after:h-full after:rounded-[inherit] after:bg-currentColor"
         style={{
           color,
         }}
       />
       <input
         id={`color-${index}`}
-        className="color-picker__input"
+        className={`absolute top-0 left-0 w-full h-full cursor-pointer opacity-0 z-10 group-hover:border-currentColor ${
+          isPickerOpen ? "border-currentColor" : ""
+        }`}
         type="color"
         value={color}
         onChange={(event) => onColorChange({ event, index, colorScale })}
         onFocus={() => setIsPickerOpen(true)}
         onBlur={() => setIsPickerOpen(false)}
       />
-      <div className="color-picker__icon">
+      <div
+        className={`absolute top-0 left-0 w-full h-full text-white flex justify-center items-center text-xl rounded-full opacity-0 group-hover:opacity-100 ${
+          isPickerOpen ? "opacity-100" : ""
+        }`}
+      >
         <TiPencil />
       </div>
     </div>
@@ -99,7 +105,7 @@ const ColorScaleOptions = ({
         options={colorScales}
         label="Color Scale"
       />
-      <div className="color-scale__colors">
+      <div className="flex flex-wrap gap-3 mb-5">
         {activeTheme?.config?.palette?.[activeColorScale as string]?.map(
           (color, i) => (
             <ColorPicker
diff --git a/demo/ts/components/theme-builder/config-preview.tsx b/demo/ts/components/theme-builder/config-preview.tsx
index f284f38d0..899b27fc1 100644
--- a/demo/ts/components/theme-builder/config-preview.tsx
+++ b/demo/ts/components/theme-builder/config-preview.tsx
@@ -30,17 +30,23 @@ const ConfigPreview = ({ config, onClose }: ConfigPreviewProps) => {
   };
 
   return (
-    <div className="config-preview">
-      <button onClick={handleClose} className="config-preview__close-button">
+    <div className="fixed top-0 right-0 bottom-0 w-full p-10 z-20 bg-white flex flex-col">
+      <button
+        onClick={handleClose}
+        className="absolute top-3 right-3 bg-transparent border-0 text-xl"
+      >
         &times;
       </button>
       <h2>Theme Config Preview</h2>
-      <SyntaxHighlighter language="json" className="config-preview__code">
+      <SyntaxHighlighter
+        language="json"
+        className="flex-1 overflow-auto border border-gray-200 p-3 bg-gray-100"
+      >
         {JSON.stringify(config, null, 2)}
       </SyntaxHighlighter>
-      <div className="config-preview__copy-container">
+      <div className="flex items-center justify-end gap-3 mt-5">
         {copyStatus && (
-          <span className="config-preview__copy-status">{copyStatus}</span>
+          <span className="text-gray-300 text-xs italic">{copyStatus}</span>
         )}
         <Button onClick={handleCopyThemeConfig} ariaLabel="Copy to Clipboard">
           Copy to Clipboard
diff --git a/demo/ts/components/theme-builder/index.tsx b/demo/ts/components/theme-builder/index.tsx
index bf4f33bec..548b8a4e0 100644
--- a/demo/ts/components/theme-builder/index.tsx
+++ b/demo/ts/components/theme-builder/index.tsx
@@ -14,6 +14,8 @@ import Select from "./select";
 import ConfigPreview from "./config-preview";
 import Button from "./button";
 
+import "./tailwind.css";
+
 export type ThemeOption = {
   name: string;
   config?: VictoryThemeDefinition;
@@ -115,11 +117,11 @@ const ThemeBuilder = () => {
   };
 
   return (
-    <div className="theme-builder">
-      <aside className="theme-builder__sidebar">
-        <div className="theme-builder__content">
-          <h2 className="theme-builder__title">Customize Your Theme</h2>
-          <p className="theme-builder__intro">
+    <div className="flex flex-row flex-wrap items-start justify-start w-full">
+      <aside className="relative flex flex-col h-lvh w-[300px] border-r border-gray-200">
+        <div className="grow overflow-y-auto p-4">
+          <h2 className="mb-0 text-lg font-bold">Customize Your Theme</h2>
+          <p className="text-sm mb-4 text-gray-300">
             Select a theme to begin customizing.
           </p>
           <Select
@@ -131,7 +133,7 @@ const ThemeBuilder = () => {
           />
           {activeTheme && (
             <section>
-              <h2>Customization Options</h2>
+              <h2 className="text-lg font-bold mb-4">Customization Options</h2>
               <ColorScaleOptions
                 activeColorScale={activeColorScale}
                 activeTheme={activeTheme}
@@ -141,7 +143,7 @@ const ThemeBuilder = () => {
             </section>
           )}
         </div>
-        <footer className="theme-builder__footer">
+        <footer className="p-4 border-t border-gray-200 sticky bottom-0 flex justify-end">
           <Button
             onClick={handleThemeConfigPreviewOpen}
             ariaLabel="Get Theme Code"
@@ -151,13 +153,13 @@ const ThemeBuilder = () => {
           </Button>
         </footer>
       </aside>
-      <main className="theme-builder__preview">
+      <main className="flex-1 flex flex-col items-center">
         {activeTheme && (
-          <div className="theme-builder__preview-container">
-            <h2>Example Charts</h2>
-            <div className="theme-builder__preview-grid">
+          <div className="max-w-screen-xl w-full py-4 px-10">
+            <h2 className="text-xl font-bold mb-4">Example Charts</h2>
+            <div className="grid grid-cols-2 gap-10">
               <div>
-                <h3>Bar Chart</h3>
+                <h3 className="text-base font-bold mb-3">Bar Chart</h3>
                 <VictoryChart
                   theme={activeTheme?.config}
                   domainPadding={20}
@@ -176,7 +178,7 @@ const ThemeBuilder = () => {
                 </VictoryChart>
               </div>
               <div>
-                <h3>Area Chart</h3>
+                <h3 className="text-base font-bold mb-3">Area Chart</h3>
                 <VictoryChart
                   theme={activeTheme?.config}
                   domainPadding={20}
diff --git a/demo/ts/components/theme-builder/select.tsx b/demo/ts/components/theme-builder/select.tsx
index eeb6e51bf..cf8787c6f 100644
--- a/demo/ts/components/theme-builder/select.tsx
+++ b/demo/ts/components/theme-builder/select.tsx
@@ -15,9 +15,9 @@ type SelectProps = {
 
 const Select = ({ id, label, options, value, onChange }: SelectProps) => {
   return (
-    <div className="select">
+    <div className="relative w-full mb-5">
       {label && (
-        <label htmlFor={id} className="select__label">
+        <label htmlFor={id} className="block mb-1 text-sm font-bold">
           {label}
         </label>
       )}
@@ -25,7 +25,7 @@ const Select = ({ id, label, options, value, onChange }: SelectProps) => {
         id={id}
         value={value}
         onChange={onChange}
-        className="select__input"
+        className="p-2 w-full text-base border border-gray-200 bg-white appearance-none rounded-md bg-select-chevron bg-no-repeat bg-[right_8px_center] bg-[length:16px]"
       >
         {options.map((option) => (
           <option key={option.value} value={option.value}>
diff --git a/demo/ts/components/theme-builder/tailwind.css b/demo/ts/components/theme-builder/tailwind.css
new file mode 100644
index 000000000..87a75ca86
--- /dev/null
+++ b/demo/ts/components/theme-builder/tailwind.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    font-family: "Roboto", system-ui, sans-serif;
+  }
+}
diff --git a/demo/ts/components/theme-builder/theme-builder.scss b/demo/ts/components/theme-builder/theme-builder.scss
deleted file mode 100644
index 0742bc36d..000000000
--- a/demo/ts/components/theme-builder/theme-builder.scss
+++ /dev/null
@@ -1,241 +0,0 @@
-// Colors
-$primary-color: #007bff;
-$secondary-color: #0056b3;
-$white: #fff;
-$grey-100: #f9f9f9;
-$grey-200: #ccc;
-$grey-300: #666;
-
-// Components
-.select {
-  position: relative;
-  width: 100%;
-  margin-bottom: 20px;
-
-  &__label {
-    display: block;
-    margin-bottom: 5px;
-    font-size: 14px;
-    font-weight: bold;
-  }
-
-  &__input {
-    padding: 8px;
-    width: 100%;
-    font-size: 16px;
-    border-radius: 4px;
-    border: 1px solid $grey-200;
-    background-color: $white;
-    appearance: none;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"/></svg>');
-    background-repeat: no-repeat;
-    background-position: right 8px center;
-    background-size: 16px;
-  }
-}
-
-.button {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  background-color: $primary-color;
-  color: $white;
-
-  &:hover:not(:disabled) {
-    background-color: $secondary-color;
-  }
-
-  &:disabled {
-    background-color: $grey-200;
-    cursor: not-allowed;
-  }
-}
-
-// Theme Builder
-.theme-builder {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-
-  p {
-    color: $grey-300;
-  }
-
-  &__sidebar {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    width: 300px;
-    border-right: 1px solid $grey-200;
-  }
-
-  &__content {
-    flex-grow: 1;
-    overflow-y: auto;
-    padding: 16px;
-  }
-
-  &__footer {
-    padding: 16px;
-    border-top: 1px solid $grey-200;
-    position: sticky;
-    bottom: 0;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  &__title {
-    margin-bottom: 0px;
-  }
-
-  &__intro {
-    font-size: 14px;
-    margin-bottom: 14px;
-  }
-
-  &__preview {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  &__preview-container {
-    max-width: 1400px;
-    width: 100%;
-    padding: 16px 40px;
-  }
-
-  &__preview-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 40px;
-  }
-}
-
-.config-preview {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  padding: 40px;
-  z-index: 1000;
-  background: $white;
-  display: flex;
-  flex-direction: column;
-
-  &__copy-container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 10px;
-    margin-top: 20px;
-  }
-
-  &__copy-status {
-    color: $grey-300;
-    font-size: 12px;
-    font-style: italic;
-  }
-
-  &__code {
-    flex: 1;
-    overflow: auto;
-    border: 1px solid $grey-200;
-    padding: 10px;
-    background-color: $grey-100;
-  }
-
-  &__close-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: transparent;
-    border: none;
-    font-size: 20px;
-    cursor: pointer;
-  }
-}
-
-.color-scale {
-  &__colors {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-bottom: 20px;
-  }
-}
-
-.color-picker {
-  position: relative;
-
-  &.open,
-  &:hover {
-    .color-picker__icon {
-      opacity: 1;
-    }
-
-    .color-picker__label {
-      border-color: currentColor;
-    }
-  }
-
-  &__icon {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    color: $white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 20px;
-    border-radius: 50%;
-    opacity: 0;
-
-    &.open {
-      opacity: 1;
-    }
-  }
-
-  &__label {
-    display: block;
-    width: 40px;
-    height: 40px;
-    padding: 2px;
-    border: 2px solid transparent;
-    border-radius: 50%;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &::after {
-      content: "";
-      display: block;
-      width: 100%;
-      height: 100%;
-      border-radius: inherit;
-      background: currentColor;
-    }
-  }
-
-  &__input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    opacity: 0;
-    z-index: 1;
-  }
-}
diff --git a/package.json b/package.json
index 647bca70c..9ae870fda 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.32.0",
     "@typescript-eslint/parser": "^5.32.0",
+    "autoprefixer": "^10.0.1",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-lodash": "3.3.4",
@@ -86,6 +87,8 @@
     "metro-react-native-babel-preset": "0.77.0",
     "nps": "^5.9.0",
     "octokit": "^3.1.1",
+    "postcss": "^8",
+    "postcss-loader": "^8.1.1",
     "prettier": "^2.6.2",
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
@@ -98,11 +101,11 @@
     "remark-stringify": "^7.0.3",
     "rimraf": "^3.0.2",
     "sass": "^1.80.3",
-    "sass-loader": "^16.0.2",
     "seedrandom": "^3.0.5",
     "storybook": "^7.6.7",
     "style-loader": "^4.0.0",
     "styled-components": "^5.3.5",
+    "tailwindcss": "^3.3.0",
     "ts-jest": "^29.1.2",
     "ts-loader": "^9.3.0",
     "ts-node": "^10.9.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 172d71232..12146a56a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -95,6 +95,9 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^5.32.0
         version: 5.32.0(eslint@8.21.0)(typescript@4.7.4)
+      autoprefixer:
+        specifier: ^10.0.1
+        version: 10.4.17(postcss@8.4.33)
       babel-jest:
         specifier: 29.7.0
         version: 29.7.0(@babel/core@7.23.9)
@@ -194,6 +197,12 @@ importers:
       octokit:
         specifier: ^3.1.1
         version: 3.1.1
+      postcss:
+        specifier: ^8
+        version: 8.4.33
+      postcss-loader:
+        specifier: ^8.1.1
+        version: 8.1.1(postcss@8.4.33)(typescript@4.7.4)(webpack@5.74.0)
       prettier:
         specifier: ^2.6.2
         version: 2.7.1
@@ -230,9 +239,6 @@ importers:
       sass:
         specifier: ^1.80.3
         version: 1.80.3
-      sass-loader:
-        specifier: ^16.0.2
-        version: 16.0.2(sass@1.80.3)(webpack@5.74.0)
       seedrandom:
         specifier: ^3.0.5
         version: 3.0.5
@@ -245,6 +251,9 @@ importers:
       styled-components:
         specifier: ^5.3.5
         version: 5.3.5(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)
+      tailwindcss:
+        specifier: ^3.3.0
+        version: 3.4.1(ts-node@10.9.1)
       ts-jest:
         specifier: ^29.1.2
         version: 29.1.2(@babel/core@7.23.9)(babel-jest@29.7.0)(esbuild@0.18.20)(jest@29.7.0)(typescript@4.7.4)
@@ -422,7 +431,7 @@ importers:
     dependencies:
       next:
         specifier: 14.1.0
-        version: 14.1.0(react-dom@18.2.0)(react@18.2.0)
+        version: 14.1.0(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0)(sass@1.80.3)
       react:
         specifier: ^18
         version: 18.2.0
@@ -540,7 +549,7 @@ importers:
         version: 8.1.1(styled-components@6.1.8)
       tailwindcss:
         specifier: ^3.3.0
-        version: 3.4.1
+        version: 3.4.1(ts-node@10.9.1)
       typescript:
         specifier: ^5
         version: 5.3.3
@@ -1362,7 +1371,7 @@ packages:
       '@babel/traverse': 7.24.0
       '@babel/types': 7.24.0
       convert-source-map: 2.0.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -1493,7 +1502,7 @@ packages:
       '@babel/core': 7.23.9
       '@babel/helper-compilation-targets': 7.23.6
       '@babel/helper-plugin-utils': 7.24.7
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       lodash.debounce: 4.0.8
       resolve: 1.22.8
       semver: 6.3.1
@@ -1508,7 +1517,7 @@ packages:
       '@babel/core': 7.23.9
       '@babel/helper-compilation-targets': 7.23.6
       '@babel/helper-plugin-utils': 7.24.7
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       lodash.debounce: 4.0.8
       resolve: 1.22.8
     transitivePeerDependencies:
@@ -2910,7 +2919,7 @@ packages:
       '@babel/helper-split-export-declaration': 7.22.6
       '@babel/parser': 7.24.0
       '@babel/types': 7.24.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -2927,7 +2936,7 @@ packages:
       '@babel/helper-split-export-declaration': 7.24.7
       '@babel/parser': 7.24.7
       '@babel/types': 7.24.7
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -3455,7 +3464,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       espree: 9.3.3
       globals: 13.17.0
       ignore: 5.2.0
@@ -3508,7 +3517,7 @@ packages:
       chalk: 4.1.2
       ci-info: 3.3.2
       connect: 3.7.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       env-editor: 0.4.2
       find-yarn-workspace-root: 2.0.0
       form-data: 3.0.1
@@ -3584,7 +3593,7 @@ packages:
       '@expo/sdk-runtime-versions': 1.0.0
       '@react-native/normalize-color': 2.1.0
       chalk: 4.1.2
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       find-up: 5.0.0
       getenv: 1.0.0
       glob: 7.1.6
@@ -3644,7 +3653,7 @@ packages:
     resolution: {integrity: sha512-a+uJ/e6MAVxPVVN/HbXU5qxzdqrqDwNQYxCfxtAufgmd5VZj54e5f3TJA3LEEUW3pTSZR8xK0H0EtVN297AZnw==}
     dependencies:
       chalk: 4.1.2
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       dotenv: 16.4.5
       dotenv-expand: 11.0.6
       getenv: 1.0.0
@@ -3658,7 +3667,7 @@ packages:
     dependencies:
       '@expo/spawn-async': 1.7.2
       chalk: 4.1.2
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       find-up: 5.0.0
       minimatch: 3.1.2
       p-limit: 3.1.0
@@ -3708,7 +3717,7 @@ packages:
       '@react-native/babel-preset': 0.74.84(@babel/core@7.23.9)(@babel/preset-env@7.23.9)
       babel-preset-fbjs: 3.4.0(@babel/core@7.23.9)
       chalk: 4.1.2
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       find-yarn-workspace-root: 2.0.0
       fs-extra: 9.1.0
       getenv: 1.0.0
@@ -3765,7 +3774,7 @@ packages:
       '@expo/config-types': 50.0.1
       '@expo/image-utils': 0.4.2
       '@expo/json-file': 8.3.3
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       expo-modules-autolinking: 1.10.3
       fs-extra: 9.1.0
       resolve-from: 5.0.0
@@ -3882,7 +3891,7 @@ packages:
     engines: {node: '>=10.10.0'}
     dependencies:
       '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -4353,7 +4362,7 @@ packages:
       next: ^13.0.0 || ^14.0.0
       react: ^18.2.0
     dependencies:
-      next: 14.1.0(react-dom@18.2.0)(react@18.2.0)
+      next: 14.1.0(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0)(sass@1.80.3)
       react: 18.2.0
       third-party-capital: 1.0.20
     dev: true
@@ -4658,7 +4667,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@parcel/watcher-darwin-arm64@2.4.1:
@@ -4667,7 +4675,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@parcel/watcher-darwin-x64@2.4.1:
@@ -4676,7 +4683,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@parcel/watcher-freebsd-x64@2.4.1:
@@ -4685,7 +4691,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@parcel/watcher-linux-arm-glibc@2.4.1:
@@ -4694,7 +4699,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@parcel/watcher-linux-arm64-glibc@2.4.1:
@@ -4703,7 +4707,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@parcel/watcher-linux-arm64-musl@2.4.1:
@@ -4712,7 +4715,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@parcel/watcher-linux-x64-glibc@2.4.1:
@@ -4721,7 +4723,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@parcel/watcher-linux-x64-musl@2.4.1:
@@ -4730,7 +4731,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@parcel/watcher-win32-arm64@2.4.1:
@@ -4739,7 +4739,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@parcel/watcher-win32-ia32@2.4.1:
@@ -4748,7 +4747,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@parcel/watcher-win32-x64@2.4.1:
@@ -4757,7 +4755,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@parcel/watcher@2.4.1:
@@ -4781,7 +4778,6 @@ packages:
       '@parcel/watcher-win32-arm64': 2.4.1
       '@parcel/watcher-win32-ia32': 2.4.1
       '@parcel/watcher-win32-x64': 2.4.1
-    dev: true
 
   /@pkgjs/parseargs@0.11.0:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
@@ -6552,7 +6548,7 @@ packages:
       typescript: '>= 4.x'
       webpack: '>= 4'
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       endent: 2.1.0
       find-cache-dir: 3.3.2
       flat-cache: 3.0.4
@@ -7443,7 +7439,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.32.0
       '@typescript-eslint/type-utils': 5.32.0(eslint@8.21.0)(typescript@4.7.4)
       '@typescript-eslint/utils': 5.32.0(eslint@8.21.0)(typescript@4.7.4)
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       eslint: 8.21.0
       functional-red-black-tree: 1.0.1
       ignore: 5.2.0
@@ -7472,7 +7468,7 @@ packages:
       '@typescript-eslint/type-utils': 6.21.0(eslint@8.21.0)(typescript@5.3.3)
       '@typescript-eslint/utils': 6.21.0(eslint@8.21.0)(typescript@5.3.3)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       eslint: 8.21.0
       graphemer: 1.4.0
       ignore: 5.3.1
@@ -7497,7 +7493,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.32.0
       '@typescript-eslint/types': 5.32.0
       '@typescript-eslint/typescript-estree': 5.32.0(typescript@4.7.4)
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       eslint: 8.21.0
       typescript: 4.7.4
     transitivePeerDependencies:
@@ -7518,7 +7514,7 @@ packages:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       eslint: 8.21.0
       typescript: 5.3.3
     transitivePeerDependencies:
@@ -7560,7 +7556,7 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/utils': 5.32.0(eslint@8.21.0)(typescript@4.7.4)
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       eslint: 8.21.0
       tsutils: 3.21.0(typescript@4.7.4)
       typescript: 4.7.4
@@ -7580,7 +7576,7 @@ packages:
     dependencies:
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3)
       '@typescript-eslint/utils': 6.21.0(eslint@8.21.0)(typescript@5.3.3)
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       eslint: 8.21.0
       ts-api-utils: 1.2.1(typescript@5.3.3)
       typescript: 5.3.3
@@ -7614,7 +7610,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 5.32.0
       '@typescript-eslint/visitor-keys': 5.32.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
@@ -7635,7 +7631,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
@@ -7656,7 +7652,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
@@ -8039,7 +8035,7 @@ packages:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -9593,7 +9589,6 @@ packages:
     engines: {node: '>= 14.16.0'}
     dependencies:
       readdirp: 4.0.2
-    dev: true
 
   /chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
@@ -9992,13 +9987,29 @@ packages:
       yaml: 1.10.2
     dev: true
 
+  /cosmiconfig@9.0.0(typescript@4.7.4):
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+      typescript: 4.7.4
+    dev: true
+
   /cpx2@4.2.0:
     resolution: {integrity: sha512-Ik81d7J849x0dGpR/8TBLXc1MwkFuv29kkstgLau8IOQwptrEENsXefC4o+tnkTjiFnXbsaz08/6YSZdJER+nQ==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
       debounce: 1.2.1
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       duplexer: 0.1.2
       fs-extra: 10.1.0
       glob-gitignore: 1.0.14
@@ -10445,17 +10456,6 @@ packages:
     dependencies:
       ms: 2.1.3
 
-  /debug@4.3.4:
-    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.2
-
   /debug@4.3.4(supports-color@5.5.0):
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -10467,7 +10467,6 @@ packages:
     dependencies:
       ms: 2.1.2
       supports-color: 5.5.0
-    dev: true
 
   /decamelize-keys@1.1.0:
     resolution: {integrity: sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==}
@@ -10948,6 +10947,11 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
+  /env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+    dev: true
+
   /envinfo@7.13.0:
     resolution: {integrity: sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==}
     engines: {node: '>=4'}
@@ -10994,7 +10998,7 @@ packages:
       has-property-descriptors: 1.0.2
       has-proto: 1.0.3
       has-symbols: 1.0.3
-      hasown: 2.0.1
+      hasown: 2.0.2
       internal-slot: 1.0.7
       is-array-buffer: 3.0.4
       is-callable: 1.2.7
@@ -11128,12 +11132,12 @@ packages:
     dependencies:
       get-intrinsic: 1.2.4
       has-tostringtag: 1.0.2
-      hasown: 2.0.1
+      hasown: 2.0.2
 
   /es-shim-unscopables@1.0.2:
     resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
     dependencies:
-      hasown: 2.0.1
+      hasown: 2.0.2
     dev: true
 
   /es-to-primitive@1.2.1:
@@ -11153,7 +11157,7 @@ packages:
     peerDependencies:
       esbuild: '>=0.12 <1'
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       esbuild: 0.18.20
     transitivePeerDependencies:
       - supports-color
@@ -11240,7 +11244,7 @@ packages:
       eslint: 8.21.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.21.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint@8.21.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.21.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.21.0)
       eslint-plugin-react: 7.33.2(eslint@8.21.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@8.21.0)
@@ -11285,11 +11289,11 @@ packages:
       eslint: '*'
       eslint-plugin-import: '*'
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       enhanced-resolve: 5.15.1
       eslint: 8.21.0
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.21.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint@8.21.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.21.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.2
       is-core-module: 2.13.1
@@ -11357,35 +11361,6 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint@8.21.0):
-    resolution: {integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@8.21.0)(typescript@5.3.3)
-      debug: 3.2.7
-      eslint: 8.21.0
-      eslint-import-resolver-node: 0.3.9
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /eslint-plugin-eslint-comments@3.2.0(eslint@8.21.0):
     resolution: {integrity: sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==}
     engines: {node: '>=6.5.0'}
@@ -11440,7 +11415,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0)(eslint@8.21.0):
+  /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.21.0):
     resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -11459,8 +11434,8 @@ packages:
       doctrine: 2.1.0
       eslint: 8.21.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint@8.21.0)
-      hasown: 2.0.1
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.21.0)
+      hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
       minimatch: 3.1.2
@@ -11514,7 +11489,7 @@ packages:
       emoji-regex: 9.2.2
       es-iterator-helpers: 1.0.17
       eslint: 8.21.0
-      hasown: 2.0.1
+      hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
       minimatch: 3.1.2
@@ -11656,7 +11631,7 @@ packages:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.1.1
@@ -12538,7 +12513,7 @@ packages:
       function-bind: 1.1.2
       has-proto: 1.0.3
       has-symbols: 1.0.3
-      hasown: 2.0.1
+      hasown: 2.0.2
 
   /get-nonce@1.0.1:
     resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
@@ -12877,18 +12852,11 @@ packages:
       function-bind: 1.1.2
     dev: true
 
-  /hasown@2.0.1:
-    resolution: {integrity: sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      function-bind: 1.1.2
-
   /hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
     dependencies:
       function-bind: 1.1.2
-    dev: false
 
   /hast-util-parse-selector@2.2.5:
     resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
@@ -13103,7 +13071,7 @@ packages:
     dependencies:
       '@tootallnate/once': 2.0.0
       agent-base: 6.0.2
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -13143,7 +13111,7 @@ packages:
     engines: {node: '>= 6.0.0'}
     dependencies:
       agent-base: 5.1.1
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -13153,7 +13121,7 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -13224,7 +13192,6 @@ packages:
 
   /immutable@4.3.7:
     resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
-    dev: true
 
   /import-fresh@2.0.0:
     resolution: {integrity: sha512-eZ5H8rcgYazHbKC3PG4ClHNykCSxtAhxSSEM+2mb+7evD2CKF5V7c0dNum7AdpDh0ZdICwZY9sRSn8f+KH96sg==}
@@ -13297,7 +13264,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       es-errors: 1.3.0
-      hasown: 2.0.1
+      hasown: 2.0.2
       side-channel: 1.0.4
 
   /internmap@1.0.1:
@@ -13435,7 +13402,7 @@ packages:
   /is-core-module@2.13.1:
     resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
     dependencies:
-      hasown: 2.0.1
+      hasown: 2.0.2
 
   /is-core-module@2.9.0:
     resolution: {integrity: sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==}
@@ -13790,7 +13757,7 @@ packages:
     resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
     engines: {node: '>=10'}
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       istanbul-lib-coverage: 3.2.0
       source-map: 0.6.1
     transitivePeerDependencies:
@@ -15661,7 +15628,7 @@ packages:
     resolution: {integrity: sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==}
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.0
@@ -15893,7 +15860,7 @@ packages:
     resolution: {integrity: sha512-SrQrok4CATudVzBS7coSz26QRSmlK9TzzoFbeKfcPBUFPjcQM9Rqvr/DlJkOrwI/0KcgvMub1n1g5Jt9EgRn4A==}
     dev: false
 
-  /next@14.1.0(react-dom@18.2.0)(react@18.2.0):
+  /next@14.1.0(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0)(sass@1.80.3):
     resolution: {integrity: sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==}
     engines: {node: '>=18.17.0'}
     hasBin: true
@@ -15916,7 +15883,8 @@ packages:
       postcss: 8.4.31
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(react@18.2.0)
+      sass: 1.80.3
+      styled-jsx: 5.1.1(@babel/core@7.23.9)(react@18.2.0)
     optionalDependencies:
       '@next/swc-darwin-arm64': 14.1.0
       '@next/swc-darwin-x64': 14.1.0
@@ -15951,7 +15919,6 @@ packages:
 
   /node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
-    dev: true
 
   /node-dir@0.1.17:
     resolution: {integrity: sha512-tmPX422rYgofd4epzrNoOXiE8XFZYOcCq1vD7MAXCDO+O+zndlA2ztdKKMa+EeuBG5tHETpr4ml4RGgpqDCCAg==}
@@ -16727,7 +16694,7 @@ packages:
       postcss: 8.4.33
     dev: true
 
-  /postcss-load-config@4.0.2(postcss@8.4.33):
+  /postcss-load-config@4.0.2(postcss@8.4.33)(ts-node@10.9.1):
     resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
     engines: {node: '>= 14'}
     peerDependencies:
@@ -16741,9 +16708,32 @@ packages:
     dependencies:
       lilconfig: 3.1.1
       postcss: 8.4.33
+      ts-node: 10.9.1(@swc/core@1.3.106)(@types/node@18.6.1)(typescript@4.7.4)
       yaml: 2.4.0
     dev: true
 
+  /postcss-loader@8.1.1(postcss@8.4.33)(typescript@4.7.4)(webpack@5.74.0):
+    resolution: {integrity: sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      '@rspack/core': 0.x || 1.x
+      postcss: ^7.0.0 || ^8.0.1
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      cosmiconfig: 9.0.0(typescript@4.7.4)
+      jiti: 1.21.0
+      postcss: 8.4.33
+      semver: 7.5.4
+      webpack: 5.74.0(@swc/core@1.3.106)(esbuild@0.18.20)(webpack-cli@4.10.0)
+    transitivePeerDependencies:
+      - typescript
+    dev: true
+
   /postcss-modules-extract-imports@3.0.0(postcss@8.4.33):
     resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -17098,7 +17088,7 @@ packages:
     engines: {node: '>=8.16.0'}
     dependencies:
       '@types/mime-types': 2.1.4
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       extract-zip: 1.7.0
       https-proxy-agent: 4.0.0
       mime: 2.6.0
@@ -17716,7 +17706,6 @@ packages:
   /readdirp@4.0.2:
     resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
     engines: {node: '>= 14.16.0'}
-    dev: true
 
   /readline-sync@1.4.10:
     resolution: {integrity: sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw==}
@@ -18224,32 +18213,6 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
-  /sass-loader@16.0.2(sass@1.80.3)(webpack@5.74.0):
-    resolution: {integrity: sha512-Ll6iXZ1EYwYT19SqW4mSBb76vSSi8JgzElmzIerhEGgzB5hRjDQIWsPmuk1UrAXkR16KJHqVY0eH+5/uw9Tmfw==}
-    engines: {node: '>= 18.12.0'}
-    peerDependencies:
-      '@rspack/core': 0.x || 1.x
-      node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
-      sass: ^1.3.0
-      sass-embedded: '*'
-      webpack: ^5.0.0
-    peerDependenciesMeta:
-      '@rspack/core':
-        optional: true
-      node-sass:
-        optional: true
-      sass:
-        optional: true
-      sass-embedded:
-        optional: true
-      webpack:
-        optional: true
-    dependencies:
-      neo-async: 2.6.2
-      sass: 1.80.3
-      webpack: 5.74.0(@swc/core@1.3.106)(esbuild@0.18.20)(webpack-cli@4.10.0)
-    dev: true
-
   /sass@1.80.3:
     resolution: {integrity: sha512-ptDWyVmDMVielpz/oWy3YP3nfs7LpJTHIJZboMVs8GEC9eUmtZTZhMHlTW98wY4aEorDfjN38+Wr/XjskFWcfA==}
     engines: {node: '>=14.0.0'}
@@ -18259,7 +18222,6 @@ packages:
       chokidar: 4.0.1
       immutable: 4.3.7
       source-map-js: 1.0.2
-    dev: true
 
   /sax@1.2.4:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
@@ -18646,7 +18608,7 @@ packages:
   /spdy-transport@3.0.0:
     resolution: {integrity: sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==}
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       detect-node: 2.1.0
       hpack.js: 2.1.6
       obuf: 1.1.2
@@ -18660,7 +18622,7 @@ packages:
     resolution: {integrity: sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@5.5.0)
       handle-thing: 2.0.1
       http-deceiver: 1.2.7
       select-hose: 2.0.0
@@ -19073,7 +19035,7 @@ packages:
       tslib: 2.5.0
     dev: true
 
-  /styled-jsx@5.1.1(react@18.2.0):
+  /styled-jsx@5.1.1(@babel/core@7.23.9)(react@18.2.0):
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
@@ -19086,6 +19048,7 @@ packages:
       babel-plugin-macros:
         optional: true
     dependencies:
+      '@babel/core': 7.23.9
       client-only: 0.0.1
       react: 18.2.0
 
@@ -19199,7 +19162,7 @@ packages:
     resolution: {integrity: sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==}
     dev: true
 
-  /tailwindcss@3.4.1:
+  /tailwindcss@3.4.1(ts-node@10.9.1):
     resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
@@ -19221,7 +19184,7 @@ packages:
       postcss: 8.4.33
       postcss-import: 15.1.0(postcss@8.4.33)
       postcss-js: 4.0.1(postcss@8.4.33)
-      postcss-load-config: 4.0.2(postcss@8.4.33)
+      postcss-load-config: 4.0.2(postcss@8.4.33)(ts-node@10.9.1)
       postcss-nested: 6.0.1(postcss@8.4.33)
       postcss-selector-parser: 6.0.15
       resolve: 1.22.8
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 000000000..33ad091d2
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 000000000..02c3005b4
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,25 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./demo/ts/components/theme-builder/**/*.{ts,tsx}"],
+  theme: {
+    colors: {
+      currentColor: "currentColor",
+      transparent: "transparent",
+      primary: "#007bff",
+      secondary: "#0056b3",
+      white: "#fff",
+      gray: {
+        100: "#f9f9f9",
+        200: "#ccc",
+        300: "#666",
+      },
+    },
+    extend: {
+      backgroundImage: {
+        "select-chevron":
+          'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"/></svg>\')',
+      },
+    },
+  },
+  plugins: [],
+};

From 9451759b63839fbced1be1af3c577d23acff2577 Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Mon, 4 Nov 2024 11:21:00 -0500
Subject: [PATCH 2/7] feat: add axis label options

---
 .../components/theme-builder/color-picker.tsx |  95 +++++
 .../theme-builder/color-scale-options.tsx     |  61 +--
 demo/ts/components/theme-builder/index.tsx    |  35 +-
 .../theme-builder/label-options.tsx           |  49 +++
 demo/ts/components/theme-builder/slider.tsx   |  32 ++
 package.json                                  |   3 +
 pnpm-lock.yaml                                | 357 +++++++++++++++++-
 7 files changed, 559 insertions(+), 73 deletions(-)
 create mode 100644 demo/ts/components/theme-builder/color-picker.tsx
 create mode 100644 demo/ts/components/theme-builder/label-options.tsx
 create mode 100644 demo/ts/components/theme-builder/slider.tsx

diff --git a/demo/ts/components/theme-builder/color-picker.tsx b/demo/ts/components/theme-builder/color-picker.tsx
new file mode 100644
index 000000000..12d236daa
--- /dev/null
+++ b/demo/ts/components/theme-builder/color-picker.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import { TiPencil } from "react-icons/ti";
+import clsx from "clsx";
+
+type ColorPickerProps = {
+  label?: string;
+  color: string;
+  id: string;
+  onColorChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  showColorName?: boolean;
+};
+
+const ColorPicker = ({
+  label,
+  color,
+  id,
+  onColorChange,
+  showColorName = false,
+}: ColorPickerProps) => {
+  const [isPickerOpen, setIsPickerOpen] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (onColorChange) {
+      onColorChange(event);
+    }
+  };
+
+  return (
+    <fieldset>
+      {label && (
+        <label className="block mb-1 text-sm text-gray-900 dark:text-white font-bold">
+          {label}
+        </label>
+      )}
+      <div
+        className={clsx("relative inline-flex rounded-full group", {
+          "border-2 border-gray-200 p-0.5 cursor-pointer justify-between bg-gray-100":
+            showColorName,
+        })}
+      >
+        <div className="flex items-center">
+          <div className="relative">
+            <div
+              className={clsx(
+                "block w-[40px] h-[40px] rounded-full border-2 border-transparent cursor-pointer transition-all justify-center items-center after:content-[''] after:block after:w-full after:h-full after:rounded-[inherit] after:bg-currentColor",
+                { "w-[30px] h-[30px]": showColorName },
+              )}
+              style={{
+                color,
+              }}
+            />
+            {!showColorName && (
+              <div
+                className={`absolute top-0 left-0 w-full h-full text-white flex justify-center items-center text-xl rounded-full opacity-0 group-hover:opacity-100 ${
+                  isPickerOpen ? "opacity-100" : ""
+                }`}
+              >
+                <TiPencil />
+              </div>
+            )}
+          </div>
+          {showColorName && (
+            <span
+              className={
+                "text-sm font-medium text-gray-900 uppercase ml-2 cursor-pointer"
+              }
+            >
+              {color}
+            </span>
+          )}
+        </div>
+        {showColorName && (
+          <div
+            className={`text-gray-300 flex justify-center items-center text-xl rounded-full place-items-end ml-6 mr-1`}
+          >
+            <TiPencil />
+          </div>
+        )}
+        <input
+          id={id}
+          className={`absolute top-0 left-0 w-full h-full cursor-pointer opacity-0 z-10 group-hover:border-currentColor ${
+            isPickerOpen ? "border-currentColor" : ""
+          }`}
+          type="color"
+          value={color}
+          onChange={handleChange}
+          onFocus={() => setIsPickerOpen(true)}
+          onBlur={() => setIsPickerOpen(false)}
+        />
+      </div>
+    </fieldset>
+  );
+};
+
+export default ColorPicker;
diff --git a/demo/ts/components/theme-builder/color-scale-options.tsx b/demo/ts/components/theme-builder/color-scale-options.tsx
index f6d7fc518..45c3c91b2 100644
--- a/demo/ts/components/theme-builder/color-scale-options.tsx
+++ b/demo/ts/components/theme-builder/color-scale-options.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { ThemeOption } from ".";
 import { ColorScalePropType } from "victory-core";
 import Select from "./select";
-import { TiPencil } from "react-icons/ti";
+import ColorPicker from "./color-picker";
 
-type ColorChangeArgs = {
+export type ColorChangeArgs = {
   event: React.ChangeEvent<HTMLInputElement>;
   index: number;
   colorScale: string;
@@ -44,52 +44,6 @@ const colorScales = [
   },
 ];
 
-type ColorPickerProps = {
-  color: string;
-  index: number;
-  onColorChange: (args: ColorChangeArgs) => void;
-  colorScale: string;
-};
-
-const ColorPicker = ({
-  color,
-  index,
-  onColorChange,
-  colorScale,
-}: ColorPickerProps) => {
-  const [isPickerOpen, setIsPickerOpen] = React.useState(false);
-
-  return (
-    <div className="relative group">
-      <label
-        htmlFor={`color-${index}`}
-        className="block w-[40px] h-[40px] rounded-full border-2 border-transparent cursor-pointer transition-all justify-center items-center after:content-[''] after:block after:w-full after:h-full after:rounded-[inherit] after:bg-currentColor"
-        style={{
-          color,
-        }}
-      />
-      <input
-        id={`color-${index}`}
-        className={`absolute top-0 left-0 w-full h-full cursor-pointer opacity-0 z-10 group-hover:border-currentColor ${
-          isPickerOpen ? "border-currentColor" : ""
-        }`}
-        type="color"
-        value={color}
-        onChange={(event) => onColorChange({ event, index, colorScale })}
-        onFocus={() => setIsPickerOpen(true)}
-        onBlur={() => setIsPickerOpen(false)}
-      />
-      <div
-        className={`absolute top-0 left-0 w-full h-full text-white flex justify-center items-center text-xl rounded-full opacity-0 group-hover:opacity-100 ${
-          isPickerOpen ? "opacity-100" : ""
-        }`}
-      >
-        <TiPencil />
-      </div>
-    </div>
-  );
-};
-
 const ColorScaleOptions = ({
   activeColorScale,
   activeTheme,
@@ -111,9 +65,14 @@ const ColorScaleOptions = ({
             <ColorPicker
               key={i}
               color={color}
-              index={i}
-              onColorChange={onColorChange}
-              colorScale={activeColorScale as string}
+              id={`color-${i}`}
+              onColorChange={(event) =>
+                onColorChange({
+                  event,
+                  index: i,
+                  colorScale: activeColorScale as string,
+                })
+              }
             />
           ),
         )}
diff --git a/demo/ts/components/theme-builder/index.tsx b/demo/ts/components/theme-builder/index.tsx
index 548b8a4e0..c5eec99b7 100644
--- a/demo/ts/components/theme-builder/index.tsx
+++ b/demo/ts/components/theme-builder/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import {
   ColorScalePropType,
+  LabelProps,
   VictoryTheme,
   VictoryThemeDefinition,
 } from "victory-core";
@@ -9,12 +10,13 @@ import { VictoryAxis } from "victory-axis";
 import { VictoryStack } from "victory-stack";
 import { VictoryBar } from "victory-bar";
 import { VictoryArea } from "victory-area";
-import ColorScaleOptions from "./color-scale-options";
+import ColorScaleOptions, { ColorChangeArgs } from "./color-scale-options";
 import Select from "./select";
 import ConfigPreview from "./config-preview";
 import Button from "./button";
 
 import "./tailwind.css";
+import LabelOptions from "./label-options";
 
 export type ThemeOption = {
   name: string;
@@ -84,7 +86,30 @@ const ThemeBuilder = () => {
     setActiveTheme(theme);
   };
 
-  const handleColorChange = ({ event, index, colorScale }) => {
+  const handleLabelConfigChange = (newLabelConfig: Partial<LabelProps>) => {
+    if (activeTheme) {
+      const updatedTheme = {
+        ...activeTheme,
+        name: "Custom",
+        config: {
+          ...activeTheme.config,
+          axis: {
+            ...activeTheme.config?.axis,
+            style: {
+              ...activeTheme.config?.axis?.style,
+              axisLabel: {
+                ...activeTheme.config?.axis?.style?.axisLabel,
+                ...newLabelConfig,
+              },
+            },
+          },
+        },
+      };
+      setActiveTheme(updatedTheme as ThemeOption);
+    }
+  };
+
+  const handleColorChange = ({ event, index, colorScale }: ColorChangeArgs) => {
     const newColor = event.target.value;
     const customTheme = {
       ...activeTheme,
@@ -140,6 +165,12 @@ const ThemeBuilder = () => {
                 onColorChange={handleColorChange}
                 onColorScaleChange={handleColorScaleChange}
               />
+              <LabelOptions
+                labelConfig={
+                  activeTheme?.config?.axis?.style?.axisLabel as LabelProps
+                }
+                onLabelConfigChange={handleLabelConfigChange}
+              />
             </section>
           )}
         </div>
diff --git a/demo/ts/components/theme-builder/label-options.tsx b/demo/ts/components/theme-builder/label-options.tsx
new file mode 100644
index 000000000..6370f999a
--- /dev/null
+++ b/demo/ts/components/theme-builder/label-options.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { LabelProps } from "victory-core";
+import Slider from "./slider";
+import ColorPicker from "./color-picker";
+
+type LabelOptionsProps = {
+  labelConfig?: LabelProps;
+  onLabelConfigChange: (labelConfig: LabelProps) => void;
+};
+
+const LabelOptions = ({
+  labelConfig,
+  onLabelConfigChange,
+}: LabelOptionsProps) => {
+  if (!labelConfig) return null;
+  return (
+    <div>
+      <h3 className="text-lg font-bold mb-4">Axis Label Options</h3>
+      <Slider
+        label="Font Size"
+        id="font-size"
+        defaultValue={labelConfig?.fontSize}
+        onChange={(event) =>
+          onLabelConfigChange({ fontSize: parseInt(event.target.value) })
+        }
+      />
+      <Slider
+        label="Padding"
+        id="padding"
+        defaultValue={labelConfig?.padding}
+        onChange={(event) =>
+          onLabelConfigChange({ padding: parseInt(event.target.value) })
+        }
+      />
+      <div>
+        <ColorPicker
+          color={labelConfig?.fill as string}
+          id="label-fill"
+          showColorName
+          label="Fill"
+          onColorChange={(event) =>
+            onLabelConfigChange({ fill: event.target.value })
+          }
+        />
+      </div>
+    </div>
+  );
+};
+export default LabelOptions;
diff --git a/demo/ts/components/theme-builder/slider.tsx b/demo/ts/components/theme-builder/slider.tsx
new file mode 100644
index 000000000..720243f5c
--- /dev/null
+++ b/demo/ts/components/theme-builder/slider.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+const Slider = ({ label, id, defaultValue, unit = "px", onChange }) => {
+  const [value, setValue] = React.useState(defaultValue);
+
+  const handleChange = (event) => {
+    setValue(event.target.value);
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  return (
+    <div className="my-4">
+      <label
+        htmlFor={id}
+        className="block mb-1 text-sm font-medium text-gray-900 dark:text-white"
+      >
+        <span className="text-sm font-bold">{label}</span>: {value}
+        {unit}
+      </label>
+      <input
+        id={id}
+        type="range"
+        value={value}
+        onChange={handleChange}
+        className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+      />
+    </div>
+  );
+};
+export default Slider;
diff --git a/package.json b/package.json
index 9ae870fda..ff8c85a37 100644
--- a/package.json
+++ b/package.json
@@ -643,5 +643,8 @@
         "build:lib:esm"
       ]
     }
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 12146a56a..e16f6a078 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,6 +10,10 @@ overrides:
 importers:
 
   .:
+    dependencies:
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
     devDependencies:
       '@babel/cli':
         specifier: 7.23.9
@@ -558,7 +562,7 @@ importers:
         version: 1.5.0
       victory:
         specifier: '*'
-        version: link:../packages/victory
+        version: 37.3.1(react@18.2.0)
 
   packages/victory:
     dependencies:
@@ -964,7 +968,7 @@ importers:
         version: 3.2.0
       victory:
         specifier: ^37.3.0
-        version: link:../victory
+        version: 37.3.1(react@18.2.0)
       victory-area:
         specifier: ^37.3.0
         version: link:../victory-area
@@ -7021,45 +7025,36 @@ packages:
 
   /@types/d3-array@3.0.3:
     resolution: {integrity: sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==}
-    dev: false
 
   /@types/d3-color@3.1.0:
     resolution: {integrity: sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==}
-    dev: false
 
   /@types/d3-ease@3.0.0:
     resolution: {integrity: sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==}
-    dev: false
 
   /@types/d3-interpolate@3.0.1:
     resolution: {integrity: sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==}
     dependencies:
       '@types/d3-color': 3.1.0
-    dev: false
 
   /@types/d3-path@3.0.0:
     resolution: {integrity: sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==}
-    dev: false
 
   /@types/d3-scale@4.0.2:
     resolution: {integrity: sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==}
     dependencies:
       '@types/d3-time': 3.0.0
-    dev: false
 
   /@types/d3-shape@3.1.0:
     resolution: {integrity: sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==}
     dependencies:
       '@types/d3-path': 3.0.0
-    dev: false
 
   /@types/d3-time@3.0.0:
     resolution: {integrity: sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==}
-    dev: false
 
   /@types/d3-timer@3.0.0:
     resolution: {integrity: sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==}
-    dev: false
 
   /@types/debug@4.1.12:
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
@@ -9743,6 +9738,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+    dev: false
+
   /co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -10285,7 +10285,6 @@ packages:
   /d3-ease@3.0.1:
     resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
     engines: {node: '>=12'}
-    dev: false
 
   /d3-format@2.0.0:
     resolution: {integrity: sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==}
@@ -10306,7 +10305,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       d3-color: 3.1.0
-    dev: false
 
   /d3-path@3.0.1:
     resolution: {integrity: sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==}
@@ -10331,14 +10329,12 @@ packages:
       d3-interpolate: 3.0.1
       d3-time: 3.0.0
       d3-time-format: 4.1.0
-    dev: false
 
   /d3-shape@3.1.0:
     resolution: {integrity: sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ==}
     engines: {node: '>=12'}
     dependencies:
       d3-path: 3.0.1
-    dev: false
 
   /d3-time-format@3.0.0:
     resolution: {integrity: sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==}
@@ -10371,7 +10367,6 @@ packages:
   /d3-timer@3.0.1:
     resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
     engines: {node: '>=12'}
-    dev: false
 
   /d3-voronoi@1.1.4:
     resolution: {integrity: sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==}
@@ -10598,13 +10593,11 @@ packages:
 
   /delaunator@4.0.1:
     resolution: {integrity: sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==}
-    dev: false
 
   /delaunay-find@0.0.6:
     resolution: {integrity: sha512-1+almjfrnR7ZamBk0q3Nhg6lqSe6Le4vL0WJDSMx4IDbQwTpUTXPjxC00lqLBT8MYsJpPCbI16sIkw9cPsbi7Q==}
     dependencies:
       delaunator: 4.0.1
-    dev: false
 
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
@@ -14475,7 +14468,6 @@ packages:
 
   /json-stringify-safe@5.0.1:
     resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
-    dev: false
 
   /json5@1.0.2:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
@@ -17300,7 +17292,6 @@ packages:
 
   /react-fast-compare@3.2.0:
     resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}
-    dev: false
 
   /react-freeze@1.0.4(react@18.2.0):
     resolution: {integrity: sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==}
@@ -20269,6 +20260,332 @@ packages:
       vfile-message: 4.0.2
     dev: true
 
+  /victory-area@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-+D0I64HRe0hXCP8HsQIpsDmxkBsqPTZDImOfndjr/2JCXo9T/PLkUlbh/RjyOtHM66iUPjwjGJ513H3kfT4nYw==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+      victory-vendor: 37.3.1
+
+  /victory-axis@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-hLLr4yAaVizGG+k50LZl7C/YJ+IUGkTFTO9cZqXJQS0c1WNYYxUC1pmDq1dugPpJLKJcbKOXHLLgswzYKAk6Jw==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-bar@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-DRfy/adNB9tl6/WNBqbWhnTXVrGraq8fsqf9SXkhtaYaQqyOAqmSZmfAiqATQWkONPXrkMKJC1urQJxJvHGLMQ==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+      victory-vendor: 37.3.1
+
+  /victory-box-plot@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-9KjILr5wuVkdB8C9gqYUPoqcAirDRTQ0hdjxfD627hQf0U6Uaju+FrEiigC4+Kr/HUQhQtxvklGwDypjxzj6Ng==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+      victory-vendor: 37.3.1
+
+  /victory-brush-container@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-hJlbjKQqqHEM29v7qauKuMy/UfdeqBlydM5yzMgauDEenWfs09rRO3CgJCVyu0SVEAem5Aaa7ovk5mI4/HGR6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      react-fast-compare: 3.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-brush-line@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-ojTk9fK9wi38w/OICceq/+zDOIfTedAE105B2XY5GYY+qE6k7dYHsIHtujhXXshPWYp5HnNPeP2xWt3Ky3B16Q==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      react-fast-compare: 3.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-candlestick@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-/lPUbxUmXabMqUmgsURMlpSnLOXZUTj3qPr/6rExnNS+zUyPvCfGXxca9HlB9QhP9Gmvz4RSm1lODLqDA02SNQ==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-canvas@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-z2VCde70m4AEsPDp9XJ4vxvaSqbsVRKKSk8ftgsBzGqrCtRd0TqJyyFgTnlgguCert4J03NCbZqwMra8ZTLRdg==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-bar: 37.3.1(react@18.2.0)
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-chart@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-mtTxmGUexmlX+IDh9GrBRIbFTFziUu08pbG9hz/io8UfBQ3f//ewPq8z8qI3apx7f/rvS6HD6NJyAew8t+nzyg==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      react-fast-compare: 3.2.0
+      victory-axis: 37.3.1(react@18.2.0)
+      victory-core: 37.3.1(react@18.2.0)
+      victory-polar-axis: 37.3.1(react@18.2.0)
+      victory-shared-events: 37.3.1(react@18.2.0)
+
+  /victory-core@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-jFjqF7AVjc8OF1wuL9hFbPS+4mEH/C8LKI1/V0EJQcu5VimppF2BkbCH5+Y2lEwNNzNaqrXJnQ3Z0bzXjtplbw==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      react-fast-compare: 3.2.0
+      victory-vendor: 37.3.1
+
+  /victory-create-container@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-9tkSHgt2NI28uFwcfwvcXNVVhhYQIyqk9du2AwwBdPpQUIK8GNjZvtgddZ3IdU1n9WmVqqb/Ne1l2aX+s2G0Aw==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-brush-container: 37.3.1(react@18.2.0)
+      victory-core: 37.3.1(react@18.2.0)
+      victory-cursor-container: 37.3.1(react@18.2.0)
+      victory-selection-container: 37.3.1(react@18.2.0)
+      victory-voronoi-container: 37.3.1(react@18.2.0)
+      victory-zoom-container: 37.3.1(react@18.2.0)
+
+  /victory-cursor-container@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-PYJzGJL0tnNQrUHXHj0lP1TXYA5XUyNvfPMjUrII74BS2T6t85+gjc++s0pugpyc/NqyXwNaulJxPnjePwR1MA==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-errorbar@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-HDl530tRdFs9ZLZcLA6ur6lpvVaTxp17+YzlPblHhOJiEA8tMmJKYkiKNVKkbvkEmw/7CuycnEx8RyMVX2U++w==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-group@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-jLAYAHtMwqLulGujirar9kIUZmxw1M1slM/5DBzDJLamTAb7OJaagDmcIiLdnC08ziV8v/MgGkgS6e3/qIe2iw==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      react-fast-compare: 3.2.0
+      victory-core: 37.3.1(react@18.2.0)
+      victory-shared-events: 37.3.1(react@18.2.0)
+
+  /victory-histogram@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-7xbE/17mOJHeW9k7BrNtRm15HiUYT6wqjfQQuu49S2zWtJS7aodYbgAYJIHVCrCONzVwwdWI3hx4SX1vVBfDRw==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      react-fast-compare: 3.2.0
+      victory-bar: 37.3.1(react@18.2.0)
+      victory-core: 37.3.1(react@18.2.0)
+      victory-vendor: 37.3.1
+
+  /victory-legend@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-R7mU4VXbT9toff9oVFfNErAxg6QziWbSiy4IzPYlqgOI+3OPOvBRi1Sbyizk28BcHVIq53iAT8YWwDXxdGwSzQ==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-line@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-6FtKiWcCpo4rshOHyE31fO8nog9nRakujAIpdAJk/96621RqBiLQjP1jBhQmjbKCEQCTepHvLGLgx1jdUlb/9A==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+      victory-vendor: 37.3.1
+
+  /victory-pie@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-Oc5lPvPbtzVqbLtjMEMiyIRbjwHXxAqIdfiVRkr9Sv36Q53rMr9a44CNuUcFeL8eR/794RKm8v5feieOPeGLaQ==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+      victory-vendor: 37.3.1
+
+  /victory-polar-axis@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-Lxn911XYG2D+LX4ijhFGEXUEx5o2I1eOBlgOYmgvbRldgdCFkZGY6E6uwPbWhPnk2ZUMHVpZGXcZs/hvypC/bw==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-scatter@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-xALMB+Kufw0U9ePCNHaHNuFN0Ili+9kWy/6qjm9QKo92HiGkDQeNPWAFHFbyAErFmKkaAdVuEPx3FiU9Novb4A==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-selection-container@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-flkh0QUbuKYSZ7t6mogKVaP3upXP5Ej9O1Dvpsn2h8CYzo933veAGVeBfOoguWieuGQbS7JbSkYjrzneXoQMyA==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-shared-events@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-fmZZBZEw3jBYO1aD5enOljEN1cRVZBCFxMYhR5of1DGOFc2ZVhq/FK1Lhe3zd2dYGNC8IAP69kth1A+p+VZo0A==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      json-stringify-safe: 5.0.1
+      lodash: 4.17.21
+      react: 18.2.0
+      react-fast-compare: 3.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-stack@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-VxTnIFhilG2Umg+JJXgeXEm6QbGgmXSYnAIsZT0ejp94IVsfl+f8IOrJHzUrytEeMK4t7JA/StaRlyfWShqthg==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      react-fast-compare: 3.2.0
+      victory-core: 37.3.1(react@18.2.0)
+      victory-shared-events: 37.3.1(react@18.2.0)
+
+  /victory-tooltip@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-C0wyyAj332XpZ5jloMCr8FEDHp6eD76vfwlif+ZcjLVhzNOxTnpjaW988wFNfJaZRgxXcq50TEJkHWvuBnHviQ==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-vendor@37.3.1:
+    resolution: {integrity: sha512-ik/nlt3GgTGwyt29f2zd5Y68nNJnxtUJ2CulepE4nWTzbrbFkqhrNDTf3k+yb5ZUQBK1BLkyE79UWVNzTRCByw==}
+    dependencies:
+      '@types/d3-array': 3.0.3
+      '@types/d3-ease': 3.0.0
+      '@types/d3-interpolate': 3.0.1
+      '@types/d3-scale': 4.0.2
+      '@types/d3-shape': 3.1.0
+      '@types/d3-time': 3.0.0
+      '@types/d3-timer': 3.0.0
+      d3-array: 3.1.6
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.1.0
+      d3-time: 3.0.0
+      d3-timer: 3.0.1
+
+  /victory-voronoi-container@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-QDA533raAk4VUvYnHNeYZY5adMcj9/zUaMFwcNkRoWH7WL8/bZR12as5hlOPLwDa3Wm0jxEYQfaqwRANaoWDyA==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      delaunay-find: 0.0.6
+      lodash: 4.17.21
+      react: 18.2.0
+      react-fast-compare: 3.2.0
+      victory-core: 37.3.1(react@18.2.0)
+      victory-tooltip: 37.3.1(react@18.2.0)
+
+  /victory-voronoi@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-bZnoCllSVVIWzewkF+BZXco/odAEX5CX7ty59FZVotzHx2q+VZpjbsjfSuRiSQ3DNHyeOdyB5tN+dsmS8teVMw==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      d3-voronoi: 1.1.4
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory-zoom-container@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-cVNSMe0q+ut8pLkJDXg31HBjnkJhehOhs7Z4x+fDM6LSESrJn2Zibp8Vn1g7fDs6kNCzqkXcpvmU3yUGFB8oWA==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      victory-core: 37.3.1(react@18.2.0)
+
+  /victory@37.3.1(react@18.2.0):
+    resolution: {integrity: sha512-lAx1rgqj13xy5/rsVSHvOGJwaLPO2RgPRzb1Pm2FDEelzl2AHOs1YXmHHq7E5xG6heSYJWOm1nQsh4J/MXUv2g==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      react: 18.2.0
+      victory-area: 37.3.1(react@18.2.0)
+      victory-axis: 37.3.1(react@18.2.0)
+      victory-bar: 37.3.1(react@18.2.0)
+      victory-box-plot: 37.3.1(react@18.2.0)
+      victory-brush-container: 37.3.1(react@18.2.0)
+      victory-brush-line: 37.3.1(react@18.2.0)
+      victory-candlestick: 37.3.1(react@18.2.0)
+      victory-canvas: 37.3.1(react@18.2.0)
+      victory-chart: 37.3.1(react@18.2.0)
+      victory-core: 37.3.1(react@18.2.0)
+      victory-create-container: 37.3.1(react@18.2.0)
+      victory-cursor-container: 37.3.1(react@18.2.0)
+      victory-errorbar: 37.3.1(react@18.2.0)
+      victory-group: 37.3.1(react@18.2.0)
+      victory-histogram: 37.3.1(react@18.2.0)
+      victory-legend: 37.3.1(react@18.2.0)
+      victory-line: 37.3.1(react@18.2.0)
+      victory-pie: 37.3.1(react@18.2.0)
+      victory-polar-axis: 37.3.1(react@18.2.0)
+      victory-scatter: 37.3.1(react@18.2.0)
+      victory-selection-container: 37.3.1(react@18.2.0)
+      victory-shared-events: 37.3.1(react@18.2.0)
+      victory-stack: 37.3.1(react@18.2.0)
+      victory-tooltip: 37.3.1(react@18.2.0)
+      victory-voronoi: 37.3.1(react@18.2.0)
+      victory-voronoi-container: 37.3.1(react@18.2.0)
+      victory-zoom-container: 37.3.1(react@18.2.0)
+
   /vlq@1.0.1:
     resolution: {integrity: sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==}
 

From 7d9bd2a80dbd9ba7f627ebe01af03eb75454c8bc Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Mon, 4 Nov 2024 11:41:32 -0500
Subject: [PATCH 3/7] refactor: theme config picker states

---
 .../components/theme-builder/color-picker.tsx |  8 +-
 .../theme-builder/color-scale-options.tsx     | 37 ++++-----
 demo/ts/components/theme-builder/index.tsx    | 78 +++++++++----------
 3 files changed, 60 insertions(+), 63 deletions(-)

diff --git a/demo/ts/components/theme-builder/color-picker.tsx b/demo/ts/components/theme-builder/color-picker.tsx
index 12d236daa..2759c2af0 100644
--- a/demo/ts/components/theme-builder/color-picker.tsx
+++ b/demo/ts/components/theme-builder/color-picker.tsx
@@ -42,8 +42,12 @@ const ColorPicker = ({
           <div className="relative">
             <div
               className={clsx(
-                "block w-[40px] h-[40px] rounded-full border-2 border-transparent cursor-pointer transition-all justify-center items-center after:content-[''] after:block after:w-full after:h-full after:rounded-[inherit] after:bg-currentColor",
-                { "w-[30px] h-[30px]": showColorName },
+                "block w-[35px] h-[35px] rounded-full cursor-pointer transition-all justify-center items-center after:content-[''] after:block after:w-full after:h-full after:rounded-[inherit] after:bg-currentColor",
+                {
+                  "outline-2 border-2 border-white outline outline-gray-200":
+                    !showColorName,
+                },
+                { "w-[30px] h-[30px] p-0.5": showColorName },
               )}
               style={{
                 color,
diff --git a/demo/ts/components/theme-builder/color-scale-options.tsx b/demo/ts/components/theme-builder/color-scale-options.tsx
index 45c3c91b2..8b691d044 100644
--- a/demo/ts/components/theme-builder/color-scale-options.tsx
+++ b/demo/ts/components/theme-builder/color-scale-options.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { ThemeOption } from ".";
-import { ColorScalePropType } from "victory-core";
+import { ColorScalePropType, VictoryThemeDefinition } from "victory-core";
 import Select from "./select";
 import ColorPicker from "./color-picker";
 
@@ -11,7 +10,7 @@ export type ColorChangeArgs = {
 };
 
 type ColorScaleOptionsProps = {
-  activeTheme?: ThemeOption;
+  palette?: VictoryThemeDefinition["palette"];
   activeColorScale?: ColorScalePropType;
   onColorChange: (args: ColorChangeArgs) => void;
   onColorScaleChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
@@ -46,7 +45,7 @@ const colorScales = [
 
 const ColorScaleOptions = ({
   activeColorScale,
-  activeTheme,
+  palette,
   onColorChange,
   onColorScaleChange,
 }: ColorScaleOptionsProps) => {
@@ -60,22 +59,20 @@ const ColorScaleOptions = ({
         label="Color Scale"
       />
       <div className="flex flex-wrap gap-3 mb-5">
-        {activeTheme?.config?.palette?.[activeColorScale as string]?.map(
-          (color, i) => (
-            <ColorPicker
-              key={i}
-              color={color}
-              id={`color-${i}`}
-              onColorChange={(event) =>
-                onColorChange({
-                  event,
-                  index: i,
-                  colorScale: activeColorScale as string,
-                })
-              }
-            />
-          ),
-        )}
+        {palette?.[activeColorScale as string]?.map((color, i) => (
+          <ColorPicker
+            key={i}
+            color={color}
+            id={`color-${i}`}
+            onColorChange={(event) =>
+              onColorChange({
+                event,
+                index: i,
+                colorScale: activeColorScale as string,
+              })
+            }
+          />
+        ))}
       </div>
     </section>
   );
diff --git a/demo/ts/components/theme-builder/index.tsx b/demo/ts/components/theme-builder/index.tsx
index c5eec99b7..7c447ce4b 100644
--- a/demo/ts/components/theme-builder/index.tsx
+++ b/demo/ts/components/theme-builder/index.tsx
@@ -72,9 +72,12 @@ const chartStyle: { [key: string]: React.CSSProperties } = {
 };
 
 const ThemeBuilder = () => {
-  const [activeTheme, setActiveTheme] = React.useState<ThemeOption | undefined>(
+  const [baseTheme, setBaseTheme] = React.useState<ThemeOption | undefined>(
     undefined,
   );
+  const [customThemeConfig, setCustomThemeConfig] = React.useState<
+    VictoryThemeDefinition | undefined
+  >(undefined);
   const [activeColorScale, setActiveColorScale] =
     React.useState<ColorScalePropType>("qualitative");
   const [showThemeConfigPreview, setShowThemeConfigPreview] =
@@ -83,48 +86,41 @@ const ThemeBuilder = () => {
   const handleThemeSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const themeName = event.target.value;
     const theme = themes.find((t) => t.name === themeName);
-    setActiveTheme(theme);
+    setBaseTheme(theme);
+    setCustomThemeConfig({ ...theme?.config });
   };
 
   const handleLabelConfigChange = (newLabelConfig: Partial<LabelProps>) => {
-    if (activeTheme) {
-      const updatedTheme = {
-        ...activeTheme,
-        name: "Custom",
-        config: {
-          ...activeTheme.config,
-          axis: {
-            ...activeTheme.config?.axis,
-            style: {
-              ...activeTheme.config?.axis?.style,
-              axisLabel: {
-                ...activeTheme.config?.axis?.style?.axisLabel,
-                ...newLabelConfig,
-              },
+    if (customThemeConfig) {
+      const updatedConfig = {
+        ...customThemeConfig,
+        axis: {
+          ...customThemeConfig.axis,
+          style: {
+            ...customThemeConfig.axis?.style,
+            axisLabel: {
+              ...customThemeConfig.axis?.style?.axisLabel,
+              ...newLabelConfig,
             },
           },
         },
       };
-      setActiveTheme(updatedTheme as ThemeOption);
+      setCustomThemeConfig(updatedConfig as VictoryThemeDefinition);
     }
   };
 
   const handleColorChange = ({ event, index, colorScale }: ColorChangeArgs) => {
     const newColor = event.target.value;
-    const customTheme = {
-      ...activeTheme,
-      name: "Custom",
-      config: {
-        ...activeTheme?.config,
-        palette: {
-          ...activeTheme?.config?.palette,
-          [colorScale]: activeTheme?.config?.palette?.[colorScale]?.map(
-            (color, i) => (i === index ? newColor : color),
-          ),
-        },
+    const updatedConfig = {
+      ...customThemeConfig,
+      palette: {
+        ...customThemeConfig?.palette,
+        [colorScale]: customThemeConfig?.palette?.[colorScale]?.map(
+          (color, i) => (i === index ? newColor : color),
+        ),
       },
     };
-    setActiveTheme(customTheme);
+    setCustomThemeConfig(updatedConfig);
   };
 
   const handleColorScaleChange = (
@@ -144,55 +140,55 @@ const ThemeBuilder = () => {
   return (
     <div className="flex flex-row flex-wrap items-start justify-start w-full">
       <aside className="relative flex flex-col h-lvh w-[300px] border-r border-gray-200">
-        <div className="grow overflow-y-auto p-4">
+        <div className="grow overflow-y-auto p-4 pb-[100px]">
           <h2 className="mb-0 text-lg font-bold">Customize Your Theme</h2>
           <p className="text-sm mb-4 text-gray-300">
             Select a theme to begin customizing.
           </p>
           <Select
             id="theme-select"
-            value={activeTheme?.name || ""}
+            value={baseTheme?.name || ""}
             onChange={handleThemeSelect}
             options={themeOptions}
             label="Base Theme"
           />
-          {activeTheme && (
+          {customThemeConfig && (
             <section>
               <h2 className="text-lg font-bold mb-4">Customization Options</h2>
               <ColorScaleOptions
                 activeColorScale={activeColorScale}
-                activeTheme={activeTheme}
+                palette={customThemeConfig.palette}
                 onColorChange={handleColorChange}
                 onColorScaleChange={handleColorScaleChange}
               />
               <LabelOptions
                 labelConfig={
-                  activeTheme?.config?.axis?.style?.axisLabel as LabelProps
+                  customThemeConfig.axis?.style?.axisLabel as LabelProps
                 }
                 onLabelConfigChange={handleLabelConfigChange}
               />
             </section>
           )}
         </div>
-        <footer className="p-4 border-t border-gray-200 sticky bottom-0 flex justify-end">
+        <footer className="p-4 border-t border-gray-200 sticky bottom-0 flex justify-end bg-white">
           <Button
             onClick={handleThemeConfigPreviewOpen}
             ariaLabel="Get Theme Code"
-            disabled={!activeTheme}
+            disabled={!customThemeConfig}
           >
             Get Theme Code
           </Button>
         </footer>
       </aside>
       <main className="flex-1 flex flex-col items-center">
-        {activeTheme && (
+        {customThemeConfig && (
           <div className="max-w-screen-xl w-full py-4 px-10">
             <h2 className="text-xl font-bold mb-4">Example Charts</h2>
             <div className="grid grid-cols-2 gap-10">
               <div>
                 <h3 className="text-base font-bold mb-3">Bar Chart</h3>
                 <VictoryChart
-                  theme={activeTheme?.config}
+                  theme={customThemeConfig}
                   domainPadding={20}
                   style={chartStyle}
                 >
@@ -211,7 +207,7 @@ const ThemeBuilder = () => {
               <div>
                 <h3 className="text-base font-bold mb-3">Area Chart</h3>
                 <VictoryChart
-                  theme={activeTheme?.config}
+                  theme={customThemeConfig}
                   domainPadding={20}
                   style={chartStyle}
                 >
@@ -231,9 +227,9 @@ const ThemeBuilder = () => {
           </div>
         )}
       </main>
-      {showThemeConfigPreview && activeTheme?.config && (
+      {showThemeConfigPreview && customThemeConfig && (
         <ConfigPreview
-          config={activeTheme?.config}
+          config={customThemeConfig}
           onClose={handleThemeConfigPreviewClose}
         />
       )}

From 7b8de363360471c9eebd25d31bef1aee47f39e09 Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Mon, 4 Nov 2024 11:42:04 -0500
Subject: [PATCH 4/7] refactor: remove unused theme config property

---
 demo/ts/components/events-demo.tsx                | 5 ++++-
 packages/victory-core/src/victory-theme/clean.tsx | 1 -
 packages/victory-core/src/victory-theme/types.ts  | 1 -
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/demo/ts/components/events-demo.tsx b/demo/ts/components/events-demo.tsx
index 50e4b6765..b999870a7 100644
--- a/demo/ts/components/events-demo.tsx
+++ b/demo/ts/components/events-demo.tsx
@@ -204,7 +204,10 @@ class EventsDemo extends React.Component {
               text="Parent Events"
               y={50}
               x={150}
-              style={{ ...VictoryTheme.clean.label, fontSize: 18 }}
+              style={{
+                ...VictoryTheme.clean.axis?.style?.axisLabel,
+                fontSize: 18,
+              }}
             />
             <VictoryBar name="bar" labels={() => null} />
           </VictoryChart>
diff --git a/packages/victory-core/src/victory-theme/clean.tsx b/packages/victory-core/src/victory-theme/clean.tsx
index 7a28a5de7..d7a0ee943 100644
--- a/packages/victory-core/src/victory-theme/clean.tsx
+++ b/packages/victory-core/src/victory-theme/clean.tsx
@@ -350,7 +350,6 @@ export const clean: VictoryThemeDefinition = {
     },
     baseProps,
   ),
-  label: baseLabelStyles,
   legend: {
     colorScale,
     gutter: 24,
diff --git a/packages/victory-core/src/victory-theme/types.ts b/packages/victory-core/src/victory-theme/types.ts
index 33287dadd..deef55858 100644
--- a/packages/victory-core/src/victory-theme/types.ts
+++ b/packages/victory-core/src/victory-theme/types.ts
@@ -193,7 +193,6 @@ export interface VictoryThemeDefinition {
     offsetY?: number;
     orientation?: OrientationTypes;
   } & VictoryCommonThemeProps;
-  label?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
   legend?: {
     gutter?: number | BlockProps;
     rowGutter?: number | BlockProps;

From ddf67a7a820ae84394ea632fd8b1f0e6254a5d58 Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Mon, 4 Nov 2024 14:07:43 -0500
Subject: [PATCH 5/7] Revert "refactor: remove unused theme config property"

This reverts commit 7b8de363360471c9eebd25d31bef1aee47f39e09.
---
 demo/ts/components/events-demo.tsx                | 5 +----
 packages/victory-core/src/victory-theme/clean.tsx | 1 +
 packages/victory-core/src/victory-theme/types.ts  | 1 +
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/demo/ts/components/events-demo.tsx b/demo/ts/components/events-demo.tsx
index b999870a7..50e4b6765 100644
--- a/demo/ts/components/events-demo.tsx
+++ b/demo/ts/components/events-demo.tsx
@@ -204,10 +204,7 @@ class EventsDemo extends React.Component {
               text="Parent Events"
               y={50}
               x={150}
-              style={{
-                ...VictoryTheme.clean.axis?.style?.axisLabel,
-                fontSize: 18,
-              }}
+              style={{ ...VictoryTheme.clean.label, fontSize: 18 }}
             />
             <VictoryBar name="bar" labels={() => null} />
           </VictoryChart>
diff --git a/packages/victory-core/src/victory-theme/clean.tsx b/packages/victory-core/src/victory-theme/clean.tsx
index d7a0ee943..7a28a5de7 100644
--- a/packages/victory-core/src/victory-theme/clean.tsx
+++ b/packages/victory-core/src/victory-theme/clean.tsx
@@ -350,6 +350,7 @@ export const clean: VictoryThemeDefinition = {
     },
     baseProps,
   ),
+  label: baseLabelStyles,
   legend: {
     colorScale,
     gutter: 24,
diff --git a/packages/victory-core/src/victory-theme/types.ts b/packages/victory-core/src/victory-theme/types.ts
index e5d3b85de..6ef6b66c0 100644
--- a/packages/victory-core/src/victory-theme/types.ts
+++ b/packages/victory-core/src/victory-theme/types.ts
@@ -194,6 +194,7 @@ export interface VictoryThemeDefinition {
     offsetY?: number;
     orientation?: OrientationTypes;
   } & VictoryCommonThemeProps;
+  label?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
   legend?: {
     gutter?: number | BlockProps;
     rowGutter?: number | BlockProps;

From cbf62c7188efa08d71f7dbb00d7d5c03614a26f1 Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Mon, 4 Nov 2024 14:09:10 -0500
Subject: [PATCH 6/7] feat(theme-builder): reset slider default value when prop
 changes

---
 demo/ts/components/theme-builder/slider.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/demo/ts/components/theme-builder/slider.tsx b/demo/ts/components/theme-builder/slider.tsx
index 720243f5c..2b4934ccd 100644
--- a/demo/ts/components/theme-builder/slider.tsx
+++ b/demo/ts/components/theme-builder/slider.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 const Slider = ({ label, id, defaultValue, unit = "px", onChange }) => {
   const [value, setValue] = React.useState(defaultValue);
@@ -10,6 +10,10 @@ const Slider = ({ label, id, defaultValue, unit = "px", onChange }) => {
     }
   };
 
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
   return (
     <div className="my-4">
       <label

From 44f9a20446026a72747519859b125e05c9f1eed5 Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Mon, 4 Nov 2024 14:35:56 -0500
Subject: [PATCH 7/7] fix: prettier formatting issue

---
 postcss.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/postcss.config.js b/postcss.config.js
index 33ad091d2..12a703d90 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};