From 4d37a76a5cf108b92842602d1b9580b3d73a95c7 Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Thu, 21 Nov 2024 14:24:05 -0500
Subject: [PATCH 01/30] refactor(theme-builder): move theme builder dir to docs

---
 .../pages/themes/_components/accordion.tsx    |   55 +
 .../src/pages/themes/_components/button.tsx   |   35 +
 .../pages/themes/_components/color-picker.tsx |  101 ++
 .../_components/color-scale-options.tsx       |   81 ++
 .../themes/_components/config-mapper.tsx      |  140 +++
 .../themes/_components/config-preview.tsx     |   58 +
 .../themes/_components/options-config.tsx     | 1040 +++++++++++++++++
 .../src/pages/themes/_components/select.tsx   |   53 +
 .../src/pages/themes/_components/slider.tsx   |   55 +
 .../src/pages/themes/_components/tailwind.css |    9 +
 website/src/pages/themes/_components/utils.ts |   37 +
 website/src/pages/themes/index.tsx            |  279 +++++
 website/tailwind.config.ts                    |    7 +
 13 files changed, 1950 insertions(+)
 create mode 100644 website/src/pages/themes/_components/accordion.tsx
 create mode 100644 website/src/pages/themes/_components/button.tsx
 create mode 100644 website/src/pages/themes/_components/color-picker.tsx
 create mode 100644 website/src/pages/themes/_components/color-scale-options.tsx
 create mode 100644 website/src/pages/themes/_components/config-mapper.tsx
 create mode 100644 website/src/pages/themes/_components/config-preview.tsx
 create mode 100644 website/src/pages/themes/_components/options-config.tsx
 create mode 100644 website/src/pages/themes/_components/select.tsx
 create mode 100644 website/src/pages/themes/_components/slider.tsx
 create mode 100644 website/src/pages/themes/_components/tailwind.css
 create mode 100644 website/src/pages/themes/_components/utils.ts
 create mode 100644 website/src/pages/themes/index.tsx

diff --git a/website/src/pages/themes/_components/accordion.tsx b/website/src/pages/themes/_components/accordion.tsx
new file mode 100644
index 000000000..5578b4d5a
--- /dev/null
+++ b/website/src/pages/themes/_components/accordion.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import clsx from "clsx";
+import { FaChevronDown } from "react-icons/fa";
+
+type AccordionProps = {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+};
+
+const Accordion = ({
+  id,
+  title,
+  children,
+  defaultOpen = false,
+}: AccordionProps) => {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+
+  const toggleAccordion = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div id={id} className="group">
+      <h2 id={`${id}-heading`}>
+        <button
+          type="button"
+          className={clsx(
+            "flex items-center justify-between w-full px-5 py-3 text-sm font-bold rtl:text-right text-gray-500 border border-b-0 border-gray-200 gap-3 group-last:border-b",
+            { "group-last:border-b-0": isOpen },
+          )}
+          aria-expanded="true"
+          aria-controls={`${id}-body`}
+          onClick={toggleAccordion}
+        >
+          <span>{title}</span>
+          <FaChevronDown
+            className={clsx("w-3 h-3 shrink-0", { "rotate-180 ": isOpen })}
+          />
+        </button>
+      </h2>
+      <div
+        id={`${id}-body`}
+        className={isOpen ? "block" : "hidden"}
+        aria-labelledby={`${id}-heading`}
+      >
+        <div className="p-5 border border-b-0 border-gray-200 group-last:border-b">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Accordion;
diff --git a/website/src/pages/themes/_components/button.tsx b/website/src/pages/themes/_components/button.tsx
new file mode 100644
index 000000000..bf35a5fd8
--- /dev/null
+++ b/website/src/pages/themes/_components/button.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+type ButtonProps = {
+  onClick: () => void;
+  children: React.ReactNode;
+  className?: string;
+  ariaLabel?: string;
+  disabled?: boolean;
+};
+
+const Button = ({
+  onClick,
+  children,
+  className = "",
+  ariaLabel = "",
+  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={`${baseClasses} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/website/src/pages/themes/_components/color-picker.tsx b/website/src/pages/themes/_components/color-picker.tsx
new file mode 100644
index 000000000..39dd8c58d
--- /dev/null
+++ b/website/src/pages/themes/_components/color-picker.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import { TiPencil } from "react-icons/ti";
+import clsx from "clsx";
+
+type ColorPickerProps = {
+  label?: string;
+  color: string;
+  id: string;
+  onColorChange: (color: string) => void;
+  showColorName?: boolean;
+  className?: string;
+};
+
+const ColorPicker = ({
+  label,
+  color,
+  id,
+  onColorChange,
+  showColorName = false,
+  className,
+}: ColorPickerProps) => {
+  const [isPickerOpen, setIsPickerOpen] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (onColorChange) {
+      onColorChange(event.target.value);
+    }
+  };
+
+  return (
+    <fieldset className={className}>
+      {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/swatch", {
+          "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-[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,
+              }}
+            />
+            {!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/swatch: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/swatch: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/website/src/pages/themes/_components/color-scale-options.tsx b/website/src/pages/themes/_components/color-scale-options.tsx
new file mode 100644
index 000000000..643ab830a
--- /dev/null
+++ b/website/src/pages/themes/_components/color-scale-options.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+import Select from "./select";
+import ColorPicker from "./color-picker";
+import { ColorScalePropType, VictoryThemeDefinition } from "victory";
+
+export type ColorChangeArgs = {
+  newColor: string;
+  index: number;
+  colorScale: string;
+};
+
+type ColorScaleOptionsProps = {
+  palette?: VictoryThemeDefinition["palette"];
+  activeColorScale?: ColorScalePropType;
+  onColorChange: (args: ColorChangeArgs) => void;
+  onColorScaleChange: (colorScale: string) => void;
+};
+
+const colorScales = [
+  {
+    label: "Qualitative",
+    value: "qualitative",
+  },
+  {
+    label: "Heatmap",
+    value: "heatmap",
+  },
+  {
+    label: "Warm",
+    value: "warm",
+  },
+  {
+    label: "Cool",
+    value: "cool",
+  },
+  {
+    label: "Red",
+    value: "red",
+  },
+  {
+    label: "Green",
+    value: "green",
+  },
+];
+
+const ColorScaleOptions = ({
+  activeColorScale,
+  palette,
+  onColorChange,
+  onColorScaleChange,
+}: ColorScaleOptionsProps) => {
+  return (
+    <section>
+      <Select
+        id="color-scale-select"
+        value={activeColorScale as string}
+        onChange={onColorScaleChange}
+        options={colorScales}
+        label="Color Scale"
+        className="mb-5"
+      />
+      <div className="flex flex-wrap gap-3">
+        {palette?.[activeColorScale as string]?.map((color, i) => (
+          <ColorPicker
+            key={i}
+            color={color}
+            id={`color-${i}`}
+            onColorChange={(newColor) =>
+              onColorChange({
+                newColor,
+                index: i,
+                colorScale: activeColorScale as string,
+              })
+            }
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+export default ColorScaleOptions;
diff --git a/website/src/pages/themes/_components/config-mapper.tsx b/website/src/pages/themes/_components/config-mapper.tsx
new file mode 100644
index 000000000..89b10b6e3
--- /dev/null
+++ b/website/src/pages/themes/_components/config-mapper.tsx
@@ -0,0 +1,140 @@
+import React from "react";
+import optionsConfig from "./options-config";
+import Accordion from "./accordion";
+import Select from "./select";
+import Slider from "./slider";
+import ColorPicker from "./color-picker";
+import ColorScaleOptions from "./color-scale-options";
+import { getConfigValue } from "./utils";
+
+const ControlComponent = ({
+  type,
+  field,
+  themeConfig,
+  updateThemeConfig,
+  activeColorScale,
+  handleColorScaleChange,
+  className,
+}) => {
+  const handleColorChange = ({ newColor, index, colorScale }) => {
+    const updatedColors = themeConfig?.palette?.[colorScale]?.map((color, i) =>
+      i === index ? newColor : color,
+    );
+    updateThemeConfig(`palette.${colorScale}`, updatedColors);
+  };
+
+  const handleChange = (newValue) => {
+    updateThemeConfig(field.path, newValue);
+  };
+
+  const configValue = getConfigValue(themeConfig, field.path, field.default);
+  switch (type) {
+    case "colorScale":
+      return (
+        <ColorScaleOptions
+          palette={themeConfig?.palette}
+          activeColorScale={activeColorScale}
+          onColorChange={handleColorChange}
+          onColorScaleChange={handleColorScaleChange}
+        />
+      );
+    case "section":
+      return (
+        <section className="mb-6">
+          <h3 className="text-lg text-secondary font-bold mb-4">
+            {field.label}
+          </h3>
+          {field.fields.map((subField, i) => (
+            <ControlComponent
+              key={subField.label + i}
+              type={subField.type}
+              field={subField}
+              themeConfig={themeConfig}
+              updateThemeConfig={updateThemeConfig}
+              activeColorScale={activeColorScale}
+              handleColorScaleChange={handleColorScaleChange}
+              className={className}
+            />
+          ))}
+        </section>
+      );
+    case "slider":
+      return (
+        <Slider
+          id={field.label}
+          key={field.label}
+          label={field.label}
+          value={configValue as number}
+          unit={field.unit}
+          onChange={handleChange}
+          min={field.min}
+          max={field.max}
+          step={field.step}
+          className={className}
+        />
+      );
+    case "select":
+      return (
+        <Select
+          id={field.label}
+          key={field.label}
+          label={field.label}
+          value={configValue as string}
+          onChange={handleChange}
+          options={field.options}
+          className={className}
+        />
+      );
+    case "colorPicker":
+      return (
+        <ColorPicker
+          id={field.label}
+          key={field.label}
+          label={field.label}
+          color={configValue as string}
+          onColorChange={handleChange}
+          className={className}
+          showColorName
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+const ConfigMapper = ({
+  themeConfig,
+  activeColorScale,
+  updateThemeConfig,
+  handleColorScaleChange,
+}) => {
+  return (
+    <>
+      {optionsConfig.map((section, index) => (
+        <Accordion
+          key={section.title}
+          title={section.title}
+          id={section.title}
+          defaultOpen={index === 0}
+        >
+          {section.fields.map((field, i) => {
+            return (
+              <ControlComponent
+                key={field.label + i}
+                type={field.type}
+                field={field}
+                themeConfig={themeConfig}
+                updateThemeConfig={updateThemeConfig}
+                activeColorScale={activeColorScale}
+                handleColorScaleChange={handleColorScaleChange}
+                className="mb-4"
+              />
+            );
+          })}
+        </Accordion>
+      ))}
+    </>
+  );
+};
+
+export default ConfigMapper;
diff --git a/website/src/pages/themes/_components/config-preview.tsx b/website/src/pages/themes/_components/config-preview.tsx
new file mode 100644
index 000000000..92f5c7b78
--- /dev/null
+++ b/website/src/pages/themes/_components/config-preview.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import Button from "./button";
+import { Prism, SyntaxHighlighterProps } from "react-syntax-highlighter";
+import { VictoryThemeDefinition } from "victory";
+
+const SyntaxHighlighter = Prism as any as React.FC<SyntaxHighlighterProps>;
+
+type ConfigPreviewProps = {
+  config: VictoryThemeDefinition;
+  onClose: () => void;
+};
+
+const ConfigPreview = ({ config, onClose }: ConfigPreviewProps) => {
+  const [copyStatus, setCopyStatus] = React.useState<string | null>(null);
+
+  const handleCopyThemeConfig = () => {
+    navigator.clipboard
+      .writeText(JSON.stringify(config, null, 2))
+      .then(() => {
+        setCopyStatus("Copied successfully.");
+        return "Theme config copied to clipboard";
+      })
+      .catch(() => {
+        setCopyStatus("Failed to copy.");
+      });
+  };
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <div className="fixed top-0 right-0 bottom-0 w-full p-10 z-[100] 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="flex-1 overflow-auto border border-gray-200 p-3 bg-gray-100"
+      >
+        {JSON.stringify(config, null, 2)}
+      </SyntaxHighlighter>
+      <div className="flex items-center justify-end gap-3 mt-5">
+        {copyStatus && (
+          <span className="text-gray-300 text-xs italic">{copyStatus}</span>
+        )}
+        <Button onClick={handleCopyThemeConfig} ariaLabel="Copy to Clipboard">
+          Copy to Clipboard
+        </Button>
+      </div>
+    </div>
+  );
+};
+export default ConfigPreview;
diff --git a/website/src/pages/themes/_components/options-config.tsx b/website/src/pages/themes/_components/options-config.tsx
new file mode 100644
index 000000000..345e0c45e
--- /dev/null
+++ b/website/src/pages/themes/_components/options-config.tsx
@@ -0,0 +1,1040 @@
+/* eslint-disable no-magic-numbers */
+import React from "react";
+import {
+  VictoryArea,
+  VictoryAxis,
+  VictoryBar,
+  VictoryCandlestick,
+  VictoryErrorBar,
+  VictoryHistogram,
+  VictoryLegend,
+  VictoryLine,
+  VictoryPie,
+  VictoryPolarAxis,
+  VictoryScatter,
+  VictoryVoronoi,
+} from "victory";
+
+type ThemeBuilderFieldConfig =
+  | {
+      type: "section" | "colorScale";
+      label: string;
+      fields?: ThemeBuilderFieldConfig[];
+    }
+  | {
+      type: "slider" | "select" | "colorPicker";
+      label: string;
+      path: string | string[];
+      min?: number;
+      max?: number;
+      step?: number;
+      unit?: string;
+      default: number | string;
+      options?: { label: string; value: string }[];
+    };
+
+enum StrokeProps {
+  STROKE = "Stroke",
+  STROKE_WIDTH = "Stroke Width",
+  STROKE_DASH_ARRAY = "Stroke Dash Array",
+  STROKE_LINE_CAP = "Stroke Line Cap",
+  STROKE_LINE_JOIN = "Stroke Line Join",
+}
+
+type ThemeBuilderOptionsConfig = {
+  type: "section";
+  title: string;
+  hasVictoryChart?: boolean;
+  content?: (props: any) => React.ReactNode;
+  fields: ThemeBuilderFieldConfig[];
+}[];
+
+const defaultFill = "#000";
+
+const getPath = (basePath: string | string[], key: string) => {
+  if (Array.isArray(basePath)) {
+    return basePath.map((p) => `${p}.${key}`);
+  }
+  return `${basePath}.${key}`;
+};
+
+const getBaseStrokeConfig = (
+  basePath: string | string[],
+  includedStrokeProps: StrokeProps[] = [],
+): ThemeBuilderFieldConfig[] => {
+  const config = [
+    {
+      type: "colorPicker",
+      label: StrokeProps.STROKE,
+      default: defaultFill,
+      path: getPath(basePath, "stroke"),
+    },
+    {
+      type: "slider",
+      label: StrokeProps.STROKE_WIDTH,
+      min: 0,
+      max: 5,
+      unit: "px",
+      default: 1,
+      path: getPath(basePath, "strokeWidth"),
+    },
+    {
+      type: "slider",
+      label: StrokeProps.STROKE_DASH_ARRAY,
+      min: 0,
+      max: 10,
+      default: 0,
+      path: getPath(basePath, "strokeDasharray"),
+    },
+    {
+      type: "select",
+      label: StrokeProps.STROKE_LINE_CAP,
+      options: [
+        { label: "Round", value: "round" },
+        { label: "Square", value: "square" },
+        { label: "Butt", value: "butt" },
+      ],
+      default: "round",
+      path: getPath(basePath, "strokeLinecap"),
+    },
+    {
+      type: "select",
+      label: StrokeProps.STROKE_LINE_JOIN,
+      options: [
+        { label: "Round", value: "round" },
+        { label: "Bevel", value: "bevel" },
+        { label: "Miter", value: "miter" },
+      ],
+      default: "round",
+      path: getPath(basePath, "strokeLinejoin"),
+    },
+  ] as ThemeBuilderFieldConfig[];
+  return includedStrokeProps.length
+    ? config.filter((field) =>
+        includedStrokeProps.includes(field.label as StrokeProps),
+      )
+    : config;
+};
+
+const getBaseLabelsConfig = (
+  basePath: string | string[],
+): ThemeBuilderFieldConfig[] => [
+  {
+    type: "slider",
+    label: "Font Size",
+    min: 10,
+    max: 24,
+    unit: "px",
+    path: getPath(basePath, "fontSize"),
+    default: 12,
+  },
+  {
+    type: "slider",
+    label: "Padding",
+    min: 0,
+    max: 50,
+    unit: "px",
+    path: getPath(basePath, "padding"),
+    default: 8,
+  },
+  {
+    type: "colorPicker",
+    label: "Fill",
+    path: getPath(basePath, "fill"),
+    default: defaultFill,
+  },
+];
+
+const optionsConfig: ThemeBuilderOptionsConfig = [
+  {
+    type: "section",
+    title: "Palette",
+    fields: [
+      {
+        type: "colorScale",
+        label: "Color Scale",
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Global Settings",
+    fields: [
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig([
+          "axis.style.axisLabel",
+          "polarAxis.style.tickLabels",
+          "polarDependentAxis.style.tickLabels",
+          "tooltip.style",
+          "area.style.labels",
+          "bar.style.labels",
+          "candlestick.style.labels",
+          "errorbar.style.labels",
+          "histogram.style.labels",
+          "legend.style.labels",
+          "line.style.labels",
+          "pie.style.labels",
+          "scatter.style.labels",
+          "voronoi.style.labels",
+        ]),
+      },
+      {
+        type: "section",
+        label: "Data",
+        fields: getBaseStrokeConfig([
+          "area.style.data",
+          "bar.style.data",
+          "candlestick.style.data",
+          "errorbar.style.data",
+          "histogram.style.data",
+          "line.style.data",
+          "pie.style.data",
+          "scatter.style.data",
+          "voronoi.style.data",
+        ]),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Axis",
+    fields: [
+      {
+        type: "section",
+        label: "General",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            default: defaultFill,
+            path: "axis.style.axis.fill",
+          },
+          ...getBaseStrokeConfig("axis.style.axis", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+            StrokeProps.STROKE_LINE_CAP,
+            StrokeProps.STROKE_LINE_JOIN,
+          ]),
+        ],
+      },
+      {
+        type: "section",
+        label: "Grid",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            default: defaultFill,
+            path: "axis.style.grid.fill",
+          },
+          ...getBaseStrokeConfig("axis.style.grid"),
+        ],
+      },
+      {
+        type: "section",
+        label: "Ticks",
+        fields: [
+          {
+            type: "slider",
+            label: "Size",
+            min: 0,
+            max: 50,
+            unit: "px",
+            default: 5,
+            path: "axis.style.ticks.size",
+          },
+          ...getBaseStrokeConfig("axis.style.ticks", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("axis.style.axisLabel"),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Polar Axis",
+    content: (props) => [
+      <VictoryPolarAxis {...props} key="polar-axis" standalone={false} />,
+      <VictoryPolarAxis
+        {...props}
+        key="polar-axis-dependent"
+        dependentAxis
+        domain={[0, 10]}
+        standalone={false}
+      />,
+    ],
+    fields: [
+      {
+        type: "section",
+        label: "General",
+        fields: getBaseStrokeConfig("polarAxis.style.axis", [
+          StrokeProps.STROKE,
+          StrokeProps.STROKE_WIDTH,
+        ]),
+      },
+      {
+        type: "section",
+        label: "Grid",
+        fields: getBaseStrokeConfig("polarAxis.style.grid"),
+      },
+      {
+        type: "section",
+        label: "Ticks",
+        fields: [
+          {
+            type: "slider",
+            label: "Size",
+            min: 0,
+            max: 50,
+            unit: "px",
+            default: 5,
+            path: "polarAxis.style.ticks.size",
+          },
+          ...getBaseStrokeConfig("polarAxis.style.ticks", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+            StrokeProps.STROKE_LINE_CAP,
+            StrokeProps.STROKE_LINE_JOIN,
+          ]),
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("polarAxis.style.tickLabels"),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Polar Dependent Axis",
+    fields: [
+      {
+        type: "section",
+        label: "General",
+        fields: getBaseStrokeConfig("polarDependentAxis.style.axis", [
+          StrokeProps.STROKE,
+          StrokeProps.STROKE_WIDTH,
+        ]),
+      },
+      {
+        type: "section",
+        label: "Grid",
+        fields: getBaseStrokeConfig("polarDependentAxis.style.grid"),
+      },
+      {
+        type: "section",
+        label: "Ticks",
+        fields: [
+          {
+            type: "slider",
+            label: "Size",
+            min: 0,
+            max: 50,
+            unit: "px",
+            default: 5,
+            path: "polarDependentAxis.style.ticks.size",
+          },
+          ...getBaseStrokeConfig("polarDependentAxis.style.ticks", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+            StrokeProps.STROKE_LINE_CAP,
+            StrokeProps.STROKE_LINE_JOIN,
+          ]),
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("polarDependentAxis.style.tickLabels"),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Area Chart",
+    content: (props) => [
+      <VictoryAxis key="x-axis" label="X Axis" />,
+      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
+      <VictoryArea
+        {...props}
+        key="area-chart"
+        data={[
+          { x: 1, y: 2, label: "A" },
+          { x: 2, y: 3, label: "B" },
+          { x: 3, y: 5, label: "C" },
+          { x: 4, y: 4, label: "D" },
+          { x: 5, y: 7, label: "E" },
+        ]}
+      />,
+    ],
+    fields: [
+      {
+        type: "section",
+        label: "Data",
+        fields: [
+          {
+            type: "slider",
+            label: "Fill Opacity",
+            min: 0,
+            max: 1,
+            step: 0.1,
+            path: "area.style.data.fillOpacity",
+            default: 1,
+          },
+          ...getBaseStrokeConfig("area.style.data", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+          {
+            type: "colorPicker",
+            label: "Fill",
+            path: "area.style.data.fill",
+            default: defaultFill,
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("area.style.labels"),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Bar Chart",
+    content: (props) => [
+      <VictoryAxis key="x-axis" label="X Axis" />,
+      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
+      <VictoryBar
+        key="bar-chart"
+        {...props}
+        data={[
+          { x: 1, y: 2, label: "A" },
+          { x: 2, y: 3, label: "B" },
+          { x: 3, y: 5, label: "C" },
+          { x: 4, y: 4, label: "D" },
+          { x: 5, y: 7, label: "E" },
+        ]}
+      />,
+    ],
+    fields: [
+      {
+        type: "section",
+        label: "Data",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            path: "bar.style.data.fill",
+            default: defaultFill,
+          },
+          ...getBaseStrokeConfig("bar.style.data", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+          {
+            type: "slider",
+            label: "Fill Opacity",
+            min: 0,
+            max: 1,
+            step: 0.1,
+            path: "bar.style.data.fillOpacity",
+            default: 1,
+          },
+          {
+            type: "slider",
+            label: "Top Corner Radius",
+            path: "bar.cornerRadius.top",
+            max: 2,
+            step: 0.5,
+            default: 0,
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("bar.style.labels"),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Candlestick Chart",
+    content: (props) => (
+      <VictoryCandlestick
+        {...props}
+        data={[
+          {
+            x: "3/1/23",
+            open: 5,
+            close: 10,
+            high: 15,
+            low: 0,
+            label: "A",
+          },
+          {
+            x: "3/2/23",
+            open: 10,
+            close: 15,
+            high: 20,
+            low: 5,
+            label: "B",
+          },
+          {
+            x: "3/3/23",
+            open: 15,
+            close: 20,
+            high: 22,
+            low: 10,
+            label: "C",
+          },
+          {
+            x: "3/4/23",
+            open: 20,
+            close: 10,
+            high: 25,
+            low: 7,
+            label: "D",
+          },
+          {
+            x: "3/5/23",
+            open: 10,
+            close: 8,
+            high: 15,
+            low: 5,
+            label: "E",
+          },
+        ]}
+      />
+    ),
+    fields: [
+      {
+        type: "section",
+        label: "Data",
+        fields: [
+          ...getBaseStrokeConfig("candlestick.style.data", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+          {
+            type: "slider",
+            label: "Border Radius",
+            max: 2,
+            step: 0.5,
+            default: 0,
+            path: "candlestick.style.data.rx",
+          },
+          {
+            type: "slider",
+            label: "Wick Width",
+            min: 0,
+            max: 5,
+            unit: "px",
+            path: "candlestick.wickStrokeWidth",
+            default: 2,
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("candlestick.style.labels"),
+      },
+      {
+        type: "section",
+        label: "Colors",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Positive Color",
+            path: "candlestick.candleColors.positive",
+            default: "#ffffff",
+          },
+          {
+            type: "colorPicker",
+            label: "Negative Color",
+            path: "candlestick.candleColors.negative",
+            default: defaultFill,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Error Bar",
+    content: (props) => (
+      <VictoryErrorBar
+        {...props}
+        data={[
+          { x: 1, y: 1, errorX: [1, 0.5], errorY: 0.1 },
+          { x: 2, y: 2, errorX: [1, 3], errorY: 0.1 },
+          { x: 3, y: 3, errorX: [1, 3], errorY: [0.2, 0.3] },
+          { x: 4, y: 2, errorX: [1, 0.5], errorY: 0.1 },
+          { x: 5, y: 1, errorX: [1, 0.5], errorY: 0.2 },
+        ]}
+      />
+    ),
+    fields: [
+      {
+        type: "section",
+        label: "Data",
+        fields: [
+          {
+            type: "slider",
+            label: "Border Width",
+            min: 0,
+            max: 10,
+            unit: "px",
+            path: "errorbar.borderWidth",
+            default: 8,
+          },
+          ...getBaseStrokeConfig("errorbar.style.data", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+            StrokeProps.STROKE_LINE_CAP,
+          ]),
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("errorbar.style.labels"),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Histogram",
+    content: (props) => (
+      <VictoryHistogram
+        {...props}
+        data={[
+          { x: 0 },
+          { x: 1 },
+          { x: 1 },
+          { x: 1 },
+          { x: 1 },
+          { x: 2 },
+          { x: 2 },
+          { x: 3 },
+          { x: 4 },
+          { x: 7 },
+          { x: 7 },
+          { x: 10 },
+        ]}
+        labels={({ datum }) => `Bin count:\n ${datum.x}`}
+      />
+    ),
+    fields: [
+      {
+        type: "section",
+        label: "Data",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            path: "histogram.style.data.fill",
+            default: defaultFill,
+          },
+          {
+            type: "slider",
+            label: "Fill Opacity",
+            min: 0,
+            max: 1,
+            step: 0.1,
+            path: "histogram.style.data.fillOpacity",
+            default: 1,
+          },
+          {
+            type: "slider",
+            label: "Top Corner Radius",
+            path: "histogram.cornerRadius.top",
+            max: 10,
+            step: 0.5,
+            default: 0,
+          },
+          {
+            type: "slider",
+            label: "Bin Spacing",
+            min: 0,
+            max: 10,
+            unit: "px",
+            path: "histogram.binSpacing",
+            default: 4,
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("histogram.style.labels"),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Legend",
+    content: (props) => [
+      <VictoryLegend
+        {...props}
+        key="legend"
+        x={125}
+        y={20}
+        title="Pets"
+        data={[
+          {
+            name: "Dogs",
+            symbol: { fill: "tomato" },
+          },
+          {
+            name: "Cats",
+            symbol: { fill: "orange" },
+          },
+          {
+            name: "Rabbits",
+            symbol: { fill: "gold" },
+          },
+        ]}
+      />,
+      <VictoryBar
+        key="legend-chart"
+        data={[
+          {
+            x: "Dogs",
+            y: 6,
+            fill: "tomato",
+          },
+          {
+            x: "Cats",
+            y: 4,
+            fill: "orange",
+          },
+          {
+            x: "Rabbits",
+            y: 2,
+            fill: "gold",
+          },
+        ]}
+        style={{
+          data: {
+            fill: ({ datum }) => datum.fill,
+          },
+        }}
+      />,
+    ],
+    fields: [
+      {
+        type: "section",
+        label: "General",
+        fields: [
+          {
+            type: "slider",
+            label: "Gutter",
+            min: 0,
+            max: 50,
+            unit: "px",
+            path: "legend.gutter",
+            default: 20,
+          },
+          {
+            type: "slider",
+            label: "Border Padding",
+            min: 0,
+            max: 50,
+            unit: "px",
+            path: "legend.borderPadding",
+            default: 10,
+          },
+          {
+            type: "select",
+            label: "Orientation",
+            options: [
+              { label: "Horizontal", value: "horizontal" },
+              { label: "Vertical", value: "vertical" },
+            ],
+            path: "legend.orientation",
+            default: "horizontal",
+          },
+          {
+            type: "select",
+            label: "Title Orientation",
+            options: [
+              { label: "Top", value: "top" },
+              { label: "Bottom", value: "bottom" },
+              { label: "Left", value: "left" },
+              { label: "Right", value: "right" },
+            ],
+            path: "legend.titleOrientation",
+            default: "top",
+          },
+          {
+            type: "select",
+            label: "Data Type",
+            options: [
+              { label: "Circle", value: "circle" },
+              { label: "Square", value: "square" },
+              { label: "Diamond", value: "diamond" },
+              { label: "Star", value: "star" },
+            ],
+            path: "legend.style.data.type",
+            default: "circle",
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("legend.style.labels"),
+      },
+      {
+        type: "section",
+        label: "Title",
+        fields: getBaseLabelsConfig("legend.style.title"),
+      },
+      {
+        type: "section",
+        label: "Border",
+        fields: getBaseStrokeConfig("legend.style.border", [
+          StrokeProps.STROKE,
+          StrokeProps.STROKE_WIDTH,
+        ]),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Line Chart",
+    content: (props) => [
+      <VictoryAxis key="x-axis" label="X Axis" />,
+      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
+      <VictoryLine
+        key="line-chart"
+        {...props}
+        data={[
+          { x: 1, y: 2 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5 },
+          { x: 4, y: 4 },
+          { x: 5, y: 7 },
+        ]}
+        labels={({ datum }) => datum.y}
+      />,
+    ],
+    fields: [
+      {
+        type: "section",
+        label: "Data",
+        fields: getBaseStrokeConfig("line.style.data", [
+          StrokeProps.STROKE,
+          StrokeProps.STROKE_WIDTH,
+          StrokeProps.STROKE_LINE_CAP,
+          StrokeProps.STROKE_LINE_JOIN,
+        ]),
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("line.style.labels"),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Pie Chart",
+    hasVictoryChart: false,
+    content: (props) => (
+      <VictoryPie
+        {...props}
+        data={[
+          { x: "Cats", y: 35 },
+          { x: "Dogs", y: 40 },
+          { x: "Birds", y: 55 },
+          { x: "Fishes", y: 15 },
+          { x: "Reptiles", y: 10 },
+        ]}
+      />
+    ),
+    fields: [
+      {
+        type: "section",
+        label: "Data",
+        fields: [
+          {
+            type: "slider",
+            label: "Padding",
+            min: 0,
+            max: 50,
+            unit: "px",
+            path: "pie.style.data.padding",
+            default: 0,
+          },
+          ...getBaseStrokeConfig("pie.style.data", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("pie.style.labels"),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Scatter Chart",
+    content: (props) => (
+      <VictoryScatter
+        {...props}
+        data={[
+          { x: 1, y: 2 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5 },
+          { x: 4, y: 4 },
+          { x: 5, y: 7 },
+        ]}
+      />
+    ),
+    fields: [
+      {
+        type: "section",
+        label: "Data",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            default: defaultFill,
+            path: "scatter.style.data.fill",
+          },
+          {
+            type: "slider",
+            label: "Opacity",
+            min: 0,
+            max: 1,
+            step: 0.1,
+            default: 1,
+            path: "scatter.style.data.opacity",
+          },
+          ...getBaseStrokeConfig("scatter.style.data", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("scatter.style.labels"),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Tooltip",
+    fields: [
+      {
+        type: "section",
+        label: "General",
+        fields: [
+          ...getBaseLabelsConfig("tooltip.style"),
+          {
+            type: "slider",
+            label: "Corner Radius",
+            min: 0,
+            max: 10,
+            default: 0,
+            path: "tooltip.cornerRadius",
+          },
+          {
+            type: "slider",
+            label: "Pointer Length",
+            min: 0,
+            max: 20,
+            default: 10,
+            path: "tooltip.pointerLength",
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Flyout",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            default: "#FFFFFF",
+            path: "tooltip.flyoutStyle.fill",
+          },
+          ...getBaseStrokeConfig("tooltip.flyoutStyle", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+          {
+            type: "select",
+            label: "Pointer Events",
+            options: [
+              { label: "None", value: "none" },
+              { label: "All", value: "all" },
+            ],
+            default: "none",
+            path: "tooltip.flyoutStyle.pointerEvents",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Voronoi",
+    content: (props) => (
+      <VictoryVoronoi
+        {...props}
+        data={[
+          { x: 1, y: 2 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5 },
+          { x: 4, y: 4 },
+          { x: 5, y: 7 },
+        ]}
+      />
+    ),
+    fields: [
+      {
+        type: "section",
+        label: "General",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            default: "#FFFFFF",
+            path: "voronoi.style.data.fill",
+          },
+          ...getBaseStrokeConfig("voronoi.style.data", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("voronoi.style.labels"),
+      },
+    ],
+  },
+];
+
+export default optionsConfig;
diff --git a/website/src/pages/themes/_components/select.tsx b/website/src/pages/themes/_components/select.tsx
new file mode 100644
index 000000000..dad35cbbd
--- /dev/null
+++ b/website/src/pages/themes/_components/select.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import clsx from "clsx";
+
+export type SelectOption = {
+  label: string;
+  value?: string;
+};
+
+type SelectProps = {
+  id: string;
+  label?: string;
+  options: SelectOption[];
+  value?: string;
+  onChange: (value: string) => void;
+  className?: string;
+};
+
+const Select = ({
+  id,
+  label,
+  options,
+  value = "",
+  onChange,
+  className,
+}: SelectProps) => {
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (onChange) {
+      onChange(event.target.value);
+    }
+  };
+  return (
+    <div className={clsx("relative w-full", className)}>
+      {label && (
+        <label htmlFor={id} className="block mb-1 text-sm font-bold">
+          {label}
+        </label>
+      )}
+      <select
+        id={id}
+        value={value}
+        onChange={handleChange}
+        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, i) => (
+          <option key={(option.value || "") + i} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+export default Select;
diff --git a/website/src/pages/themes/_components/slider.tsx b/website/src/pages/themes/_components/slider.tsx
new file mode 100644
index 000000000..5949df6e1
--- /dev/null
+++ b/website/src/pages/themes/_components/slider.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+
+type SliderProps = {
+  label: string;
+  id: string;
+  value?: number;
+  unit?: string;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  className?: string;
+};
+
+const Slider = ({
+  label,
+  id,
+  value,
+  unit,
+  onChange,
+  min,
+  max,
+  step = 1,
+  className,
+}: SliderProps) => {
+  const handleChange = (event) => {
+    const newValue = event.target.valueAsNumber;
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+
+  return (
+    <div className={className}>
+      <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"
+        min={min}
+        max={max}
+        step={step}
+      />
+    </div>
+  );
+};
+export default Slider;
diff --git a/website/src/pages/themes/_components/tailwind.css b/website/src/pages/themes/_components/tailwind.css
new file mode 100644
index 000000000..87a75ca86
--- /dev/null
+++ b/website/src/pages/themes/_components/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/website/src/pages/themes/_components/utils.ts b/website/src/pages/themes/_components/utils.ts
new file mode 100644
index 000000000..44fd0449e
--- /dev/null
+++ b/website/src/pages/themes/_components/utils.ts
@@ -0,0 +1,37 @@
+import { VictoryThemeDefinition } from "victory-core";
+
+export const setNestedConfigValue = (
+  config: VictoryThemeDefinition,
+  paths: string | string[],
+  value: unknown,
+) => {
+  const updatedConfig = { ...config };
+  const pathsArray = Array.isArray(paths) ? paths : [paths];
+
+  pathsArray.forEach((path) => {
+    const pathArray = path.split(".");
+    pathArray.reduce((acc, key, i) => {
+      if (i === pathArray.length - 1) {
+        acc[key] = value;
+      } else {
+        acc[key] = { ...acc[key] };
+      }
+      return acc[key];
+    }, updatedConfig);
+  });
+
+  return updatedConfig;
+};
+
+export const getConfigValue = (
+  config: VictoryThemeDefinition,
+  path: string | string[],
+  defaultValue?: unknown,
+) => {
+  const pathString = Array.isArray(path) ? path[0] : path;
+  if (!pathString) return undefined;
+  const pathArray = pathString.split(".");
+  return pathArray.reduce((acc, key) => {
+    return acc && acc[key] ? acc[key] : defaultValue || undefined;
+  }, config);
+};
diff --git a/website/src/pages/themes/index.tsx b/website/src/pages/themes/index.tsx
new file mode 100644
index 000000000..e46ec3851
--- /dev/null
+++ b/website/src/pages/themes/index.tsx
@@ -0,0 +1,279 @@
+import React from "react";
+
+import "./_components/tailwind.css";
+
+import {
+  ColorScalePropType,
+  VictoryArea,
+  VictoryAxis,
+  VictoryBar,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+  VictoryThemeDefinition,
+  VictoryTooltip,
+} from "victory";
+import Select from "./_components/select";
+import ConfigPreview from "./_components/config-preview";
+import Button from "./_components/button";
+import ConfigMapper from "./_components/config-mapper";
+import { setNestedConfigValue } from "./_components/utils";
+import optionsConfig from "./_components/options-config";
+
+export type ThemeOption = {
+  name: string;
+  config?: VictoryThemeDefinition;
+};
+
+const themes: ThemeOption[] = [
+  { name: "Clean", config: VictoryTheme.clean },
+  { name: "Material", config: VictoryTheme.material },
+  { name: "Grayscale", config: VictoryTheme.grayscale },
+];
+
+const themeOptions = [
+  { label: "Select a theme", value: undefined },
+  ...themes.map((theme) => ({
+    label: theme.name,
+    value: theme.name,
+  })),
+];
+
+const sampleStackData = [
+  {
+    x: 1,
+    y: 2,
+  },
+  {
+    x: 2,
+    y: 3,
+  },
+  {
+    x: 3,
+    y: 5,
+  },
+  {
+    x: 4,
+    y: 4,
+  },
+  {
+    x: 5,
+    y: 7,
+  },
+];
+
+const chartStyle: { [key: string]: React.CSSProperties } = {
+  parent: {
+    border: "1px solid #ccc",
+    width: "100%",
+    height: 400,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+};
+
+const NUM_STACKS = 5;
+
+const ThemeBuilder = () => {
+  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] =
+    React.useState(false);
+  const [showTooltips, setShowTooltips] = React.useState(false);
+
+  const handleThemeSelect = (themeName: string) => {
+    const theme = themes.find((t) => t.name === themeName);
+    if (!theme) {
+      setBaseTheme(undefined);
+      setCustomThemeConfig(undefined);
+      return;
+    }
+    setBaseTheme(theme);
+    setCustomThemeConfig({ ...theme?.config });
+  };
+
+  const updateCustomThemeConfig = (
+    path: string | string[],
+    newValue: unknown,
+  ) => {
+    if (!customThemeConfig) return;
+    const updatedConfig = setNestedConfigValue(
+      customThemeConfig,
+      path,
+      newValue,
+    );
+    setCustomThemeConfig(updatedConfig);
+  };
+
+  const handleColorScaleChange = (colorScale: string) => {
+    setActiveColorScale(colorScale as ColorScalePropType);
+  };
+
+  const handleThemeConfigPreviewOpen = () => {
+    setShowThemeConfigPreview(true);
+  };
+
+  const handleThemeConfigPreviewClose = () => {
+    setShowThemeConfigPreview(false);
+  };
+
+  return (
+    <div className="flex flex-row flex-wrap items-start justify-start w-full h-lvh">
+      <aside className="relative flex flex-col h-full w-[380px] border-r border-gray-200">
+        <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={baseTheme?.name || ""}
+            onChange={handleThemeSelect}
+            options={themeOptions}
+            label="Base Theme"
+          />
+          {customThemeConfig && (
+            <section>
+              <h2 className="text-lg font-bold my-4">Customization Options</h2>
+              <ConfigMapper
+                themeConfig={customThemeConfig}
+                activeColorScale={activeColorScale}
+                handleColorScaleChange={handleColorScaleChange}
+                updateThemeConfig={updateCustomThemeConfig}
+              />
+            </section>
+          )}
+        </div>
+        <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={!customThemeConfig}
+          >
+            Get Theme Code
+          </Button>
+        </footer>
+      </aside>
+      <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
+        {customThemeConfig && (
+          <div className="max-w-screen-xl w-full py-4 px-10">
+            <h2 className="text-xl font-bold mb-4">Example Charts</h2>
+            <fieldset>
+              <div className="flex items-center gap-4 mb-4">
+                <input
+                  type="checkbox"
+                  id="show-tooltips"
+                  className="form-checkbox h-5 w-5 text-primary"
+                  checked={showTooltips}
+                  onChange={() => setShowTooltips(!showTooltips)}
+                />
+                <label htmlFor="show-tooltips">
+                  Show tooltips instead of labels
+                </label>
+              </div>
+            </fieldset>
+            <div className="grid grid-cols-2 gap-10">
+              <div>
+                <h3 className="text-base font-bold mb-3">Stacked Area Chart</h3>
+                <VictoryChart
+                  theme={customThemeConfig}
+                  domainPadding={20}
+                  style={chartStyle}
+                >
+                  <VictoryAxis label="X Axis" />
+                  <VictoryAxis dependentAxis label="Y Axis" />
+                  <VictoryStack
+                    colorScale={activeColorScale}
+                    aria-label="Victory Stack Demo"
+                  >
+                    {[...Array(NUM_STACKS)].map((_, i) => (
+                      <VictoryArea
+                        data={sampleStackData}
+                        key={i}
+                        labels={() => undefined}
+                      />
+                    ))}
+                  </VictoryStack>
+                </VictoryChart>
+              </div>
+              <div>
+                <h3 className="text-base font-bold mb-3">Stacked Bar Chart</h3>
+                <VictoryChart
+                  theme={customThemeConfig}
+                  domainPadding={20}
+                  style={chartStyle}
+                >
+                  <VictoryAxis label="X Axis" />
+                  <VictoryAxis dependentAxis label="Y Axis" />
+                  <VictoryStack
+                    colorScale={activeColorScale}
+                    aria-label="Victory Stack Demo"
+                  >
+                    {[...Array(NUM_STACKS)].map((_, i) => (
+                      <VictoryBar
+                        data={sampleStackData}
+                        key={i}
+                        labels={({ datum }) =>
+                          showTooltips ? datum.y : undefined
+                        }
+                        {...(showTooltips && {
+                          labelComponent: <VictoryTooltip />,
+                        })}
+                      />
+                    ))}
+                  </VictoryStack>
+                </VictoryChart>
+              </div>
+              {optionsConfig.map(
+                ({ title, content: Content, hasVictoryChart = true }, i) =>
+                  Content && (
+                    <div key={i}>
+                      <h3 className="text-base font-bold mb-3">{title}</h3>
+                      {hasVictoryChart ? (
+                        <VictoryChart
+                          theme={customThemeConfig}
+                          domainPadding={20}
+                          style={chartStyle}
+                        >
+                          {Content({
+                            labels: ({ datum }) => datum.y || datum.x,
+                            ...(showTooltips && {
+                              labelComponent: <VictoryTooltip />,
+                            }),
+                          })}
+                        </VictoryChart>
+                      ) : (
+                        Content({
+                          labels: ({ datum }) => datum.y || datum.x,
+                          style: chartStyle,
+                          theme: customThemeConfig,
+                          ...(showTooltips && {
+                            labelComponent: <VictoryTooltip />,
+                          }),
+                        })
+                      )}
+                    </div>
+                  ),
+              )}
+            </div>
+          </div>
+        )}
+      </main>
+      {showThemeConfigPreview && customThemeConfig && (
+        <ConfigPreview
+          config={customThemeConfig}
+          onClose={handleThemeConfigPreviewClose}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ThemeBuilder;
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
index 6774b9931..8b7236ff0 100644
--- a/website/tailwind.config.ts
+++ b/website/tailwind.config.ts
@@ -25,6 +25,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        currentColor: "currentColor",
         transparent: "transparent",
         white: NearFormColors.White,
         black: NearFormColors.Black,
@@ -55,6 +56,12 @@ module.exports = {
       fontFamily: {
         sans: ["Inter, Helvetica, Arial, sans-serif"],
       },
+      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>\')',
+        },
+      },
     },
   },
 };

From d3f0836a602142008e84b1afb103ee1355596d4a Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Thu, 21 Nov 2024 16:15:23 -0500
Subject: [PATCH 02/30] refactor(theme-builder): styles to use docs tailwind

---
 website/src/css/custom.css                    | 26 ++++++++++++-------
 .../pages/themes/_components/accordion.tsx    |  6 ++---
 .../src/pages/themes/_components/button.tsx   |  2 +-
 .../pages/themes/_components/color-picker.tsx | 10 +++----
 .../themes/_components/config-mapper.tsx      |  4 +--
 .../themes/_components/config-preview.tsx     |  6 +++--
 .../src/pages/themes/_components/select.tsx   |  2 +-
 .../src/pages/themes/_components/slider.tsx   |  4 +--
 .../src/pages/themes/_components/tailwind.css |  9 -------
 .../options-config.tsx => _config.tsx}        |  0
 .../{_components/utils.ts => _utils.ts}       |  0
 website/src/pages/themes/index.tsx            | 14 +++++-----
 12 files changed, 42 insertions(+), 41 deletions(-)
 delete mode 100644 website/src/pages/themes/_components/tailwind.css
 rename website/src/pages/themes/{_components/options-config.tsx => _config.tsx} (100%)
 rename website/src/pages/themes/{_components/utils.ts => _utils.ts} (100%)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index c336d9b69..2ec7e827e 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -13,31 +13,31 @@ body {
 }
 
 @font-face {
-  font-family: 'Inter';
-  src: url('/font/InterRegular.woff2') format('woff2');
+  font-family: "Inter";
+  src: url("/font/InterRegular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Inter';
-  src: url('/font/InterMedium.woff2') format('woff2');
+  font-family: "Inter";
+  src: url("/font/InterMedium.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Inter';
-  src: url('/font/InterBold.woff2') format('woff2');
+  font-family: "Inter";
+  src: url("/font/InterBold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
 
 .hero-pattern {
-  background-image: url('/img/hero-background.svg');
+  background-image: url("/img/hero-background.svg");
 }
 
 :root {
@@ -57,7 +57,7 @@ body {
   --ifm-footer-padding-vertical: 1rem;
 }
 
-[data-theme='dark'] {
+[data-theme="dark"] {
   --ifm-color-primary: #ff684f;
   --ifm-color-primary-dark: #ff4b2e;
   --ifm-color-primary-darker: #ff3d1d;
@@ -73,7 +73,7 @@ body {
 
 /* Nav */
 .header-github-link::before {
-  content: '';
+  content: "";
   width: 24px;
   height: 24px;
   display: flex;
@@ -106,3 +106,11 @@ body {
 .footer__copyright {
   color: white;
 }
+
+@layer base {
+  /* Needed for theme builder since we're disabling Tailwind's reset for docs */
+  .theme-builder * {
+    border-width: 0;
+    border-style: solid;
+  }
+}
diff --git a/website/src/pages/themes/_components/accordion.tsx b/website/src/pages/themes/_components/accordion.tsx
index 5578b4d5a..6db5aa0f9 100644
--- a/website/src/pages/themes/_components/accordion.tsx
+++ b/website/src/pages/themes/_components/accordion.tsx
@@ -23,11 +23,11 @@ const Accordion = ({
 
   return (
     <div id={id} className="group">
-      <h2 id={`${id}-heading`}>
+      <h2 id={`${id}-heading`} className="mb-0">
         <button
           type="button"
           className={clsx(
-            "flex items-center justify-between w-full px-5 py-3 text-sm font-bold rtl:text-right text-gray-500 border border-b-0 border-gray-200 gap-3 group-last:border-b",
+            "bg-white flex items-center justify-between w-full px-5 py-3 text-sm font-bold rtl:text-right text-grayscale-500 border border-b-0 border-grayscale-300 gap-3 group-last:border-b",
             { "group-last:border-b-0": isOpen },
           )}
           aria-expanded="true"
@@ -45,7 +45,7 @@ const Accordion = ({
         className={isOpen ? "block" : "hidden"}
         aria-labelledby={`${id}-heading`}
       >
-        <div className="p-5 border border-b-0 border-gray-200 group-last:border-b">
+        <div className="p-5 border border-b-0 border-grayscale-300 group-last:border-b">
           {children}
         </div>
       </div>
diff --git a/website/src/pages/themes/_components/button.tsx b/website/src/pages/themes/_components/button.tsx
index bf35a5fd8..515dc3451 100644
--- a/website/src/pages/themes/_components/button.tsx
+++ b/website/src/pages/themes/_components/button.tsx
@@ -17,7 +17,7 @@ const Button = ({
   ...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";
+    "py-2 px-5 border-none font-bold rounded-md cursor-pointer text-sm bg-button-bg text-button-fg hover:underline disabled:bg-grayscale-300 disabled:text-grayscale-400 disabled:cursor-not-allowed disabled:hover:no-underline";
 
   return (
     <button
diff --git a/website/src/pages/themes/_components/color-picker.tsx b/website/src/pages/themes/_components/color-picker.tsx
index 39dd8c58d..3115c37a7 100644
--- a/website/src/pages/themes/_components/color-picker.tsx
+++ b/website/src/pages/themes/_components/color-picker.tsx
@@ -30,13 +30,13 @@ const ColorPicker = ({
   return (
     <fieldset className={className}>
       {label && (
-        <label className="block mb-1 text-sm text-gray-900 dark:text-white font-bold">
+        <label className="block mb-1 text-sm text-grayscale-900 dark:text-white font-bold">
           {label}
         </label>
       )}
       <div
         className={clsx("relative inline-flex rounded-full group/swatch", {
-          "border-2 border-gray-200 p-0.5 cursor-pointer justify-between bg-gray-100":
+          "border-2 border-grayscale-300 p-0.5 cursor-pointer justify-between bg-grayscale-100":
             showColorName,
         })}
       >
@@ -46,7 +46,7 @@ const ColorPicker = ({
               className={clsx(
                 "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":
+                  "outline-2 border-2 border-white outline outline-grayscale-300":
                     !showColorName,
                 },
                 { "w-[30px] h-[30px] p-0.5": showColorName },
@@ -68,7 +68,7 @@ const ColorPicker = ({
           {showColorName && (
             <span
               className={
-                "text-sm font-medium text-gray-900 uppercase ml-2 cursor-pointer"
+                "text-sm font-medium text-grayscale-900 uppercase ml-2 cursor-pointer"
               }
             >
               {color}
@@ -77,7 +77,7 @@ const ColorPicker = ({
         </div>
         {showColorName && (
           <div
-            className={`text-gray-300 flex justify-center items-center text-xl rounded-full place-items-end ml-6 mr-1`}
+            className={`text-grayscale-400 flex justify-center items-center text-xl rounded-full place-items-end ml-6 mr-1`}
           >
             <TiPencil />
           </div>
diff --git a/website/src/pages/themes/_components/config-mapper.tsx b/website/src/pages/themes/_components/config-mapper.tsx
index 89b10b6e3..a8a757fa6 100644
--- a/website/src/pages/themes/_components/config-mapper.tsx
+++ b/website/src/pages/themes/_components/config-mapper.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import optionsConfig from "./options-config";
+import optionsConfig from "../_config";
 import Accordion from "./accordion";
 import Select from "./select";
 import Slider from "./slider";
 import ColorPicker from "./color-picker";
 import ColorScaleOptions from "./color-scale-options";
-import { getConfigValue } from "./utils";
+import { getConfigValue } from "../_utils";
 
 const ControlComponent = ({
   type,
diff --git a/website/src/pages/themes/_components/config-preview.tsx b/website/src/pages/themes/_components/config-preview.tsx
index 92f5c7b78..07f847611 100644
--- a/website/src/pages/themes/_components/config-preview.tsx
+++ b/website/src/pages/themes/_components/config-preview.tsx
@@ -40,13 +40,15 @@ const ConfigPreview = ({ config, onClose }: ConfigPreviewProps) => {
       <h2>Theme Config Preview</h2>
       <SyntaxHighlighter
         language="json"
-        className="flex-1 overflow-auto border border-gray-200 p-3 bg-gray-100"
+        className="flex-1 overflow-auto border border-grayscale-300 p-3 bg-grayscale-100"
       >
         {JSON.stringify(config, null, 2)}
       </SyntaxHighlighter>
       <div className="flex items-center justify-end gap-3 mt-5">
         {copyStatus && (
-          <span className="text-gray-300 text-xs italic">{copyStatus}</span>
+          <span className="text-grayscale-400 text-xs italic">
+            {copyStatus}
+          </span>
         )}
         <Button onClick={handleCopyThemeConfig} ariaLabel="Copy to Clipboard">
           Copy to Clipboard
diff --git a/website/src/pages/themes/_components/select.tsx b/website/src/pages/themes/_components/select.tsx
index dad35cbbd..f7d0e211a 100644
--- a/website/src/pages/themes/_components/select.tsx
+++ b/website/src/pages/themes/_components/select.tsx
@@ -39,7 +39,7 @@ const Select = ({
         id={id}
         value={value}
         onChange={handleChange}
-        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]"
+        className="p-2 w-full text-base border border-grayscale-300 bg-white appearance-none rounded-md bg-select-chevron bg-no-repeat bg-[right_8px_center] bg-[length:16px]"
       >
         {options.map((option, i) => (
           <option key={(option.value || "") + i} value={option.value}>
diff --git a/website/src/pages/themes/_components/slider.tsx b/website/src/pages/themes/_components/slider.tsx
index 5949df6e1..4e813c85b 100644
--- a/website/src/pages/themes/_components/slider.tsx
+++ b/website/src/pages/themes/_components/slider.tsx
@@ -34,7 +34,7 @@ const Slider = ({
     <div className={className}>
       <label
         htmlFor={id}
-        className="block mb-1 text-sm font-medium text-gray-900 dark:text-white"
+        className="block mb-1 text-sm font-medium text-grayscale-900 dark:text-white"
       >
         <span className="text-sm font-bold">{label}</span>: {value}
         {unit}
@@ -44,7 +44,7 @@ const Slider = ({
         type="range"
         value={value}
         onChange={handleChange}
-        className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+        className="w-full h-2 bg-grayscale-300 rounded-lg appearance-none cursor-pointer dark:bg-grayscale-700"
         min={min}
         max={max}
         step={step}
diff --git a/website/src/pages/themes/_components/tailwind.css b/website/src/pages/themes/_components/tailwind.css
deleted file mode 100644
index 87a75ca86..000000000
--- a/website/src/pages/themes/_components/tailwind.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  html {
-    font-family: "Roboto", system-ui, sans-serif;
-  }
-}
diff --git a/website/src/pages/themes/_components/options-config.tsx b/website/src/pages/themes/_config.tsx
similarity index 100%
rename from website/src/pages/themes/_components/options-config.tsx
rename to website/src/pages/themes/_config.tsx
diff --git a/website/src/pages/themes/_components/utils.ts b/website/src/pages/themes/_utils.ts
similarity index 100%
rename from website/src/pages/themes/_components/utils.ts
rename to website/src/pages/themes/_utils.ts
diff --git a/website/src/pages/themes/index.tsx b/website/src/pages/themes/index.tsx
index e46ec3851..08c2b9614 100644
--- a/website/src/pages/themes/index.tsx
+++ b/website/src/pages/themes/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import "./_components/tailwind.css";
+import "../../css/custom.css";
 
 import {
   ColorScalePropType,
@@ -17,8 +17,8 @@ import Select from "./_components/select";
 import ConfigPreview from "./_components/config-preview";
 import Button from "./_components/button";
 import ConfigMapper from "./_components/config-mapper";
-import { setNestedConfigValue } from "./_components/utils";
-import optionsConfig from "./_components/options-config";
+import { setNestedConfigValue } from "./_utils";
+import optionsConfig from "./_config";
 
 export type ThemeOption = {
   name: string;
@@ -125,11 +125,11 @@ const ThemeBuilder = () => {
   };
 
   return (
-    <div className="flex flex-row flex-wrap items-start justify-start w-full h-lvh">
-      <aside className="relative flex flex-col h-full w-[380px] border-r border-gray-200">
+    <div className="flex flex-row flex-wrap items-start justify-start w-full h-lvh theme-builder">
+      <aside className="relative flex flex-col h-full w-[380px] border-r border-grayscale-300">
         <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">
+          <p className="text-sm mb-4 text-grayscale-400">
             Select a theme to begin customizing.
           </p>
           <Select
@@ -151,7 +151,7 @@ const ThemeBuilder = () => {
             </section>
           )}
         </div>
-        <footer className="p-4 border-t border-gray-200 sticky bottom-0 flex justify-end bg-white">
+        <footer className="p-4 border-t border-grayscale-300 sticky bottom-0 flex justify-end bg-white">
           <Button
             onClick={handleThemeConfigPreviewOpen}
             ariaLabel="Get Theme Code"

From 15c1395caaf50dcd9bdc224be0d6c66f010f22d5 Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Thu, 21 Nov 2024 16:18:19 -0500
Subject: [PATCH 03/30] refactor: remove old demo app

---
 demo/ts/app.tsx                               |   37 -
 .../ts/components/theme-builder/accordion.tsx |   55 -
 demo/ts/components/theme-builder/button.tsx   |   35 -
 .../components/theme-builder/color-picker.tsx |  101 --
 .../theme-builder/color-scale-options.tsx     |   81 --
 .../theme-builder/config-mapper.tsx           |  140 ---
 .../theme-builder/config-preview.tsx          |   58 -
 demo/ts/components/theme-builder/index.tsx    |  275 -----
 .../theme-builder/options-config.tsx          | 1037 -----------------
 demo/ts/components/theme-builder/select.tsx   |   53 -
 demo/ts/components/theme-builder/slider.tsx   |   55 -
 demo/ts/components/theme-builder/tailwind.css |    9 -
 demo/ts/components/theme-builder/utils.ts     |   37 -
 demo/ts/index.html                            |   60 -
 demo/ts/tsconfig.json                         |    8 -
 15 files changed, 2041 deletions(-)
 delete mode 100644 demo/ts/app.tsx
 delete mode 100644 demo/ts/components/theme-builder/accordion.tsx
 delete mode 100644 demo/ts/components/theme-builder/button.tsx
 delete mode 100644 demo/ts/components/theme-builder/color-picker.tsx
 delete mode 100644 demo/ts/components/theme-builder/color-scale-options.tsx
 delete mode 100644 demo/ts/components/theme-builder/config-mapper.tsx
 delete mode 100644 demo/ts/components/theme-builder/config-preview.tsx
 delete mode 100644 demo/ts/components/theme-builder/index.tsx
 delete mode 100644 demo/ts/components/theme-builder/options-config.tsx
 delete mode 100644 demo/ts/components/theme-builder/select.tsx
 delete mode 100644 demo/ts/components/theme-builder/slider.tsx
 delete mode 100644 demo/ts/components/theme-builder/tailwind.css
 delete mode 100644 demo/ts/components/theme-builder/utils.ts
 delete mode 100644 demo/ts/index.html
 delete mode 100644 demo/ts/tsconfig.json

diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx
deleted file mode 100644
index 5fca81a73..000000000
--- a/demo/ts/app.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-
-import ThemeBuilder from "./components/theme-builder";
-
-interface AppState {
-  route: string;
-}
-
-const containerStyle: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  height: "100vh",
-  fontFamily: "sans-serif",
-};
-
-const contentStyle: React.CSSProperties = {
-  display: "flex",
-  gap: "20px",
-  overflow: "hidden",
-  flex: 1,
-};
-
-class App extends React.Component<any, AppState> {
-  render() {
-    return (
-      <div style={containerStyle}>
-        <div style={contentStyle}>
-          <ThemeBuilder />
-        </div>
-      </div>
-    );
-  }
-}
-
-// eslint-disable-next-line react/no-deprecated
-ReactDOM.render(<App />, document.getElementById("content"));
diff --git a/demo/ts/components/theme-builder/accordion.tsx b/demo/ts/components/theme-builder/accordion.tsx
deleted file mode 100644
index 5578b4d5a..000000000
--- a/demo/ts/components/theme-builder/accordion.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import { FaChevronDown } from "react-icons/fa";
-
-type AccordionProps = {
-  id: string;
-  title: string;
-  children: React.ReactNode;
-  defaultOpen?: boolean;
-};
-
-const Accordion = ({
-  id,
-  title,
-  children,
-  defaultOpen = false,
-}: AccordionProps) => {
-  const [isOpen, setIsOpen] = React.useState(defaultOpen);
-
-  const toggleAccordion = () => {
-    setIsOpen(!isOpen);
-  };
-
-  return (
-    <div id={id} className="group">
-      <h2 id={`${id}-heading`}>
-        <button
-          type="button"
-          className={clsx(
-            "flex items-center justify-between w-full px-5 py-3 text-sm font-bold rtl:text-right text-gray-500 border border-b-0 border-gray-200 gap-3 group-last:border-b",
-            { "group-last:border-b-0": isOpen },
-          )}
-          aria-expanded="true"
-          aria-controls={`${id}-body`}
-          onClick={toggleAccordion}
-        >
-          <span>{title}</span>
-          <FaChevronDown
-            className={clsx("w-3 h-3 shrink-0", { "rotate-180 ": isOpen })}
-          />
-        </button>
-      </h2>
-      <div
-        id={`${id}-body`}
-        className={isOpen ? "block" : "hidden"}
-        aria-labelledby={`${id}-heading`}
-      >
-        <div className="p-5 border border-b-0 border-gray-200 group-last:border-b">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};
-export default Accordion;
diff --git a/demo/ts/components/theme-builder/button.tsx b/demo/ts/components/theme-builder/button.tsx
deleted file mode 100644
index bf35a5fd8..000000000
--- a/demo/ts/components/theme-builder/button.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-
-type ButtonProps = {
-  onClick: () => void;
-  children: React.ReactNode;
-  className?: string;
-  ariaLabel?: string;
-  disabled?: boolean;
-};
-
-const Button = ({
-  onClick,
-  children,
-  className = "",
-  ariaLabel = "",
-  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={`${baseClasses} ${className}`}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-};
-
-export default Button;
diff --git a/demo/ts/components/theme-builder/color-picker.tsx b/demo/ts/components/theme-builder/color-picker.tsx
deleted file mode 100644
index 39dd8c58d..000000000
--- a/demo/ts/components/theme-builder/color-picker.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from "react";
-import { TiPencil } from "react-icons/ti";
-import clsx from "clsx";
-
-type ColorPickerProps = {
-  label?: string;
-  color: string;
-  id: string;
-  onColorChange: (color: string) => void;
-  showColorName?: boolean;
-  className?: string;
-};
-
-const ColorPicker = ({
-  label,
-  color,
-  id,
-  onColorChange,
-  showColorName = false,
-  className,
-}: ColorPickerProps) => {
-  const [isPickerOpen, setIsPickerOpen] = React.useState(false);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (onColorChange) {
-      onColorChange(event.target.value);
-    }
-  };
-
-  return (
-    <fieldset className={className}>
-      {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/swatch", {
-          "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-[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,
-              }}
-            />
-            {!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/swatch: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/swatch: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
deleted file mode 100644
index f9e6c3eef..000000000
--- a/demo/ts/components/theme-builder/color-scale-options.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from "react";
-import { ColorScalePropType, VictoryThemeDefinition } from "victory-core";
-import Select from "./select";
-import ColorPicker from "./color-picker";
-
-export type ColorChangeArgs = {
-  newColor: string;
-  index: number;
-  colorScale: string;
-};
-
-type ColorScaleOptionsProps = {
-  palette?: VictoryThemeDefinition["palette"];
-  activeColorScale?: ColorScalePropType;
-  onColorChange: (args: ColorChangeArgs) => void;
-  onColorScaleChange: (colorScale: string) => void;
-};
-
-const colorScales = [
-  {
-    label: "Qualitative",
-    value: "qualitative",
-  },
-  {
-    label: "Heatmap",
-    value: "heatmap",
-  },
-  {
-    label: "Warm",
-    value: "warm",
-  },
-  {
-    label: "Cool",
-    value: "cool",
-  },
-  {
-    label: "Red",
-    value: "red",
-  },
-  {
-    label: "Green",
-    value: "green",
-  },
-];
-
-const ColorScaleOptions = ({
-  activeColorScale,
-  palette,
-  onColorChange,
-  onColorScaleChange,
-}: ColorScaleOptionsProps) => {
-  return (
-    <section>
-      <Select
-        id="color-scale-select"
-        value={activeColorScale as string}
-        onChange={onColorScaleChange}
-        options={colorScales}
-        label="Color Scale"
-        className="mb-5"
-      />
-      <div className="flex flex-wrap gap-3">
-        {palette?.[activeColorScale as string]?.map((color, i) => (
-          <ColorPicker
-            key={i}
-            color={color}
-            id={`color-${i}`}
-            onColorChange={(newColor) =>
-              onColorChange({
-                newColor,
-                index: i,
-                colorScale: activeColorScale as string,
-              })
-            }
-          />
-        ))}
-      </div>
-    </section>
-  );
-};
-export default ColorScaleOptions;
diff --git a/demo/ts/components/theme-builder/config-mapper.tsx b/demo/ts/components/theme-builder/config-mapper.tsx
deleted file mode 100644
index 89b10b6e3..000000000
--- a/demo/ts/components/theme-builder/config-mapper.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from "react";
-import optionsConfig from "./options-config";
-import Accordion from "./accordion";
-import Select from "./select";
-import Slider from "./slider";
-import ColorPicker from "./color-picker";
-import ColorScaleOptions from "./color-scale-options";
-import { getConfigValue } from "./utils";
-
-const ControlComponent = ({
-  type,
-  field,
-  themeConfig,
-  updateThemeConfig,
-  activeColorScale,
-  handleColorScaleChange,
-  className,
-}) => {
-  const handleColorChange = ({ newColor, index, colorScale }) => {
-    const updatedColors = themeConfig?.palette?.[colorScale]?.map((color, i) =>
-      i === index ? newColor : color,
-    );
-    updateThemeConfig(`palette.${colorScale}`, updatedColors);
-  };
-
-  const handleChange = (newValue) => {
-    updateThemeConfig(field.path, newValue);
-  };
-
-  const configValue = getConfigValue(themeConfig, field.path, field.default);
-  switch (type) {
-    case "colorScale":
-      return (
-        <ColorScaleOptions
-          palette={themeConfig?.palette}
-          activeColorScale={activeColorScale}
-          onColorChange={handleColorChange}
-          onColorScaleChange={handleColorScaleChange}
-        />
-      );
-    case "section":
-      return (
-        <section className="mb-6">
-          <h3 className="text-lg text-secondary font-bold mb-4">
-            {field.label}
-          </h3>
-          {field.fields.map((subField, i) => (
-            <ControlComponent
-              key={subField.label + i}
-              type={subField.type}
-              field={subField}
-              themeConfig={themeConfig}
-              updateThemeConfig={updateThemeConfig}
-              activeColorScale={activeColorScale}
-              handleColorScaleChange={handleColorScaleChange}
-              className={className}
-            />
-          ))}
-        </section>
-      );
-    case "slider":
-      return (
-        <Slider
-          id={field.label}
-          key={field.label}
-          label={field.label}
-          value={configValue as number}
-          unit={field.unit}
-          onChange={handleChange}
-          min={field.min}
-          max={field.max}
-          step={field.step}
-          className={className}
-        />
-      );
-    case "select":
-      return (
-        <Select
-          id={field.label}
-          key={field.label}
-          label={field.label}
-          value={configValue as string}
-          onChange={handleChange}
-          options={field.options}
-          className={className}
-        />
-      );
-    case "colorPicker":
-      return (
-        <ColorPicker
-          id={field.label}
-          key={field.label}
-          label={field.label}
-          color={configValue as string}
-          onColorChange={handleChange}
-          className={className}
-          showColorName
-        />
-      );
-    default:
-      return null;
-  }
-};
-
-const ConfigMapper = ({
-  themeConfig,
-  activeColorScale,
-  updateThemeConfig,
-  handleColorScaleChange,
-}) => {
-  return (
-    <>
-      {optionsConfig.map((section, index) => (
-        <Accordion
-          key={section.title}
-          title={section.title}
-          id={section.title}
-          defaultOpen={index === 0}
-        >
-          {section.fields.map((field, i) => {
-            return (
-              <ControlComponent
-                key={field.label + i}
-                type={field.type}
-                field={field}
-                themeConfig={themeConfig}
-                updateThemeConfig={updateThemeConfig}
-                activeColorScale={activeColorScale}
-                handleColorScaleChange={handleColorScaleChange}
-                className="mb-4"
-              />
-            );
-          })}
-        </Accordion>
-      ))}
-    </>
-  );
-};
-
-export default ConfigMapper;
diff --git a/demo/ts/components/theme-builder/config-preview.tsx b/demo/ts/components/theme-builder/config-preview.tsx
deleted file mode 100644
index 05e73d9ea..000000000
--- a/demo/ts/components/theme-builder/config-preview.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from "react";
-import { VictoryThemeDefinition } from "victory-core";
-import Button from "./button";
-import { Prism, SyntaxHighlighterProps } from "react-syntax-highlighter";
-
-const SyntaxHighlighter = Prism as any as React.FC<SyntaxHighlighterProps>;
-
-type ConfigPreviewProps = {
-  config: VictoryThemeDefinition;
-  onClose: () => void;
-};
-
-const ConfigPreview = ({ config, onClose }: ConfigPreviewProps) => {
-  const [copyStatus, setCopyStatus] = React.useState<string | null>(null);
-
-  const handleCopyThemeConfig = () => {
-    navigator.clipboard
-      .writeText(JSON.stringify(config, null, 2))
-      .then(() => {
-        setCopyStatus("Copied successfully.");
-        return "Theme config copied to clipboard";
-      })
-      .catch(() => {
-        setCopyStatus("Failed to copy.");
-      });
-  };
-
-  const handleClose = () => {
-    onClose();
-  };
-
-  return (
-    <div className="fixed top-0 right-0 bottom-0 w-full p-10 z-[100] 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="flex-1 overflow-auto border border-gray-200 p-3 bg-gray-100"
-      >
-        {JSON.stringify(config, null, 2)}
-      </SyntaxHighlighter>
-      <div className="flex items-center justify-end gap-3 mt-5">
-        {copyStatus && (
-          <span className="text-gray-300 text-xs italic">{copyStatus}</span>
-        )}
-        <Button onClick={handleCopyThemeConfig} ariaLabel="Copy to Clipboard">
-          Copy to Clipboard
-        </Button>
-      </div>
-    </div>
-  );
-};
-export default ConfigPreview;
diff --git a/demo/ts/components/theme-builder/index.tsx b/demo/ts/components/theme-builder/index.tsx
deleted file mode 100644
index 51ea9517a..000000000
--- a/demo/ts/components/theme-builder/index.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-import React from "react";
-import "./tailwind.css";
-
-import {
-  ColorScalePropType,
-  VictoryTheme,
-  VictoryThemeDefinition,
-} from "victory-core";
-import { VictoryChart } from "victory-chart";
-import { VictoryAxis } from "victory-axis";
-import { VictoryStack } from "victory-stack";
-import { VictoryBar } from "victory-bar";
-import { VictoryArea } from "victory-area";
-import { VictoryTooltip } from "victory-tooltip";
-import Select from "./select";
-import ConfigPreview from "./config-preview";
-import Button from "./button";
-import ConfigMapper from "./config-mapper";
-import { setNestedConfigValue } from "./utils";
-import optionsConfig from "./options-config";
-
-export type ThemeOption = {
-  name: string;
-  config?: VictoryThemeDefinition;
-};
-
-const themes: ThemeOption[] = [
-  { name: "Clean", config: VictoryTheme.clean },
-  { name: "Material", config: VictoryTheme.material },
-  { name: "Grayscale", config: VictoryTheme.grayscale },
-];
-
-const themeOptions = [
-  { label: "Select a theme", value: undefined },
-  ...themes.map((theme) => ({
-    label: theme.name,
-    value: theme.name,
-  })),
-];
-
-const sampleStackData = [
-  {
-    x: 1,
-    y: 2,
-  },
-  {
-    x: 2,
-    y: 3,
-  },
-  {
-    x: 3,
-    y: 5,
-  },
-  {
-    x: 4,
-    y: 4,
-  },
-  {
-    x: 5,
-    y: 7,
-  },
-];
-
-const chartStyle: { [key: string]: React.CSSProperties } = {
-  parent: {
-    border: "1px solid #ccc",
-    width: "100%",
-    height: 400,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-};
-
-const ThemeBuilder = () => {
-  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] =
-    React.useState(false);
-  const [showTooltips, setShowTooltips] = React.useState(false);
-
-  const handleThemeSelect = (themeName: string) => {
-    const theme = themes.find((t) => t.name === themeName);
-    if (!theme) {
-      setBaseTheme(undefined);
-      setCustomThemeConfig(undefined);
-      return;
-    }
-    setBaseTheme(theme);
-    setCustomThemeConfig({ ...theme?.config });
-  };
-
-  const updateCustomThemeConfig = (
-    path: string | string[],
-    newValue: unknown,
-  ) => {
-    if (!customThemeConfig) return;
-    const updatedConfig = setNestedConfigValue(
-      customThemeConfig,
-      path,
-      newValue,
-    );
-    setCustomThemeConfig(updatedConfig);
-  };
-
-  const handleColorScaleChange = (colorScale: string) => {
-    setActiveColorScale(colorScale as ColorScalePropType);
-  };
-
-  const handleThemeConfigPreviewOpen = () => {
-    setShowThemeConfigPreview(true);
-  };
-
-  const handleThemeConfigPreviewClose = () => {
-    setShowThemeConfigPreview(false);
-  };
-
-  return (
-    <div className="flex flex-row flex-wrap items-start justify-start w-full">
-      <aside className="relative flex flex-col h-full w-[380px] border-r border-gray-200">
-        <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={baseTheme?.name || ""}
-            onChange={handleThemeSelect}
-            options={themeOptions}
-            label="Base Theme"
-          />
-          {customThemeConfig && (
-            <section>
-              <h2 className="text-lg font-bold my-4">Customization Options</h2>
-              <ConfigMapper
-                themeConfig={customThemeConfig}
-                activeColorScale={activeColorScale}
-                handleColorScaleChange={handleColorScaleChange}
-                updateThemeConfig={updateCustomThemeConfig}
-              />
-            </section>
-          )}
-        </div>
-        <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={!customThemeConfig}
-          >
-            Get Theme Code
-          </Button>
-        </footer>
-      </aside>
-      <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
-        {customThemeConfig && (
-          <div className="max-w-screen-xl w-full py-4 px-10">
-            <h2 className="text-xl font-bold mb-4">Example Charts</h2>
-            <fieldset>
-              <div className="flex items-center gap-4 mb-4">
-                <input
-                  type="checkbox"
-                  id="show-tooltips"
-                  className="form-checkbox h-5 w-5 text-primary"
-                  checked={showTooltips}
-                  onChange={() => setShowTooltips(!showTooltips)}
-                />
-                <label htmlFor="show-tooltips">
-                  Show tooltips instead of labels
-                </label>
-              </div>
-            </fieldset>
-            <div className="grid grid-cols-2 gap-10">
-              <div>
-                <h3 className="text-base font-bold mb-3">Stacked Area Chart</h3>
-                <VictoryChart
-                  theme={customThemeConfig}
-                  domainPadding={20}
-                  style={chartStyle}
-                >
-                  <VictoryAxis label="X Axis" />
-                  <VictoryAxis dependentAxis label="Y Axis" />
-                  <VictoryStack
-                    colorScale={activeColorScale}
-                    aria-label="Victory Stack Demo"
-                  >
-                    {[...Array(5)].map((_, i) => (
-                      <VictoryArea
-                        data={sampleStackData}
-                        key={i}
-                        labels={() => undefined}
-                      />
-                    ))}
-                  </VictoryStack>
-                </VictoryChart>
-              </div>
-              <div>
-                <h3 className="text-base font-bold mb-3">Stacked Bar Chart</h3>
-                <VictoryChart
-                  theme={customThemeConfig}
-                  domainPadding={20}
-                  style={chartStyle}
-                >
-                  <VictoryAxis label="X Axis" />
-                  <VictoryAxis dependentAxis label="Y Axis" />
-                  <VictoryStack
-                    colorScale={activeColorScale}
-                    aria-label="Victory Stack Demo"
-                  >
-                    {[...Array(5)].map((_, i) => (
-                      <VictoryBar
-                        data={sampleStackData}
-                        key={i}
-                        labels={({ datum }) =>
-                          showTooltips ? datum.y : undefined
-                        }
-                        {...(showTooltips && {
-                          labelComponent: <VictoryTooltip />,
-                        })}
-                      />
-                    ))}
-                  </VictoryStack>
-                </VictoryChart>
-              </div>
-              {optionsConfig.map(
-                ({ title, content: Content, hasVictoryChart = true }, i) =>
-                  Content && (
-                    <div key={i}>
-                      <h3 className="text-base font-bold mb-3">{title}</h3>
-                      {hasVictoryChart ? (
-                        <VictoryChart
-                          theme={customThemeConfig}
-                          domainPadding={20}
-                          style={chartStyle}
-                        >
-                          {Content({
-                            labels: ({ datum }) => datum.y || datum.x,
-                            ...(showTooltips && {
-                              labelComponent: <VictoryTooltip />,
-                            }),
-                          })}
-                        </VictoryChart>
-                      ) : (
-                        Content({
-                          labels: ({ datum }) => datum.y || datum.x,
-                          style: chartStyle,
-                          theme: customThemeConfig,
-                          ...(showTooltips && {
-                            labelComponent: <VictoryTooltip />,
-                          }),
-                        })
-                      )}
-                    </div>
-                  ),
-              )}
-            </div>
-          </div>
-        )}
-      </main>
-      {showThemeConfigPreview && customThemeConfig && (
-        <ConfigPreview
-          config={customThemeConfig}
-          onClose={handleThemeConfigPreviewClose}
-        />
-      )}
-    </div>
-  );
-};
-export default ThemeBuilder;
diff --git a/demo/ts/components/theme-builder/options-config.tsx b/demo/ts/components/theme-builder/options-config.tsx
deleted file mode 100644
index 64334ce61..000000000
--- a/demo/ts/components/theme-builder/options-config.tsx
+++ /dev/null
@@ -1,1037 +0,0 @@
-import React from "react";
-import { VictoryArea } from "victory-area";
-import { VictoryAxis } from "victory-axis";
-import { VictoryBar } from "victory-bar";
-import { VictoryCandlestick } from "victory-candlestick";
-import { VictoryErrorBar } from "victory-errorbar";
-import { VictoryHistogram } from "victory-histogram";
-import { VictoryLegend } from "victory-legend";
-import { VictoryLine } from "victory-line";
-import { VictoryPie } from "victory-pie";
-import { VictoryScatter } from "victory-scatter";
-import { VictoryVoronoi } from "victory-voronoi";
-import { VictoryPolarAxis } from "victory-polar-axis";
-
-type ThemeBuilderFieldConfig =
-  | {
-      type: "section" | "colorScale";
-      label: string;
-      fields?: ThemeBuilderFieldConfig[];
-    }
-  | {
-      type: "slider" | "select" | "colorPicker";
-      label: string;
-      path: string | string[];
-      min?: number;
-      max?: number;
-      step?: number;
-      unit?: string;
-      default: number | string;
-      options?: { label: string; value: string }[];
-    };
-
-enum StrokeProps {
-  STROKE = "Stroke",
-  STROKE_WIDTH = "Stroke Width",
-  STROKE_DASH_ARRAY = "Stroke Dash Array",
-  STROKE_LINE_CAP = "Stroke Line Cap",
-  STROKE_LINE_JOIN = "Stroke Line Join",
-}
-
-type ThemeBuilderOptionsConfig = {
-  type: "section";
-  title: string;
-  hasVictoryChart?: boolean;
-  content?: (props: any) => React.ReactNode;
-  fields: ThemeBuilderFieldConfig[];
-}[];
-
-const defaultFill = "#000";
-
-const getPath = (basePath: string | string[], key: string) => {
-  if (Array.isArray(basePath)) {
-    return basePath.map((p) => `${p}.${key}`);
-  }
-  return `${basePath}.${key}`;
-};
-
-const getBaseStrokeConfig = (
-  basePath: string | string[],
-  includedStrokeProps: StrokeProps[] = [],
-): ThemeBuilderFieldConfig[] => {
-  const config = [
-    {
-      type: "colorPicker",
-      label: StrokeProps.STROKE,
-      default: defaultFill,
-      path: getPath(basePath, "stroke"),
-    },
-    {
-      type: "slider",
-      label: StrokeProps.STROKE_WIDTH,
-      min: 0,
-      max: 5,
-      unit: "px",
-      default: 1,
-      path: getPath(basePath, "strokeWidth"),
-    },
-    {
-      type: "slider",
-      label: StrokeProps.STROKE_DASH_ARRAY,
-      min: 0,
-      max: 10,
-      default: 0,
-      path: getPath(basePath, "strokeDasharray"),
-    },
-    {
-      type: "select",
-      label: StrokeProps.STROKE_LINE_CAP,
-      options: [
-        { label: "Round", value: "round" },
-        { label: "Square", value: "square" },
-        { label: "Butt", value: "butt" },
-      ],
-      default: "round",
-      path: getPath(basePath, "strokeLinecap"),
-    },
-    {
-      type: "select",
-      label: StrokeProps.STROKE_LINE_JOIN,
-      options: [
-        { label: "Round", value: "round" },
-        { label: "Bevel", value: "bevel" },
-        { label: "Miter", value: "miter" },
-      ],
-      default: "round",
-      path: getPath(basePath, "strokeLinejoin"),
-    },
-  ] as ThemeBuilderFieldConfig[];
-  return includedStrokeProps.length
-    ? config.filter((field) =>
-        includedStrokeProps.includes(field.label as StrokeProps),
-      )
-    : config;
-};
-
-const getBaseLabelsConfig = (
-  basePath: string | string[],
-): ThemeBuilderFieldConfig[] => [
-  {
-    type: "slider",
-    label: "Font Size",
-    min: 10,
-    max: 24,
-    unit: "px",
-    path: getPath(basePath, "fontSize"),
-    default: 12,
-  },
-  {
-    type: "slider",
-    label: "Padding",
-    min: 0,
-    max: 50,
-    unit: "px",
-    path: getPath(basePath, "padding"),
-    default: 8,
-  },
-  {
-    type: "colorPicker",
-    label: "Fill",
-    path: getPath(basePath, "fill"),
-    default: defaultFill,
-  },
-];
-
-const optionsConfig: ThemeBuilderOptionsConfig = [
-  {
-    type: "section",
-    title: "Palette",
-    fields: [
-      {
-        type: "colorScale",
-        label: "Color Scale",
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Global Settings",
-    fields: [
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig([
-          "axis.style.axisLabel",
-          "polarAxis.style.tickLabels",
-          "polarDependentAxis.style.tickLabels",
-          "tooltip.style",
-          "area.style.labels",
-          "bar.style.labels",
-          "candlestick.style.labels",
-          "errorbar.style.labels",
-          "histogram.style.labels",
-          "legend.style.labels",
-          "line.style.labels",
-          "pie.style.labels",
-          "scatter.style.labels",
-          "voronoi.style.labels",
-        ]),
-      },
-      {
-        type: "section",
-        label: "Data",
-        fields: getBaseStrokeConfig([
-          "area.style.data",
-          "bar.style.data",
-          "candlestick.style.data",
-          "errorbar.style.data",
-          "histogram.style.data",
-          "line.style.data",
-          "pie.style.data",
-          "scatter.style.data",
-          "voronoi.style.data",
-        ]),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Axis",
-    fields: [
-      {
-        type: "section",
-        label: "General",
-        fields: [
-          {
-            type: "colorPicker",
-            label: "Fill",
-            default: defaultFill,
-            path: "axis.style.axis.fill",
-          },
-          ...getBaseStrokeConfig("axis.style.axis", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-            StrokeProps.STROKE_LINE_CAP,
-            StrokeProps.STROKE_LINE_JOIN,
-          ]),
-        ],
-      },
-      {
-        type: "section",
-        label: "Grid",
-        fields: [
-          {
-            type: "colorPicker",
-            label: "Fill",
-            default: defaultFill,
-            path: "axis.style.grid.fill",
-          },
-          ...getBaseStrokeConfig("axis.style.grid"),
-        ],
-      },
-      {
-        type: "section",
-        label: "Ticks",
-        fields: [
-          {
-            type: "slider",
-            label: "Size",
-            min: 0,
-            max: 50,
-            unit: "px",
-            default: 5,
-            path: "axis.style.ticks.size",
-          },
-          ...getBaseStrokeConfig("axis.style.ticks", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-          ]),
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("axis.style.axisLabel"),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Polar Axis",
-    content: (props) => [
-      <VictoryPolarAxis {...props} key="polar-axis" standalone={false} />,
-      <VictoryPolarAxis
-        {...props}
-        key="polar-axis-dependent"
-        dependentAxis
-        domain={[0, 10]}
-        standalone={false}
-      />,
-    ],
-    fields: [
-      {
-        type: "section",
-        label: "General",
-        fields: getBaseStrokeConfig("polarAxis.style.axis", [
-          StrokeProps.STROKE,
-          StrokeProps.STROKE_WIDTH,
-        ]),
-      },
-      {
-        type: "section",
-        label: "Grid",
-        fields: getBaseStrokeConfig("polarAxis.style.grid"),
-      },
-      {
-        type: "section",
-        label: "Ticks",
-        fields: [
-          {
-            type: "slider",
-            label: "Size",
-            min: 0,
-            max: 50,
-            unit: "px",
-            default: 5,
-            path: "polarAxis.style.ticks.size",
-          },
-          ...getBaseStrokeConfig("polarAxis.style.ticks", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-            StrokeProps.STROKE_LINE_CAP,
-            StrokeProps.STROKE_LINE_JOIN,
-          ]),
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("polarAxis.style.tickLabels"),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Polar Dependent Axis",
-    fields: [
-      {
-        type: "section",
-        label: "General",
-        fields: getBaseStrokeConfig("polarDependentAxis.style.axis", [
-          StrokeProps.STROKE,
-          StrokeProps.STROKE_WIDTH,
-        ]),
-      },
-      {
-        type: "section",
-        label: "Grid",
-        fields: getBaseStrokeConfig("polarDependentAxis.style.grid"),
-      },
-      {
-        type: "section",
-        label: "Ticks",
-        fields: [
-          {
-            type: "slider",
-            label: "Size",
-            min: 0,
-            max: 50,
-            unit: "px",
-            default: 5,
-            path: "polarDependentAxis.style.ticks.size",
-          },
-          ...getBaseStrokeConfig("polarDependentAxis.style.ticks", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-            StrokeProps.STROKE_LINE_CAP,
-            StrokeProps.STROKE_LINE_JOIN,
-          ]),
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("polarDependentAxis.style.tickLabels"),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Area Chart",
-    content: (props) => [
-      <VictoryAxis key="x-axis" label="X Axis" />,
-      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryArea
-        {...props}
-        key="area-chart"
-        data={[
-          { x: 1, y: 2, label: "A" },
-          { x: 2, y: 3, label: "B" },
-          { x: 3, y: 5, label: "C" },
-          { x: 4, y: 4, label: "D" },
-          { x: 5, y: 7, label: "E" },
-        ]}
-      />,
-    ],
-    fields: [
-      {
-        type: "section",
-        label: "Data",
-        fields: [
-          {
-            type: "slider",
-            label: "Fill Opacity",
-            min: 0,
-            max: 1,
-            step: 0.1,
-            path: "area.style.data.fillOpacity",
-            default: 1,
-          },
-          ...getBaseStrokeConfig("area.style.data", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-          ]),
-          {
-            type: "colorPicker",
-            label: "Fill",
-            path: "area.style.data.fill",
-            default: defaultFill,
-          },
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("area.style.labels"),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Bar Chart",
-    content: (props) => [
-      <VictoryAxis key="x-axis" label="X Axis" />,
-      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryBar
-        key="bar-chart"
-        {...props}
-        data={[
-          { x: 1, y: 2, label: "A" },
-          { x: 2, y: 3, label: "B" },
-          { x: 3, y: 5, label: "C" },
-          { x: 4, y: 4, label: "D" },
-          { x: 5, y: 7, label: "E" },
-        ]}
-      />,
-    ],
-    fields: [
-      {
-        type: "section",
-        label: "Data",
-        fields: [
-          {
-            type: "colorPicker",
-            label: "Fill",
-            path: "bar.style.data.fill",
-            default: defaultFill,
-          },
-          ...getBaseStrokeConfig("bar.style.data", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-          ]),
-          {
-            type: "slider",
-            label: "Fill Opacity",
-            min: 0,
-            max: 1,
-            step: 0.1,
-            path: "bar.style.data.fillOpacity",
-            default: 1,
-          },
-          {
-            type: "slider",
-            label: "Top Corner Radius",
-            path: "bar.cornerRadius.top",
-            max: 2,
-            step: 0.5,
-            default: 0,
-          },
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("bar.style.labels"),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Candlestick Chart",
-    content: (props) => (
-      <VictoryCandlestick
-        {...props}
-        data={[
-          {
-            x: "3/1/23",
-            open: 5,
-            close: 10,
-            high: 15,
-            low: 0,
-            label: "A",
-          },
-          {
-            x: "3/2/23",
-            open: 10,
-            close: 15,
-            high: 20,
-            low: 5,
-            label: "B",
-          },
-          {
-            x: "3/3/23",
-            open: 15,
-            close: 20,
-            high: 22,
-            low: 10,
-            label: "C",
-          },
-          {
-            x: "3/4/23",
-            open: 20,
-            close: 10,
-            high: 25,
-            low: 7,
-            label: "D",
-          },
-          {
-            x: "3/5/23",
-            open: 10,
-            close: 8,
-            high: 15,
-            low: 5,
-            label: "E",
-          },
-        ]}
-      />
-    ),
-    fields: [
-      {
-        type: "section",
-        label: "Data",
-        fields: [
-          ...getBaseStrokeConfig("candlestick.style.data", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-          ]),
-          {
-            type: "slider",
-            label: "Border Radius",
-            max: 2,
-            step: 0.5,
-            default: 0,
-            path: "candlestick.style.data.rx",
-          },
-          {
-            type: "slider",
-            label: "Wick Width",
-            min: 0,
-            max: 5,
-            unit: "px",
-            path: "candlestick.wickStrokeWidth",
-            default: 2,
-          },
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("candlestick.style.labels"),
-      },
-      {
-        type: "section",
-        label: "Colors",
-        fields: [
-          {
-            type: "colorPicker",
-            label: "Positive Color",
-            path: "candlestick.candleColors.positive",
-            default: "#ffffff",
-          },
-          {
-            type: "colorPicker",
-            label: "Negative Color",
-            path: "candlestick.candleColors.negative",
-            default: defaultFill,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Error Bar",
-    content: (props) => (
-      <VictoryErrorBar
-        {...props}
-        data={[
-          { x: 1, y: 1, errorX: [1, 0.5], errorY: 0.1 },
-          { x: 2, y: 2, errorX: [1, 3], errorY: 0.1 },
-          { x: 3, y: 3, errorX: [1, 3], errorY: [0.2, 0.3] },
-          { x: 4, y: 2, errorX: [1, 0.5], errorY: 0.1 },
-          { x: 5, y: 1, errorX: [1, 0.5], errorY: 0.2 },
-        ]}
-      />
-    ),
-    fields: [
-      {
-        type: "section",
-        label: "Data",
-        fields: [
-          {
-            type: "slider",
-            label: "Border Width",
-            min: 0,
-            max: 10,
-            unit: "px",
-            path: "errorbar.borderWidth",
-            default: 8,
-          },
-          ...getBaseStrokeConfig("errorbar.style.data", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-            StrokeProps.STROKE_LINE_CAP,
-          ]),
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("errorbar.style.labels"),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Histogram",
-    content: (props) => (
-      <VictoryHistogram
-        {...props}
-        data={[
-          { x: 0 },
-          { x: 1 },
-          { x: 1 },
-          { x: 1 },
-          { x: 1 },
-          { x: 2 },
-          { x: 2 },
-          { x: 3 },
-          { x: 4 },
-          { x: 7 },
-          { x: 7 },
-          { x: 10 },
-        ]}
-        labels={({ datum }) => `Bin count:\n ${datum.x}`}
-      />
-    ),
-    fields: [
-      {
-        type: "section",
-        label: "Data",
-        fields: [
-          {
-            type: "colorPicker",
-            label: "Fill",
-            path: "histogram.style.data.fill",
-            default: defaultFill,
-          },
-          {
-            type: "slider",
-            label: "Fill Opacity",
-            min: 0,
-            max: 1,
-            step: 0.1,
-            path: "histogram.style.data.fillOpacity",
-            default: 1,
-          },
-          {
-            type: "slider",
-            label: "Top Corner Radius",
-            path: "histogram.cornerRadius.top",
-            max: 10,
-            step: 0.5,
-            default: 0,
-          },
-          {
-            type: "slider",
-            label: "Bin Spacing",
-            min: 0,
-            max: 10,
-            unit: "px",
-            path: "histogram.binSpacing",
-            default: 4,
-          },
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("histogram.style.labels"),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Legend",
-    content: (props) => [
-      <VictoryLegend
-        {...props}
-        key="legend"
-        x={125}
-        y={20}
-        title="Pets"
-        data={[
-          {
-            name: "Dogs",
-            symbol: { fill: "tomato" },
-          },
-          {
-            name: "Cats",
-            symbol: { fill: "orange" },
-          },
-          {
-            name: "Rabbits",
-            symbol: { fill: "gold" },
-          },
-        ]}
-      />,
-      <VictoryBar
-        key="legend-chart"
-        data={[
-          {
-            x: "Dogs",
-            y: 6,
-            fill: "tomato",
-          },
-          {
-            x: "Cats",
-            y: 4,
-            fill: "orange",
-          },
-          {
-            x: "Rabbits",
-            y: 2,
-            fill: "gold",
-          },
-        ]}
-        style={{
-          data: {
-            fill: ({ datum }) => datum.fill,
-          },
-        }}
-      />,
-    ],
-    fields: [
-      {
-        type: "section",
-        label: "General",
-        fields: [
-          {
-            type: "slider",
-            label: "Gutter",
-            min: 0,
-            max: 50,
-            unit: "px",
-            path: "legend.gutter",
-            default: 20,
-          },
-          {
-            type: "slider",
-            label: "Border Padding",
-            min: 0,
-            max: 50,
-            unit: "px",
-            path: "legend.borderPadding",
-            default: 10,
-          },
-          {
-            type: "select",
-            label: "Orientation",
-            options: [
-              { label: "Horizontal", value: "horizontal" },
-              { label: "Vertical", value: "vertical" },
-            ],
-            path: "legend.orientation",
-            default: "horizontal",
-          },
-          {
-            type: "select",
-            label: "Title Orientation",
-            options: [
-              { label: "Top", value: "top" },
-              { label: "Bottom", value: "bottom" },
-              { label: "Left", value: "left" },
-              { label: "Right", value: "right" },
-            ],
-            path: "legend.titleOrientation",
-            default: "top",
-          },
-          {
-            type: "select",
-            label: "Data Type",
-            options: [
-              { label: "Circle", value: "circle" },
-              { label: "Square", value: "square" },
-              { label: "Diamond", value: "diamond" },
-              { label: "Star", value: "star" },
-            ],
-            path: "legend.style.data.type",
-            default: "circle",
-          },
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("legend.style.labels"),
-      },
-      {
-        type: "section",
-        label: "Title",
-        fields: getBaseLabelsConfig("legend.style.title"),
-      },
-      {
-        type: "section",
-        label: "Border",
-        fields: getBaseStrokeConfig("legend.style.border", [
-          StrokeProps.STROKE,
-          StrokeProps.STROKE_WIDTH,
-        ]),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Line Chart",
-    content: (props) => [
-      <VictoryAxis key="x-axis" label="X Axis" />,
-      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryLine
-        key="line-chart"
-        {...props}
-        data={[
-          { x: 1, y: 2 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 4 },
-          { x: 5, y: 7 },
-        ]}
-        labels={({ datum }) => datum.y}
-      />,
-    ],
-    fields: [
-      {
-        type: "section",
-        label: "Data",
-        fields: getBaseStrokeConfig("line.style.data", [
-          StrokeProps.STROKE,
-          StrokeProps.STROKE_WIDTH,
-          StrokeProps.STROKE_LINE_CAP,
-          StrokeProps.STROKE_LINE_JOIN,
-        ]),
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("line.style.labels"),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Pie Chart",
-    hasVictoryChart: false,
-    content: (props) => (
-      <VictoryPie
-        {...props}
-        data={[
-          { x: "Cats", y: 35 },
-          { x: "Dogs", y: 40 },
-          { x: "Birds", y: 55 },
-          { x: "Fishes", y: 15 },
-          { x: "Reptiles", y: 10 },
-        ]}
-      />
-    ),
-    fields: [
-      {
-        type: "section",
-        label: "Data",
-        fields: [
-          {
-            type: "slider",
-            label: "Padding",
-            min: 0,
-            max: 50,
-            unit: "px",
-            path: "pie.style.data.padding",
-            default: 0,
-          },
-          ...getBaseStrokeConfig("pie.style.data", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-          ]),
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("pie.style.labels"),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Scatter Chart",
-    content: (props) => (
-      <VictoryScatter
-        {...props}
-        data={[
-          { x: 1, y: 2 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 4 },
-          { x: 5, y: 7 },
-        ]}
-      />
-    ),
-    fields: [
-      {
-        type: "section",
-        label: "Data",
-        fields: [
-          {
-            type: "colorPicker",
-            label: "Fill",
-            default: defaultFill,
-            path: "scatter.style.data.fill",
-          },
-          {
-            type: "slider",
-            label: "Opacity",
-            min: 0,
-            max: 1,
-            step: 0.1,
-            default: 1,
-            path: "scatter.style.data.opacity",
-          },
-          ...getBaseStrokeConfig("scatter.style.data", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-          ]),
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("scatter.style.labels"),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Tooltip",
-    fields: [
-      {
-        type: "section",
-        label: "General",
-        fields: [
-          ...getBaseLabelsConfig("tooltip.style"),
-          {
-            type: "slider",
-            label: "Corner Radius",
-            min: 0,
-            max: 10,
-            default: 0,
-            path: "tooltip.cornerRadius",
-          },
-          {
-            type: "slider",
-            label: "Pointer Length",
-            min: 0,
-            max: 20,
-            default: 10,
-            path: "tooltip.pointerLength",
-          },
-        ],
-      },
-      {
-        type: "section",
-        label: "Flyout",
-        fields: [
-          {
-            type: "colorPicker",
-            label: "Fill",
-            default: "#FFFFFF",
-            path: "tooltip.flyoutStyle.fill",
-          },
-          ...getBaseStrokeConfig("tooltip.flyoutStyle", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-          ]),
-          {
-            type: "select",
-            label: "Pointer Events",
-            options: [
-              { label: "None", value: "none" },
-              { label: "All", value: "all" },
-            ],
-            default: "none",
-            path: "tooltip.flyoutStyle.pointerEvents",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Voronoi",
-    content: (props) => (
-      <VictoryVoronoi
-        {...props}
-        data={[
-          { x: 1, y: 2 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 4 },
-          { x: 5, y: 7 },
-        ]}
-      />
-    ),
-    fields: [
-      {
-        type: "section",
-        label: "General",
-        fields: [
-          {
-            type: "colorPicker",
-            label: "Fill",
-            default: "#FFFFFF",
-            path: "voronoi.style.data.fill",
-          },
-          ...getBaseStrokeConfig("voronoi.style.data", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-          ]),
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("voronoi.style.labels"),
-      },
-    ],
-  },
-];
-
-export default optionsConfig;
diff --git a/demo/ts/components/theme-builder/select.tsx b/demo/ts/components/theme-builder/select.tsx
deleted file mode 100644
index dad35cbbd..000000000
--- a/demo/ts/components/theme-builder/select.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-
-export type SelectOption = {
-  label: string;
-  value?: string;
-};
-
-type SelectProps = {
-  id: string;
-  label?: string;
-  options: SelectOption[];
-  value?: string;
-  onChange: (value: string) => void;
-  className?: string;
-};
-
-const Select = ({
-  id,
-  label,
-  options,
-  value = "",
-  onChange,
-  className,
-}: SelectProps) => {
-  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    if (onChange) {
-      onChange(event.target.value);
-    }
-  };
-  return (
-    <div className={clsx("relative w-full", className)}>
-      {label && (
-        <label htmlFor={id} className="block mb-1 text-sm font-bold">
-          {label}
-        </label>
-      )}
-      <select
-        id={id}
-        value={value}
-        onChange={handleChange}
-        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, i) => (
-          <option key={(option.value || "") + i} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
-export default Select;
diff --git a/demo/ts/components/theme-builder/slider.tsx b/demo/ts/components/theme-builder/slider.tsx
deleted file mode 100644
index 5949df6e1..000000000
--- a/demo/ts/components/theme-builder/slider.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-
-type SliderProps = {
-  label: string;
-  id: string;
-  value?: number;
-  unit?: string;
-  onChange?: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  className?: string;
-};
-
-const Slider = ({
-  label,
-  id,
-  value,
-  unit,
-  onChange,
-  min,
-  max,
-  step = 1,
-  className,
-}: SliderProps) => {
-  const handleChange = (event) => {
-    const newValue = event.target.valueAsNumber;
-    if (onChange) {
-      onChange(newValue);
-    }
-  };
-
-  return (
-    <div className={className}>
-      <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"
-        min={min}
-        max={max}
-        step={step}
-      />
-    </div>
-  );
-};
-export default Slider;
diff --git a/demo/ts/components/theme-builder/tailwind.css b/demo/ts/components/theme-builder/tailwind.css
deleted file mode 100644
index 87a75ca86..000000000
--- a/demo/ts/components/theme-builder/tailwind.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  html {
-    font-family: "Roboto", system-ui, sans-serif;
-  }
-}
diff --git a/demo/ts/components/theme-builder/utils.ts b/demo/ts/components/theme-builder/utils.ts
deleted file mode 100644
index 44fd0449e..000000000
--- a/demo/ts/components/theme-builder/utils.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { VictoryThemeDefinition } from "victory-core";
-
-export const setNestedConfigValue = (
-  config: VictoryThemeDefinition,
-  paths: string | string[],
-  value: unknown,
-) => {
-  const updatedConfig = { ...config };
-  const pathsArray = Array.isArray(paths) ? paths : [paths];
-
-  pathsArray.forEach((path) => {
-    const pathArray = path.split(".");
-    pathArray.reduce((acc, key, i) => {
-      if (i === pathArray.length - 1) {
-        acc[key] = value;
-      } else {
-        acc[key] = { ...acc[key] };
-      }
-      return acc[key];
-    }, updatedConfig);
-  });
-
-  return updatedConfig;
-};
-
-export const getConfigValue = (
-  config: VictoryThemeDefinition,
-  path: string | string[],
-  defaultValue?: unknown,
-) => {
-  const pathString = Array.isArray(path) ? path[0] : path;
-  if (!pathString) return undefined;
-  const pathArray = pathString.split(".");
-  return pathArray.reduce((acc, key) => {
-    return acc && acc[key] ? acc[key] : defaultValue || undefined;
-  }, config);
-};
diff --git a/demo/ts/index.html b/demo/ts/index.html
deleted file mode 100644
index bc28f1d23..000000000
--- a/demo/ts/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <!--[if lt IE 9]>
-      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
-    <![endif]-->
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <title>Demo (Typescript)</title>
-    <meta name="description" content="" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <style type="text/css">
-      * {
-        box-sizing: border-box;
-      }
-      body {
-        margin: 0;
-      }
-      .tile {
-        display: block;
-        float: left;
-        width: 100px;
-        height: 100px;
-        margin: 20px;
-      }
-      .tile img {
-        display: block;
-        width: 100px;
-        height: 100px;
-      }
-      .demo {
-        width: 80%;
-        margin: auto;
-        position: relative;
-      }
-    </style>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <!--[if lt IE 8]>
-      <p class="browsehappy">
-        You are using an <strong>outdated</strong> browser. Please
-        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
-        your experience.
-      </p>
-    <![endif]-->
-    <div id="content">
-      <h3>Loading...</h3>
-    </div>
-    <script type="text/javascript" src="assets/main.js"></script>
-  </body>
-</html>
diff --git a/demo/ts/tsconfig.json b/demo/ts/tsconfig.json
deleted file mode 100644
index aedc2136d..000000000
--- a/demo/ts/tsconfig.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "paths": {
-      "victory*": ["../../packages/victory*"],
-    }
-  }
-}

From 819e55f1ce42da109dc974a5e50c3df5a4dd3050 Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Thu, 21 Nov 2024 16:25:31 -0500
Subject: [PATCH 04/30] refactor: remove legacy deps from demo app

---
 package.json         |   8 -
 pnpm-lock.yaml       | 348 +------------------------------------------
 postcss.config.js    |   6 -
 tailwind.config.js   |  25 ----
 website/package.json |   1 +
 5 files changed, 6 insertions(+), 382 deletions(-)
 delete mode 100644 postcss.config.js
 delete mode 100644 tailwind.config.js

diff --git a/package.json b/package.json
index c9834d9bb..5ceeac033 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,6 @@
     "@types/prop-types": "^15.7.5",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
-    "autoprefixer": "^10.0.1",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-module-resolver": "5.0.0",
@@ -59,7 +58,6 @@
     "concurrently": "^9.0.1",
     "cpx2": "^4.2.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^7.1.2",
     "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jest": "^28.9.0",
@@ -80,24 +78,18 @@
     "metro-react-native-babel-preset": "0.77.0",
     "nps": "^5.9.0",
     "octokit": "^3.1.1",
-    "postcss": "^8",
-    "postcss-loader": "^8.1.1",
     "prettier": "^3.3.3",
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-hot-loader": "4.13.0",
     "react-icons": "^5.3.0",
-    "react-syntax-highlighter": "^15.6.1",
     "react-test-renderer": "^18.1.0",
     "remark-parse": "^7.0.1",
     "remark-stringify": "^7.0.3",
     "rimraf": "^3.0.2",
-    "sass": "^1.80.3",
     "seedrandom": "^3.0.5",
     "storybook": "^8.4.1",
-    "style-loader": "^4.0.0",
-    "tailwindcss": "^3.3.0",
     "ts-jest": "^29.2.5",
     "ts-loader": "^9.3.0",
     "ts-node": "^10.9.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a11555e11..2776516ab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,9 +98,6 @@ importers:
       '@types/react-dom':
         specifier: ^18.0.6
         version: 18.0.6
-      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)
@@ -125,9 +122,6 @@ importers:
       cross-env:
         specifier: ^7.0.3
         version: 7.0.3
-      css-loader:
-        specifier: ^7.1.2
-        version: 7.1.2(webpack@5.74.0)
       eslint:
         specifier: ^9.14.0
         version: 9.14.0(jiti@1.21.0)
@@ -188,12 +182,6 @@ 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: ^3.3.3
         version: 3.3.3
@@ -212,9 +200,6 @@ importers:
       react-icons:
         specifier: ^5.3.0
         version: 5.3.0(react@18.2.0)
-      react-syntax-highlighter:
-        specifier: ^15.6.1
-        version: 15.6.1(react@18.2.0)
       react-test-renderer:
         specifier: ^18.1.0
         version: 18.2.0(react@18.2.0)
@@ -227,21 +212,12 @@ importers:
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
-      sass:
-        specifier: ^1.80.3
-        version: 1.80.3
       seedrandom:
         specifier: ^3.0.5
         version: 3.0.5
       storybook:
         specifier: ^8.4.1
         version: 8.4.1(prettier@3.3.3)
-      style-loader:
-        specifier: ^4.0.0
-        version: 4.0.0(webpack@5.74.0)
-      tailwindcss:
-        specifier: ^3.3.0
-        version: 3.4.1(ts-node@10.9.1(@swc/core@1.8.0)(@types/node@18.6.1)(typescript@4.7.4))
       ts-jest:
         specifier: ^29.2.5
         version: 29.2.5(@babel/core@7.23.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.23.9))(esbuild@0.18.20)(jest@29.7.0(@types/node@18.6.1)(ts-node@10.9.1(@swc/core@1.8.0)(@types/node@18.6.1)(typescript@4.7.4)))(typescript@4.7.4)
@@ -1208,6 +1184,9 @@ importers:
       react-live:
         specifier: ^4.1.7
         version: 4.1.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react-syntax-highlighter:
+        specifier: ^15.6.1
+        version: 15.6.1(react@18.2.0)
       search-insights:
         specifier: ^2.17.1
         version: 2.17.2
@@ -3734,82 +3713,6 @@ packages:
     resolution: {integrity: sha512-8iG+/yza7hwz1RrQ7i7uGpK2/tuItZxZq1aTmeg2TNp2xTUB8F8lZF/FcZvyyAxT8tpDMF74TjFGCDACkf1kAQ==}
     engines: {node: '>= 18'}
 
-  '@parcel/watcher-android-arm64@2.4.1':
-    resolution: {integrity: sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [android]
-
-  '@parcel/watcher-darwin-arm64@2.4.1':
-    resolution: {integrity: sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@parcel/watcher-darwin-x64@2.4.1':
-    resolution: {integrity: sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@parcel/watcher-freebsd-x64@2.4.1':
-    resolution: {integrity: sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@parcel/watcher-linux-arm-glibc@2.4.1':
-    resolution: {integrity: sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm]
-    os: [linux]
-
-  '@parcel/watcher-linux-arm64-glibc@2.4.1':
-    resolution: {integrity: sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@parcel/watcher-linux-arm64-musl@2.4.1':
-    resolution: {integrity: sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@parcel/watcher-linux-x64-glibc@2.4.1':
-    resolution: {integrity: sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [linux]
-
-  '@parcel/watcher-linux-x64-musl@2.4.1':
-    resolution: {integrity: sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [linux]
-
-  '@parcel/watcher-win32-arm64@2.4.1':
-    resolution: {integrity: sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@parcel/watcher-win32-ia32@2.4.1':
-    resolution: {integrity: sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@parcel/watcher-win32-x64@2.4.1':
-    resolution: {integrity: sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [win32]
-
-  '@parcel/watcher@2.4.1':
-    resolution: {integrity: sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==}
-    engines: {node: '>= 10.0.0'}
-
   '@philpl/buble@0.19.7':
     resolution: {integrity: sha512-wKTA2DxAGEW+QffRQvOhRQ0VBiYU2h2p8Yc1oBNlqSKws48/8faxqKNIuub0q4iuyTuLwtB8EkwiKwhlfV1PBA==}
     hasBin: true
@@ -5158,13 +5061,6 @@ packages:
     resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
     engines: {node: '>= 4.0.0'}
 
-  autoprefixer@10.4.17:
-    resolution: {integrity: sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-
   autoprefixer@10.4.20:
     resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
     engines: {node: ^10 || ^12 || >=14}
@@ -5730,10 +5626,6 @@ packages:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
 
-  chokidar@4.0.1:
-    resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
-    engines: {node: '>= 14.16.0'}
-
   chownr@2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
@@ -6034,15 +5926,6 @@ packages:
       typescript:
         optional: true
 
-  cosmiconfig@9.0.0:
-    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      typescript: '>=4.9.5'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   cpx2@4.2.3:
     resolution: {integrity: sha512-UM7Iza+OM8FZ2ntTml/mdb3RmSLK5I2DqFqDdMihlGyKZCAAnDP++H973Oyc/2TQpEMtg5JHeRNfewclE330EA==}
     engines: {node: '>=14'}
@@ -6102,18 +5985,6 @@ packages:
     peerDependencies:
       webpack: ^5.0.0
 
-  css-loader@7.1.2:
-    resolution: {integrity: sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==}
-    engines: {node: '>= 18.12.0'}
-    peerDependencies:
-      '@rspack/core': 0.x || 1.x
-      webpack: ^5.27.0
-    peerDependenciesMeta:
-      '@rspack/core':
-        optional: true
-      webpack:
-        optional: true
-
   css-minimizer-webpack-plugin@5.0.1:
     resolution: {integrity: sha512-3caImjKFQkS+ws1TGcFn0V1HyDJFq1Euy589JlD6/3rV2kj+w7r5G9WDMgSHvpvXHNZ2calVypZWuEDQd9wfLg==}
     engines: {node: '>= 14.15.0'}
@@ -6671,10 +6542,6 @@ packages:
     resolution: {integrity: sha512-ObFo8v4rQJAE59M69QzwloxPZtd33TpYEIjtKD1rrFDcM1Gd7IkDxEBU+HriziN6HSHQnBJi8Dmy+JWkav5HKA==}
     engines: {node: '>=8'}
 
-  env-paths@2.2.1:
-    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
-    engines: {node: '>=6'}
-
   envinfo@7.13.0:
     resolution: {integrity: sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==}
     engines: {node: '>=4'}
@@ -7771,9 +7638,6 @@ packages:
     resolution: {integrity: sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg==}
     engines: {node: '>=0.10.0'}
 
-  immutable@4.3.7:
-    resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
-
   import-fresh@2.0.0:
     resolution: {integrity: sha512-eZ5H8rcgYazHbKC3PG4ClHNykCSxtAhxSSEM+2mb+7evD2CKF5V7c0dNum7AdpDh0ZdICwZY9sRSn8f+KH96sg==}
     engines: {node: '>=4'}
@@ -9295,9 +9159,6 @@ packages:
   node-abort-controller@3.1.1:
     resolution: {integrity: sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==}
 
-  node-addon-api@7.1.1:
-    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
-
   node-dir@0.1.17:
     resolution: {integrity: sha512-tmPX422rYgofd4epzrNoOXiE8XFZYOcCq1vD7MAXCDO+O+zndlA2ztdKKMa+EeuBG5tHETpr4ml4RGgpqDCCAg==}
     engines: {node: '>= 0.10.5'}
@@ -9818,19 +9679,6 @@ packages:
       postcss: ^7.0.0 || ^8.0.1
       webpack: ^5.0.0
 
-  postcss-loader@8.1.1:
-    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
-
   postcss-merge-idents@6.0.3:
     resolution: {integrity: sha512-1oIoAsODUs6IHQZkLQGO15uGEbK3EAl5wi9SS8hs45VgsxQfMnxvt+L+zIr7ifZFIH14cfAeVe2uCTa+SPRa3g==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -10016,10 +9864,6 @@ packages:
     peerDependencies:
       postcss: ^8.4.31
 
-  postcss@8.4.33:
-    resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
-    engines: {node: ^10 || ^12 || >=14}
-
   postcss@8.4.47:
     resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -10446,10 +10290,6 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  readdirp@4.0.2:
-    resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
-    engines: {node: '>= 14.16.0'}
-
   reading-time@1.5.0:
     resolution: {integrity: sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==}
 
@@ -10731,6 +10571,7 @@ packages:
 
   rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
   rtl-detect@1.1.2:
@@ -10767,11 +10608,6 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sass@1.80.3:
-    resolution: {integrity: sha512-ptDWyVmDMVielpz/oWy3YP3nfs7LpJTHIJZboMVs8GEC9eUmtZTZhMHlTW98wY4aEorDfjN38+Wr/XjskFWcfA==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
   sax@1.2.4:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
 
@@ -11261,12 +11097,6 @@ packages:
     peerDependencies:
       webpack: ^5.0.0
 
-  style-loader@4.0.0:
-    resolution: {integrity: sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==}
-    engines: {node: '>= 18.12.0'}
-    peerDependencies:
-      webpack: ^5.27.0
-
   style-to-object@0.4.4:
     resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==}
 
@@ -11346,11 +11176,6 @@ packages:
     resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
-  tailwindcss@3.4.1:
-    resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
   tailwindcss@3.4.14:
     resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
     engines: {node: '>=14.0.0'}
@@ -16992,62 +16817,6 @@ snapshots:
       '@octokit/webhooks-types': 7.1.0
       aggregate-error: 3.1.0
 
-  '@parcel/watcher-android-arm64@2.4.1':
-    optional: true
-
-  '@parcel/watcher-darwin-arm64@2.4.1':
-    optional: true
-
-  '@parcel/watcher-darwin-x64@2.4.1':
-    optional: true
-
-  '@parcel/watcher-freebsd-x64@2.4.1':
-    optional: true
-
-  '@parcel/watcher-linux-arm-glibc@2.4.1':
-    optional: true
-
-  '@parcel/watcher-linux-arm64-glibc@2.4.1':
-    optional: true
-
-  '@parcel/watcher-linux-arm64-musl@2.4.1':
-    optional: true
-
-  '@parcel/watcher-linux-x64-glibc@2.4.1':
-    optional: true
-
-  '@parcel/watcher-linux-x64-musl@2.4.1':
-    optional: true
-
-  '@parcel/watcher-win32-arm64@2.4.1':
-    optional: true
-
-  '@parcel/watcher-win32-ia32@2.4.1':
-    optional: true
-
-  '@parcel/watcher-win32-x64@2.4.1':
-    optional: true
-
-  '@parcel/watcher@2.4.1':
-    dependencies:
-      detect-libc: 1.0.3
-      is-glob: 4.0.3
-      micromatch: 4.0.5
-      node-addon-api: 7.1.1
-    optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.4.1
-      '@parcel/watcher-darwin-arm64': 2.4.1
-      '@parcel/watcher-darwin-x64': 2.4.1
-      '@parcel/watcher-freebsd-x64': 2.4.1
-      '@parcel/watcher-linux-arm-glibc': 2.4.1
-      '@parcel/watcher-linux-arm64-glibc': 2.4.1
-      '@parcel/watcher-linux-arm64-musl': 2.4.1
-      '@parcel/watcher-linux-x64-glibc': 2.4.1
-      '@parcel/watcher-linux-x64-musl': 2.4.1
-      '@parcel/watcher-win32-arm64': 2.4.1
-      '@parcel/watcher-win32-ia32': 2.4.1
-      '@parcel/watcher-win32-x64': 2.4.1
-
   '@philpl/buble@0.19.7':
     dependencies:
       acorn: 6.4.2
@@ -18979,16 +18748,6 @@ snapshots:
 
   at-least-node@1.0.0: {}
 
-  autoprefixer@10.4.17(postcss@8.4.33):
-    dependencies:
-      browserslist: 4.22.2
-      caniuse-lite: 1.0.30001580
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.0.0
-      postcss: 8.4.33
-      postcss-value-parser: 4.2.0
-
   autoprefixer@10.4.20(postcss@8.4.47):
     dependencies:
       browserslist: 4.24.2
@@ -19925,10 +19684,6 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.2
 
-  chokidar@4.0.1:
-    dependencies:
-      readdirp: 4.0.2
-
   chownr@2.0.0: {}
 
   chromatic@11.16.4: {}
@@ -20211,15 +19966,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.2.2
 
-  cosmiconfig@9.0.0(typescript@4.7.4):
-    dependencies:
-      env-paths: 2.2.1
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      parse-json: 5.2.0
-    optionalDependencies:
-      typescript: 4.7.4
-
   cpx2@4.2.3:
     dependencies:
       debounce: 1.2.1
@@ -20323,19 +20069,6 @@ snapshots:
       semver: 7.6.3
       webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
-  css-loader@7.1.2(webpack@5.74.0):
-    dependencies:
-      icss-utils: 5.1.0(postcss@8.4.47)
-      postcss: 8.4.47
-      postcss-modules-extract-imports: 3.1.0(postcss@8.4.47)
-      postcss-modules-local-by-default: 4.0.5(postcss@8.4.47)
-      postcss-modules-scope: 3.2.0(postcss@8.4.47)
-      postcss-modules-values: 4.0.0(postcss@8.4.47)
-      postcss-value-parser: 4.2.0
-      semver: 7.5.4
-    optionalDependencies:
-      webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
-
   css-minimizer-webpack-plugin@5.0.1(clean-css@5.3.3)(esbuild@0.18.20)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
@@ -20873,8 +20606,6 @@ snapshots:
 
   env-editor@0.4.2: {}
 
-  env-paths@2.2.1: {}
-
   envinfo@7.13.0: {}
 
   eol@0.9.1: {}
@@ -22351,8 +22082,6 @@ snapshots:
 
   immutable@3.8.2: {}
 
-  immutable@4.3.7: {}
-
   import-fresh@2.0.0:
     dependencies:
       caller-path: 2.0.0
@@ -24446,8 +24175,6 @@ snapshots:
 
   node-abort-controller@3.1.1: {}
 
-  node-addon-api@7.1.1: {}
-
   node-dir@0.1.17:
     dependencies:
       minimatch: 3.1.2
@@ -24959,14 +24686,6 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.4.47
 
-  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.1(@swc/core@1.8.0)(@types/node@18.6.1)(typescript@4.7.4)):
-    dependencies:
-      lilconfig: 3.1.1
-      yaml: 2.4.0
-    optionalDependencies:
-      postcss: 8.4.47
-      ts-node: 10.9.1(@swc/core@1.8.0)(@types/node@18.6.1)(typescript@4.7.4)
-
   postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.1(@swc/core@1.8.0)(@types/node@22.8.7)(typescript@5.2.2)):
     dependencies:
       lilconfig: 3.1.1
@@ -24985,17 +24704,6 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  postcss-loader@8.1.1(postcss@8.4.33)(typescript@4.7.4)(webpack@5.74.0):
-    dependencies:
-      cosmiconfig: 9.0.0(typescript@4.7.4)
-      jiti: 1.21.0
-      postcss: 8.4.33
-      semver: 7.5.4
-    optionalDependencies:
-      webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
-    transitivePeerDependencies:
-      - typescript
-
   postcss-merge-idents@6.0.3(postcss@8.4.47):
     dependencies:
       cssnano-utils: 4.0.2(postcss@8.4.47)
@@ -25165,12 +24873,6 @@ snapshots:
     dependencies:
       postcss: 8.4.47
 
-  postcss@8.4.33:
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-
   postcss@8.4.47:
     dependencies:
       nanoid: 3.3.7
@@ -25700,7 +25402,7 @@ snapshots:
 
   react-syntax-highlighter@15.6.1(react@18.2.0):
     dependencies:
-      '@babel/runtime': 7.24.0
+      '@babel/runtime': 7.26.0
       highlight.js: 10.7.3
       highlightjs-vue: 1.0.0
       lowlight: 1.20.0
@@ -25768,8 +25470,6 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  readdirp@4.0.2: {}
-
   reading-time@1.5.0: {}
 
   readline-sync@1.4.10: {}
@@ -26200,13 +25900,6 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sass@1.80.3:
-    dependencies:
-      '@parcel/watcher': 2.4.1
-      chokidar: 4.0.1
-      immutable: 4.3.7
-      source-map-js: 1.0.2
-
   sax@1.2.4: {}
 
   saxes@6.0.0:
@@ -26757,10 +26450,6 @@ snapshots:
     dependencies:
       webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
-  style-loader@4.0.0(webpack@5.74.0):
-    dependencies:
-      webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
-
   style-to-object@0.4.4:
     dependencies:
       inline-style-parser: 0.1.1
@@ -26850,33 +26539,6 @@ snapshots:
       '@pkgr/core': 0.1.1
       tslib: 2.8.1
 
-  tailwindcss@3.4.1(ts-node@10.9.1(@swc/core@1.8.0)(@types/node@18.6.1)(typescript@4.7.4)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.5.3
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.0
-      lilconfig: 2.1.0
-      micromatch: 4.0.5
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.47
-      postcss-import: 15.1.0(postcss@8.4.47)
-      postcss-js: 4.0.1(postcss@8.4.47)
-      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.1(@swc/core@1.8.0)(@types/node@18.6.1)(typescript@4.7.4))
-      postcss-nested: 6.0.1(postcss@8.4.47)
-      postcss-selector-parser: 6.0.15
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
-
   tailwindcss@3.4.14(ts-node@10.9.1(@swc/core@1.8.0)(@types/node@22.8.7)(typescript@5.2.2)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index 12a703d90..000000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 02c3005b4..000000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/** @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: [],
-};
diff --git a/website/package.json b/website/package.json
index fc228e2a1..f8e65eb11 100644
--- a/website/package.json
+++ b/website/package.json
@@ -34,6 +34,7 @@
     "react-dom": "^18.0.0",
     "react-icons": "^5.3.0",
     "react-live": "^4.1.7",
+    "react-syntax-highlighter": "^15.6.1",
     "search-insights": "^2.17.1"
   },
   "devDependencies": {

From 772d86dfd7998b914459a81908455a91ea816f1f Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Thu, 21 Nov 2024 16:45:19 -0500
Subject: [PATCH 05/30] refactor: remove demo overrides from eslint

---
 eslint.config.mjs | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index f72dedd3d..709f828b1 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -137,17 +137,6 @@ export default tseslint.config(
     },
   },
 
-  // Overrides for Demos
-  {
-    files: ["**/demo/**/*.{ts,tsx}"],
-    rules: {
-      "no-magic-numbers": "off",
-      "no-restricted-imports": "off",
-      "react/no-multi-comp": "off",
-      "@typescript-eslint/no-empty-object-type": "off",
-    },
-  },
-
   // Overrides for Storybook
   {
     files: ["**/stories/**/*.ts", "**/stories/**/*.stories.tsx"],

From 1a9195a2bbd47909872ac0a7ced3abdf71ecf804 Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Thu, 21 Nov 2024 16:56:29 -0500
Subject: [PATCH 06/30] refactor(theme-builder): use prism-react-renderer
 instead of react-syntax-highlighter

---
 pnpm-lock.yaml                                | 515 +++++++-----------
 website/package.json                          |   1 -
 .../themes/_components/config-preview.tsx     |  21 +-
 3 files changed, 215 insertions(+), 322 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2776516ab..4164749d5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1132,28 +1132,28 @@ importers:
         version: 5.12.0
       '@docusaurus/core':
         specifier: ^3.5.2
-        version: 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+        version: 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/plugin-content-docs':
         specifier: ^3.5.2
-        version: 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+        version: 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/plugin-google-gtag':
         specifier: ^3.5.2
-        version: 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+        version: 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/plugin-google-tag-manager':
         specifier: ^3.5.2
-        version: 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+        version: 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/preset-classic':
         specifier: ^3.5.2
-        version: 3.6.0(@algolia/client-search@5.12.0)(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)(webpack-cli@4.10.0)
+        version: 3.6.0(@algolia/client-search@5.12.0)(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)
       '@docusaurus/theme-common':
         specifier: ^3.5.2
-        version: 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+        version: 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/theme-live-codeblock':
         specifier: ^3.5.2
-        version: 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+        version: 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@easyops-cn/docusaurus-search-local':
         specifier: ^0.44.5
-        version: 0.44.6(@docusaurus/theme-common@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+        version: 0.44.6(@docusaurus/theme-common@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@mdx-js/react':
         specifier: ^3.0.0
         version: 3.1.0(@types/react@18.0.15)(react@18.2.0)
@@ -1184,9 +1184,6 @@ importers:
       react-live:
         specifier: ^4.1.7
         version: 4.1.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react-syntax-highlighter:
-        specifier: ^15.6.1
-        version: 15.6.1(react@18.2.0)
       search-insights:
         specifier: ^2.17.1
         version: 2.17.2
@@ -1196,13 +1193,13 @@ importers:
         version: 4.1.1(d3-scale@3.3.0)(d3-time@1.1.0)
       '@docusaurus/module-type-aliases':
         specifier: ^3.5.2
-        version: 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+        version: 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@docusaurus/tsconfig':
         specifier: ^3.5.2
         version: 3.6.0
       '@docusaurus/types':
         specifier: ^3.5.2
-        version: 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+        version: 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/react':
         specifier: ^18.0.0
         version: 18.0.15
@@ -4436,9 +4433,6 @@ packages:
   '@types/hammerjs@2.0.41':
     resolution: {integrity: sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==}
 
-  '@types/hast@2.3.10':
-    resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
-
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
@@ -5764,9 +5758,6 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
-  comma-separated-tokens@1.0.8:
-    resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
-
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
@@ -6922,9 +6913,6 @@ packages:
   fastq@1.13.0:
     resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
 
-  fault@1.0.4:
-    resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
-
   fault@2.0.1:
     resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
 
@@ -7423,9 +7411,6 @@ packages:
   hast-util-from-parse5@8.0.1:
     resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
 
-  hast-util-parse-selector@2.2.5:
-    resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
-
   hast-util-parse-selector@4.0.0:
     resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
 
@@ -7447,9 +7432,6 @@ packages:
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
-  hastscript@6.0.0:
-    resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
-
   hastscript@8.0.0:
     resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
 
@@ -7479,12 +7461,6 @@ packages:
     resolution: {integrity: sha512-cnN7bQUm65UWOy6cbGcCcZ3rpwW8Q/j4OP5aWRhEry4Z2t2aR1cjrbp0BS+KiBN0smvP1caBgAuxutvyvJILzQ==}
     engines: {node: '>=8'}
 
-  highlight.js@10.7.3:
-    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
-
-  highlightjs-vue@1.0.0:
-    resolution: {integrity: sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==}
-
   history@4.10.1:
     resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==}
 
@@ -8568,9 +8544,6 @@ packages:
     resolution: {integrity: sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  lowlight@1.20.0:
-    resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
-
   lru-cache@10.0.1:
     resolution: {integrity: sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==}
     engines: {node: 14 || >=16.14}
@@ -9445,9 +9418,6 @@ packages:
   parse-entities@1.2.2:
     resolution: {integrity: sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==}
 
-  parse-entities@2.0.0:
-    resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
-
   parse-entities@4.0.1:
     resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==}
 
@@ -9921,10 +9891,6 @@ packages:
     peerDependencies:
       react: '>=16.0.0'
 
-  prismjs@1.27.0:
-    resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
-    engines: {node: '>=6'}
-
   prismjs@1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
@@ -9968,9 +9934,6 @@ packages:
   proper-lockfile@4.1.2:
     resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
 
-  property-information@5.6.0:
-    resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
-
   property-information@6.4.1:
     resolution: {integrity: sha512-OHYtXfu5aI2sS2LWFSN5rgJjrQ4pCy8i1jubJLe2QvMF8JJ++HXTUIVWFLfXJoaOfvYYjk2SN8J2wFUWIGXT4w==}
 
@@ -10247,11 +10210,6 @@ packages:
     peerDependencies:
       react: ^16.0.0 || ^17.0.0 || ^18.0.0
 
-  react-syntax-highlighter@15.6.1:
-    resolution: {integrity: sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg==}
-    peerDependencies:
-      react: '>= 0.14.0'
-
   react-test-renderer@18.2.0:
     resolution: {integrity: sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==}
     peerDependencies:
@@ -10340,9 +10298,6 @@ packages:
     resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==}
     engines: {node: '>= 0.4'}
 
-  refractor@3.6.0:
-    resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
-
   regenerate-unicode-properties@10.1.1:
     resolution: {integrity: sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==}
     engines: {node: '>=4'}
@@ -10873,9 +10828,6 @@ packages:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     deprecated: Please use @jridgewell/sourcemap-codec instead
 
-  space-separated-tokens@1.1.5:
-    resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
-
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
@@ -15001,7 +14953,7 @@ snapshots:
     transitivePeerDependencies:
       - '@algolia/client-search'
 
-  '@docusaurus/babel@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/babel@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/generator': 7.26.2
@@ -15014,7 +14966,7 @@ snapshots:
       '@babel/runtime-corejs3': 7.26.0
       '@babel/traverse': 7.25.9
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       babel-plugin-dynamic-import-node: 2.3.3
       fs-extra: 11.2.0
       tslib: 2.8.1
@@ -15027,33 +14979,33 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/bundler@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/bundler@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
       '@babel/core': 7.26.0
-      '@docusaurus/babel': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/babel': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       '@docusaurus/cssnano-preset': 3.6.0
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       autoprefixer: 10.4.20(postcss@8.4.47)
-      babel-loader: 9.2.1(@babel/core@7.26.0)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      babel-loader: 9.2.1(@babel/core@7.26.0)(webpack@5.96.1(@swc/core@1.8.0))
       clean-css: 5.3.3
-      copy-webpack-plugin: 11.0.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
-      css-loader: 6.9.1(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
-      css-minimizer-webpack-plugin: 5.0.1(clean-css@5.3.3)(esbuild@0.18.20)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      copy-webpack-plugin: 11.0.0(webpack@5.96.1(@swc/core@1.8.0))
+      css-loader: 6.9.1(webpack@5.96.1(@swc/core@1.8.0))
+      css-minimizer-webpack-plugin: 5.0.1(clean-css@5.3.3)(webpack@5.96.1(@swc/core@1.8.0))
       cssnano: 6.1.2(postcss@8.4.47)
-      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0))
       html-minifier-terser: 7.2.0
-      mini-css-extract-plugin: 2.9.2(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
-      null-loader: 4.0.1(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      mini-css-extract-plugin: 2.9.2(webpack@5.96.1(@swc/core@1.8.0))
+      null-loader: 4.0.1(webpack@5.96.1(@swc/core@1.8.0))
       postcss: 8.4.47
-      postcss-loader: 7.3.4(postcss@8.4.47)(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
-      react-dev-utils: 12.0.1(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
-      terser-webpack-plugin: 5.3.10(@swc/core@1.8.0)(esbuild@0.18.20)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      postcss-loader: 7.3.4(postcss@8.4.47)(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0))
+      react-dev-utils: 12.0.1(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0))
+      terser-webpack-plugin: 5.3.10(@swc/core@1.8.0)(webpack@5.96.1(@swc/core@1.8.0))
       tslib: 2.8.1
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)))(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
-      webpackbar: 6.0.1(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)))(webpack@5.96.1(@swc/core@1.8.0))
+      webpack: 5.96.1(@swc/core@1.8.0)
+      webpackbar: 6.0.1(webpack@5.96.1(@swc/core@1.8.0))
     transitivePeerDependencies:
       - '@parcel/css'
       - '@swc/core'
@@ -15071,15 +15023,15 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/core@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/core@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
-      '@docusaurus/babel': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/bundler': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/babel': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/bundler': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       '@mdx-js/react': 3.1.0(@types/react@18.0.15)(react@18.2.0)
       boxen: 6.2.1
       chalk: 4.1.2
@@ -15095,17 +15047,17 @@ snapshots:
       eval: 0.1.8
       fs-extra: 11.2.0
       html-tags: 3.3.1
-      html-webpack-plugin: 5.6.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      html-webpack-plugin: 5.6.0(webpack@5.96.1(@swc/core@1.8.0))
       leven: 3.1.0
       lodash: 4.17.21
       p-map: 4.0.0
       prompts: 2.4.2
       react: 18.2.0
-      react-dev-utils: 12.0.1(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      react-dev-utils: 12.0.1(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0))
       react-dom: 18.2.0(react@18.2.0)
       react-helmet-async: 1.3.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-loadable: '@docusaurus/react-loadable@6.0.0(react@18.2.0)'
-      react-loadable-ssr-addon-v5-slorber: 1.0.1(@docusaurus/react-loadable@6.0.0(react@18.2.0))(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      react-loadable-ssr-addon-v5-slorber: 1.0.1(@docusaurus/react-loadable@6.0.0(react@18.2.0))(webpack@5.96.1(@swc/core@1.8.0))
       react-router: 5.3.4(react@18.2.0)
       react-router-config: 5.1.1(react-router@5.3.4(react@18.2.0))(react@18.2.0)
       react-router-dom: 5.3.4(react@18.2.0)
@@ -15115,9 +15067,9 @@ snapshots:
       shelljs: 0.8.5
       tslib: 2.8.1
       update-notifier: 6.0.2
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
       webpack-bundle-analyzer: 4.10.2
-      webpack-dev-server: 4.15.2(debug@4.3.4)(webpack-cli@4.10.0)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      webpack-dev-server: 4.15.2(debug@4.3.4)(webpack@5.96.1(@swc/core@1.8.0))
       webpack-merge: 6.0.1
     transitivePeerDependencies:
       - '@docusaurus/faster'
@@ -15152,16 +15104,16 @@ snapshots:
       chalk: 4.1.2
       tslib: 2.8.1
 
-  '@docusaurus/mdx-loader@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/mdx-loader@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       '@mdx-js/mdx': 3.1.0(acorn@6.4.2)
       '@slorber/remark-comment': 1.0.0
       escape-html: 1.0.3
       estree-util-value-to-estree: 3.2.1
-      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0))
       fs-extra: 11.2.0
       image-size: 1.1.1
       mdast-util-mdx: 3.0.0
@@ -15177,9 +15129,9 @@ snapshots:
       tslib: 2.8.1
       unified: 11.0.4
       unist-util-visit: 5.0.0
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)))(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)))(webpack@5.96.1(@swc/core@1.8.0))
       vfile: 6.0.1
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
     transitivePeerDependencies:
       - '@docusaurus/types'
       - '@swc/core'
@@ -15190,9 +15142,9 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/module-type-aliases@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)':
+  '@docusaurus/module-type-aliases@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/history': 4.7.11
       '@types/react': 18.0.15
       '@types/react-router-config': 5.0.11
@@ -15209,17 +15161,17 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/plugin-content-blog@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/plugin-content-blog@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       cheerio: 1.0.0-rc.12
       feed: 4.2.2
       fs-extra: 11.2.0
@@ -15231,7 +15183,7 @@ snapshots:
       tslib: 2.8.1
       unist-util-visit: 5.0.0
       utility-types: 3.11.0
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
     transitivePeerDependencies:
       - '@docusaurus/faster'
       - '@mdx-js/react'
@@ -15253,17 +15205,17 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/module-type-aliases': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/module-type-aliases': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       '@types/react-router-config': 5.0.11
       combine-promises: 1.2.0
       fs-extra: 11.2.0
@@ -15273,7 +15225,7 @@ snapshots:
       react-dom: 18.2.0(react@18.2.0)
       tslib: 2.8.1
       utility-types: 3.11.0
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
     transitivePeerDependencies:
       - '@docusaurus/faster'
       - '@mdx-js/react'
@@ -15295,18 +15247,18 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-content-pages@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/plugin-content-pages@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       fs-extra: 11.2.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       tslib: 2.8.1
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
     transitivePeerDependencies:
       - '@docusaurus/faster'
       - '@mdx-js/react'
@@ -15328,11 +15280,11 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-debug@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/plugin-debug@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       fs-extra: 11.2.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -15359,11 +15311,11 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-google-analytics@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/plugin-google-analytics@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       tslib: 2.8.1
@@ -15388,11 +15340,11 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-google-gtag@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/plugin-google-gtag@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       '@types/gtag.js': 0.0.12
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -15418,11 +15370,11 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-google-tag-manager@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/plugin-google-tag-manager@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       tslib: 2.8.1
@@ -15447,14 +15399,14 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-sitemap@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/plugin-sitemap@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       fs-extra: 11.2.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -15481,21 +15433,21 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/preset-classic@3.6.0(@algolia/client-search@5.12.0)(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)(webpack-cli@4.10.0)':
-    dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/plugin-content-blog': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/plugin-content-pages': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/plugin-debug': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/plugin-google-analytics': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/plugin-google-gtag': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/plugin-google-tag-manager': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/plugin-sitemap': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/theme-classic': 3.6.0(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/theme-search-algolia': 3.6.0(@algolia/client-search@5.12.0)(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+  '@docusaurus/preset-classic@3.6.0(@algolia/client-search@5.12.0)(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)':
+    dependencies:
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/plugin-content-blog': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/plugin-content-pages': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/plugin-debug': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/plugin-google-analytics': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/plugin-google-gtag': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/plugin-google-tag-manager': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/plugin-sitemap': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/theme-classic': 3.6.0(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/theme-search-algolia': 3.6.0(@algolia/client-search@5.12.0)(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
@@ -15527,21 +15479,21 @@ snapshots:
       '@types/react': 18.0.15
       react: 18.2.0
 
-  '@docusaurus/theme-classic@3.6.0(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/theme-classic@3.6.0(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/module-type-aliases': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
-      '@docusaurus/plugin-content-blog': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/plugin-content-pages': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/module-type-aliases': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/plugin-content-blog': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/plugin-content-pages': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/theme-translations': 3.6.0
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       '@mdx-js/react': 3.1.0(@types/react@18.0.15)(react@18.2.0)
       clsx: 2.1.1
       copy-text-to-clipboard: 3.2.0
@@ -15578,13 +15530,13 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/theme-common@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/theme-common@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
-      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/module-type-aliases': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
-      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
+      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/module-type-aliases': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
       '@types/history': 4.7.11
       '@types/react': 18.0.15
       '@types/react-router-config': 5.0.11
@@ -15605,12 +15557,12 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/theme-live-codeblock@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/theme-live-codeblock@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/theme-translations': 3.6.0
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       '@philpl/buble': 0.19.7
       clsx: 2.1.1
       fs-extra: 11.2.0
@@ -15641,16 +15593,16 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/theme-search-algolia@3.6.0(@algolia/client-search@5.12.0)(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/theme-search-algolia@3.6.0(@algolia/client-search@5.12.0)(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)':
     dependencies:
       '@docsearch/react': 3.6.3(@algolia/client-search@5.12.0)(@types/react@18.0.15)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/theme-translations': 3.6.0
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       algoliasearch: 4.24.0
       algoliasearch-helper: 3.22.5(algoliasearch@4.24.0)
       clsx: 2.1.1
@@ -15693,7 +15645,7 @@ snapshots:
 
   '@docusaurus/tsconfig@3.6.0': {}
 
-  '@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)':
+  '@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@mdx-js/mdx': 3.1.0(acorn@6.4.2)
       '@types/history': 4.7.11
@@ -15704,7 +15656,7 @@ snapshots:
       react-dom: 18.2.0(react@18.2.0)
       react-helmet-async: 1.3.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       utility-types: 3.11.0
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
       webpack-merge: 5.10.0
     transitivePeerDependencies:
       - '@swc/core'
@@ -15714,17 +15666,17 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/utils-common@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))':
+  '@docusaurus/utils-common@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))':
     dependencies:
       tslib: 2.8.1
     optionalDependencies:
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
 
-  '@docusaurus/utils-validation@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/utils-validation@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)':
     dependencies:
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
       fs-extra: 11.2.0
       joi: 17.13.3
       js-yaml: 4.1.0
@@ -15739,13 +15691,13 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/utils@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@docusaurus/utils@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)':
     dependencies:
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
       '@svgr/webpack': 8.1.0(typescript@5.2.2)
       escape-string-regexp: 4.0.0
-      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0))
       fs-extra: 11.2.0
       github-slugger: 1.5.0
       globby: 11.1.0
@@ -15758,11 +15710,11 @@ snapshots:
       resolve-pathname: 3.0.0
       shelljs: 0.8.5
       tslib: 2.8.1
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)))(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)))(webpack@5.96.1(@swc/core@1.8.0))
       utility-types: 3.11.0
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
     optionalDependencies:
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -15776,14 +15728,14 @@ snapshots:
       cssesc: 3.0.0
       immediate: 3.3.0
 
-  '@easyops-cn/docusaurus-search-local@0.44.6(@docusaurus/theme-common@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
+  '@easyops-cn/docusaurus-search-local@0.44.6(@docusaurus/theme-common@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
     dependencies:
-      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
       '@docusaurus/theme-translations': 3.6.0
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
       '@easyops-cn/autocomplete.js': 0.38.1
       '@node-rs/jieba': 1.10.4
       cheerio: 1.0.0
@@ -18024,10 +17976,6 @@ snapshots:
 
   '@types/hammerjs@2.0.41': {}
 
-  '@types/hast@2.3.10':
-    dependencies:
-      '@types/unist': 2.0.6
-
   '@types/hast@3.0.4':
     dependencies:
       '@types/unist': 3.0.2
@@ -18876,12 +18824,12 @@ snapshots:
       schema-utils: 4.0.0
       webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
-  babel-loader@9.2.1(@babel/core@7.26.0)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  babel-loader@9.2.1(@babel/core@7.26.0)(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       '@babel/core': 7.26.0
       find-cache-dir: 4.0.0
       schema-utils: 4.0.0
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
 
   babel-messages@6.23.0:
     dependencies:
@@ -19804,8 +19752,6 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
-  comma-separated-tokens@1.0.8: {}
-
   comma-separated-tokens@2.0.3: {}
 
   command-exists@1.2.9: {}
@@ -19908,7 +19854,7 @@ snapshots:
 
   copy-text-to-clipboard@3.2.0: {}
 
-  copy-webpack-plugin@11.0.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  copy-webpack-plugin@11.0.0(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       fast-glob: 3.3.2
       glob-parent: 6.0.2
@@ -19916,7 +19862,7 @@ snapshots:
       normalize-path: 3.0.0
       schema-utils: 4.0.0
       serialize-javascript: 6.0.0
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
 
   core-js-compat@3.35.1:
     dependencies:
@@ -20057,7 +20003,7 @@ snapshots:
       semver: 7.6.3
       webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
-  css-loader@6.9.1(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  css-loader@6.9.1(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       icss-utils: 5.1.0(postcss@8.4.47)
       postcss: 8.4.47
@@ -20067,9 +20013,9 @@ snapshots:
       postcss-modules-values: 4.0.0(postcss@8.4.47)
       postcss-value-parser: 4.2.0
       semver: 7.6.3
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
 
-  css-minimizer-webpack-plugin@5.0.1(clean-css@5.3.3)(esbuild@0.18.20)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  css-minimizer-webpack-plugin@5.0.1(clean-css@5.3.3)(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       cssnano: 6.1.2(postcss@8.4.47)
@@ -20077,10 +20023,9 @@ snapshots:
       postcss: 8.4.47
       schema-utils: 4.2.0
       serialize-javascript: 6.0.2
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
     optionalDependencies:
       clean-css: 5.3.3
-      esbuild: 0.18.20
 
   css-select@4.3.0:
     dependencies:
@@ -21196,10 +21141,6 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
-  fault@1.0.4:
-    dependencies:
-      format: 0.2.2
-
   fault@2.0.1:
     dependencies:
       format: 0.2.2
@@ -21246,11 +21187,11 @@ snapshots:
     dependencies:
       flat-cache: 4.0.1
 
-  file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.1.1
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
 
   filelist@1.0.4:
     dependencies:
@@ -21390,7 +21331,7 @@ snapshots:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
-  fork-ts-checker-webpack-plugin@6.5.3(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  fork-ts-checker-webpack-plugin@6.5.3(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       '@babel/code-frame': 7.26.2
       '@types/json-schema': 7.0.15
@@ -21406,7 +21347,7 @@ snapshots:
       semver: 7.6.3
       tapable: 1.1.3
       typescript: 5.2.2
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
     optionalDependencies:
       eslint: 9.14.0(jiti@1.21.0)
 
@@ -21755,8 +21696,6 @@ snapshots:
       vfile-location: 5.0.3
       web-namespaces: 2.0.1
 
-  hast-util-parse-selector@2.2.5: {}
-
   hast-util-parse-selector@4.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -21846,14 +21785,6 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
 
-  hastscript@6.0.0:
-    dependencies:
-      '@types/hast': 2.3.10
-      comma-separated-tokens: 1.0.8
-      hast-util-parse-selector: 2.2.5
-      property-information: 5.6.0
-      space-separated-tokens: 1.1.5
-
   hastscript@8.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -21886,10 +21817,6 @@ snapshots:
     dependencies:
       source-map: 0.7.4
 
-  highlight.js@10.7.3: {}
-
-  highlightjs-vue@1.0.0: {}
-
   history@4.10.1:
     dependencies:
       '@babel/runtime': 7.26.0
@@ -21958,7 +21885,7 @@ snapshots:
     optionalDependencies:
       webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
-  html-webpack-plugin@5.6.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  html-webpack-plugin@5.6.0(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       '@types/html-minifier-terser': 6.1.0
       html-minifier-terser: 6.1.0
@@ -21966,7 +21893,7 @@ snapshots:
       pretty-error: 4.0.0
       tapable: 2.2.1
     optionalDependencies:
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
 
   htmlparser2@6.1.0:
     dependencies:
@@ -23174,11 +23101,6 @@ snapshots:
 
   lowercase-keys@3.0.0: {}
 
-  lowlight@1.20.0:
-    dependencies:
-      fault: 1.0.4
-      highlight.js: 10.7.3
-
   lru-cache@10.0.1: {}
 
   lru-cache@4.1.5:
@@ -24060,11 +23982,11 @@ snapshots:
 
   min-indent@1.0.1: {}
 
-  mini-css-extract-plugin@2.9.2(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  mini-css-extract-plugin@2.9.2(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       schema-utils: 4.0.0
       tapable: 2.2.1
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
 
   minimalistic-assert@1.0.1: {}
 
@@ -24253,11 +24175,11 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  null-loader@4.0.1(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  null-loader@4.0.1(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.1.1
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
 
   nullthrows@1.1.1: {}
 
@@ -24488,15 +24410,6 @@ snapshots:
       is-decimal: 1.0.4
       is-hexadecimal: 1.0.4
 
-  parse-entities@2.0.0:
-    dependencies:
-      character-entities: 1.2.4
-      character-entities-legacy: 1.1.4
-      character-reference-invalid: 1.1.4
-      is-alphanumerical: 1.0.4
-      is-decimal: 1.0.4
-      is-hexadecimal: 1.0.4
-
   parse-entities@4.0.1:
     dependencies:
       '@types/unist': 2.0.6
@@ -24694,13 +24607,13 @@ snapshots:
       postcss: 8.4.47
       ts-node: 10.9.1(@swc/core@1.8.0)(@types/node@22.8.7)(typescript@5.2.2)
 
-  postcss-loader@7.3.4(postcss@8.4.47)(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  postcss-loader@7.3.4(postcss@8.4.47)(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       cosmiconfig: 8.3.6(typescript@5.2.2)
       jiti: 1.21.0
       postcss: 8.4.47
       semver: 7.6.3
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
     transitivePeerDependencies:
       - typescript
 
@@ -24935,8 +24848,6 @@ snapshots:
       clsx: 2.1.1
       react: 18.2.0
 
-  prismjs@1.27.0: {}
-
   prismjs@1.29.0: {}
 
   private@0.1.8: {}
@@ -24974,10 +24885,6 @@ snapshots:
       retry: 0.12.0
       signal-exit: 3.0.7
 
-  property-information@5.6.0:
-    dependencies:
-      xtend: 4.0.2
-
   property-information@6.4.1: {}
 
   proto-list@1.2.4: {}
@@ -25072,7 +24979,7 @@ snapshots:
 
   react-deep-force-update@1.1.2: {}
 
-  react-dev-utils@12.0.1(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  react-dev-utils@12.0.1(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       '@babel/code-frame': 7.26.2
       address: 1.2.0
@@ -25083,7 +24990,7 @@ snapshots:
       escape-string-regexp: 4.0.0
       filesize: 8.0.7
       find-up: 5.0.0
-      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0))
       global-modules: 2.0.0
       globby: 11.1.0
       gzip-size: 6.0.0
@@ -25098,7 +25005,7 @@ snapshots:
       shell-quote: 1.8.1
       strip-ansi: 6.0.1
       text-table: 0.2.0
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
     optionalDependencies:
       typescript: 5.2.2
     transitivePeerDependencies:
@@ -25205,11 +25112,11 @@ snapshots:
       sucrase: 3.35.0
       use-editable: 2.3.3(react@18.2.0)
 
-  react-loadable-ssr-addon-v5-slorber@1.0.1(@docusaurus/react-loadable@6.0.0(react@18.2.0))(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  react-loadable-ssr-addon-v5-slorber@1.0.1(@docusaurus/react-loadable@6.0.0(react@18.2.0))(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       '@babel/runtime': 7.26.0
       react-loadable: '@docusaurus/react-loadable@6.0.0(react@18.2.0)'
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
 
   react-native-gesture-handler@2.16.2(react-native@0.73.5(@babel/core@7.23.9)(@babel/preset-env@7.23.9(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0):
     dependencies:
@@ -25400,16 +25307,6 @@ snapshots:
       react: 18.2.0
       react-is: 18.2.0
 
-  react-syntax-highlighter@15.6.1(react@18.2.0):
-    dependencies:
-      '@babel/runtime': 7.26.0
-      highlight.js: 10.7.3
-      highlightjs-vue: 1.0.0
-      lowlight: 1.20.0
-      prismjs: 1.29.0
-      react: 18.2.0
-      refractor: 3.6.0
-
   react-test-renderer@18.2.0(react@18.2.0):
     dependencies:
       react: 18.2.0
@@ -25548,12 +25445,6 @@ snapshots:
       globalthis: 1.0.4
       which-builtin-type: 1.1.4
 
-  refractor@3.6.0:
-    dependencies:
-      hastscript: 6.0.0
-      parse-entities: 2.0.0
-      prismjs: 1.27.0
-
   regenerate-unicode-properties@10.1.1:
     dependencies:
       regenerate: 1.4.2
@@ -26202,8 +26093,6 @@ snapshots:
 
   sourcemap-codec@1.4.8: {}
 
-  space-separated-tokens@1.1.5: {}
-
   space-separated-tokens@2.0.2: {}
 
   spawn-command-with-kill@1.0.2:
@@ -26608,17 +26497,16 @@ snapshots:
       ansi-escapes: 4.3.2
       supports-hyperlinks: 2.3.0
 
-  terser-webpack-plugin@5.3.10(@swc/core@1.8.0)(esbuild@0.18.20)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  terser-webpack-plugin@5.3.10(@swc/core@1.8.0)(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
       schema-utils: 3.1.1
       serialize-javascript: 6.0.2
       terser: 5.31.1
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
     optionalDependencies:
       '@swc/core': 1.8.0
-      esbuild: 0.18.20
 
   terser-webpack-plugin@5.3.3(@swc/core@1.8.0)(esbuild@0.18.20)(webpack@5.74.0):
     dependencies:
@@ -26795,7 +26683,7 @@ snapshots:
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
       '@types/node': 22.8.7
-      acorn: 8.8.0
+      acorn: 8.14.0
       acorn-walk: 8.3.0
       arg: 4.1.3
       create-require: 1.1.1
@@ -27119,14 +27007,14 @@ snapshots:
 
   url-join@4.0.0: {}
 
-  url-loader@4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)))(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  url-loader@4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)))(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       loader-utils: 2.0.4
       mime-types: 2.1.35
       schema-utils: 3.1.1
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
     optionalDependencies:
-      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0))
 
   url-parse@1.5.10:
     dependencies:
@@ -27306,14 +27194,14 @@ snapshots:
       schema-utils: 4.0.0
       webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
-  webpack-dev-middleware@5.3.4(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  webpack-dev-middleware@5.3.4(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       colorette: 2.0.19
       memfs: 3.5.3
       mime-types: 2.1.35
       range-parser: 1.2.1
       schema-utils: 4.0.0
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
 
   webpack-dev-middleware@6.1.3(webpack@5.74.0):
     dependencies:
@@ -27325,7 +27213,7 @@ snapshots:
     optionalDependencies:
       webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
-  webpack-dev-server@4.15.2(debug@4.3.4)(webpack-cli@4.10.0)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  webpack-dev-server@4.15.2(debug@4.3.4)(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       '@types/bonjour': 3.5.10
       '@types/connect-history-api-fallback': 1.3.5
@@ -27355,11 +27243,10 @@ snapshots:
       serve-index: 1.9.1
       sockjs: 0.3.24
       spdy: 4.0.2
-      webpack-dev-middleware: 5.3.4(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      webpack-dev-middleware: 5.3.4(webpack@5.96.1(@swc/core@1.8.0))
       ws: 8.16.0
     optionalDependencies:
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
-      webpack-cli: 4.10.0(webpack-dev-server@4.9.3)(webpack@5.74.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
     transitivePeerDependencies:
       - bufferutil
       - debug
@@ -27467,7 +27354,7 @@ snapshots:
       - esbuild
       - uglify-js
 
-  webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0):
+  webpack@5.96.1(@swc/core@1.8.0):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.6
@@ -27489,17 +27376,15 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(@swc/core@1.8.0)(esbuild@0.18.20)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      terser-webpack-plugin: 5.3.10(@swc/core@1.8.0)(webpack@5.96.1(@swc/core@1.8.0))
       watchpack: 2.4.2
       webpack-sources: 3.2.3
-    optionalDependencies:
-      webpack-cli: 4.10.0(webpack-dev-server@4.9.3)(webpack@5.74.0)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
       - uglify-js
 
-  webpackbar@6.0.1(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
+  webpackbar@6.0.1(webpack@5.96.1(@swc/core@1.8.0)):
     dependencies:
       ansi-escapes: 4.3.2
       chalk: 4.1.2
@@ -27508,7 +27393,7 @@ snapshots:
       markdown-table: 2.0.0
       pretty-time: 1.1.0
       std-env: 3.7.0
-      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack: 5.96.1(@swc/core@1.8.0)
       wrap-ansi: 7.0.0
 
   websocket-driver@0.7.4:
diff --git a/website/package.json b/website/package.json
index f8e65eb11..fc228e2a1 100644
--- a/website/package.json
+++ b/website/package.json
@@ -34,7 +34,6 @@
     "react-dom": "^18.0.0",
     "react-icons": "^5.3.0",
     "react-live": "^4.1.7",
-    "react-syntax-highlighter": "^15.6.1",
     "search-insights": "^2.17.1"
   },
   "devDependencies": {
diff --git a/website/src/pages/themes/_components/config-preview.tsx b/website/src/pages/themes/_components/config-preview.tsx
index 07f847611..00fc318b6 100644
--- a/website/src/pages/themes/_components/config-preview.tsx
+++ b/website/src/pages/themes/_components/config-preview.tsx
@@ -1,9 +1,7 @@
 import React from "react";
 import Button from "./button";
-import { Prism, SyntaxHighlighterProps } from "react-syntax-highlighter";
 import { VictoryThemeDefinition } from "victory";
-
-const SyntaxHighlighter = Prism as any as React.FC<SyntaxHighlighterProps>;
+import { Highlight } from "prism-react-renderer";
 
 type ConfigPreviewProps = {
   config: VictoryThemeDefinition;
@@ -38,12 +36,23 @@ const ConfigPreview = ({ config, onClose }: ConfigPreviewProps) => {
         &times;
       </button>
       <h2>Theme Config Preview</h2>
-      <SyntaxHighlighter
+      <Highlight
+        code={JSON.stringify(config, null, 2)}
         language="json"
         className="flex-1 overflow-auto border border-grayscale-300 p-3 bg-grayscale-100"
       >
-        {JSON.stringify(config, null, 2)}
-      </SyntaxHighlighter>
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <pre className={className} style={style}>
+            {tokens.map((line, i) => (
+              <div {...getLineProps({ line, key: i })} key={i}>
+                {line.map((token, key) => (
+                  <span {...getTokenProps({ token, key })} key={key} />
+                ))}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
       <div className="flex items-center justify-end gap-3 mt-5">
         {copyStatus && (
           <span className="text-grayscale-400 text-xs italic">

From 0b235c2c0d33df5e30a74e02b2f208cf7722a97a Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Thu, 21 Nov 2024 17:07:11 -0500
Subject: [PATCH 07/30] refactor: add theme builder to nav and remove demos
 from linter

---
 package.json                       |   6 +-
 website/docusaurus.config.ts       |   5 +
 website/src/pages/themes/index.tsx | 287 +++++++++++++++--------------
 3 files changed, 155 insertions(+), 143 deletions(-)

diff --git a/package.json b/package.json
index 5ceeac033..1c887f19c 100644
--- a/package.json
+++ b/package.json
@@ -272,12 +272,11 @@
       ]
     },
     "lint:root": {
-      "command": "eslint --color *.js scripts config demo stories test website",
+      "command": "eslint --color *.js scripts config stories test website",
       "files": [
         "*.js",
         "scripts",
         "config",
-        "demo",
         "stories",
         "test",
         "website",
@@ -289,12 +288,11 @@
       ]
     },
     "lint:root:fix": {
-      "command": "eslint --color --fix *.js scripts config demo stories test website",
+      "command": "eslint --color --fix *.js scripts config stories test website",
       "files": [
         "*.js",
         "scripts",
         "config",
-        "demo",
         "stories",
         "test",
         "website",
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index a064531b4..35fe7b465 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -147,6 +147,11 @@ const config: Config = {
           position: "left",
           label: "DOCS",
         },
+        {
+          to: "/themes",
+          label: "THEMES",
+          position: "left",
+        },
         {
           href: "https://github.com/FormidableLabs/victory",
           "aria-label": "GitHub Repository",
diff --git a/website/src/pages/themes/index.tsx b/website/src/pages/themes/index.tsx
index 08c2b9614..76e1360ce 100644
--- a/website/src/pages/themes/index.tsx
+++ b/website/src/pages/themes/index.tsx
@@ -19,6 +19,7 @@ import Button from "./_components/button";
 import ConfigMapper from "./_components/config-mapper";
 import { setNestedConfigValue } from "./_utils";
 import optionsConfig from "./_config";
+import Layout from "@theme/Layout";
 
 export type ThemeOption = {
   name: string;
@@ -125,154 +126,162 @@ const ThemeBuilder = () => {
   };
 
   return (
-    <div className="flex flex-row flex-wrap items-start justify-start w-full h-lvh theme-builder">
-      <aside className="relative flex flex-col h-full w-[380px] border-r border-grayscale-300">
-        <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-grayscale-400">
-            Select a theme to begin customizing.
-          </p>
-          <Select
-            id="theme-select"
-            value={baseTheme?.name || ""}
-            onChange={handleThemeSelect}
-            options={themeOptions}
-            label="Base Theme"
-          />
-          {customThemeConfig && (
-            <section>
-              <h2 className="text-lg font-bold my-4">Customization Options</h2>
-              <ConfigMapper
-                themeConfig={customThemeConfig}
-                activeColorScale={activeColorScale}
-                handleColorScaleChange={handleColorScaleChange}
-                updateThemeConfig={updateCustomThemeConfig}
-              />
-            </section>
-          )}
-        </div>
-        <footer className="p-4 border-t border-grayscale-300 sticky bottom-0 flex justify-end bg-white">
-          <Button
-            onClick={handleThemeConfigPreviewOpen}
-            ariaLabel="Get Theme Code"
-            disabled={!customThemeConfig}
-          >
-            Get Theme Code
-          </Button>
-        </footer>
-      </aside>
-      <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
-        {customThemeConfig && (
-          <div className="max-w-screen-xl w-full py-4 px-10">
-            <h2 className="text-xl font-bold mb-4">Example Charts</h2>
-            <fieldset>
-              <div className="flex items-center gap-4 mb-4">
-                <input
-                  type="checkbox"
-                  id="show-tooltips"
-                  className="form-checkbox h-5 w-5 text-primary"
-                  checked={showTooltips}
-                  onChange={() => setShowTooltips(!showTooltips)}
+    <Layout>
+      <div className="flex flex-row flex-wrap items-start justify-start w-full h-lvh theme-builder">
+        <aside className="relative flex flex-col h-full w-[380px] border-r border-grayscale-300">
+          <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-grayscale-400">
+              Select a theme to begin customizing.
+            </p>
+            <Select
+              id="theme-select"
+              value={baseTheme?.name || ""}
+              onChange={handleThemeSelect}
+              options={themeOptions}
+              label="Base Theme"
+            />
+            {customThemeConfig && (
+              <section>
+                <h2 className="text-lg font-bold my-4">
+                  Customization Options
+                </h2>
+                <ConfigMapper
+                  themeConfig={customThemeConfig}
+                  activeColorScale={activeColorScale}
+                  handleColorScaleChange={handleColorScaleChange}
+                  updateThemeConfig={updateCustomThemeConfig}
                 />
-                <label htmlFor="show-tooltips">
-                  Show tooltips instead of labels
-                </label>
-              </div>
-            </fieldset>
-            <div className="grid grid-cols-2 gap-10">
-              <div>
-                <h3 className="text-base font-bold mb-3">Stacked Area Chart</h3>
-                <VictoryChart
-                  theme={customThemeConfig}
-                  domainPadding={20}
-                  style={chartStyle}
-                >
-                  <VictoryAxis label="X Axis" />
-                  <VictoryAxis dependentAxis label="Y Axis" />
-                  <VictoryStack
-                    colorScale={activeColorScale}
-                    aria-label="Victory Stack Demo"
+              </section>
+            )}
+          </div>
+          <footer className="p-4 border-t border-grayscale-300 sticky bottom-0 flex justify-end bg-white">
+            <Button
+              onClick={handleThemeConfigPreviewOpen}
+              ariaLabel="Get Theme Code"
+              disabled={!customThemeConfig}
+            >
+              Get Theme Code
+            </Button>
+          </footer>
+        </aside>
+        <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
+          {customThemeConfig && (
+            <div className="max-w-screen-xl w-full py-4 px-10">
+              <h2 className="text-xl font-bold mb-4">Example Charts</h2>
+              <fieldset>
+                <div className="flex items-center gap-4 mb-4">
+                  <input
+                    type="checkbox"
+                    id="show-tooltips"
+                    className="form-checkbox h-5 w-5 text-primary"
+                    checked={showTooltips}
+                    onChange={() => setShowTooltips(!showTooltips)}
+                  />
+                  <label htmlFor="show-tooltips">
+                    Show tooltips instead of labels
+                  </label>
+                </div>
+              </fieldset>
+              <div className="grid grid-cols-2 gap-10">
+                <div>
+                  <h3 className="text-base font-bold mb-3">
+                    Stacked Area Chart
+                  </h3>
+                  <VictoryChart
+                    theme={customThemeConfig}
+                    domainPadding={20}
+                    style={chartStyle}
                   >
-                    {[...Array(NUM_STACKS)].map((_, i) => (
-                      <VictoryArea
-                        data={sampleStackData}
-                        key={i}
-                        labels={() => undefined}
-                      />
-                    ))}
-                  </VictoryStack>
-                </VictoryChart>
-              </div>
-              <div>
-                <h3 className="text-base font-bold mb-3">Stacked Bar Chart</h3>
-                <VictoryChart
-                  theme={customThemeConfig}
-                  domainPadding={20}
-                  style={chartStyle}
-                >
-                  <VictoryAxis label="X Axis" />
-                  <VictoryAxis dependentAxis label="Y Axis" />
-                  <VictoryStack
-                    colorScale={activeColorScale}
-                    aria-label="Victory Stack Demo"
+                    <VictoryAxis label="X Axis" />
+                    <VictoryAxis dependentAxis label="Y Axis" />
+                    <VictoryStack
+                      colorScale={activeColorScale}
+                      aria-label="Victory Stack Demo"
+                    >
+                      {[...Array(NUM_STACKS)].map((_, i) => (
+                        <VictoryArea
+                          data={sampleStackData}
+                          key={i}
+                          labels={() => undefined}
+                        />
+                      ))}
+                    </VictoryStack>
+                  </VictoryChart>
+                </div>
+                <div>
+                  <h3 className="text-base font-bold mb-3">
+                    Stacked Bar Chart
+                  </h3>
+                  <VictoryChart
+                    theme={customThemeConfig}
+                    domainPadding={20}
+                    style={chartStyle}
                   >
-                    {[...Array(NUM_STACKS)].map((_, i) => (
-                      <VictoryBar
-                        data={sampleStackData}
-                        key={i}
-                        labels={({ datum }) =>
-                          showTooltips ? datum.y : undefined
-                        }
-                        {...(showTooltips && {
-                          labelComponent: <VictoryTooltip />,
-                        })}
-                      />
-                    ))}
-                  </VictoryStack>
-                </VictoryChart>
-              </div>
-              {optionsConfig.map(
-                ({ title, content: Content, hasVictoryChart = true }, i) =>
-                  Content && (
-                    <div key={i}>
-                      <h3 className="text-base font-bold mb-3">{title}</h3>
-                      {hasVictoryChart ? (
-                        <VictoryChart
-                          theme={customThemeConfig}
-                          domainPadding={20}
-                          style={chartStyle}
-                        >
-                          {Content({
+                    <VictoryAxis label="X Axis" />
+                    <VictoryAxis dependentAxis label="Y Axis" />
+                    <VictoryStack
+                      colorScale={activeColorScale}
+                      aria-label="Victory Stack Demo"
+                    >
+                      {[...Array(NUM_STACKS)].map((_, i) => (
+                        <VictoryBar
+                          data={sampleStackData}
+                          key={i}
+                          labels={({ datum }) =>
+                            showTooltips ? datum.y : undefined
+                          }
+                          {...(showTooltips && {
+                            labelComponent: <VictoryTooltip />,
+                          })}
+                        />
+                      ))}
+                    </VictoryStack>
+                  </VictoryChart>
+                </div>
+                {optionsConfig.map(
+                  ({ title, content: Content, hasVictoryChart = true }, i) =>
+                    Content && (
+                      <div key={i}>
+                        <h3 className="text-base font-bold mb-3">{title}</h3>
+                        {hasVictoryChart ? (
+                          <VictoryChart
+                            theme={customThemeConfig}
+                            domainPadding={20}
+                            style={chartStyle}
+                          >
+                            {Content({
+                              labels: ({ datum }) => datum.y || datum.x,
+                              ...(showTooltips && {
+                                labelComponent: <VictoryTooltip />,
+                              }),
+                            })}
+                          </VictoryChart>
+                        ) : (
+                          Content({
                             labels: ({ datum }) => datum.y || datum.x,
+                            style: chartStyle,
+                            theme: customThemeConfig,
                             ...(showTooltips && {
                               labelComponent: <VictoryTooltip />,
                             }),
-                          })}
-                        </VictoryChart>
-                      ) : (
-                        Content({
-                          labels: ({ datum }) => datum.y || datum.x,
-                          style: chartStyle,
-                          theme: customThemeConfig,
-                          ...(showTooltips && {
-                            labelComponent: <VictoryTooltip />,
-                          }),
-                        })
-                      )}
-                    </div>
-                  ),
-              )}
+                          })
+                        )}
+                      </div>
+                    ),
+                )}
+              </div>
             </div>
-          </div>
+          )}
+        </main>
+        {showThemeConfigPreview && customThemeConfig && (
+          <ConfigPreview
+            config={customThemeConfig}
+            onClose={handleThemeConfigPreviewClose}
+          />
         )}
-      </main>
-      {showThemeConfigPreview && customThemeConfig && (
-        <ConfigPreview
-          config={customThemeConfig}
-          onClose={handleThemeConfigPreviewClose}
-        />
-      )}
-    </div>
+      </div>
+    </Layout>
   );
 };
 

From 4541fc4cac9aa8eb6cec7bc319fffaf798c86bde Mon Sep 17 00:00:00 2001
From: Stef <ramenhog@gmail.com>
Date: Tue, 26 Nov 2024 14:40:32 -0500
Subject: [PATCH 08/30] Feat: add theme builder base and box plot chart
 controls (#2989)

---
 .../pages/themes/_components/color-picker.tsx |   2 +-
 website/src/pages/themes/_config.tsx          | 188 +++++++++++++++++-
 website/tailwind.config.ts                    |   8 +-
 3 files changed, 190 insertions(+), 8 deletions(-)

diff --git a/website/src/pages/themes/_components/color-picker.tsx b/website/src/pages/themes/_components/color-picker.tsx
index 3115c37a7..525f63348 100644
--- a/website/src/pages/themes/_components/color-picker.tsx
+++ b/website/src/pages/themes/_components/color-picker.tsx
@@ -28,7 +28,7 @@ const ColorPicker = ({
   };
 
   return (
-    <fieldset className={className}>
+    <fieldset className={clsx("p-0", className)}>
       {label && (
         <label className="block mb-1 text-sm text-grayscale-900 dark:text-white font-bold">
           {label}
diff --git a/website/src/pages/themes/_config.tsx b/website/src/pages/themes/_config.tsx
index 345e0c45e..0bd11f36b 100644
--- a/website/src/pages/themes/_config.tsx
+++ b/website/src/pages/themes/_config.tsx
@@ -4,6 +4,7 @@ import {
   VictoryArea,
   VictoryAxis,
   VictoryBar,
+  VictoryBoxPlot,
   VictoryCandlestick,
   VictoryErrorBar,
   VictoryHistogram,
@@ -130,7 +131,7 @@ const getBaseLabelsConfig = (
   },
   {
     type: "slider",
-    label: "Padding",
+    label: "Text Padding",
     min: 0,
     max: 50,
     unit: "px",
@@ -139,7 +140,7 @@ const getBaseLabelsConfig = (
   },
   {
     type: "colorPicker",
-    label: "Fill",
+    label: "Font Color",
     path: getPath(basePath, "fill"),
     default: defaultFill,
   },
@@ -160,6 +161,78 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
     type: "section",
     title: "Global Settings",
     fields: [
+      {
+        type: "slider",
+        label: "Width",
+        min: 0,
+        max: 500,
+        unit: "px",
+        default: 350,
+        path: [
+          "chart.width",
+          "axis.width",
+          "area.width",
+          "bar.width",
+          "boxplot.width",
+          "candlestick.width",
+          "errorbar.width",
+          "group.width",
+          "histogram.width",
+          "line.width",
+          "pie.width",
+          "scatter.width",
+          "stack.width",
+          "voronoi.width",
+        ],
+      },
+      {
+        type: "slider",
+        label: "Height",
+        min: 0,
+        max: 500,
+        unit: "px",
+        default: 350,
+        path: [
+          "chart.height",
+          "axis.height",
+          "area.height",
+          "bar.height",
+          "boxplot.height",
+          "candlestick.height",
+          "errorbar.height",
+          "group.height",
+          "histogram.height",
+          "line.height",
+          "pie.height",
+          "scatter.height",
+          "stack.height",
+          "voronoi.height",
+        ],
+      },
+      {
+        type: "slider",
+        label: "Padding",
+        min: 0,
+        max: 100,
+        unit: "px",
+        default: 50,
+        path: [
+          "chart.padding",
+          "axis.padding",
+          "area.padding",
+          "bar.padding",
+          "boxplot.padding",
+          "candlestick.padding",
+          "errorbar.padding",
+          "group.padding",
+          "histogram.padding",
+          "line.padding",
+          "pie.padding",
+          "scatter.padding",
+          "stack.padding",
+          "voronoi.padding",
+        ],
+      },
       {
         type: "section",
         label: "Labels",
@@ -178,6 +251,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
           "pie.style.labels",
           "scatter.style.labels",
           "voronoi.style.labels",
+          "boxplot.style.maxLabels",
+          "boxplot.style.medianLabels",
+          "boxplot.style.minLabels",
+          "boxplot.style.q1Labels",
+          "boxplot.style.q3Labels",
         ]),
       },
       {
@@ -468,6 +546,112 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       },
     ],
   },
+  {
+    type: "section",
+    title: "Box Plot",
+    content: (props) => (
+      <VictoryBoxPlot
+        {...props}
+        data={[
+          { x: 1, y: [1, 2, 3, 5, 8] },
+          { x: 2, y: [3, 2, 8, 10, 12] },
+          { x: 3, y: [2, 8, 6, 5, 10] },
+          { x: 4, y: [1, 3, 2, 9, 5] },
+          { x: 5, y: [3, 2, 9, 5, 7] },
+        ]}
+        labels
+        labelOrientation="right"
+      />
+    ),
+    fields: [
+      {
+        type: "section",
+        label: "Max",
+        fields: [
+          ...getBaseStrokeConfig("boxplot.style.max", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+          ...getBaseLabelsConfig("boxplot.style.maxLabels"),
+        ],
+      },
+      {
+        type: "section",
+        label: "Median",
+        fields: [
+          ...getBaseStrokeConfig("boxplot.style.median", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+          ...getBaseLabelsConfig("boxplot.style.medianLabels"),
+        ],
+      },
+      {
+        type: "section",
+        label: "Min",
+        fields: [
+          ...getBaseStrokeConfig("boxplot.style.min", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+          ...getBaseLabelsConfig("boxplot.style.minLabels"),
+        ],
+      },
+      {
+        type: "section",
+        label: "Q1",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            default: defaultFill,
+            path: "boxplot.style.q1.fill",
+          },
+          {
+            type: "slider",
+            label: "Border Radius",
+            min: 0,
+            max: 10,
+            step: 0.5,
+            default: 0,
+            path: "boxplot.q1.rx",
+          },
+          {
+            type: "slider",
+            label: "Stroke Width",
+            min: 0,
+            max: 5,
+            unit: "px",
+            default: 1,
+            path: "boxplot.style.q1.strokeWidth",
+          },
+          ...getBaseLabelsConfig("boxplot.style.q1Labels"),
+        ],
+      },
+      {
+        type: "section",
+        label: "Q3",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            default: defaultFill,
+            path: "boxplot.style.q3.fill",
+          },
+          {
+            type: "slider",
+            label: "Border Radius",
+            min: 0,
+            max: 10,
+            step: 0.5,
+            default: 0,
+            path: "boxplot.q3.rx",
+          },
+          ...getBaseLabelsConfig("boxplot.style.q3Labels"),
+        ],
+      },
+    ],
+  },
   {
     type: "section",
     title: "Candlestick Chart",
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
index 8b7236ff0..392402207 100644
--- a/website/tailwind.config.ts
+++ b/website/tailwind.config.ts
@@ -56,11 +56,9 @@ module.exports = {
       fontFamily: {
         sans: ["Inter, Helvetica, Arial, sans-serif"],
       },
-      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>\')',
-        },
+      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>\')',
       },
     },
   },

From d5f2b06d620842c8bf871e4243891053465ce543 Mon Sep 17 00:00:00 2001
From: Stef <ramenhog@gmail.com>
Date: Mon, 2 Dec 2024 09:34:01 -0500
Subject: [PATCH 09/30] feat: add color scale overrides and final polish
 (#2990)

---
 .../pages/themes/_components/accordion.tsx    |   2 +-
 .../pages/themes/_components/code-block.tsx   |  28 +++
 .../pages/themes/_components/color-picker.tsx | 155 +++++++++++------
 .../_components/color-scale-options.tsx       |   7 +-
 .../themes/_components/config-mapper.tsx      | 103 +----------
 .../themes/_components/config-preview.tsx     |  99 +++++++----
 .../src/pages/themes/_components/control.tsx  | 115 +++++++++++++
 .../src/pages/themes/_components/select.tsx   |   5 +-
 .../src/pages/themes/_components/slider.tsx   |   5 +-
 website/src/pages/themes/_config.tsx          | 160 +++++++++---------
 website/src/pages/themes/_utils.ts            |   2 +-
 website/src/pages/themes/index.tsx            |  50 +++---
 12 files changed, 430 insertions(+), 301 deletions(-)
 create mode 100644 website/src/pages/themes/_components/code-block.tsx
 create mode 100644 website/src/pages/themes/_components/control.tsx

diff --git a/website/src/pages/themes/_components/accordion.tsx b/website/src/pages/themes/_components/accordion.tsx
index 6db5aa0f9..513195249 100644
--- a/website/src/pages/themes/_components/accordion.tsx
+++ b/website/src/pages/themes/_components/accordion.tsx
@@ -27,7 +27,7 @@ const Accordion = ({
         <button
           type="button"
           className={clsx(
-            "bg-white flex items-center justify-between w-full px-5 py-3 text-sm font-bold rtl:text-right text-grayscale-500 border border-b-0 border-grayscale-300 gap-3 group-last:border-b",
+            "bg-white flex items-center justify-between w-full px-5 py-3 text-sm font-bold rtl:text-right text-grayscale-500 border border-b-0 border-grayscale-300 gap-3 group-last:border-b cursor-pointer",
             { "group-last:border-b-0": isOpen },
           )}
           aria-expanded="true"
diff --git a/website/src/pages/themes/_components/code-block.tsx b/website/src/pages/themes/_components/code-block.tsx
new file mode 100644
index 000000000..af15fb191
--- /dev/null
+++ b/website/src/pages/themes/_components/code-block.tsx
@@ -0,0 +1,28 @@
+import clsx from "clsx";
+import { Highlight } from "prism-react-renderer";
+import React from "react";
+
+type CodeBlockProps = {
+  code: string;
+  language: string;
+  className?: string;
+};
+
+const CodeBlock = ({ code, language, className: classes }: CodeBlockProps) => {
+  return (
+    <Highlight code={code} language={language}>
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre className={clsx(classes, className)} style={style}>
+          {tokens.map((line, i) => (
+            <div {...getLineProps({ line, key: i })} key={i}>
+              {line.map((token, key) => (
+                <span {...getTokenProps({ token, key })} key={key} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+};
+export default CodeBlock;
diff --git a/website/src/pages/themes/_components/color-picker.tsx b/website/src/pages/themes/_components/color-picker.tsx
index 525f63348..2d5a39492 100644
--- a/website/src/pages/themes/_components/color-picker.tsx
+++ b/website/src/pages/themes/_components/color-picker.tsx
@@ -1,16 +1,24 @@
 import React from "react";
 import { TiPencil } from "react-icons/ti";
 import clsx from "clsx";
+import Select from "./select";
 
 type ColorPickerProps = {
   label?: string;
   color: string;
   id: string;
-  onColorChange: (color: string) => void;
+  onColorChange: (color?: string) => void;
   showColorName?: boolean;
   className?: string;
 };
 
+const PLACEHOLDER_COLOR = "#000000";
+const DEFAULT_COLOR = undefined;
+enum ColorPickerOptions {
+  NONE = "none",
+  CUSTOM = "custom",
+}
+
 const ColorPicker = ({
   label,
   color,
@@ -20,6 +28,28 @@ const ColorPicker = ({
   className,
 }: ColorPickerProps) => {
   const [isPickerOpen, setIsPickerOpen] = React.useState(false);
+  const [colorOption, setColorOption] = React.useState<string | undefined>(
+    () => {
+      if (color === ColorPickerOptions.NONE || color === "transparent") {
+        return ColorPickerOptions.NONE;
+      }
+      if (color === DEFAULT_COLOR) {
+        return DEFAULT_COLOR;
+      }
+      return ColorPickerOptions.CUSTOM;
+    },
+  );
+
+  const handleColorOptionChange = (value?: string) => {
+    setColorOption(value);
+    if (value === ColorPickerOptions.NONE) {
+      onColorChange(ColorPickerOptions.NONE);
+    } else if (value === ColorPickerOptions.CUSTOM) {
+      onColorChange(PLACEHOLDER_COLOR);
+    } else {
+      onColorChange(DEFAULT_COLOR);
+    }
+  };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (onColorChange) {
@@ -34,65 +64,86 @@ const ColorPicker = ({
           {label}
         </label>
       )}
-      <div
-        className={clsx("relative inline-flex rounded-full group/swatch", {
-          "border-2 border-grayscale-300 p-0.5 cursor-pointer justify-between bg-grayscale-100":
-            showColorName,
-        })}
-      >
-        <div className="flex items-center">
-          <div className="relative">
-            <div
-              className={clsx(
-                "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-grayscale-300":
-                    !showColorName,
-                },
-                { "w-[30px] h-[30px] p-0.5": showColorName },
-              )}
-              style={{
-                color,
-              }}
+      <div className="flex items-center gap-2">
+        {showColorName && (
+          <div className="flex items-center my-2 flex-1">
+            <Select
+              id="color-option"
+              value={colorOption}
+              options={[
+                { label: "None", value: ColorPickerOptions.NONE },
+                { label: "Custom", value: ColorPickerOptions.CUSTOM },
+              ]}
+              onChange={handleColorOptionChange}
+              includeDefault
             />
-            {!showColorName && (
+          </div>
+        )}
+        {colorOption === ColorPickerOptions.CUSTOM && (
+          <div
+            className={clsx(
+              "relative inline-flex rounded-full group/swatch flex-1",
+              {
+                "border-2 border-grayscale-300 p-0.5 cursor-pointer justify-between bg-grayscale-100":
+                  showColorName,
+              },
+            )}
+          >
+            <div className="flex items-center">
+              <div className="relative">
+                <div
+                  className={clsx(
+                    "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-grayscale-300":
+                        !showColorName,
+                    },
+                    { "w-[30px] h-[30px] p-0.5": 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/swatch:opacity-100 ${
+                      isPickerOpen ? "opacity-100" : ""
+                    }`}
+                  >
+                    <TiPencil />
+                  </div>
+                )}
+              </div>
+              {showColorName && (
+                <span
+                  className={
+                    "text-sm font-medium text-grayscale-900 uppercase ml-2 cursor-pointer"
+                  }
+                >
+                  {color}
+                </span>
+              )}
+            </div>
+            {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/swatch:opacity-100 ${
-                  isPickerOpen ? "opacity-100" : ""
-                }`}
+                className={`text-grayscale-400 flex justify-center items-center text-xl rounded-full place-items-end ml-6 mr-1`}
               >
                 <TiPencil />
               </div>
             )}
-          </div>
-          {showColorName && (
-            <span
-              className={
-                "text-sm font-medium text-grayscale-900 uppercase ml-2 cursor-pointer"
-              }
-            >
-              {color}
-            </span>
-          )}
-        </div>
-        {showColorName && (
-          <div
-            className={`text-grayscale-400 flex justify-center items-center text-xl rounded-full place-items-end ml-6 mr-1`}
-          >
-            <TiPencil />
+            <input
+              id={id}
+              className={`absolute top-0 left-0 w-full h-full cursor-pointer opacity-0 z-10 group-hover/swatch:border-currentColor ${
+                isPickerOpen ? "border-currentColor" : ""
+              }`}
+              type="color"
+              value={color}
+              onChange={handleChange}
+              onFocus={() => setIsPickerOpen(true)}
+              onBlur={() => setIsPickerOpen(false)}
+            />
           </div>
         )}
-        <input
-          id={id}
-          className={`absolute top-0 left-0 w-full h-full cursor-pointer opacity-0 z-10 group-hover/swatch:border-currentColor ${
-            isPickerOpen ? "border-currentColor" : ""
-          }`}
-          type="color"
-          value={color}
-          onChange={handleChange}
-          onFocus={() => setIsPickerOpen(true)}
-          onBlur={() => setIsPickerOpen(false)}
-        />
       </div>
     </fieldset>
   );
diff --git a/website/src/pages/themes/_components/color-scale-options.tsx b/website/src/pages/themes/_components/color-scale-options.tsx
index 643ab830a..241c84b53 100644
--- a/website/src/pages/themes/_components/color-scale-options.tsx
+++ b/website/src/pages/themes/_components/color-scale-options.tsx
@@ -2,12 +2,7 @@ import React from "react";
 import Select from "./select";
 import ColorPicker from "./color-picker";
 import { ColorScalePropType, VictoryThemeDefinition } from "victory";
-
-export type ColorChangeArgs = {
-  newColor: string;
-  index: number;
-  colorScale: string;
-};
+import { ColorChangeArgs } from "./control";
 
 type ColorScaleOptionsProps = {
   palette?: VictoryThemeDefinition["palette"];
diff --git a/website/src/pages/themes/_components/config-mapper.tsx b/website/src/pages/themes/_components/config-mapper.tsx
index a8a757fa6..75a1b891c 100644
--- a/website/src/pages/themes/_components/config-mapper.tsx
+++ b/website/src/pages/themes/_components/config-mapper.tsx
@@ -1,106 +1,7 @@
 import React from "react";
 import optionsConfig from "../_config";
 import Accordion from "./accordion";
-import Select from "./select";
-import Slider from "./slider";
-import ColorPicker from "./color-picker";
-import ColorScaleOptions from "./color-scale-options";
-import { getConfigValue } from "../_utils";
-
-const ControlComponent = ({
-  type,
-  field,
-  themeConfig,
-  updateThemeConfig,
-  activeColorScale,
-  handleColorScaleChange,
-  className,
-}) => {
-  const handleColorChange = ({ newColor, index, colorScale }) => {
-    const updatedColors = themeConfig?.palette?.[colorScale]?.map((color, i) =>
-      i === index ? newColor : color,
-    );
-    updateThemeConfig(`palette.${colorScale}`, updatedColors);
-  };
-
-  const handleChange = (newValue) => {
-    updateThemeConfig(field.path, newValue);
-  };
-
-  const configValue = getConfigValue(themeConfig, field.path, field.default);
-  switch (type) {
-    case "colorScale":
-      return (
-        <ColorScaleOptions
-          palette={themeConfig?.palette}
-          activeColorScale={activeColorScale}
-          onColorChange={handleColorChange}
-          onColorScaleChange={handleColorScaleChange}
-        />
-      );
-    case "section":
-      return (
-        <section className="mb-6">
-          <h3 className="text-lg text-secondary font-bold mb-4">
-            {field.label}
-          </h3>
-          {field.fields.map((subField, i) => (
-            <ControlComponent
-              key={subField.label + i}
-              type={subField.type}
-              field={subField}
-              themeConfig={themeConfig}
-              updateThemeConfig={updateThemeConfig}
-              activeColorScale={activeColorScale}
-              handleColorScaleChange={handleColorScaleChange}
-              className={className}
-            />
-          ))}
-        </section>
-      );
-    case "slider":
-      return (
-        <Slider
-          id={field.label}
-          key={field.label}
-          label={field.label}
-          value={configValue as number}
-          unit={field.unit}
-          onChange={handleChange}
-          min={field.min}
-          max={field.max}
-          step={field.step}
-          className={className}
-        />
-      );
-    case "select":
-      return (
-        <Select
-          id={field.label}
-          key={field.label}
-          label={field.label}
-          value={configValue as string}
-          onChange={handleChange}
-          options={field.options}
-          className={className}
-        />
-      );
-    case "colorPicker":
-      return (
-        <ColorPicker
-          id={field.label}
-          key={field.label}
-          label={field.label}
-          color={configValue as string}
-          onColorChange={handleChange}
-          className={className}
-          showColorName
-        />
-      );
-    default:
-      return null;
-  }
-};
+import Control from "./control";
 
 const ConfigMapper = ({
   themeConfig,
@@ -119,7 +20,7 @@ const ConfigMapper = ({
         >
           {section.fields.map((field, i) => {
             return (
-              <ControlComponent
+              <Control
                 key={field.label + i}
                 type={field.type}
                 field={field}
diff --git a/website/src/pages/themes/_components/config-preview.tsx b/website/src/pages/themes/_components/config-preview.tsx
index 00fc318b6..9a88e550c 100644
--- a/website/src/pages/themes/_components/config-preview.tsx
+++ b/website/src/pages/themes/_components/config-preview.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Button from "./button";
 import { VictoryThemeDefinition } from "victory";
-import { Highlight } from "prism-react-renderer";
+import CodeBlock from "./code-block";
 
 type ConfigPreviewProps = {
   config: VictoryThemeDefinition;
@@ -28,40 +28,79 @@ const ConfigPreview = ({ config, onClose }: ConfigPreviewProps) => {
   };
 
   return (
-    <div className="fixed top-0 right-0 bottom-0 w-full p-10 z-[100] bg-white flex flex-col">
+    <div className="fixed top-[60px] right-0 w-full py-10 px-20 z-[100] bg-white flex flex-col overflow-y-auto min-h-screen">
       <button
         onClick={handleClose}
-        className="absolute top-3 right-3 bg-transparent border-0 text-xl"
+        className="absolute top-3 right-3 bg-transparent border-0 text-2xl cursor-pointer"
       >
         &times;
       </button>
-      <h2>Theme Config Preview</h2>
-      <Highlight
-        code={JSON.stringify(config, null, 2)}
-        language="json"
-        className="flex-1 overflow-auto border border-grayscale-300 p-3 bg-grayscale-100"
-      >
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <pre className={className} style={style}>
-            {tokens.map((line, i) => (
-              <div {...getLineProps({ line, key: i })} key={i}>
-                {line.map((token, key) => (
-                  <span {...getTokenProps({ token, key })} key={key} />
-                ))}
-              </div>
-            ))}
-          </pre>
-        )}
-      </Highlight>
-      <div className="flex items-center justify-end gap-3 mt-5">
-        {copyStatus && (
-          <span className="text-grayscale-400 text-xs italic">
-            {copyStatus}
-          </span>
-        )}
-        <Button onClick={handleCopyThemeConfig} ariaLabel="Copy to Clipboard">
-          Copy to Clipboard
-        </Button>
+      <div className="flex gap-20">
+        <section className="w-1/3">
+          <h1 className="text-2xl">Using Your Exported Victory Theme Config</h1>
+          <ol>
+            <li>
+              <strong>Copy the Config</strong>
+              <ul>
+                <li>
+                  Click the <em>Copy to Clipboard</em> button to copy the JSON
+                  theme configuration.
+                </li>
+              </ul>
+            </li>
+            <li>
+              <strong>Save the Exported Theme as a File</strong>
+              <ul>
+                <li>
+                  Save the copied JSON as a <code>.js</code> or{" "}
+                  <code>.json</code> file in your project, e.g.,{" "}
+                  <code>theme.js</code>.
+                </li>
+                <li>
+                  Import the theme in your app:
+                  <CodeBlock
+                    language="javascript"
+                    code={`import customTheme from './theme.js';`}
+                  />
+                </li>
+              </ul>
+            </li>
+            <li>
+              <strong>Apply to Victory Components</strong>
+              <ul>
+                <li>
+                  Use the <code>theme</code> prop on any Victory component:
+                  <CodeBlock
+                    language="javascript"
+                    code={`<VictoryChart theme={customTheme}>
+  {/* Your Victory components */}
+</VictoryChart>`}
+                  />
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </section>
+        <section className="flex-1">
+          <CodeBlock
+            language="json"
+            code={JSON.stringify(config, null, 2)}
+            className="min-h-[500px] max-h-[80vh]"
+          />
+          <div className="flex items-center justify-end gap-3 mt-5">
+            {copyStatus && (
+              <span className="text-grayscale-400 text-xs italic">
+                {copyStatus}
+              </span>
+            )}
+            <Button
+              onClick={handleCopyThemeConfig}
+              ariaLabel="Copy to Clipboard"
+            >
+              Copy to Clipboard
+            </Button>
+          </div>
+        </section>
       </div>
     </div>
   );
diff --git a/website/src/pages/themes/_components/control.tsx b/website/src/pages/themes/_components/control.tsx
new file mode 100644
index 000000000..18f565b84
--- /dev/null
+++ b/website/src/pages/themes/_components/control.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+import Select from "./select";
+import Slider from "./slider";
+import ColorPicker from "./color-picker";
+import ColorScaleOptions from "./color-scale-options";
+import { getConfigValue } from "../_utils";
+
+export type ColorChangeArgs = {
+  newColor?: string;
+  index: number;
+  colorScale: string;
+};
+
+const Control = ({
+  type,
+  field,
+  themeConfig,
+  updateThemeConfig,
+  activeColorScale,
+  handleColorScaleChange,
+  className,
+}) => {
+  const handleColorChange = ({
+    newColor,
+    index,
+    colorScale,
+  }: ColorChangeArgs) => {
+    const updatedColors = themeConfig?.palette?.[colorScale]?.map((color, i) =>
+      i === index ? newColor : color,
+    );
+    updateThemeConfig(`palette.${colorScale}`, updatedColors);
+  };
+
+  const handleChange = (newValue) => {
+    updateThemeConfig(field.path, newValue);
+  };
+
+  const configValue = getConfigValue(themeConfig, field.path, field.default);
+
+  switch (type) {
+    case "colorScale":
+      return (
+        <ColorScaleOptions
+          palette={themeConfig?.palette}
+          activeColorScale={activeColorScale}
+          onColorChange={handleColorChange}
+          onColorScaleChange={handleColorScaleChange}
+        />
+      );
+    case "section":
+      return (
+        <section className="mb-6">
+          <h3 className="text-lg text-secondary font-bold mb-4">
+            {field.label}
+          </h3>
+          {field.fields.map((subField, i) => (
+            <Control
+              key={subField.label + i}
+              type={subField.type}
+              field={subField}
+              themeConfig={themeConfig}
+              updateThemeConfig={updateThemeConfig}
+              activeColorScale={activeColorScale}
+              handleColorScaleChange={handleColorScaleChange}
+              className={className}
+            />
+          ))}
+        </section>
+      );
+    case "slider":
+      return (
+        <Slider
+          id={field.label}
+          key={field.label}
+          label={field.label}
+          value={configValue as number}
+          unit={field.unit}
+          onChange={handleChange}
+          min={field.min}
+          max={field.max}
+          step={field.step}
+          className={className}
+        />
+      );
+    case "select":
+      return (
+        <Select
+          id={field.label}
+          key={field.label}
+          label={field.label}
+          value={configValue as string}
+          onChange={handleChange}
+          options={field.options}
+          className={className}
+          includeDefault
+        />
+      );
+    case "colorPicker":
+      return (
+        <ColorPicker
+          id={field.label}
+          key={field.label}
+          label={field.label}
+          color={configValue as string}
+          onColorChange={handleChange}
+          className={className}
+          showColorName
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+export default Control;
diff --git a/website/src/pages/themes/_components/select.tsx b/website/src/pages/themes/_components/select.tsx
index f7d0e211a..c9296f39a 100644
--- a/website/src/pages/themes/_components/select.tsx
+++ b/website/src/pages/themes/_components/select.tsx
@@ -11,7 +11,8 @@ type SelectProps = {
   label?: string;
   options: SelectOption[];
   value?: string;
-  onChange: (value: string) => void;
+  onChange: (value?: string) => void;
+  includeDefault?: boolean;
   className?: string;
 };
 
@@ -21,6 +22,7 @@ const Select = ({
   options,
   value = "",
   onChange,
+  includeDefault,
   className,
 }: SelectProps) => {
   const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -41,6 +43,7 @@ const Select = ({
         onChange={handleChange}
         className="p-2 w-full text-base border border-grayscale-300 bg-white appearance-none rounded-md bg-select-chevron bg-no-repeat bg-[right_8px_center] bg-[length:16px]"
       >
+        {includeDefault && <option value="">Default</option>}
         {options.map((option, i) => (
           <option key={(option.value || "") + i} value={option.value}>
             {option.label}
diff --git a/website/src/pages/themes/_components/slider.tsx b/website/src/pages/themes/_components/slider.tsx
index 4e813c85b..d9a1208a6 100644
--- a/website/src/pages/themes/_components/slider.tsx
+++ b/website/src/pages/themes/_components/slider.tsx
@@ -30,14 +30,15 @@ const Slider = ({
     }
   };
 
+  const valueString = value !== undefined ? `${value}${unit ?? ""}` : "default";
+
   return (
     <div className={className}>
       <label
         htmlFor={id}
         className="block mb-1 text-sm font-medium text-grayscale-900 dark:text-white"
       >
-        <span className="text-sm font-bold">{label}</span>: {value}
-        {unit}
+        <span className="text-sm font-bold">{label}</span>: {valueString}
       </label>
       <input
         id={id}
diff --git a/website/src/pages/themes/_config.tsx b/website/src/pages/themes/_config.tsx
index 0bd11f36b..31ea27c1e 100644
--- a/website/src/pages/themes/_config.tsx
+++ b/website/src/pages/themes/_config.tsx
@@ -7,6 +7,7 @@ import {
   VictoryBoxPlot,
   VictoryCandlestick,
   VictoryErrorBar,
+  VictoryGroup,
   VictoryHistogram,
   VictoryLegend,
   VictoryLine,
@@ -30,7 +31,6 @@ type ThemeBuilderFieldConfig =
       max?: number;
       step?: number;
       unit?: string;
-      default: number | string;
       options?: { label: string; value: string }[];
     };
 
@@ -50,8 +50,6 @@ type ThemeBuilderOptionsConfig = {
   fields: ThemeBuilderFieldConfig[];
 }[];
 
-const defaultFill = "#000";
-
 const getPath = (basePath: string | string[], key: string) => {
   if (Array.isArray(basePath)) {
     return basePath.map((p) => `${p}.${key}`);
@@ -59,6 +57,24 @@ const getPath = (basePath: string | string[], key: string) => {
   return `${basePath}.${key}`;
 };
 
+const getNestedColorScaleConfig = (
+  basePath: string | string[],
+): ThemeBuilderFieldConfig[] => [
+  {
+    type: "select",
+    label: "Color Scale",
+    options: [
+      { label: "Qualitative", value: "qualitative" },
+      { label: "Heatmap", value: "heatmap" },
+      { label: "Warm", value: "warm" },
+      { label: "Cool", value: "cool" },
+      { label: "Red", value: "red" },
+      { label: "Green", value: "green" },
+    ],
+    path: getPath(basePath, "colorScale"),
+  },
+];
+
 const getBaseStrokeConfig = (
   basePath: string | string[],
   includedStrokeProps: StrokeProps[] = [],
@@ -67,7 +83,6 @@ const getBaseStrokeConfig = (
     {
       type: "colorPicker",
       label: StrokeProps.STROKE,
-      default: defaultFill,
       path: getPath(basePath, "stroke"),
     },
     {
@@ -76,7 +91,6 @@ const getBaseStrokeConfig = (
       min: 0,
       max: 5,
       unit: "px",
-      default: 1,
       path: getPath(basePath, "strokeWidth"),
     },
     {
@@ -84,7 +98,6 @@ const getBaseStrokeConfig = (
       label: StrokeProps.STROKE_DASH_ARRAY,
       min: 0,
       max: 10,
-      default: 0,
       path: getPath(basePath, "strokeDasharray"),
     },
     {
@@ -95,7 +108,6 @@ const getBaseStrokeConfig = (
         { label: "Square", value: "square" },
         { label: "Butt", value: "butt" },
       ],
-      default: "round",
       path: getPath(basePath, "strokeLinecap"),
     },
     {
@@ -106,7 +118,6 @@ const getBaseStrokeConfig = (
         { label: "Bevel", value: "bevel" },
         { label: "Miter", value: "miter" },
       ],
-      default: "round",
       path: getPath(basePath, "strokeLinejoin"),
     },
   ] as ThemeBuilderFieldConfig[];
@@ -127,7 +138,6 @@ const getBaseLabelsConfig = (
     max: 24,
     unit: "px",
     path: getPath(basePath, "fontSize"),
-    default: 12,
   },
   {
     type: "slider",
@@ -136,13 +146,11 @@ const getBaseLabelsConfig = (
     max: 50,
     unit: "px",
     path: getPath(basePath, "padding"),
-    default: 8,
   },
   {
     type: "colorPicker",
     label: "Font Color",
     path: getPath(basePath, "fill"),
-    default: defaultFill,
   },
 ];
 
@@ -167,7 +175,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         min: 0,
         max: 500,
         unit: "px",
-        default: 350,
         path: [
           "chart.width",
           "axis.width",
@@ -191,7 +198,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         min: 0,
         max: 500,
         unit: "px",
-        default: 350,
         path: [
           "chart.height",
           "axis.height",
@@ -215,7 +221,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         min: 0,
         max: 100,
         unit: "px",
-        default: 50,
         path: [
           "chart.padding",
           "axis.padding",
@@ -282,33 +287,17 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "General",
-        fields: [
-          {
-            type: "colorPicker",
-            label: "Fill",
-            default: defaultFill,
-            path: "axis.style.axis.fill",
-          },
-          ...getBaseStrokeConfig("axis.style.axis", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-            StrokeProps.STROKE_LINE_CAP,
-            StrokeProps.STROKE_LINE_JOIN,
-          ]),
-        ],
+        fields: getBaseStrokeConfig("axis.style.axis", [
+          StrokeProps.STROKE,
+          StrokeProps.STROKE_WIDTH,
+          StrokeProps.STROKE_LINE_CAP,
+          StrokeProps.STROKE_LINE_JOIN,
+        ]),
       },
       {
         type: "section",
         label: "Grid",
-        fields: [
-          {
-            type: "colorPicker",
-            label: "Fill",
-            default: defaultFill,
-            path: "axis.style.grid.fill",
-          },
-          ...getBaseStrokeConfig("axis.style.grid"),
-        ],
+        fields: getBaseStrokeConfig("axis.style.grid"),
       },
       {
         type: "section",
@@ -320,7 +309,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             min: 0,
             max: 50,
             unit: "px",
-            default: 5,
             path: "axis.style.ticks.size",
           },
           ...getBaseStrokeConfig("axis.style.ticks", [
@@ -373,7 +361,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             min: 0,
             max: 50,
             unit: "px",
-            default: 5,
             path: "polarAxis.style.ticks.size",
           },
           ...getBaseStrokeConfig("polarAxis.style.ticks", [
@@ -418,7 +405,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             min: 0,
             max: 50,
             unit: "px",
-            default: 5,
             path: "polarDependentAxis.style.ticks.size",
           },
           ...getBaseStrokeConfig("polarDependentAxis.style.ticks", [
@@ -466,7 +452,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             max: 1,
             step: 0.1,
             path: "area.style.data.fillOpacity",
-            default: 1,
           },
           ...getBaseStrokeConfig("area.style.data", [
             StrokeProps.STROKE,
@@ -476,7 +461,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             type: "colorPicker",
             label: "Fill",
             path: "area.style.data.fill",
-            default: defaultFill,
           },
         ],
       },
@@ -493,17 +477,35 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
     content: (props) => [
       <VictoryAxis key="x-axis" label="X Axis" />,
       <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryBar
-        key="bar-chart"
-        {...props}
-        data={[
-          { x: 1, y: 2, label: "A" },
-          { x: 2, y: 3, label: "B" },
-          { x: 3, y: 5, label: "C" },
-          { x: 4, y: 4, label: "D" },
-          { x: 5, y: 7, label: "E" },
-        ]}
-      />,
+      <VictoryGroup key="victory-group" domainPadding={{ x: 20 }} offset={20}>
+        <VictoryBar
+          {...props}
+          data={[
+            { x: "2023 Q1", y: 1 },
+            { x: "2023 Q2", y: 2 },
+            { x: "2023 Q3", y: 3 },
+            { x: "2023 Q4", y: 2 },
+          ]}
+        />
+        <VictoryBar
+          {...props}
+          data={[
+            { x: "2023 Q1", y: 2 },
+            { x: "2023 Q2", y: 3 },
+            { x: "2023 Q3", y: 4 },
+            { x: "2023 Q4", y: 5 },
+          ]}
+        />
+        <VictoryBar
+          {...props}
+          data={[
+            { x: "2023 Q1", y: 1 },
+            { x: "2023 Q2", y: 2 },
+            { x: "2023 Q3", y: 3 },
+            { x: "2023 Q4", y: 4 },
+          ]}
+        />
+      </VictoryGroup>,
     ],
     fields: [
       {
@@ -514,7 +516,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             type: "colorPicker",
             label: "Fill",
             path: "bar.style.data.fill",
-            default: defaultFill,
           },
           ...getBaseStrokeConfig("bar.style.data", [
             StrokeProps.STROKE,
@@ -527,7 +528,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             max: 1,
             step: 0.1,
             path: "bar.style.data.fillOpacity",
-            default: 1,
           },
           {
             type: "slider",
@@ -535,7 +535,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             path: "bar.cornerRadius.top",
             max: 2,
             step: 0.5,
-            default: 0,
           },
         ],
       },
@@ -604,7 +603,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
           {
             type: "colorPicker",
             label: "Fill",
-            default: defaultFill,
             path: "boxplot.style.q1.fill",
           },
           {
@@ -613,7 +611,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             min: 0,
             max: 10,
             step: 0.5,
-            default: 0,
             path: "boxplot.q1.rx",
           },
           {
@@ -622,7 +619,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             min: 0,
             max: 5,
             unit: "px",
-            default: 1,
             path: "boxplot.style.q1.strokeWidth",
           },
           ...getBaseLabelsConfig("boxplot.style.q1Labels"),
@@ -635,7 +631,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
           {
             type: "colorPicker",
             label: "Fill",
-            default: defaultFill,
             path: "boxplot.style.q3.fill",
           },
           {
@@ -644,7 +639,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             min: 0,
             max: 10,
             step: 0.5,
-            default: 0,
             path: "boxplot.q3.rx",
           },
           ...getBaseLabelsConfig("boxplot.style.q3Labels"),
@@ -716,7 +710,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             label: "Border Radius",
             max: 2,
             step: 0.5,
-            default: 0,
             path: "candlestick.style.data.rx",
           },
           {
@@ -726,7 +719,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             max: 5,
             unit: "px",
             path: "candlestick.wickStrokeWidth",
-            default: 2,
           },
         ],
       },
@@ -743,13 +735,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             type: "colorPicker",
             label: "Positive Color",
             path: "candlestick.candleColors.positive",
-            default: "#ffffff",
           },
           {
             type: "colorPicker",
             label: "Negative Color",
             path: "candlestick.candleColors.negative",
-            default: defaultFill,
           },
         ],
       },
@@ -782,7 +772,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             max: 10,
             unit: "px",
             path: "errorbar.borderWidth",
-            default: 8,
           },
           ...getBaseStrokeConfig("errorbar.style.data", [
             StrokeProps.STROKE,
@@ -830,7 +819,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             type: "colorPicker",
             label: "Fill",
             path: "histogram.style.data.fill",
-            default: defaultFill,
           },
           {
             type: "slider",
@@ -839,7 +827,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             max: 1,
             step: 0.1,
             path: "histogram.style.data.fillOpacity",
-            default: 1,
           },
           {
             type: "slider",
@@ -847,7 +834,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             path: "histogram.cornerRadius.top",
             max: 10,
             step: 0.5,
-            default: 0,
           },
           {
             type: "slider",
@@ -856,7 +842,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             max: 10,
             unit: "px",
             path: "histogram.binSpacing",
-            default: 4,
           },
         ],
       },
@@ -867,6 +852,27 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       },
     ],
   },
+  {
+    type: "section",
+    title: "Group",
+    fields: [
+      {
+        type: "section",
+        label: "Data",
+        fields: [
+          ...getNestedColorScaleConfig("group"),
+          {
+            type: "slider",
+            label: "Width",
+            min: 0,
+            max: 50,
+            unit: "px",
+            path: "group.style.data.width",
+          },
+        ],
+      },
+    ],
+  },
   {
     type: "section",
     title: "Legend",
@@ -930,7 +936,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             max: 50,
             unit: "px",
             path: "legend.gutter",
-            default: 20,
           },
           {
             type: "slider",
@@ -939,7 +944,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             max: 50,
             unit: "px",
             path: "legend.borderPadding",
-            default: 10,
           },
           {
             type: "select",
@@ -949,7 +953,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
               { label: "Vertical", value: "vertical" },
             ],
             path: "legend.orientation",
-            default: "horizontal",
           },
           {
             type: "select",
@@ -961,7 +964,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
               { label: "Right", value: "right" },
             ],
             path: "legend.titleOrientation",
-            default: "top",
           },
           {
             type: "select",
@@ -973,7 +975,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
               { label: "Star", value: "star" },
             ],
             path: "legend.style.data.type",
-            default: "circle",
           },
         ],
       },
@@ -1055,6 +1056,7 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         type: "section",
         label: "Data",
         fields: [
+          ...getNestedColorScaleConfig("pie"),
           {
             type: "slider",
             label: "Padding",
@@ -1062,7 +1064,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             max: 50,
             unit: "px",
             path: "pie.style.data.padding",
-            default: 0,
           },
           ...getBaseStrokeConfig("pie.style.data", [
             StrokeProps.STROKE,
@@ -1100,7 +1101,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
           {
             type: "colorPicker",
             label: "Fill",
-            default: defaultFill,
             path: "scatter.style.data.fill",
           },
           {
@@ -1109,7 +1109,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             min: 0,
             max: 1,
             step: 0.1,
-            default: 1,
             path: "scatter.style.data.opacity",
           },
           ...getBaseStrokeConfig("scatter.style.data", [
@@ -1139,7 +1138,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             label: "Corner Radius",
             min: 0,
             max: 10,
-            default: 0,
             path: "tooltip.cornerRadius",
           },
           {
@@ -1147,7 +1145,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
             label: "Pointer Length",
             min: 0,
             max: 20,
-            default: 10,
             path: "tooltip.pointerLength",
           },
         ],
@@ -1159,7 +1156,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
           {
             type: "colorPicker",
             label: "Fill",
-            default: "#FFFFFF",
             path: "tooltip.flyoutStyle.fill",
           },
           ...getBaseStrokeConfig("tooltip.flyoutStyle", [
@@ -1173,7 +1169,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
               { label: "None", value: "none" },
               { label: "All", value: "all" },
             ],
-            default: "none",
             path: "tooltip.flyoutStyle.pointerEvents",
           },
         ],
@@ -1203,7 +1198,6 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
           {
             type: "colorPicker",
             label: "Fill",
-            default: "#FFFFFF",
             path: "voronoi.style.data.fill",
           },
           ...getBaseStrokeConfig("voronoi.style.data", [
diff --git a/website/src/pages/themes/_utils.ts b/website/src/pages/themes/_utils.ts
index 44fd0449e..e58e1a890 100644
--- a/website/src/pages/themes/_utils.ts
+++ b/website/src/pages/themes/_utils.ts
@@ -32,6 +32,6 @@ export const getConfigValue = (
   if (!pathString) return undefined;
   const pathArray = pathString.split(".");
   return pathArray.reduce((acc, key) => {
-    return acc && acc[key] ? acc[key] : defaultValue || undefined;
+    return acc && acc[key] !== undefined ? acc[key] : defaultValue;
   }, config);
 };
diff --git a/website/src/pages/themes/index.tsx b/website/src/pages/themes/index.tsx
index 76e1360ce..00ecf9115 100644
--- a/website/src/pages/themes/index.tsx
+++ b/website/src/pages/themes/index.tsx
@@ -89,7 +89,7 @@ const ThemeBuilder = () => {
     React.useState(false);
   const [showTooltips, setShowTooltips] = React.useState(false);
 
-  const handleThemeSelect = (themeName: string) => {
+  const handleThemeSelect = (themeName?: string) => {
     const theme = themes.find((t) => t.name === themeName);
     if (!theme) {
       setBaseTheme(undefined);
@@ -118,6 +118,7 @@ const ThemeBuilder = () => {
   };
 
   const handleThemeConfigPreviewOpen = () => {
+    window.scrollTo({ top: 0 });
     setShowThemeConfigPreview(true);
   };
 
@@ -127,8 +128,8 @@ const ThemeBuilder = () => {
 
   return (
     <Layout>
-      <div className="flex flex-row flex-wrap items-start justify-start w-full h-lvh theme-builder">
-        <aside className="relative flex flex-col h-full w-[380px] border-r border-grayscale-300">
+      <div className="relative flex flex-row flex-wrap items-start justify-start w-full theme-builder">
+        <aside className="sticky top-0 h-screen flex flex-col w-[380px] border-r border-grayscale-300">
           <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-grayscale-400">
@@ -167,22 +168,27 @@ const ThemeBuilder = () => {
         </aside>
         <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
           {customThemeConfig && (
-            <div className="max-w-screen-xl w-full py-4 px-10">
-              <h2 className="text-xl font-bold mb-4">Example Charts</h2>
-              <fieldset>
-                <div className="flex items-center gap-4 mb-4">
-                  <input
-                    type="checkbox"
-                    id="show-tooltips"
-                    className="form-checkbox h-5 w-5 text-primary"
-                    checked={showTooltips}
-                    onChange={() => setShowTooltips(!showTooltips)}
-                  />
-                  <label htmlFor="show-tooltips">
-                    Show tooltips instead of labels
-                  </label>
-                </div>
-              </fieldset>
+            <div className="max-w-screen-xl w-full p-10 pb-20">
+              <div className="flex justify-between items-center mb-4">
+                <h1 className="text-4xl font-bold">Example Charts</h1>
+                <fieldset className="p-0 m-0">
+                  <div className="flex items-center gap-2 mb-4 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      id="show-tooltips"
+                      className="form-checkbox h-4 w-4 text-primary"
+                      checked={showTooltips}
+                      onChange={() => setShowTooltips(!showTooltips)}
+                    />
+                    <label
+                      htmlFor="show-tooltips"
+                      className="text-xs cursor-pointer"
+                    >
+                      Show tooltips instead of labels
+                    </label>
+                  </div>
+                </fieldset>
+              </div>
               <div className="grid grid-cols-2 gap-10">
                 <div>
                   <h3 className="text-base font-bold mb-3">
@@ -200,11 +206,7 @@ const ThemeBuilder = () => {
                       aria-label="Victory Stack Demo"
                     >
                       {[...Array(NUM_STACKS)].map((_, i) => (
-                        <VictoryArea
-                          data={sampleStackData}
-                          key={i}
-                          labels={() => undefined}
-                        />
+                        <VictoryArea data={sampleStackData} key={i} />
                       ))}
                     </VictoryStack>
                   </VictoryChart>

From fd196c9f91f2d1ff2637927d2fb7c277ec7be399 Mon Sep 17 00:00:00 2001
From: Stef <ramenhog@gmail.com>
Date: Mon, 2 Dec 2024 10:59:48 -0500
Subject: [PATCH 10/30] Feat: theme builder palette fixes (#2992)

---
 .../_components/color-scale-options.tsx       | 49 ++++++++++++-------
 website/src/pages/themes/_config.tsx          | 10 +---
 website/src/pages/themes/index.tsx            | 12 +++--
 3 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/website/src/pages/themes/_components/color-scale-options.tsx b/website/src/pages/themes/_components/color-scale-options.tsx
index 241c84b53..d873b8ebf 100644
--- a/website/src/pages/themes/_components/color-scale-options.tsx
+++ b/website/src/pages/themes/_components/color-scale-options.tsx
@@ -8,14 +8,18 @@ type ColorScaleOptionsProps = {
   palette?: VictoryThemeDefinition["palette"];
   activeColorScale?: ColorScalePropType;
   onColorChange: (args: ColorChangeArgs) => void;
-  onColorScaleChange: (colorScale: string) => void;
+  onColorScaleChange: (colorScale?: string) => void;
 };
 
-const colorScales = [
+export const colorScaleOptions = [
   {
     label: "Qualitative",
     value: "qualitative",
   },
+  {
+    label: "Grayscale",
+    value: "grayscale",
+  },
   {
     label: "Heatmap",
     value: "heatmap",
@@ -36,6 +40,10 @@ const colorScales = [
     label: "Green",
     value: "green",
   },
+  {
+    label: "Blue",
+    value: "blue",
+  },
 ];
 
 const ColorScaleOptions = ({
@@ -50,26 +58,29 @@ const ColorScaleOptions = ({
         id="color-scale-select"
         value={activeColorScale as string}
         onChange={onColorScaleChange}
-        options={colorScales}
+        options={colorScaleOptions}
         label="Color Scale"
         className="mb-5"
+        includeDefault
       />
-      <div className="flex flex-wrap gap-3">
-        {palette?.[activeColorScale as string]?.map((color, i) => (
-          <ColorPicker
-            key={i}
-            color={color}
-            id={`color-${i}`}
-            onColorChange={(newColor) =>
-              onColorChange({
-                newColor,
-                index: i,
-                colorScale: activeColorScale as string,
-              })
-            }
-          />
-        ))}
-      </div>
+      {!!activeColorScale && (
+        <div className="flex flex-wrap gap-3">
+          {palette?.[activeColorScale as string]?.map((color, i) => (
+            <ColorPicker
+              key={i}
+              color={color}
+              id={`color-${i}`}
+              onColorChange={(newColor) =>
+                onColorChange({
+                  newColor,
+                  index: i,
+                  colorScale: activeColorScale as string,
+                })
+              }
+            />
+          ))}
+        </div>
+      )}
     </section>
   );
 };
diff --git a/website/src/pages/themes/_config.tsx b/website/src/pages/themes/_config.tsx
index 31ea27c1e..03a703bff 100644
--- a/website/src/pages/themes/_config.tsx
+++ b/website/src/pages/themes/_config.tsx
@@ -16,6 +16,7 @@ import {
   VictoryScatter,
   VictoryVoronoi,
 } from "victory";
+import { colorScaleOptions } from "./_components/color-scale-options";
 
 type ThemeBuilderFieldConfig =
   | {
@@ -63,14 +64,7 @@ const getNestedColorScaleConfig = (
   {
     type: "select",
     label: "Color Scale",
-    options: [
-      { label: "Qualitative", value: "qualitative" },
-      { label: "Heatmap", value: "heatmap" },
-      { label: "Warm", value: "warm" },
-      { label: "Cool", value: "cool" },
-      { label: "Red", value: "red" },
-      { label: "Green", value: "green" },
-    ],
+    options: colorScaleOptions,
     path: getPath(basePath, "colorScale"),
   },
 ];
diff --git a/website/src/pages/themes/index.tsx b/website/src/pages/themes/index.tsx
index 00ecf9115..4fada594e 100644
--- a/website/src/pages/themes/index.tsx
+++ b/website/src/pages/themes/index.tsx
@@ -83,8 +83,9 @@ const ThemeBuilder = () => {
   const [customThemeConfig, setCustomThemeConfig] = React.useState<
     VictoryThemeDefinition | undefined
   >(undefined);
-  const [activeColorScale, setActiveColorScale] =
-    React.useState<ColorScalePropType>("qualitative");
+  const [activeColorScale, setActiveColorScale] = React.useState<
+    string | undefined
+  >(undefined);
   const [showThemeConfigPreview, setShowThemeConfigPreview] =
     React.useState(false);
   const [showTooltips, setShowTooltips] = React.useState(false);
@@ -113,8 +114,9 @@ const ThemeBuilder = () => {
     setCustomThemeConfig(updatedConfig);
   };
 
-  const handleColorScaleChange = (colorScale: string) => {
-    setActiveColorScale(colorScale as ColorScalePropType);
+  const handleColorScaleChange = (colorScale?: string) => {
+    const newColorScale = colorScale === "" ? undefined : colorScale;
+    setActiveColorScale(newColorScale);
   };
 
   const handleThemeConfigPreviewOpen = () => {
@@ -202,7 +204,7 @@ const ThemeBuilder = () => {
                     <VictoryAxis label="X Axis" />
                     <VictoryAxis dependentAxis label="Y Axis" />
                     <VictoryStack
-                      colorScale={activeColorScale}
+                      colorScale={activeColorScale as ColorScalePropType}
                       aria-label="Victory Stack Demo"
                     >
                       {[...Array(NUM_STACKS)].map((_, i) => (

From 52470ac68ff6b1d19fea2e67f5cfb88e25fce76c Mon Sep 17 00:00:00 2001
From: Stef <ramenhog@gmail.com>
Date: Fri, 6 Dec 2024 16:13:34 -0500
Subject: [PATCH 11/30] Feat: theme builder new UI (#3000)

Co-authored-by: Charlie Brown <carbonrobot@gmail.com>
---
 pnpm-lock.yaml                                | 417 ++++++-------
 website/package.json                          |   1 +
 .../themes/_components/base-theme-panel.tsx   |  39 ++
 .../pages/themes/_components/chart-panel.tsx  |  55 ++
 .../pages/themes/_components/color-picker.tsx |   9 +-
 .../_components/color-scale-options.tsx       |  31 +-
 .../themes/_components/config-mapper.tsx      |  41 --
 .../themes/_components/config-preview.tsx     |   6 +-
 .../src/pages/themes/_components/control.tsx  | 101 ++--
 website/src/pages/themes/_components/main.tsx | 208 +++++++
 .../themes/_components/options-panel.tsx      |  30 +
 .../src/pages/themes/_components/select.tsx   |   4 +-
 .../src/pages/themes/_components/sidenav.tsx  | 125 ++++
 .../src/pages/themes/_components/slider.tsx   |   5 +-
 website/src/pages/themes/_config/axis.tsx     | 170 ++++++
 .../themes/{_config.tsx => _config/chart.tsx} | 554 +++---------------
 website/src/pages/themes/_config/global.tsx   | 126 ++++
 website/src/pages/themes/_config/index.tsx    |  32 +
 website/src/pages/themes/_config/palette.tsx  |  14 +
 .../_providers/previewOptionsProvider.tsx     |  65 ++
 .../pages/themes/_providers/themeProvider.tsx |  73 +++
 website/src/pages/themes/_utils.ts            | 108 ++++
 website/src/pages/themes/index.tsx            | 310 ++--------
 website/tailwind.config.ts                    |   3 +
 24 files changed, 1467 insertions(+), 1060 deletions(-)
 create mode 100644 website/src/pages/themes/_components/base-theme-panel.tsx
 create mode 100644 website/src/pages/themes/_components/chart-panel.tsx
 delete mode 100644 website/src/pages/themes/_components/config-mapper.tsx
 create mode 100644 website/src/pages/themes/_components/main.tsx
 create mode 100644 website/src/pages/themes/_components/options-panel.tsx
 create mode 100644 website/src/pages/themes/_components/sidenav.tsx
 create mode 100644 website/src/pages/themes/_config/axis.tsx
 rename website/src/pages/themes/{_config.tsx => _config/chart.tsx} (60%)
 create mode 100644 website/src/pages/themes/_config/global.tsx
 create mode 100644 website/src/pages/themes/_config/index.tsx
 create mode 100644 website/src/pages/themes/_config/palette.tsx
 create mode 100644 website/src/pages/themes/_providers/previewOptionsProvider.tsx
 create mode 100644 website/src/pages/themes/_providers/themeProvider.tsx

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4164749d5..bf361b2a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1132,28 +1132,28 @@ importers:
         version: 5.12.0
       '@docusaurus/core':
         specifier: ^3.5.2
-        version: 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+        version: 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/plugin-content-docs':
         specifier: ^3.5.2
-        version: 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+        version: 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/plugin-google-gtag':
         specifier: ^3.5.2
-        version: 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+        version: 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/plugin-google-tag-manager':
         specifier: ^3.5.2
-        version: 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+        version: 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/preset-classic':
         specifier: ^3.5.2
-        version: 3.6.0(@algolia/client-search@5.12.0)(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)
+        version: 3.6.0(@algolia/client-search@5.12.0)(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/theme-common':
         specifier: ^3.5.2
-        version: 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+        version: 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/theme-live-codeblock':
         specifier: ^3.5.2
-        version: 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+        version: 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@easyops-cn/docusaurus-search-local':
         specifier: ^0.44.5
-        version: 0.44.6(@docusaurus/theme-common@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+        version: 0.44.6(@docusaurus/theme-common@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@mdx-js/react':
         specifier: ^3.0.0
         version: 3.1.0(@types/react@18.0.15)(react@18.2.0)
@@ -1193,13 +1193,16 @@ importers:
         version: 4.1.1(d3-scale@3.3.0)(d3-time@1.1.0)
       '@docusaurus/module-type-aliases':
         specifier: ^3.5.2
-        version: 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
       '@docusaurus/tsconfig':
         specifier: ^3.5.2
         version: 3.6.0
       '@docusaurus/types':
         specifier: ^3.5.2
-        version: 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@heroicons/react':
+        specifier: ^2.2.0
+        version: 2.2.0(react@18.2.0)
       '@types/react':
         specifier: ^18.0.0
         version: 18.0.15
@@ -3321,6 +3324,11 @@ packages:
   '@hapi/topo@5.1.0':
     resolution: {integrity: sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==}
 
+  '@heroicons/react@2.2.0':
+    resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
+    peerDependencies:
+      react: '>= 16 || ^19.0.0-rc'
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -14953,7 +14961,7 @@ snapshots:
     transitivePeerDependencies:
       - '@algolia/client-search'
 
-  '@docusaurus/babel@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)':
+  '@docusaurus/babel@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/generator': 7.26.2
@@ -14966,7 +14974,7 @@ snapshots:
       '@babel/runtime-corejs3': 7.26.0
       '@babel/traverse': 7.25.9
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       babel-plugin-dynamic-import-node: 2.3.3
       fs-extra: 11.2.0
       tslib: 2.8.1
@@ -14979,33 +14987,33 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/bundler@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/bundler@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
       '@babel/core': 7.26.0
-      '@docusaurus/babel': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/babel': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/cssnano-preset': 3.6.0
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       autoprefixer: 10.4.20(postcss@8.4.47)
-      babel-loader: 9.2.1(@babel/core@7.26.0)(webpack@5.96.1(@swc/core@1.8.0))
+      babel-loader: 9.2.1(@babel/core@7.26.0)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       clean-css: 5.3.3
-      copy-webpack-plugin: 11.0.0(webpack@5.96.1(@swc/core@1.8.0))
-      css-loader: 6.9.1(webpack@5.96.1(@swc/core@1.8.0))
-      css-minimizer-webpack-plugin: 5.0.1(clean-css@5.3.3)(webpack@5.96.1(@swc/core@1.8.0))
+      copy-webpack-plugin: 11.0.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      css-loader: 6.9.1(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      css-minimizer-webpack-plugin: 5.0.1(clean-css@5.3.3)(esbuild@0.18.20)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       cssnano: 6.1.2(postcss@8.4.47)
-      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0))
+      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       html-minifier-terser: 7.2.0
-      mini-css-extract-plugin: 2.9.2(webpack@5.96.1(@swc/core@1.8.0))
-      null-loader: 4.0.1(webpack@5.96.1(@swc/core@1.8.0))
+      mini-css-extract-plugin: 2.9.2(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      null-loader: 4.0.1(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       postcss: 8.4.47
-      postcss-loader: 7.3.4(postcss@8.4.47)(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0))
-      react-dev-utils: 12.0.1(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0))
-      terser-webpack-plugin: 5.3.10(@swc/core@1.8.0)(webpack@5.96.1(@swc/core@1.8.0))
+      postcss-loader: 7.3.4(postcss@8.4.47)(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      react-dev-utils: 12.0.1(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      terser-webpack-plugin: 5.3.10(@swc/core@1.8.0)(esbuild@0.18.20)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       tslib: 2.8.1
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)))(webpack@5.96.1(@swc/core@1.8.0))
-      webpack: 5.96.1(@swc/core@1.8.0)
-      webpackbar: 6.0.1(webpack@5.96.1(@swc/core@1.8.0))
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)))(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpackbar: 6.0.1(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
     transitivePeerDependencies:
       - '@parcel/css'
       - '@swc/core'
@@ -15023,15 +15031,15 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/core@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/core@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/babel': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
-      '@docusaurus/bundler': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/babel': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/bundler': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@mdx-js/react': 3.1.0(@types/react@18.0.15)(react@18.2.0)
       boxen: 6.2.1
       chalk: 4.1.2
@@ -15047,17 +15055,17 @@ snapshots:
       eval: 0.1.8
       fs-extra: 11.2.0
       html-tags: 3.3.1
-      html-webpack-plugin: 5.6.0(webpack@5.96.1(@swc/core@1.8.0))
+      html-webpack-plugin: 5.6.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       leven: 3.1.0
       lodash: 4.17.21
       p-map: 4.0.0
       prompts: 2.4.2
       react: 18.2.0
-      react-dev-utils: 12.0.1(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0))
+      react-dev-utils: 12.0.1(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       react-dom: 18.2.0(react@18.2.0)
       react-helmet-async: 1.3.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-loadable: '@docusaurus/react-loadable@6.0.0(react@18.2.0)'
-      react-loadable-ssr-addon-v5-slorber: 1.0.1(@docusaurus/react-loadable@6.0.0(react@18.2.0))(webpack@5.96.1(@swc/core@1.8.0))
+      react-loadable-ssr-addon-v5-slorber: 1.0.1(@docusaurus/react-loadable@6.0.0(react@18.2.0))(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       react-router: 5.3.4(react@18.2.0)
       react-router-config: 5.1.1(react-router@5.3.4(react@18.2.0))(react@18.2.0)
       react-router-dom: 5.3.4(react@18.2.0)
@@ -15067,9 +15075,9 @@ snapshots:
       shelljs: 0.8.5
       tslib: 2.8.1
       update-notifier: 6.0.2
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
       webpack-bundle-analyzer: 4.10.2
-      webpack-dev-server: 4.15.2(debug@4.3.4)(webpack@5.96.1(@swc/core@1.8.0))
+      webpack-dev-server: 4.15.2(debug@4.3.4)(webpack-cli@4.10.0)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       webpack-merge: 6.0.1
     transitivePeerDependencies:
       - '@docusaurus/faster'
@@ -15104,16 +15112,16 @@ snapshots:
       chalk: 4.1.2
       tslib: 2.8.1
 
-  '@docusaurus/mdx-loader@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/mdx-loader@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@mdx-js/mdx': 3.1.0(acorn@6.4.2)
       '@slorber/remark-comment': 1.0.0
       escape-html: 1.0.3
       estree-util-value-to-estree: 3.2.1
-      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0))
+      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       fs-extra: 11.2.0
       image-size: 1.1.1
       mdast-util-mdx: 3.0.0
@@ -15129,9 +15137,9 @@ snapshots:
       tslib: 2.8.1
       unified: 11.0.4
       unist-util-visit: 5.0.0
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)))(webpack@5.96.1(@swc/core@1.8.0))
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)))(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       vfile: 6.0.1
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
     transitivePeerDependencies:
       - '@docusaurus/types'
       - '@swc/core'
@@ -15142,9 +15150,9 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/module-type-aliases@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@docusaurus/module-type-aliases@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
       '@types/history': 4.7.11
       '@types/react': 18.0.15
       '@types/react-router-config': 5.0.11
@@ -15161,17 +15169,17 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/plugin-content-blog@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/plugin-content-blog@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       cheerio: 1.0.0-rc.12
       feed: 4.2.2
       fs-extra: 11.2.0
@@ -15183,7 +15191,7 @@ snapshots:
       tslib: 2.8.1
       unist-util-visit: 5.0.0
       utility-types: 3.11.0
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
     transitivePeerDependencies:
       - '@docusaurus/faster'
       - '@mdx-js/react'
@@ -15205,17 +15213,17 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/module-type-aliases': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/module-type-aliases': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@types/react-router-config': 5.0.11
       combine-promises: 1.2.0
       fs-extra: 11.2.0
@@ -15225,7 +15233,7 @@ snapshots:
       react-dom: 18.2.0(react@18.2.0)
       tslib: 2.8.1
       utility-types: 3.11.0
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
     transitivePeerDependencies:
       - '@docusaurus/faster'
       - '@mdx-js/react'
@@ -15247,18 +15255,18 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-content-pages@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/plugin-content-pages@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       fs-extra: 11.2.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       tslib: 2.8.1
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
     transitivePeerDependencies:
       - '@docusaurus/faster'
       - '@mdx-js/react'
@@ -15280,11 +15288,11 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-debug@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/plugin-debug@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       fs-extra: 11.2.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -15311,11 +15319,11 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-google-analytics@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/plugin-google-analytics@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       tslib: 2.8.1
@@ -15340,11 +15348,11 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-google-gtag@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/plugin-google-gtag@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@types/gtag.js': 0.0.12
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -15370,11 +15378,11 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-google-tag-manager@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/plugin-google-tag-manager@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       tslib: 2.8.1
@@ -15399,14 +15407,14 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/plugin-sitemap@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/plugin-sitemap@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       fs-extra: 11.2.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -15433,21 +15441,21 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/preset-classic@3.6.0(@algolia/client-search@5.12.0)(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)':
-    dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/plugin-content-blog': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/plugin-content-pages': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/plugin-debug': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/plugin-google-analytics': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/plugin-google-gtag': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/plugin-google-tag-manager': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/plugin-sitemap': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/theme-classic': 3.6.0(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/theme-search-algolia': 3.6.0(@algolia/client-search@5.12.0)(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+  '@docusaurus/preset-classic@3.6.0(@algolia/client-search@5.12.0)(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)(webpack-cli@4.10.0)':
+    dependencies:
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-content-blog': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-content-pages': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-debug': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-google-analytics': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-google-gtag': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-google-tag-manager': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-sitemap': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/theme-classic': 3.6.0(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/theme-search-algolia': 3.6.0(@algolia/client-search@5.12.0)(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
@@ -15479,21 +15487,21 @@ snapshots:
       '@types/react': 18.0.15
       react: 18.2.0
 
-  '@docusaurus/theme-classic@3.6.0(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/theme-classic@3.6.0(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/module-type-aliases': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@docusaurus/plugin-content-blog': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/plugin-content-pages': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/module-type-aliases': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-content-blog': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-content-pages': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/theme-translations': 3.6.0
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@mdx-js/react': 3.1.0(@types/react@18.0.15)(react@18.2.0)
       clsx: 2.1.1
       copy-text-to-clipboard: 3.2.0
@@ -15530,13 +15538,13 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/theme-common@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/theme-common@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/module-type-aliases': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
+      '@docusaurus/mdx-loader': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/module-type-aliases': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
+      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
       '@types/history': 4.7.11
       '@types/react': 18.0.15
       '@types/react-router-config': 5.0.11
@@ -15557,12 +15565,12 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/theme-live-codeblock@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@docusaurus/theme-live-codeblock@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/theme-translations': 3.6.0
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@philpl/buble': 0.19.7
       clsx: 2.1.1
       fs-extra: 11.2.0
@@ -15593,16 +15601,16 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@docusaurus/theme-search-algolia@3.6.0(@algolia/client-search@5.12.0)(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)':
+  '@docusaurus/theme-search-algolia@3.6.0(@algolia/client-search@5.12.0)(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(@types/react@18.0.15)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
       '@docsearch/react': 3.6.3(@algolia/client-search@5.12.0)(@types/react@18.0.15)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(search-insights@2.17.2)
-      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/core': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/theme-translations': 3.6.0
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       algoliasearch: 4.24.0
       algoliasearch-helper: 3.22.5(algoliasearch@4.24.0)
       clsx: 2.1.1
@@ -15645,7 +15653,7 @@ snapshots:
 
   '@docusaurus/tsconfig@3.6.0': {}
 
-  '@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)':
     dependencies:
       '@mdx-js/mdx': 3.1.0(acorn@6.4.2)
       '@types/history': 4.7.11
@@ -15656,7 +15664,7 @@ snapshots:
       react-dom: 18.2.0(react@18.2.0)
       react-helmet-async: 1.3.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       utility-types: 3.11.0
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
       webpack-merge: 5.10.0
     transitivePeerDependencies:
       - '@swc/core'
@@ -15666,17 +15674,17 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/utils-common@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))':
+  '@docusaurus/utils-common@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))':
     dependencies:
       tslib: 2.8.1
     optionalDependencies:
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
 
-  '@docusaurus/utils-validation@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)':
+  '@docusaurus/utils-validation@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
       fs-extra: 11.2.0
       joi: 17.13.3
       js-yaml: 4.1.0
@@ -15691,13 +15699,13 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/utils@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)':
+  '@docusaurus/utils@3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
       '@docusaurus/logger': 3.6.0
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
       '@svgr/webpack': 8.1.0(typescript@5.2.2)
       escape-string-regexp: 4.0.0
-      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0))
+      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       fs-extra: 11.2.0
       github-slugger: 1.5.0
       globby: 11.1.0
@@ -15710,11 +15718,11 @@ snapshots:
       resolve-pathname: 3.0.0
       shelljs: 0.8.5
       tslib: 2.8.1
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)))(webpack@5.96.1(@swc/core@1.8.0))
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)))(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       utility-types: 3.11.0
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
     optionalDependencies:
-      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@docusaurus/types': 3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -15728,14 +15736,14 @@ snapshots:
       cssesc: 3.0.0
       immediate: 3.3.0
 
-  '@easyops-cn/docusaurus-search-local@0.44.6(@docusaurus/theme-common@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)':
+  '@easyops-cn/docusaurus-search-local@0.44.6(@docusaurus/theme-common@3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)':
     dependencies:
-      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
-      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
+      '@docusaurus/plugin-content-docs': 3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(debug@4.3.4)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/theme-common': 3.6.0(@docusaurus/plugin-content-docs@3.6.0(@mdx-js/react@3.1.0(@types/react@18.0.15)(react@18.2.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(eslint@9.14.0(jiti@1.21.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0))(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@docusaurus/theme-translations': 3.6.0
-      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
-      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
-      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.8.0)(typescript@5.2.2)
+      '@docusaurus/utils': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
+      '@docusaurus/utils-common': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))
+      '@docusaurus/utils-validation': 3.6.0(@docusaurus/types@3.6.0(@swc/core@1.8.0)(acorn@6.4.2)(esbuild@0.18.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(webpack-cli@4.10.0))(@swc/core@1.8.0)(esbuild@0.18.20)(typescript@5.2.2)(webpack-cli@4.10.0)
       '@easyops-cn/autocomplete.js': 0.38.1
       '@node-rs/jieba': 1.10.4
       cheerio: 1.0.0
@@ -16209,6 +16217,10 @@ snapshots:
     dependencies:
       '@hapi/hoek': 9.3.0
 
+  '@heroicons/react@2.2.0(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':
@@ -18824,12 +18836,12 @@ snapshots:
       schema-utils: 4.0.0
       webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
-  babel-loader@9.2.1(@babel/core@7.26.0)(webpack@5.96.1(@swc/core@1.8.0)):
+  babel-loader@9.2.1(@babel/core@7.26.0)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       '@babel/core': 7.26.0
       find-cache-dir: 4.0.0
       schema-utils: 4.0.0
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
   babel-messages@6.23.0:
     dependencies:
@@ -19854,7 +19866,7 @@ snapshots:
 
   copy-text-to-clipboard@3.2.0: {}
 
-  copy-webpack-plugin@11.0.0(webpack@5.96.1(@swc/core@1.8.0)):
+  copy-webpack-plugin@11.0.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       fast-glob: 3.3.2
       glob-parent: 6.0.2
@@ -19862,7 +19874,7 @@ snapshots:
       normalize-path: 3.0.0
       schema-utils: 4.0.0
       serialize-javascript: 6.0.0
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
   core-js-compat@3.35.1:
     dependencies:
@@ -20003,7 +20015,7 @@ snapshots:
       semver: 7.6.3
       webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
-  css-loader@6.9.1(webpack@5.96.1(@swc/core@1.8.0)):
+  css-loader@6.9.1(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       icss-utils: 5.1.0(postcss@8.4.47)
       postcss: 8.4.47
@@ -20013,9 +20025,9 @@ snapshots:
       postcss-modules-values: 4.0.0(postcss@8.4.47)
       postcss-value-parser: 4.2.0
       semver: 7.6.3
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
-  css-minimizer-webpack-plugin@5.0.1(clean-css@5.3.3)(webpack@5.96.1(@swc/core@1.8.0)):
+  css-minimizer-webpack-plugin@5.0.1(clean-css@5.3.3)(esbuild@0.18.20)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       cssnano: 6.1.2(postcss@8.4.47)
@@ -20023,9 +20035,10 @@ snapshots:
       postcss: 8.4.47
       schema-utils: 4.2.0
       serialize-javascript: 6.0.2
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
     optionalDependencies:
       clean-css: 5.3.3
+      esbuild: 0.18.20
 
   css-select@4.3.0:
     dependencies:
@@ -21187,11 +21200,11 @@ snapshots:
     dependencies:
       flat-cache: 4.0.1
 
-  file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)):
+  file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.1.1
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
   filelist@1.0.4:
     dependencies:
@@ -21331,7 +21344,7 @@ snapshots:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
-  fork-ts-checker-webpack-plugin@6.5.3(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)):
+  fork-ts-checker-webpack-plugin@6.5.3(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       '@babel/code-frame': 7.26.2
       '@types/json-schema': 7.0.15
@@ -21347,7 +21360,7 @@ snapshots:
       semver: 7.6.3
       tapable: 1.1.3
       typescript: 5.2.2
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
     optionalDependencies:
       eslint: 9.14.0(jiti@1.21.0)
 
@@ -21885,7 +21898,7 @@ snapshots:
     optionalDependencies:
       webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
-  html-webpack-plugin@5.6.0(webpack@5.96.1(@swc/core@1.8.0)):
+  html-webpack-plugin@5.6.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       '@types/html-minifier-terser': 6.1.0
       html-minifier-terser: 6.1.0
@@ -21893,7 +21906,7 @@ snapshots:
       pretty-error: 4.0.0
       tapable: 2.2.1
     optionalDependencies:
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
   htmlparser2@6.1.0:
     dependencies:
@@ -23982,11 +23995,11 @@ snapshots:
 
   min-indent@1.0.1: {}
 
-  mini-css-extract-plugin@2.9.2(webpack@5.96.1(@swc/core@1.8.0)):
+  mini-css-extract-plugin@2.9.2(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       schema-utils: 4.0.0
       tapable: 2.2.1
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
   minimalistic-assert@1.0.1: {}
 
@@ -24175,11 +24188,11 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  null-loader@4.0.1(webpack@5.96.1(@swc/core@1.8.0)):
+  null-loader@4.0.1(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.1.1
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
   nullthrows@1.1.1: {}
 
@@ -24607,13 +24620,13 @@ snapshots:
       postcss: 8.4.47
       ts-node: 10.9.1(@swc/core@1.8.0)(@types/node@22.8.7)(typescript@5.2.2)
 
-  postcss-loader@7.3.4(postcss@8.4.47)(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)):
+  postcss-loader@7.3.4(postcss@8.4.47)(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       cosmiconfig: 8.3.6(typescript@5.2.2)
       jiti: 1.21.0
       postcss: 8.4.47
       semver: 7.6.3
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
     transitivePeerDependencies:
       - typescript
 
@@ -24979,7 +24992,7 @@ snapshots:
 
   react-deep-force-update@1.1.2: {}
 
-  react-dev-utils@12.0.1(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)):
+  react-dev-utils@12.0.1(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       '@babel/code-frame': 7.26.2
       address: 1.2.0
@@ -24990,7 +25003,7 @@ snapshots:
       escape-string-regexp: 4.0.0
       filesize: 8.0.7
       find-up: 5.0.0
-      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0))
+      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.14.0(jiti@1.21.0))(typescript@5.2.2)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       global-modules: 2.0.0
       globby: 11.1.0
       gzip-size: 6.0.0
@@ -25005,7 +25018,7 @@ snapshots:
       shell-quote: 1.8.1
       strip-ansi: 6.0.1
       text-table: 0.2.0
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
     optionalDependencies:
       typescript: 5.2.2
     transitivePeerDependencies:
@@ -25112,11 +25125,11 @@ snapshots:
       sucrase: 3.35.0
       use-editable: 2.3.3(react@18.2.0)
 
-  react-loadable-ssr-addon-v5-slorber@1.0.1(@docusaurus/react-loadable@6.0.0(react@18.2.0))(webpack@5.96.1(@swc/core@1.8.0)):
+  react-loadable-ssr-addon-v5-slorber@1.0.1(@docusaurus/react-loadable@6.0.0(react@18.2.0))(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       '@babel/runtime': 7.26.0
       react-loadable: '@docusaurus/react-loadable@6.0.0(react@18.2.0)'
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
   react-native-gesture-handler@2.16.2(react-native@0.73.5(@babel/core@7.23.9)(@babel/preset-env@7.23.9(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0):
     dependencies:
@@ -26497,16 +26510,17 @@ snapshots:
       ansi-escapes: 4.3.2
       supports-hyperlinks: 2.3.0
 
-  terser-webpack-plugin@5.3.10(@swc/core@1.8.0)(webpack@5.96.1(@swc/core@1.8.0)):
+  terser-webpack-plugin@5.3.10(@swc/core@1.8.0)(esbuild@0.18.20)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
       schema-utils: 3.1.1
       serialize-javascript: 6.0.2
       terser: 5.31.1
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
     optionalDependencies:
       '@swc/core': 1.8.0
+      esbuild: 0.18.20
 
   terser-webpack-plugin@5.3.3(@swc/core@1.8.0)(esbuild@0.18.20)(webpack@5.74.0):
     dependencies:
@@ -26683,7 +26697,7 @@ snapshots:
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
       '@types/node': 22.8.7
-      acorn: 8.14.0
+      acorn: 8.8.0
       acorn-walk: 8.3.0
       arg: 4.1.3
       create-require: 1.1.1
@@ -27007,14 +27021,14 @@ snapshots:
 
   url-join@4.0.0: {}
 
-  url-loader@4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)))(webpack@5.96.1(@swc/core@1.8.0)):
+  url-loader@4.1.1(file-loader@6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)))(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       loader-utils: 2.0.4
       mime-types: 2.1.35
       schema-utils: 3.1.1
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
     optionalDependencies:
-      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0))
+      file-loader: 6.2.0(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
 
   url-parse@1.5.10:
     dependencies:
@@ -27194,14 +27208,14 @@ snapshots:
       schema-utils: 4.0.0
       webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
-  webpack-dev-middleware@5.3.4(webpack@5.96.1(@swc/core@1.8.0)):
+  webpack-dev-middleware@5.3.4(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       colorette: 2.0.19
       memfs: 3.5.3
       mime-types: 2.1.35
       range-parser: 1.2.1
       schema-utils: 4.0.0
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
   webpack-dev-middleware@6.1.3(webpack@5.74.0):
     dependencies:
@@ -27213,7 +27227,7 @@ snapshots:
     optionalDependencies:
       webpack: 5.74.0(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
-  webpack-dev-server@4.15.2(debug@4.3.4)(webpack@5.96.1(@swc/core@1.8.0)):
+  webpack-dev-server@4.15.2(debug@4.3.4)(webpack-cli@4.10.0)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       '@types/bonjour': 3.5.10
       '@types/connect-history-api-fallback': 1.3.5
@@ -27243,10 +27257,11 @@ snapshots:
       serve-index: 1.9.1
       sockjs: 0.3.24
       spdy: 4.0.2
-      webpack-dev-middleware: 5.3.4(webpack@5.96.1(@swc/core@1.8.0))
+      webpack-dev-middleware: 5.3.4(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       ws: 8.16.0
     optionalDependencies:
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
+      webpack-cli: 4.10.0(webpack-dev-server@4.9.3)(webpack@5.74.0)
     transitivePeerDependencies:
       - bufferutil
       - debug
@@ -27354,7 +27369,7 @@ snapshots:
       - esbuild
       - uglify-js
 
-  webpack@5.96.1(@swc/core@1.8.0):
+  webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.6
@@ -27376,15 +27391,17 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(@swc/core@1.8.0)(webpack@5.96.1(@swc/core@1.8.0))
+      terser-webpack-plugin: 5.3.10(@swc/core@1.8.0)(esbuild@0.18.20)(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0))
       watchpack: 2.4.2
       webpack-sources: 3.2.3
+    optionalDependencies:
+      webpack-cli: 4.10.0(webpack-dev-server@4.9.3)(webpack@5.74.0)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
       - uglify-js
 
-  webpackbar@6.0.1(webpack@5.96.1(@swc/core@1.8.0)):
+  webpackbar@6.0.1(webpack@5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
       ansi-escapes: 4.3.2
       chalk: 4.1.2
@@ -27393,7 +27410,7 @@ snapshots:
       markdown-table: 2.0.0
       pretty-time: 1.1.0
       std-env: 3.7.0
-      webpack: 5.96.1(@swc/core@1.8.0)
+      webpack: 5.96.1(@swc/core@1.8.0)(esbuild@0.18.20)(webpack-cli@4.10.0)
       wrap-ansi: 7.0.0
 
   websocket-driver@0.7.4:
diff --git a/website/package.json b/website/package.json
index fc228e2a1..2717a857f 100644
--- a/website/package.json
+++ b/website/package.json
@@ -47,6 +47,7 @@
     "d3-scale": "^3.2.1",
     "d3-time": "^1.1.0",
     "find-cache-dir": "5.0.0",
+    "@heroicons/react": "^2.2.0",
     "mdast-util-from-markdown": "^2.0.1",
     "postcss": "^8.4.38",
     "prismjs": "^1.29.0",
diff --git a/website/src/pages/themes/_components/base-theme-panel.tsx b/website/src/pages/themes/_components/base-theme-panel.tsx
new file mode 100644
index 000000000..4077c4f54
--- /dev/null
+++ b/website/src/pages/themes/_components/base-theme-panel.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import Select from "./select";
+import { themes, useTheme } from "../_providers/themeProvider";
+import { usePreviewOptions } from "../_providers/previewOptionsProvider";
+
+const themeOptions = [
+  { label: "Select a theme", value: undefined },
+  ...themes.map((theme) => ({
+    label: theme.name,
+    value: theme.name,
+  })),
+];
+
+const BaseThemePanel = () => {
+  const { baseTheme, onBaseThemeSelect } = useTheme();
+  const { resetPreviewOptions } = usePreviewOptions();
+
+  const handleThemeSelect = (themeName?: string) => {
+    onBaseThemeSelect(themeName);
+    resetPreviewOptions();
+  };
+
+  return (
+    <>
+      <h2 className="mb-0 text-xl font-bold">Customize Your Theme</h2>
+      <p className="text-sm mb-4 text-grayscale-400">
+        Select a theme to begin customizing.
+      </p>
+      <Select
+        id="theme-select"
+        value={baseTheme?.name || ""}
+        onChange={handleThemeSelect}
+        options={themeOptions}
+        label="Base Theme"
+      />
+    </>
+  );
+};
+export default BaseThemePanel;
diff --git a/website/src/pages/themes/_components/chart-panel.tsx b/website/src/pages/themes/_components/chart-panel.tsx
new file mode 100644
index 000000000..1d3ad7245
--- /dev/null
+++ b/website/src/pages/themes/_components/chart-panel.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import Control from "./control";
+import Select from "./select";
+import { usePreviewOptions } from "../_providers/previewOptionsProvider";
+import { chartOptionsConfig } from "../_config";
+
+const ChartPanel = () => {
+  const [chartType, setChartType] = React.useState("");
+  const { setExampleConfigs } = usePreviewOptions();
+  const selectOptions = Object.keys(chartOptionsConfig).map((key) => ({
+    label: chartOptionsConfig[key].label,
+    value: key,
+  }));
+  const options = [
+    { label: "Select a chart type", value: "" },
+    ...selectOptions,
+  ];
+  const controls = chartOptionsConfig[chartType]?.controls || [];
+
+  const onChartTypeChange = (newValue: string) => {
+    setChartType(newValue);
+    const examples = chartOptionsConfig[newValue]
+      ? [chartOptionsConfig[newValue]]
+      : [];
+    setExampleConfigs(examples);
+  };
+
+  return (
+    <>
+      <h2 className="mb-0 text-xl font-bold">Chart Options</h2>
+      <p className="text-sm mb-4 text-grayscale-400">
+        Select a chart type to begin customizing.
+      </p>
+      <Select
+        id="chart-type-select"
+        value={chartType}
+        onChange={onChartTypeChange}
+        options={options}
+        label="Chart Type"
+        className="mt-4 mb-8"
+      />
+      {controls.map((control, i) => {
+        return (
+          <Control
+            key={control.label + i}
+            type={control.type}
+            control={control}
+            className="mb-4"
+          />
+        );
+      })}
+    </>
+  );
+};
+export default ChartPanel;
diff --git a/website/src/pages/themes/_components/color-picker.tsx b/website/src/pages/themes/_components/color-picker.tsx
index 2d5a39492..c34c39c64 100644
--- a/website/src/pages/themes/_components/color-picker.tsx
+++ b/website/src/pages/themes/_components/color-picker.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useId } from "react";
 import { TiPencil } from "react-icons/ti";
 import clsx from "clsx";
 import Select from "./select";
@@ -6,7 +6,6 @@ import Select from "./select";
 type ColorPickerProps = {
   label?: string;
   color: string;
-  id: string;
   onColorChange: (color?: string) => void;
   showColorName?: boolean;
   className?: string;
@@ -22,7 +21,6 @@ enum ColorPickerOptions {
 const ColorPicker = ({
   label,
   color,
-  id,
   onColorChange,
   showColorName = false,
   className,
@@ -57,6 +55,8 @@ const ColorPicker = ({
     }
   };
 
+  const id = useId();
+
   return (
     <fieldset className={clsx("p-0", className)}>
       {label && (
@@ -68,13 +68,14 @@ const ColorPicker = ({
         {showColorName && (
           <div className="flex items-center my-2 flex-1">
             <Select
-              id="color-option"
+              id={id}
               value={colorOption}
               options={[
                 { label: "None", value: ColorPickerOptions.NONE },
                 { label: "Custom", value: ColorPickerOptions.CUSTOM },
               ]}
               onChange={handleColorOptionChange}
+              className="w-full"
               includeDefault
             />
           </div>
diff --git a/website/src/pages/themes/_components/color-scale-options.tsx b/website/src/pages/themes/_components/color-scale-options.tsx
index d873b8ebf..edfa2b39b 100644
--- a/website/src/pages/themes/_components/color-scale-options.tsx
+++ b/website/src/pages/themes/_components/color-scale-options.tsx
@@ -1,14 +1,13 @@
 import React from "react";
-import Select from "./select";
 import ColorPicker from "./color-picker";
 import { ColorScalePropType, VictoryThemeDefinition } from "victory";
 import { ColorChangeArgs } from "./control";
 
 type ColorScaleOptionsProps = {
+  label?: string;
   palette?: VictoryThemeDefinition["palette"];
-  activeColorScale?: ColorScalePropType;
+  colorScaleType?: ColorScalePropType;
   onColorChange: (args: ColorChangeArgs) => void;
-  onColorScaleChange: (colorScale?: string) => void;
 };
 
 export const colorScaleOptions = [
@@ -47,25 +46,19 @@ export const colorScaleOptions = [
 ];
 
 const ColorScaleOptions = ({
-  activeColorScale,
+  label,
+  colorScaleType,
   palette,
   onColorChange,
-  onColorScaleChange,
 }: ColorScaleOptionsProps) => {
   return (
-    <section>
-      <Select
-        id="color-scale-select"
-        value={activeColorScale as string}
-        onChange={onColorScaleChange}
-        options={colorScaleOptions}
-        label="Color Scale"
-        className="mb-5"
-        includeDefault
-      />
-      {!!activeColorScale && (
+    <fieldset className="p-0 mt-4 mb-8">
+      {label && (
+        <label className="block mb-3 text-base font-bold">{label}</label>
+      )}
+      {!!colorScaleType && (
         <div className="flex flex-wrap gap-3">
-          {palette?.[activeColorScale as string]?.map((color, i) => (
+          {palette?.[colorScaleType as string]?.map((color, i) => (
             <ColorPicker
               key={i}
               color={color}
@@ -74,14 +67,14 @@ const ColorScaleOptions = ({
                 onColorChange({
                   newColor,
                   index: i,
-                  colorScale: activeColorScale as string,
+                  colorScale: colorScaleType as string,
                 })
               }
             />
           ))}
         </div>
       )}
-    </section>
+    </fieldset>
   );
 };
 export default ColorScaleOptions;
diff --git a/website/src/pages/themes/_components/config-mapper.tsx b/website/src/pages/themes/_components/config-mapper.tsx
deleted file mode 100644
index 75a1b891c..000000000
--- a/website/src/pages/themes/_components/config-mapper.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import optionsConfig from "../_config";
-import Accordion from "./accordion";
-import Control from "./control";
-
-const ConfigMapper = ({
-  themeConfig,
-  activeColorScale,
-  updateThemeConfig,
-  handleColorScaleChange,
-}) => {
-  return (
-    <>
-      {optionsConfig.map((section, index) => (
-        <Accordion
-          key={section.title}
-          title={section.title}
-          id={section.title}
-          defaultOpen={index === 0}
-        >
-          {section.fields.map((field, i) => {
-            return (
-              <Control
-                key={field.label + i}
-                type={field.type}
-                field={field}
-                themeConfig={themeConfig}
-                updateThemeConfig={updateThemeConfig}
-                activeColorScale={activeColorScale}
-                handleColorScaleChange={handleColorScaleChange}
-                className="mb-4"
-              />
-            );
-          })}
-        </Accordion>
-      ))}
-    </>
-  );
-};
-
-export default ConfigMapper;
diff --git a/website/src/pages/themes/_components/config-preview.tsx b/website/src/pages/themes/_components/config-preview.tsx
index 9a88e550c..9f8e49a38 100644
--- a/website/src/pages/themes/_components/config-preview.tsx
+++ b/website/src/pages/themes/_components/config-preview.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 import Button from "./button";
-import { VictoryThemeDefinition } from "victory";
 import CodeBlock from "./code-block";
+import { useTheme } from "../_providers/themeProvider";
 
 type ConfigPreviewProps = {
-  config: VictoryThemeDefinition;
   onClose: () => void;
 };
 
-const ConfigPreview = ({ config, onClose }: ConfigPreviewProps) => {
+const ConfigPreview = ({ onClose }: ConfigPreviewProps) => {
+  const { customThemeConfig: config } = useTheme();
   const [copyStatus, setCopyStatus] = React.useState<string | null>(null);
 
   const handleCopyThemeConfig = () => {
diff --git a/website/src/pages/themes/_components/control.tsx b/website/src/pages/themes/_components/control.tsx
index 18f565b84..d93da2a95 100644
--- a/website/src/pages/themes/_components/control.tsx
+++ b/website/src/pages/themes/_components/control.tsx
@@ -1,9 +1,11 @@
-import React from "react";
+import React, { useId } from "react";
 import Select from "./select";
 import Slider from "./slider";
 import ColorPicker from "./color-picker";
 import ColorScaleOptions from "./color-scale-options";
 import { getConfigValue } from "../_utils";
+import { useTheme } from "../_providers/themeProvider";
+import Accordion from "./accordion";
 
 export type ColorChangeArgs = {
   newColor?: string;
@@ -11,57 +13,68 @@ export type ColorChangeArgs = {
   colorScale: string;
 };
 
-const Control = ({
-  type,
-  field,
-  themeConfig,
-  updateThemeConfig,
-  activeColorScale,
-  handleColorScaleChange,
-  className,
-}) => {
+const Control = ({ type, control, className }) => {
+  const { customThemeConfig, updateCustomThemeConfig } = useTheme();
   const handleColorChange = ({
     newColor,
     index,
     colorScale,
   }: ColorChangeArgs) => {
-    const updatedColors = themeConfig?.palette?.[colorScale]?.map((color, i) =>
-      i === index ? newColor : color,
+    const updatedColors = customThemeConfig?.palette?.[colorScale]?.map(
+      (color, i) => (i === index ? newColor : color),
     );
-    updateThemeConfig(`palette.${colorScale}`, updatedColors);
+    updateCustomThemeConfig(`palette.${colorScale}`, updatedColors);
   };
 
   const handleChange = (newValue) => {
-    updateThemeConfig(field.path, newValue);
+    updateCustomThemeConfig(control.path, newValue);
   };
 
-  const configValue = getConfigValue(themeConfig, field.path, field.default);
+  const configValue = getConfigValue(
+    customThemeConfig,
+    control.path,
+    control.default,
+  );
+
+  const id = useId();
 
   switch (type) {
+    case "accordion":
+      return (
+        <Accordion
+          key={control.label}
+          title={control.label}
+          id={id}
+          defaultOpen={control.defaultOpen}
+        >
+          {control.controls?.map((nestedControl, i) => (
+            <Control
+              key={nestedControl.label + i}
+              type={nestedControl.type}
+              control={nestedControl}
+              className={className}
+            />
+          ))}
+        </Accordion>
+      );
     case "colorScale":
       return (
         <ColorScaleOptions
-          palette={themeConfig?.palette}
-          activeColorScale={activeColorScale}
+          label={control.label}
+          palette={customThemeConfig?.palette}
+          colorScaleType={control.colorScaleType}
           onColorChange={handleColorChange}
-          onColorScaleChange={handleColorScaleChange}
         />
       );
     case "section":
       return (
-        <section className="mb-6">
-          <h3 className="text-lg text-secondary font-bold mb-4">
-            {field.label}
-          </h3>
-          {field.fields.map((subField, i) => (
+        <section className="mb-8">
+          <h3 className="text-lg text-secondary mb-4">{control.label}</h3>
+          {control.controls?.map((nestedControl, i) => (
             <Control
-              key={subField.label + i}
-              type={subField.type}
-              field={subField}
-              themeConfig={themeConfig}
-              updateThemeConfig={updateThemeConfig}
-              activeColorScale={activeColorScale}
-              handleColorScaleChange={handleColorScaleChange}
+              key={nestedControl.label + i}
+              type={nestedControl.type}
+              control={nestedControl}
               className={className}
             />
           ))}
@@ -70,27 +83,27 @@ const Control = ({
     case "slider":
       return (
         <Slider
-          id={field.label}
-          key={field.label}
-          label={field.label}
+          id={id}
+          key={control.label}
+          label={control.label}
           value={configValue as number}
-          unit={field.unit}
+          unit={control.unit}
           onChange={handleChange}
-          min={field.min}
-          max={field.max}
-          step={field.step}
+          min={control.min}
+          max={control.max}
+          step={control.step}
           className={className}
         />
       );
     case "select":
       return (
         <Select
-          id={field.label}
-          key={field.label}
-          label={field.label}
+          id={id}
+          key={control.label}
+          label={control.label}
           value={configValue as string}
           onChange={handleChange}
-          options={field.options}
+          options={control.options}
           className={className}
           includeDefault
         />
@@ -98,9 +111,9 @@ const Control = ({
     case "colorPicker":
       return (
         <ColorPicker
-          id={field.label}
-          key={field.label}
-          label={field.label}
+          id={id}
+          key={control.label}
+          label={control.label}
           color={configValue as string}
           onColorChange={handleChange}
           className={className}
diff --git a/website/src/pages/themes/_components/main.tsx b/website/src/pages/themes/_components/main.tsx
new file mode 100644
index 000000000..3860a166b
--- /dev/null
+++ b/website/src/pages/themes/_components/main.tsx
@@ -0,0 +1,208 @@
+import React from "react";
+import {
+  ColorScalePropType,
+  VictoryArea,
+  VictoryAxis,
+  VictoryBar,
+  VictoryChart,
+  VictoryStack,
+  VictoryTooltip,
+} from "victory";
+import { useTheme } from "../_providers/themeProvider";
+import { usePreviewOptions } from "../_providers/previewOptionsProvider";
+import Select from "./select";
+import { colorScaleOptions } from "./color-scale-options";
+import Button from "./button";
+import ConfigPreview from "./config-preview";
+
+const chartStyle: { [key: string]: React.CSSProperties } = {
+  parent: {
+    border: "1px solid #ccc",
+    width: "100%",
+    height: 400,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+};
+
+const NUM_STACKS = 5;
+
+const sampleStackData = [
+  {
+    x: 1,
+    y: 2,
+  },
+  {
+    x: 2,
+    y: 3,
+  },
+  {
+    x: 3,
+    y: 5,
+  },
+  {
+    x: 4,
+    y: 4,
+  },
+  {
+    x: 5,
+    y: 7,
+  },
+];
+
+const Main = () => {
+  const [showExportModal, setShowExportModal] = React.useState(false);
+
+  const handleExportModalOpen = () => {
+    window.scrollTo({ top: 0 });
+    setShowExportModal(true);
+  };
+
+  const handleExportModalClose = () => {
+    setShowExportModal(false);
+  };
+
+  const { customThemeConfig } = useTheme();
+  const {
+    colorScale,
+    updateColorScale,
+    showTooltips,
+    setShowTooltips,
+    exampleConfigs,
+  } = usePreviewOptions();
+
+  if (!customThemeConfig) return null;
+
+  return (
+    <>
+      <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
+        <div className="max-w-screen-xl w-full p-10 pb-20">
+          <div className="flex justify-end items-center">
+            <Button onClick={handleExportModalOpen}>Export Theme</Button>
+          </div>
+          <div className="flex justify-between items-center mb-4">
+            <Select
+              id="color-scale"
+              label="Color Scale"
+              value={colorScale}
+              onChange={updateColorScale}
+              options={colorScaleOptions}
+              includeDefault
+              className="w-1/3"
+            />
+            <fieldset className="p-0 m-0">
+              <div className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  id="show-tooltips"
+                  className="form-checkbox h-4 w-4 text-primary"
+                  checked={showTooltips}
+                  onChange={() => setShowTooltips(!showTooltips)}
+                />
+                <label
+                  htmlFor="show-tooltips"
+                  className="text-xs cursor-pointer"
+                >
+                  Show tooltips instead of labels
+                </label>
+              </div>
+            </fieldset>
+          </div>
+          <div className="grid grid-cols-2 gap-10">
+            {exampleConfigs.length === 0 ? (
+              <>
+                <div>
+                  <h3 className="text-base font-bold mb-3">
+                    Stacked Area Chart
+                  </h3>
+                  <VictoryChart
+                    theme={customThemeConfig}
+                    domainPadding={20}
+                    style={chartStyle}
+                  >
+                    <VictoryAxis label="X Axis" />
+                    <VictoryAxis dependentAxis label="Y Axis" />
+                    <VictoryStack
+                      colorScale={colorScale as ColorScalePropType}
+                      aria-label="Victory Stack Demo"
+                    >
+                      {[...Array(NUM_STACKS)].map((_, i) => (
+                        <VictoryArea data={sampleStackData} key={i} />
+                      ))}
+                    </VictoryStack>
+                  </VictoryChart>
+                </div>
+                <div>
+                  <h3 className="text-base font-bold mb-3">
+                    Stacked Bar Chart
+                  </h3>
+                  <VictoryChart
+                    theme={customThemeConfig}
+                    domainPadding={20}
+                    style={chartStyle}
+                  >
+                    <VictoryAxis label="X Axis" />
+                    <VictoryAxis dependentAxis label="Y Axis" />
+                    <VictoryStack
+                      colorScale={colorScale as ColorScalePropType}
+                      aria-label="Victory Stack Demo"
+                    >
+                      {[...Array(NUM_STACKS)].map((_, i) => (
+                        <VictoryBar
+                          data={sampleStackData}
+                          key={i}
+                          labels={({ datum }) =>
+                            showTooltips ? datum.y : undefined
+                          }
+                          {...(showTooltips && {
+                            labelComponent: <VictoryTooltip />,
+                          })}
+                        />
+                      ))}
+                    </VictoryStack>
+                  </VictoryChart>
+                </div>
+              </>
+            ) : (
+              exampleConfigs.map(
+                ({ label, content: Content, hasVictoryChart = true }, i) =>
+                  Content && (
+                    <div key={i}>
+                      <h3 className="text-base font-bold mb-3">{label}</h3>
+                      {hasVictoryChart ? (
+                        <VictoryChart
+                          theme={customThemeConfig}
+                          domainPadding={20}
+                          style={chartStyle}
+                        >
+                          {Content({
+                            labels: ({ datum }) => datum.y || datum.x,
+                            ...(showTooltips && {
+                              labelComponent: <VictoryTooltip />,
+                            }),
+                          })}
+                        </VictoryChart>
+                      ) : (
+                        Content({
+                          labels: ({ datum }) => datum.y || datum.x,
+                          style: chartStyle,
+                          theme: customThemeConfig,
+                          ...(showTooltips && {
+                            labelComponent: <VictoryTooltip />,
+                          }),
+                        })
+                      )}
+                    </div>
+                  ),
+              )
+            )}
+          </div>
+        </div>
+      </main>
+
+      {showExportModal && <ConfigPreview onClose={handleExportModalClose} />}
+    </>
+  );
+};
+export default Main;
diff --git a/website/src/pages/themes/_components/options-panel.tsx b/website/src/pages/themes/_components/options-panel.tsx
new file mode 100644
index 000000000..51b5e9d7a
--- /dev/null
+++ b/website/src/pages/themes/_components/options-panel.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import Control from "./control";
+
+type GlobalPanelProps = {
+  title?: string;
+  description?: string;
+  controls: any[];
+};
+
+const OptionsPanel = ({ title, description, controls }: GlobalPanelProps) => {
+  return (
+    <>
+      {!!title && <h2 className="mb-0 text-xl font-bold">{title}</h2>}
+      {!!description && (
+        <p className="text-sm mb-4 text-grayscale-400">{description}</p>
+      )}
+      {controls.map((control, i) => {
+        return (
+          <Control
+            key={control.label + i}
+            type={control.type}
+            control={control}
+            className="mb-4"
+          />
+        );
+      })}
+    </>
+  );
+};
+export default OptionsPanel;
diff --git a/website/src/pages/themes/_components/select.tsx b/website/src/pages/themes/_components/select.tsx
index c9296f39a..d509f415e 100644
--- a/website/src/pages/themes/_components/select.tsx
+++ b/website/src/pages/themes/_components/select.tsx
@@ -11,7 +11,7 @@ type SelectProps = {
   label?: string;
   options: SelectOption[];
   value?: string;
-  onChange: (value?: string) => void;
+  onChange: (value: string) => void;
   includeDefault?: boolean;
   className?: string;
 };
@@ -31,7 +31,7 @@ const Select = ({
     }
   };
   return (
-    <div className={clsx("relative w-full", className)}>
+    <div className={clsx("relative", className)}>
       {label && (
         <label htmlFor={id} className="block mb-1 text-sm font-bold">
           {label}
diff --git a/website/src/pages/themes/_components/sidenav.tsx b/website/src/pages/themes/_components/sidenav.tsx
new file mode 100644
index 000000000..1e7fcbb7c
--- /dev/null
+++ b/website/src/pages/themes/_components/sidenav.tsx
@@ -0,0 +1,125 @@
+import {
+  AdjustmentsVerticalIcon,
+  CircleStackIcon,
+  GlobeAmericasIcon,
+  SwatchIcon,
+} from "@heroicons/react/24/outline";
+import clsx from "clsx";
+import React from "react";
+import {
+  ControlConfig,
+  globalOptionsConfig,
+  OptionsPanelConfig,
+  paletteOptionsConfig,
+} from "../_config";
+import axisOptionsConfig from "../_config/axis";
+import { useTheme } from "../_providers/themeProvider";
+import {
+  defaultExampleConfigs,
+  usePreviewOptions,
+} from "../_providers/previewOptionsProvider";
+
+type NavItem = {
+  title: string;
+  icon: React.ElementType;
+} & (
+  | {
+      panelType: "theme" | "chart";
+    }
+  | {
+      panelType: "default";
+      config: OptionsPanelConfig;
+      examples?: ControlConfig[];
+    }
+);
+
+type SideNavProps = {
+  activeItem: NavItem;
+  onItemSelect: (item: NavItem) => void;
+};
+
+export const NAV_ITEMS: NavItem[] = [
+  {
+    title: "Base Theme",
+    icon: CircleStackIcon,
+    panelType: "theme",
+  },
+  {
+    title: "Color Palette",
+    icon: SwatchIcon,
+    config: paletteOptionsConfig,
+    panelType: "default",
+  },
+  {
+    title: "Global Options",
+    icon: GlobeAmericasIcon,
+    config: globalOptionsConfig,
+    panelType: "default",
+  },
+  {
+    title: "Axis Options",
+    icon: AdjustmentsVerticalIcon,
+    panelType: "default",
+    config: axisOptionsConfig,
+    examples: axisOptionsConfig.controls,
+  },
+  {
+    title: "Chart Options",
+    icon: AdjustmentsVerticalIcon,
+    panelType: "chart",
+  },
+];
+
+const SideNav = ({ activeItem, onItemSelect }: SideNavProps) => {
+  const { baseTheme } = useTheme();
+  const { setExampleConfigs } = usePreviewOptions();
+  const isBaseThemeSelected = !!baseTheme;
+
+  const handleItemSelect = (item: NavItem) => {
+    onItemSelect(item);
+    if (item.panelType === "default" && !!item.examples) {
+      setExampleConfigs(item.examples);
+    } else {
+      setExampleConfigs(defaultExampleConfigs);
+    }
+  };
+
+  return (
+    <aside className="sticky top-[60px] h-theme-builder w-32 overflow-y-auto bg-black py-4">
+      <div className="w-full flex-1 space-y-1 px-2">
+        {NAV_ITEMS.map((item) => {
+          const isActive = item.title === activeItem.title;
+          const isDisabled =
+            item.title !== "Base Theme" && !isBaseThemeSelected;
+          return (
+            <button
+              key={item.title}
+              aria-current={isActive ? "page" : undefined}
+              onClick={() => handleItemSelect(item)}
+              disabled={isDisabled}
+              className={clsx(
+                "group flex w-full flex-col items-center rounded-md p-3 text-xs font-medium cursor-pointer",
+                isActive
+                  ? "bg-theme-1 text-theme-2"
+                  : "bg-transparent text-white hover:text-theme-1 disabled:text-grayscale-800 disabled:cursor-not-allowed",
+              )}
+            >
+              <item.icon
+                aria-hidden="true"
+                className={clsx(
+                  isActive
+                    ? "text-theme-2"
+                    : "text-white group-hover:text-theme-1 group-disabled:text-grayscale-800",
+                  "size-6",
+                )}
+              />
+              <span className="mt-2">{item.title}</span>
+            </button>
+          );
+        })}
+      </div>
+    </aside>
+  );
+};
+
+export default SideNav;
diff --git a/website/src/pages/themes/_components/slider.tsx b/website/src/pages/themes/_components/slider.tsx
index d9a1208a6..42c3d4e49 100644
--- a/website/src/pages/themes/_components/slider.tsx
+++ b/website/src/pages/themes/_components/slider.tsx
@@ -36,9 +36,10 @@ const Slider = ({
     <div className={className}>
       <label
         htmlFor={id}
-        className="block mb-1 text-sm font-medium text-grayscale-900 dark:text-white"
+        className="flex flex-row mb-1 text-sm text-grayscale-900 dark:text-white"
       >
-        <span className="text-sm font-bold">{label}</span>: {valueString}
+        <span className="flex-1 text-sm font-bold ">{label}</span>
+        <span className="">{valueString}</span>
       </label>
       <input
         id={id}
diff --git a/website/src/pages/themes/_config/axis.tsx b/website/src/pages/themes/_config/axis.tsx
new file mode 100644
index 000000000..52a34ee9a
--- /dev/null
+++ b/website/src/pages/themes/_config/axis.tsx
@@ -0,0 +1,170 @@
+/* eslint-disable no-magic-numbers */
+import React from "react";
+import {
+  getBaseLabelsConfig,
+  getBaseStrokeConfig,
+  StrokeProps,
+} from "../_utils";
+import { VictoryAxis, VictoryPolarAxis } from "victory";
+import { ControlConfig, OptionsPanelConfig } from ".";
+
+const generalAxisOptionsConfig: ControlConfig = {
+  type: "accordion",
+  label: "Base Axis",
+  content: (props) => [
+    <VictoryAxis key="x-axis" label="X Axis" {...props} />,
+    <VictoryAxis key="y-axis" dependentAxis label="Y Axis" {...props} />,
+  ],
+  controls: [
+    {
+      type: "section",
+      label: "General",
+      controls: getBaseStrokeConfig("axis.style.axis", [
+        StrokeProps.STROKE,
+        StrokeProps.STROKE_WIDTH,
+        StrokeProps.STROKE_LINE_CAP,
+        StrokeProps.STROKE_LINE_JOIN,
+      ]),
+    },
+    {
+      type: "section",
+      label: "Grid",
+      controls: getBaseStrokeConfig("axis.style.grid"),
+    },
+    {
+      type: "section",
+      label: "Ticks",
+      controls: [
+        {
+          type: "slider",
+          label: "Size",
+          min: 0,
+          max: 50,
+          unit: "px",
+          path: "axis.style.ticks.size",
+        },
+        ...getBaseStrokeConfig("axis.style.ticks", [
+          StrokeProps.STROKE,
+          StrokeProps.STROKE_WIDTH,
+        ]),
+      ],
+    },
+    {
+      type: "section",
+      label: "Labels",
+      controls: getBaseLabelsConfig("axis.style.axisLabel"),
+    },
+  ],
+};
+
+const polarAxisOptionsConfig = {
+  type: "accordion",
+  label: "Polar Axis",
+  content: (props) => [
+    <VictoryPolarAxis {...props} key="polar-axis" standalone={false} />,
+    <VictoryPolarAxis
+      {...props}
+      key="polar-axis-dependent"
+      dependentAxis
+      domain={[0, 10]}
+      standalone={false}
+    />,
+  ],
+  controls: [
+    {
+      type: "section",
+      label: "General",
+      controls: getBaseStrokeConfig("polarAxis.style.axis", [
+        StrokeProps.STROKE,
+        StrokeProps.STROKE_WIDTH,
+      ]),
+    },
+    {
+      type: "section",
+      label: "Grid",
+      controls: getBaseStrokeConfig("polarAxis.style.grid"),
+    },
+    {
+      type: "section",
+      label: "Ticks",
+      controls: [
+        {
+          type: "slider",
+          label: "Size",
+          min: 0,
+          max: 50,
+          unit: "px",
+          path: "polarAxis.style.ticks.size",
+        },
+        ...getBaseStrokeConfig("polarAxis.style.ticks", [
+          StrokeProps.STROKE,
+          StrokeProps.STROKE_WIDTH,
+          StrokeProps.STROKE_LINE_CAP,
+          StrokeProps.STROKE_LINE_JOIN,
+        ]),
+      ],
+    },
+    {
+      type: "section",
+      label: "Labels",
+      controls: getBaseLabelsConfig("polarAxis.style.tickLabels"),
+    },
+  ],
+};
+
+const polarDependentAxisOptionsConfig: ControlConfig = {
+  type: "accordion",
+  label: "Polar Dependent Axis",
+  controls: [
+    {
+      type: "section",
+      label: "General",
+      controls: getBaseStrokeConfig("polarDependentAxis.style.axis", [
+        StrokeProps.STROKE,
+        StrokeProps.STROKE_WIDTH,
+      ]),
+    },
+    {
+      type: "section",
+      label: "Grid",
+      controls: getBaseStrokeConfig("polarDependentAxis.style.grid"),
+    },
+    {
+      type: "section",
+      label: "Ticks",
+      controls: [
+        {
+          type: "slider",
+          label: "Size",
+          min: 0,
+          max: 50,
+          unit: "px",
+          path: "polarDependentAxis.style.ticks.size",
+        },
+        ...getBaseStrokeConfig("polarDependentAxis.style.ticks", [
+          StrokeProps.STROKE,
+          StrokeProps.STROKE_WIDTH,
+          StrokeProps.STROKE_LINE_CAP,
+          StrokeProps.STROKE_LINE_JOIN,
+        ]),
+      ],
+    },
+    {
+      type: "section",
+      label: "Labels",
+      controls: getBaseLabelsConfig("polarDependentAxis.style.tickLabels"),
+    },
+  ],
+};
+
+const axisOptionsConfig: OptionsPanelConfig = {
+  title: "Axis Options",
+  description: "Customize the appearance of axes in your charts.",
+  controls: [
+    generalAxisOptionsConfig,
+    polarAxisOptionsConfig,
+    polarDependentAxisOptionsConfig,
+  ],
+};
+
+export default axisOptionsConfig;
diff --git a/website/src/pages/themes/_config.tsx b/website/src/pages/themes/_config/chart.tsx
similarity index 60%
rename from website/src/pages/themes/_config.tsx
rename to website/src/pages/themes/_config/chart.tsx
index 03a703bff..244208019 100644
--- a/website/src/pages/themes/_config.tsx
+++ b/website/src/pages/themes/_config/chart.tsx
@@ -12,413 +12,23 @@ import {
   VictoryLegend,
   VictoryLine,
   VictoryPie,
-  VictoryPolarAxis,
   VictoryScatter,
   VictoryVoronoi,
 } from "victory";
-import { colorScaleOptions } from "./_components/color-scale-options";
-
-type ThemeBuilderFieldConfig =
-  | {
-      type: "section" | "colorScale";
-      label: string;
-      fields?: ThemeBuilderFieldConfig[];
-    }
-  | {
-      type: "slider" | "select" | "colorPicker";
-      label: string;
-      path: string | string[];
-      min?: number;
-      max?: number;
-      step?: number;
-      unit?: string;
-      options?: { label: string; value: string }[];
-    };
-
-enum StrokeProps {
-  STROKE = "Stroke",
-  STROKE_WIDTH = "Stroke Width",
-  STROKE_DASH_ARRAY = "Stroke Dash Array",
-  STROKE_LINE_CAP = "Stroke Line Cap",
-  STROKE_LINE_JOIN = "Stroke Line Join",
-}
-
-type ThemeBuilderOptionsConfig = {
-  type: "section";
-  title: string;
-  hasVictoryChart?: boolean;
-  content?: (props: any) => React.ReactNode;
-  fields: ThemeBuilderFieldConfig[];
-}[];
-
-const getPath = (basePath: string | string[], key: string) => {
-  if (Array.isArray(basePath)) {
-    return basePath.map((p) => `${p}.${key}`);
-  }
-  return `${basePath}.${key}`;
-};
-
-const getNestedColorScaleConfig = (
-  basePath: string | string[],
-): ThemeBuilderFieldConfig[] => [
-  {
-    type: "select",
-    label: "Color Scale",
-    options: colorScaleOptions,
-    path: getPath(basePath, "colorScale"),
-  },
-];
-
-const getBaseStrokeConfig = (
-  basePath: string | string[],
-  includedStrokeProps: StrokeProps[] = [],
-): ThemeBuilderFieldConfig[] => {
-  const config = [
-    {
-      type: "colorPicker",
-      label: StrokeProps.STROKE,
-      path: getPath(basePath, "stroke"),
-    },
-    {
-      type: "slider",
-      label: StrokeProps.STROKE_WIDTH,
-      min: 0,
-      max: 5,
-      unit: "px",
-      path: getPath(basePath, "strokeWidth"),
-    },
-    {
-      type: "slider",
-      label: StrokeProps.STROKE_DASH_ARRAY,
-      min: 0,
-      max: 10,
-      path: getPath(basePath, "strokeDasharray"),
-    },
-    {
-      type: "select",
-      label: StrokeProps.STROKE_LINE_CAP,
-      options: [
-        { label: "Round", value: "round" },
-        { label: "Square", value: "square" },
-        { label: "Butt", value: "butt" },
-      ],
-      path: getPath(basePath, "strokeLinecap"),
-    },
-    {
-      type: "select",
-      label: StrokeProps.STROKE_LINE_JOIN,
-      options: [
-        { label: "Round", value: "round" },
-        { label: "Bevel", value: "bevel" },
-        { label: "Miter", value: "miter" },
-      ],
-      path: getPath(basePath, "strokeLinejoin"),
-    },
-  ] as ThemeBuilderFieldConfig[];
-  return includedStrokeProps.length
-    ? config.filter((field) =>
-        includedStrokeProps.includes(field.label as StrokeProps),
-      )
-    : config;
-};
-
-const getBaseLabelsConfig = (
-  basePath: string | string[],
-): ThemeBuilderFieldConfig[] => [
-  {
-    type: "slider",
-    label: "Font Size",
-    min: 10,
-    max: 24,
-    unit: "px",
-    path: getPath(basePath, "fontSize"),
-  },
-  {
-    type: "slider",
-    label: "Text Padding",
-    min: 0,
-    max: 50,
-    unit: "px",
-    path: getPath(basePath, "padding"),
-  },
-  {
-    type: "colorPicker",
-    label: "Font Color",
-    path: getPath(basePath, "fill"),
-  },
-];
+import {
+  getBaseLabelsConfig,
+  getBaseStrokeConfig,
+  getNestedColorScaleConfig,
+  StrokeProps,
+} from "../_utils";
+import { ControlConfig } from ".";
 
-const optionsConfig: ThemeBuilderOptionsConfig = [
-  {
-    type: "section",
-    title: "Palette",
-    fields: [
-      {
-        type: "colorScale",
-        label: "Color Scale",
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Global Settings",
-    fields: [
-      {
-        type: "slider",
-        label: "Width",
-        min: 0,
-        max: 500,
-        unit: "px",
-        path: [
-          "chart.width",
-          "axis.width",
-          "area.width",
-          "bar.width",
-          "boxplot.width",
-          "candlestick.width",
-          "errorbar.width",
-          "group.width",
-          "histogram.width",
-          "line.width",
-          "pie.width",
-          "scatter.width",
-          "stack.width",
-          "voronoi.width",
-        ],
-      },
-      {
-        type: "slider",
-        label: "Height",
-        min: 0,
-        max: 500,
-        unit: "px",
-        path: [
-          "chart.height",
-          "axis.height",
-          "area.height",
-          "bar.height",
-          "boxplot.height",
-          "candlestick.height",
-          "errorbar.height",
-          "group.height",
-          "histogram.height",
-          "line.height",
-          "pie.height",
-          "scatter.height",
-          "stack.height",
-          "voronoi.height",
-        ],
-      },
-      {
-        type: "slider",
-        label: "Padding",
-        min: 0,
-        max: 100,
-        unit: "px",
-        path: [
-          "chart.padding",
-          "axis.padding",
-          "area.padding",
-          "bar.padding",
-          "boxplot.padding",
-          "candlestick.padding",
-          "errorbar.padding",
-          "group.padding",
-          "histogram.padding",
-          "line.padding",
-          "pie.padding",
-          "scatter.padding",
-          "stack.padding",
-          "voronoi.padding",
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig([
-          "axis.style.axisLabel",
-          "polarAxis.style.tickLabels",
-          "polarDependentAxis.style.tickLabels",
-          "tooltip.style",
-          "area.style.labels",
-          "bar.style.labels",
-          "candlestick.style.labels",
-          "errorbar.style.labels",
-          "histogram.style.labels",
-          "legend.style.labels",
-          "line.style.labels",
-          "pie.style.labels",
-          "scatter.style.labels",
-          "voronoi.style.labels",
-          "boxplot.style.maxLabels",
-          "boxplot.style.medianLabels",
-          "boxplot.style.minLabels",
-          "boxplot.style.q1Labels",
-          "boxplot.style.q3Labels",
-        ]),
-      },
-      {
-        type: "section",
-        label: "Data",
-        fields: getBaseStrokeConfig([
-          "area.style.data",
-          "bar.style.data",
-          "candlestick.style.data",
-          "errorbar.style.data",
-          "histogram.style.data",
-          "line.style.data",
-          "pie.style.data",
-          "scatter.style.data",
-          "voronoi.style.data",
-        ]),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Axis",
-    fields: [
-      {
-        type: "section",
-        label: "General",
-        fields: getBaseStrokeConfig("axis.style.axis", [
-          StrokeProps.STROKE,
-          StrokeProps.STROKE_WIDTH,
-          StrokeProps.STROKE_LINE_CAP,
-          StrokeProps.STROKE_LINE_JOIN,
-        ]),
-      },
-      {
-        type: "section",
-        label: "Grid",
-        fields: getBaseStrokeConfig("axis.style.grid"),
-      },
-      {
-        type: "section",
-        label: "Ticks",
-        fields: [
-          {
-            type: "slider",
-            label: "Size",
-            min: 0,
-            max: 50,
-            unit: "px",
-            path: "axis.style.ticks.size",
-          },
-          ...getBaseStrokeConfig("axis.style.ticks", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-          ]),
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("axis.style.axisLabel"),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Polar Axis",
-    content: (props) => [
-      <VictoryPolarAxis {...props} key="polar-axis" standalone={false} />,
-      <VictoryPolarAxis
-        {...props}
-        key="polar-axis-dependent"
-        dependentAxis
-        domain={[0, 10]}
-        standalone={false}
-      />,
-    ],
-    fields: [
-      {
-        type: "section",
-        label: "General",
-        fields: getBaseStrokeConfig("polarAxis.style.axis", [
-          StrokeProps.STROKE,
-          StrokeProps.STROKE_WIDTH,
-        ]),
-      },
-      {
-        type: "section",
-        label: "Grid",
-        fields: getBaseStrokeConfig("polarAxis.style.grid"),
-      },
-      {
-        type: "section",
-        label: "Ticks",
-        fields: [
-          {
-            type: "slider",
-            label: "Size",
-            min: 0,
-            max: 50,
-            unit: "px",
-            path: "polarAxis.style.ticks.size",
-          },
-          ...getBaseStrokeConfig("polarAxis.style.ticks", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-            StrokeProps.STROKE_LINE_CAP,
-            StrokeProps.STROKE_LINE_JOIN,
-          ]),
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("polarAxis.style.tickLabels"),
-      },
-    ],
-  },
-  {
+const chartOptionsConfig: {
+  [key: string]: ControlConfig;
+} = {
+  area: {
     type: "section",
-    title: "Polar Dependent Axis",
-    fields: [
-      {
-        type: "section",
-        label: "General",
-        fields: getBaseStrokeConfig("polarDependentAxis.style.axis", [
-          StrokeProps.STROKE,
-          StrokeProps.STROKE_WIDTH,
-        ]),
-      },
-      {
-        type: "section",
-        label: "Grid",
-        fields: getBaseStrokeConfig("polarDependentAxis.style.grid"),
-      },
-      {
-        type: "section",
-        label: "Ticks",
-        fields: [
-          {
-            type: "slider",
-            label: "Size",
-            min: 0,
-            max: 50,
-            unit: "px",
-            path: "polarDependentAxis.style.ticks.size",
-          },
-          ...getBaseStrokeConfig("polarDependentAxis.style.ticks", [
-            StrokeProps.STROKE,
-            StrokeProps.STROKE_WIDTH,
-            StrokeProps.STROKE_LINE_CAP,
-            StrokeProps.STROKE_LINE_JOIN,
-          ]),
-        ],
-      },
-      {
-        type: "section",
-        label: "Labels",
-        fields: getBaseLabelsConfig("polarDependentAxis.style.tickLabels"),
-      },
-    ],
-  },
-  {
-    type: "section",
-    title: "Area Chart",
+    label: "Area Chart",
     content: (props) => [
       <VictoryAxis key="x-axis" label="X Axis" />,
       <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
@@ -434,11 +44,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         ]}
       />,
     ],
-    fields: [
+    controls: [
       {
         type: "section",
         label: "Data",
-        fields: [
+        controls: [
           {
             type: "slider",
             label: "Fill Opacity",
@@ -461,13 +71,13 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Labels",
-        fields: getBaseLabelsConfig("area.style.labels"),
+        controls: getBaseLabelsConfig("area.style.labels"),
       },
     ],
   },
-  {
+  bar: {
     type: "section",
-    title: "Bar Chart",
+    label: "Bar Chart",
     content: (props) => [
       <VictoryAxis key="x-axis" label="X Axis" />,
       <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
@@ -501,11 +111,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         />
       </VictoryGroup>,
     ],
-    fields: [
+    controls: [
       {
         type: "section",
         label: "Data",
-        fields: [
+        controls: [
           {
             type: "colorPicker",
             label: "Fill",
@@ -535,13 +145,13 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Labels",
-        fields: getBaseLabelsConfig("bar.style.labels"),
+        controls: getBaseLabelsConfig("bar.style.labels"),
       },
     ],
   },
-  {
+  boxPlot: {
     type: "section",
-    title: "Box Plot",
+    label: "Box Plot",
     content: (props) => (
       <VictoryBoxPlot
         {...props}
@@ -556,11 +166,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         labelOrientation="right"
       />
     ),
-    fields: [
+    controls: [
       {
         type: "section",
         label: "Max",
-        fields: [
+        controls: [
           ...getBaseStrokeConfig("boxplot.style.max", [
             StrokeProps.STROKE,
             StrokeProps.STROKE_WIDTH,
@@ -571,7 +181,7 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Median",
-        fields: [
+        controls: [
           ...getBaseStrokeConfig("boxplot.style.median", [
             StrokeProps.STROKE,
             StrokeProps.STROKE_WIDTH,
@@ -582,7 +192,7 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Min",
-        fields: [
+        controls: [
           ...getBaseStrokeConfig("boxplot.style.min", [
             StrokeProps.STROKE,
             StrokeProps.STROKE_WIDTH,
@@ -593,7 +203,7 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Q1",
-        fields: [
+        controls: [
           {
             type: "colorPicker",
             label: "Fill",
@@ -621,7 +231,7 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Q3",
-        fields: [
+        controls: [
           {
             type: "colorPicker",
             label: "Fill",
@@ -640,9 +250,9 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       },
     ],
   },
-  {
+  candlestick: {
     type: "section",
-    title: "Candlestick Chart",
+    label: "Candlestick Chart",
     content: (props) => (
       <VictoryCandlestick
         {...props}
@@ -690,11 +300,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         ]}
       />
     ),
-    fields: [
+    controls: [
       {
         type: "section",
         label: "Data",
-        fields: [
+        controls: [
           ...getBaseStrokeConfig("candlestick.style.data", [
             StrokeProps.STROKE,
             StrokeProps.STROKE_WIDTH,
@@ -719,12 +329,12 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Labels",
-        fields: getBaseLabelsConfig("candlestick.style.labels"),
+        controls: getBaseLabelsConfig("candlestick.style.labels"),
       },
       {
         type: "section",
         label: "Colors",
-        fields: [
+        controls: [
           {
             type: "colorPicker",
             label: "Positive Color",
@@ -739,9 +349,9 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       },
     ],
   },
-  {
+  errorBar: {
     type: "section",
-    title: "Error Bar",
+    label: "Error Bar",
     content: (props) => (
       <VictoryErrorBar
         {...props}
@@ -754,11 +364,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         ]}
       />
     ),
-    fields: [
+    controls: [
       {
         type: "section",
         label: "Data",
-        fields: [
+        controls: [
           {
             type: "slider",
             label: "Border Width",
@@ -777,13 +387,13 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Labels",
-        fields: getBaseLabelsConfig("errorbar.style.labels"),
+        controls: getBaseLabelsConfig("errorbar.style.labels"),
       },
     ],
   },
-  {
+  histogram: {
     type: "section",
-    title: "Histogram",
+    label: "Histogram",
     content: (props) => (
       <VictoryHistogram
         {...props}
@@ -804,11 +414,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         labels={({ datum }) => `Bin count:\n ${datum.x}`}
       />
     ),
-    fields: [
+    controls: [
       {
         type: "section",
         label: "Data",
-        fields: [
+        controls: [
           {
             type: "colorPicker",
             label: "Fill",
@@ -842,18 +452,18 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Labels",
-        fields: getBaseLabelsConfig("histogram.style.labels"),
+        controls: getBaseLabelsConfig("histogram.style.labels"),
       },
     ],
   },
-  {
+  group: {
     type: "section",
-    title: "Group",
-    fields: [
+    label: "Group",
+    controls: [
       {
         type: "section",
         label: "Data",
-        fields: [
+        controls: [
           ...getNestedColorScaleConfig("group"),
           {
             type: "slider",
@@ -867,9 +477,9 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       },
     ],
   },
-  {
+  legend: {
     type: "section",
-    title: "Legend",
+    label: "Legend",
     content: (props) => [
       <VictoryLegend
         {...props}
@@ -918,11 +528,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         }}
       />,
     ],
-    fields: [
+    controls: [
       {
         type: "section",
         label: "General",
-        fields: [
+        controls: [
           {
             type: "slider",
             label: "Gutter",
@@ -975,26 +585,26 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Labels",
-        fields: getBaseLabelsConfig("legend.style.labels"),
+        controls: getBaseLabelsConfig("legend.style.labels"),
       },
       {
         type: "section",
         label: "Title",
-        fields: getBaseLabelsConfig("legend.style.title"),
+        controls: getBaseLabelsConfig("legend.style.title"),
       },
       {
         type: "section",
         label: "Border",
-        fields: getBaseStrokeConfig("legend.style.border", [
+        controls: getBaseStrokeConfig("legend.style.border", [
           StrokeProps.STROKE,
           StrokeProps.STROKE_WIDTH,
         ]),
       },
     ],
   },
-  {
+  line: {
     type: "section",
-    title: "Line Chart",
+    label: "Line Chart",
     content: (props) => [
       <VictoryAxis key="x-axis" label="X Axis" />,
       <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
@@ -1011,11 +621,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         labels={({ datum }) => datum.y}
       />,
     ],
-    fields: [
+    controls: [
       {
         type: "section",
         label: "Data",
-        fields: getBaseStrokeConfig("line.style.data", [
+        controls: getBaseStrokeConfig("line.style.data", [
           StrokeProps.STROKE,
           StrokeProps.STROKE_WIDTH,
           StrokeProps.STROKE_LINE_CAP,
@@ -1025,13 +635,13 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Labels",
-        fields: getBaseLabelsConfig("line.style.labels"),
+        controls: getBaseLabelsConfig("line.style.labels"),
       },
     ],
   },
-  {
+  pie: {
     type: "section",
-    title: "Pie Chart",
+    label: "Pie Chart",
     hasVictoryChart: false,
     content: (props) => (
       <VictoryPie
@@ -1045,11 +655,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         ]}
       />
     ),
-    fields: [
+    controls: [
       {
         type: "section",
         label: "Data",
-        fields: [
+        controls: [
           ...getNestedColorScaleConfig("pie"),
           {
             type: "slider",
@@ -1068,13 +678,13 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Labels",
-        fields: getBaseLabelsConfig("pie.style.labels"),
+        controls: getBaseLabelsConfig("pie.style.labels"),
       },
     ],
   },
-  {
+  scatter: {
     type: "section",
-    title: "Scatter Chart",
+    label: "Scatter Chart",
     content: (props) => (
       <VictoryScatter
         {...props}
@@ -1087,11 +697,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         ]}
       />
     ),
-    fields: [
+    controls: [
       {
         type: "section",
         label: "Data",
-        fields: [
+        controls: [
           {
             type: "colorPicker",
             label: "Fill",
@@ -1114,18 +724,18 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Labels",
-        fields: getBaseLabelsConfig("scatter.style.labels"),
+        controls: getBaseLabelsConfig("scatter.style.labels"),
       },
     ],
   },
-  {
+  tooltip: {
     type: "section",
-    title: "Tooltip",
-    fields: [
+    label: "Tooltip",
+    controls: [
       {
         type: "section",
         label: "General",
-        fields: [
+        controls: [
           ...getBaseLabelsConfig("tooltip.style"),
           {
             type: "slider",
@@ -1146,7 +756,7 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Flyout",
-        fields: [
+        controls: [
           {
             type: "colorPicker",
             label: "Fill",
@@ -1169,9 +779,9 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       },
     ],
   },
-  {
+  voronoi: {
     type: "section",
-    title: "Voronoi",
+    label: "Voronoi",
     content: (props) => (
       <VictoryVoronoi
         {...props}
@@ -1184,11 +794,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
         ]}
       />
     ),
-    fields: [
+    controls: [
       {
         type: "section",
         label: "General",
-        fields: [
+        controls: [
           {
             type: "colorPicker",
             label: "Fill",
@@ -1203,10 +813,10 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       {
         type: "section",
         label: "Labels",
-        fields: getBaseLabelsConfig("voronoi.style.labels"),
+        controls: getBaseLabelsConfig("voronoi.style.labels"),
       },
     ],
   },
-];
+};
 
-export default optionsConfig;
+export default chartOptionsConfig;
diff --git a/website/src/pages/themes/_config/global.tsx b/website/src/pages/themes/_config/global.tsx
new file mode 100644
index 000000000..6493d507a
--- /dev/null
+++ b/website/src/pages/themes/_config/global.tsx
@@ -0,0 +1,126 @@
+import { OptionsPanelConfig } from ".";
+import { getBaseLabelsConfig, getBaseStrokeConfig } from "../_utils";
+
+const globalOptionsConfig: OptionsPanelConfig = {
+  title: "Global Options",
+  description: "Customize the appearance of all charts.",
+  controls: [
+    {
+      type: "section",
+      label: "Chart Size",
+      controls: [
+        {
+          type: "slider",
+          label: "Width",
+          min: 0,
+          max: 500,
+          unit: "px",
+          path: [
+            "chart.width",
+            "axis.width",
+            "area.width",
+            "bar.width",
+            "boxplot.width",
+            "candlestick.width",
+            "errorbar.width",
+            "group.width",
+            "histogram.width",
+            "line.width",
+            "pie.width",
+            "scatter.width",
+            "stack.width",
+            "voronoi.width",
+          ],
+        },
+        {
+          type: "slider",
+          label: "Height",
+          min: 0,
+          max: 500,
+          unit: "px",
+          path: [
+            "chart.height",
+            "axis.height",
+            "area.height",
+            "bar.height",
+            "boxplot.height",
+            "candlestick.height",
+            "errorbar.height",
+            "group.height",
+            "histogram.height",
+            "line.height",
+            "pie.height",
+            "scatter.height",
+            "stack.height",
+            "voronoi.height",
+          ],
+        },
+        {
+          type: "slider",
+          label: "Padding",
+          min: 0,
+          max: 100,
+          unit: "px",
+          path: [
+            "chart.padding",
+            "axis.padding",
+            "area.padding",
+            "bar.padding",
+            "boxplot.padding",
+            "candlestick.padding",
+            "errorbar.padding",
+            "group.padding",
+            "histogram.padding",
+            "line.padding",
+            "pie.padding",
+            "scatter.padding",
+            "stack.padding",
+            "voronoi.padding",
+          ],
+        },
+      ],
+    },
+    {
+      type: "section",
+      label: "Labels",
+      controls: getBaseLabelsConfig([
+        "axis.style.axisLabel",
+        "polarAxis.style.tickLabels",
+        "polarDependentAxis.style.tickLabels",
+        "tooltip.style",
+        "area.style.labels",
+        "bar.style.labels",
+        "candlestick.style.labels",
+        "errorbar.style.labels",
+        "histogram.style.labels",
+        "legend.style.labels",
+        "line.style.labels",
+        "pie.style.labels",
+        "scatter.style.labels",
+        "voronoi.style.labels",
+        "boxplot.style.maxLabels",
+        "boxplot.style.medianLabels",
+        "boxplot.style.minLabels",
+        "boxplot.style.q1Labels",
+        "boxplot.style.q3Labels",
+      ]),
+    },
+    {
+      type: "section",
+      label: "Data",
+      controls: getBaseStrokeConfig([
+        "area.style.data",
+        "bar.style.data",
+        "candlestick.style.data",
+        "errorbar.style.data",
+        "histogram.style.data",
+        "line.style.data",
+        "pie.style.data",
+        "scatter.style.data",
+        "voronoi.style.data",
+      ]),
+    },
+  ],
+};
+
+export default globalOptionsConfig;
diff --git a/website/src/pages/themes/_config/index.tsx b/website/src/pages/themes/_config/index.tsx
new file mode 100644
index 000000000..2d4ebaf19
--- /dev/null
+++ b/website/src/pages/themes/_config/index.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+export type ControlConfig = {
+  label: string;
+  content?: (props: any) => React.ReactNode;
+  controls?: ControlConfig[];
+} & (
+  | {
+      type: "section" | "colorScale" | "accordion";
+    }
+  | {
+      type: "slider" | "select" | "colorPicker";
+      path: string | string[];
+      min?: number;
+      max?: number;
+      step?: number;
+      unit?: string;
+      options?: { label: string; value: string }[];
+    }
+);
+
+export type OptionsPanelConfig = {
+  title: string;
+  description?: string;
+  hasVictoryChart?: boolean;
+  controls: ControlConfig[];
+};
+
+export { default as paletteOptionsConfig } from "./palette";
+export { default as globalOptionsConfig } from "./global";
+export { default as axisOptionsConfig } from "./axis";
+export { default as chartOptionsConfig } from "./chart";
diff --git a/website/src/pages/themes/_config/palette.tsx b/website/src/pages/themes/_config/palette.tsx
new file mode 100644
index 000000000..55bbd31d1
--- /dev/null
+++ b/website/src/pages/themes/_config/palette.tsx
@@ -0,0 +1,14 @@
+import { OptionsPanelConfig } from ".";
+import { colorScaleOptions } from "../_components/color-scale-options";
+
+const paletteOptionsConfig: OptionsPanelConfig = {
+  title: "Color Palette",
+  description: "Choose custom colors for each color scale.",
+  controls: colorScaleOptions.map((option) => ({
+    type: "colorScale",
+    colorScaleType: option.value,
+    label: option.label,
+  })),
+};
+
+export default paletteOptionsConfig;
diff --git a/website/src/pages/themes/_providers/previewOptionsProvider.tsx b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
new file mode 100644
index 000000000..093439dcd
--- /dev/null
+++ b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
@@ -0,0 +1,65 @@
+import React, { createContext, useContext } from "react";
+
+type PreviewOptionsContextType = {
+  colorScale?: string;
+  updateColorScale: (newColorScale: string) => void;
+  showTooltips: boolean;
+  setShowTooltips: (showTooltips: boolean) => void;
+  resetPreviewOptions: () => void;
+  exampleConfigs: any[];
+  setExampleConfigs: (exampleConfigs: any[]) => void;
+};
+
+export const defaultColorScale = undefined;
+export const defaultShowTooltips = false;
+export const defaultExampleConfigs = [];
+
+const PreviewOptionsContext = createContext<
+  PreviewOptionsContextType | undefined
+>(undefined);
+
+export const PreviewOptionsProvider = ({ children }) => {
+  const [colorScale, setColorScale] = React.useState<string | undefined>(
+    defaultColorScale,
+  );
+  const [showTooltips, setShowTooltips] = React.useState(defaultShowTooltips);
+  const [exampleConfigs, setExampleConfigs] = React.useState<any[]>(
+    defaultExampleConfigs,
+  );
+
+  const updateColorScale = (newColorScale: string) => {
+    const updatedColorScale = newColorScale === "" ? undefined : newColorScale;
+    setColorScale(updatedColorScale);
+  };
+
+  const resetPreviewOptions = () => {
+    setColorScale(defaultColorScale);
+    setShowTooltips(defaultShowTooltips);
+  };
+
+  return (
+    <PreviewOptionsContext.Provider
+      value={{
+        colorScale,
+        updateColorScale,
+        showTooltips,
+        setShowTooltips,
+        resetPreviewOptions,
+        exampleConfigs,
+        setExampleConfigs,
+      }}
+    >
+      {children}
+    </PreviewOptionsContext.Provider>
+  );
+};
+
+export const usePreviewOptions = () => {
+  const context = useContext(PreviewOptionsContext);
+  if (context === undefined) {
+    throw new Error(
+      "usePreviewOptions must be used within a PreviewOptionsProvider",
+    );
+  }
+  return context;
+};
diff --git a/website/src/pages/themes/_providers/themeProvider.tsx b/website/src/pages/themes/_providers/themeProvider.tsx
new file mode 100644
index 000000000..f4a42a483
--- /dev/null
+++ b/website/src/pages/themes/_providers/themeProvider.tsx
@@ -0,0 +1,73 @@
+import React, { createContext, useCallback, useContext } from "react";
+import { VictoryTheme, VictoryThemeDefinition } from "victory";
+import { setNestedConfigValue } from "../_utils";
+
+export type ThemeOption = {
+  name: string;
+  config?: VictoryThemeDefinition;
+};
+
+type ThemeContextType = {
+  baseTheme: ThemeOption | undefined;
+  onBaseThemeSelect: (themeName?: string) => void;
+  customThemeConfig: VictoryThemeDefinition | undefined;
+  updateCustomThemeConfig: (path: string | string[], newValue: unknown) => void;
+};
+
+export const themes: ThemeOption[] = [
+  { name: "Clean", config: VictoryTheme.clean },
+  { name: "Material", config: VictoryTheme.material },
+  { name: "Grayscale", config: VictoryTheme.grayscale },
+];
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const ThemeProvider = ({ children }) => {
+  const [baseTheme, setBaseTheme] = React.useState<ThemeOption | undefined>(
+    undefined,
+  );
+  const [customThemeConfig, setCustomThemeConfig] = React.useState<
+    VictoryThemeDefinition | undefined
+  >(undefined);
+
+  const onBaseThemeSelect = (themeName?: string) => {
+    const theme = themes.find((t) => t.name === themeName);
+    if (!theme) return;
+    setBaseTheme(theme);
+    setCustomThemeConfig({ ...theme?.config });
+  };
+
+  const updateCustomThemeConfig = useCallback(
+    (path: string | string[], newValue: unknown) => {
+      if (!customThemeConfig) return;
+      const updatedConfig = setNestedConfigValue(
+        customThemeConfig,
+        path,
+        newValue,
+      );
+      setCustomThemeConfig(updatedConfig);
+    },
+    [customThemeConfig],
+  );
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        baseTheme,
+        onBaseThemeSelect,
+        customThemeConfig,
+        updateCustomThemeConfig,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
diff --git a/website/src/pages/themes/_utils.ts b/website/src/pages/themes/_utils.ts
index e58e1a890..ecac4f47c 100644
--- a/website/src/pages/themes/_utils.ts
+++ b/website/src/pages/themes/_utils.ts
@@ -1,4 +1,6 @@
 import { VictoryThemeDefinition } from "victory-core";
+import { ControlConfig } from "./_config";
+import { colorScaleOptions } from "./_components/color-scale-options";
 
 export const setNestedConfigValue = (
   config: VictoryThemeDefinition,
@@ -35,3 +37,109 @@ export const getConfigValue = (
     return acc && acc[key] !== undefined ? acc[key] : defaultValue;
   }, config);
 };
+
+// Config helpers
+export enum StrokeProps {
+  STROKE = "Stroke",
+  STROKE_WIDTH = "Stroke Width",
+  STROKE_DASH_ARRAY = "Stroke Dash Array",
+  STROKE_LINE_CAP = "Stroke Line Cap",
+  STROKE_LINE_JOIN = "Stroke Line Join",
+}
+
+export const getPath = (basePath: string | string[], key: string) => {
+  if (Array.isArray(basePath)) {
+    return basePath.map((p) => `${p}.${key}`);
+  }
+  return `${basePath}.${key}`;
+};
+
+export const getNestedColorScaleConfig = (
+  basePath: string | string[],
+): ControlConfig[] => [
+  {
+    type: "select",
+    label: "Color Scale",
+    options: colorScaleOptions,
+    path: getPath(basePath, "colorScale"),
+  },
+];
+
+export const getBaseStrokeConfig = (
+  basePath: string | string[],
+  includedStrokeProps: StrokeProps[] = [],
+): ControlConfig[] => {
+  const config = [
+    {
+      type: "colorPicker",
+      label: StrokeProps.STROKE,
+      path: getPath(basePath, "stroke"),
+    },
+    {
+      type: "slider",
+      label: StrokeProps.STROKE_WIDTH,
+      min: 0,
+      max: 5,
+      unit: "px",
+      path: getPath(basePath, "strokeWidth"),
+    },
+    {
+      type: "slider",
+      label: StrokeProps.STROKE_DASH_ARRAY,
+      min: 0,
+      max: 10,
+      path: getPath(basePath, "strokeDasharray"),
+    },
+    {
+      type: "select",
+      label: StrokeProps.STROKE_LINE_CAP,
+      options: [
+        { label: "Round", value: "round" },
+        { label: "Square", value: "square" },
+        { label: "Butt", value: "butt" },
+      ],
+      path: getPath(basePath, "strokeLinecap"),
+    },
+    {
+      type: "select",
+      label: StrokeProps.STROKE_LINE_JOIN,
+      options: [
+        { label: "Round", value: "round" },
+        { label: "Bevel", value: "bevel" },
+        { label: "Miter", value: "miter" },
+      ],
+      path: getPath(basePath, "strokeLinejoin"),
+    },
+  ] as ControlConfig[];
+  return includedStrokeProps.length
+    ? config.filter((field) =>
+        includedStrokeProps.includes(field.label as StrokeProps),
+      )
+    : config;
+};
+
+export const getBaseLabelsConfig = (
+  basePath: string | string[],
+): ControlConfig[] => [
+  {
+    type: "slider",
+    label: "Font Size",
+    min: 10,
+    max: 24,
+    unit: "px",
+    path: getPath(basePath, "fontSize"),
+  },
+  {
+    type: "slider",
+    label: "Text Padding",
+    min: 0,
+    max: 50,
+    unit: "px",
+    path: getPath(basePath, "padding"),
+  },
+  {
+    type: "colorPicker",
+    label: "Font Color",
+    path: getPath(basePath, "fill"),
+  },
+];
diff --git a/website/src/pages/themes/index.tsx b/website/src/pages/themes/index.tsx
index 4fada594e..d8dd0bc48 100644
--- a/website/src/pages/themes/index.tsx
+++ b/website/src/pages/themes/index.tsx
@@ -2,289 +2,53 @@ import React from "react";
 
 import "../../css/custom.css";
 
-import {
-  ColorScalePropType,
-  VictoryArea,
-  VictoryAxis,
-  VictoryBar,
-  VictoryChart,
-  VictoryStack,
-  VictoryTheme,
-  VictoryThemeDefinition,
-  VictoryTooltip,
-} from "victory";
-import Select from "./_components/select";
-import ConfigPreview from "./_components/config-preview";
-import Button from "./_components/button";
-import ConfigMapper from "./_components/config-mapper";
-import { setNestedConfigValue } from "./_utils";
-import optionsConfig from "./_config";
 import Layout from "@theme/Layout";
-
-export type ThemeOption = {
-  name: string;
-  config?: VictoryThemeDefinition;
-};
-
-const themes: ThemeOption[] = [
-  { name: "Clean", config: VictoryTheme.clean },
-  { name: "Material", config: VictoryTheme.material },
-  { name: "Grayscale", config: VictoryTheme.grayscale },
-];
-
-const themeOptions = [
-  { label: "Select a theme", value: undefined },
-  ...themes.map((theme) => ({
-    label: theme.name,
-    value: theme.name,
-  })),
-];
-
-const sampleStackData = [
-  {
-    x: 1,
-    y: 2,
-  },
-  {
-    x: 2,
-    y: 3,
-  },
-  {
-    x: 3,
-    y: 5,
-  },
-  {
-    x: 4,
-    y: 4,
-  },
-  {
-    x: 5,
-    y: 7,
-  },
-];
-
-const chartStyle: { [key: string]: React.CSSProperties } = {
-  parent: {
-    border: "1px solid #ccc",
-    width: "100%",
-    height: 400,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  },
+import SideNav, { NAV_ITEMS } from "./_components/sidenav";
+import BaseThemePanel from "./_components/base-theme-panel";
+import OptionsPanel from "./_components/options-panel";
+import ChartPanel from "./_components/chart-panel";
+import { ThemeProvider } from "./_providers/themeProvider";
+import Main from "./_components/main";
+import { PreviewOptionsProvider } from "./_providers/previewOptionsProvider";
+
+const getPanel = (activeSidebarItem) => {
+  switch (activeSidebarItem.panelType) {
+    case "theme":
+      return <BaseThemePanel />;
+    case "chart":
+      return <ChartPanel optionsConfig={activeSidebarItem.config} />;
+    default:
+      return (
+        <OptionsPanel
+          title={activeSidebarItem.config.title}
+          description={activeSidebarItem.config.description}
+          controls={activeSidebarItem.config.controls}
+        />
+      );
+  }
 };
 
-const NUM_STACKS = 5;
-
 const ThemeBuilder = () => {
-  const [baseTheme, setBaseTheme] = React.useState<ThemeOption | undefined>(
-    undefined,
+  const [activeSidebarItem, setActiveSidebarItem] = React.useState(
+    NAV_ITEMS[0],
   );
-  const [customThemeConfig, setCustomThemeConfig] = React.useState<
-    VictoryThemeDefinition | undefined
-  >(undefined);
-  const [activeColorScale, setActiveColorScale] = React.useState<
-    string | undefined
-  >(undefined);
-  const [showThemeConfigPreview, setShowThemeConfigPreview] =
-    React.useState(false);
-  const [showTooltips, setShowTooltips] = React.useState(false);
-
-  const handleThemeSelect = (themeName?: string) => {
-    const theme = themes.find((t) => t.name === themeName);
-    if (!theme) {
-      setBaseTheme(undefined);
-      setCustomThemeConfig(undefined);
-      return;
-    }
-    setBaseTheme(theme);
-    setCustomThemeConfig({ ...theme?.config });
-  };
-
-  const updateCustomThemeConfig = (
-    path: string | string[],
-    newValue: unknown,
-  ) => {
-    if (!customThemeConfig) return;
-    const updatedConfig = setNestedConfigValue(
-      customThemeConfig,
-      path,
-      newValue,
-    );
-    setCustomThemeConfig(updatedConfig);
-  };
-
-  const handleColorScaleChange = (colorScale?: string) => {
-    const newColorScale = colorScale === "" ? undefined : colorScale;
-    setActiveColorScale(newColorScale);
-  };
-
-  const handleThemeConfigPreviewOpen = () => {
-    window.scrollTo({ top: 0 });
-    setShowThemeConfigPreview(true);
-  };
-
-  const handleThemeConfigPreviewClose = () => {
-    setShowThemeConfigPreview(false);
-  };
 
   return (
     <Layout>
-      <div className="relative flex flex-row flex-wrap items-start justify-start w-full theme-builder">
-        <aside className="sticky top-0 h-screen flex flex-col w-[380px] border-r border-grayscale-300">
-          <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-grayscale-400">
-              Select a theme to begin customizing.
-            </p>
-            <Select
-              id="theme-select"
-              value={baseTheme?.name || ""}
-              onChange={handleThemeSelect}
-              options={themeOptions}
-              label="Base Theme"
+      <ThemeProvider>
+        <PreviewOptionsProvider>
+          <div className="relative flex flex-row flex-wrap items-start justify-start w-full theme-builder">
+            <SideNav
+              activeItem={activeSidebarItem}
+              onItemSelect={setActiveSidebarItem}
             />
-            {customThemeConfig && (
-              <section>
-                <h2 className="text-lg font-bold my-4">
-                  Customization Options
-                </h2>
-                <ConfigMapper
-                  themeConfig={customThemeConfig}
-                  activeColorScale={activeColorScale}
-                  handleColorScaleChange={handleColorScaleChange}
-                  updateThemeConfig={updateCustomThemeConfig}
-                />
-              </section>
-            )}
+            <aside className="sticky top-[60px] h-theme-builder w-[380px] overflow-y-scroll p-6 bg-gray-50 border-r border-grayscale-300">
+              {getPanel(activeSidebarItem)}
+            </aside>
+            <Main />
           </div>
-          <footer className="p-4 border-t border-grayscale-300 sticky bottom-0 flex justify-end bg-white">
-            <Button
-              onClick={handleThemeConfigPreviewOpen}
-              ariaLabel="Get Theme Code"
-              disabled={!customThemeConfig}
-            >
-              Get Theme Code
-            </Button>
-          </footer>
-        </aside>
-        <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
-          {customThemeConfig && (
-            <div className="max-w-screen-xl w-full p-10 pb-20">
-              <div className="flex justify-between items-center mb-4">
-                <h1 className="text-4xl font-bold">Example Charts</h1>
-                <fieldset className="p-0 m-0">
-                  <div className="flex items-center gap-2 mb-4 cursor-pointer">
-                    <input
-                      type="checkbox"
-                      id="show-tooltips"
-                      className="form-checkbox h-4 w-4 text-primary"
-                      checked={showTooltips}
-                      onChange={() => setShowTooltips(!showTooltips)}
-                    />
-                    <label
-                      htmlFor="show-tooltips"
-                      className="text-xs cursor-pointer"
-                    >
-                      Show tooltips instead of labels
-                    </label>
-                  </div>
-                </fieldset>
-              </div>
-              <div className="grid grid-cols-2 gap-10">
-                <div>
-                  <h3 className="text-base font-bold mb-3">
-                    Stacked Area Chart
-                  </h3>
-                  <VictoryChart
-                    theme={customThemeConfig}
-                    domainPadding={20}
-                    style={chartStyle}
-                  >
-                    <VictoryAxis label="X Axis" />
-                    <VictoryAxis dependentAxis label="Y Axis" />
-                    <VictoryStack
-                      colorScale={activeColorScale as ColorScalePropType}
-                      aria-label="Victory Stack Demo"
-                    >
-                      {[...Array(NUM_STACKS)].map((_, i) => (
-                        <VictoryArea data={sampleStackData} key={i} />
-                      ))}
-                    </VictoryStack>
-                  </VictoryChart>
-                </div>
-                <div>
-                  <h3 className="text-base font-bold mb-3">
-                    Stacked Bar Chart
-                  </h3>
-                  <VictoryChart
-                    theme={customThemeConfig}
-                    domainPadding={20}
-                    style={chartStyle}
-                  >
-                    <VictoryAxis label="X Axis" />
-                    <VictoryAxis dependentAxis label="Y Axis" />
-                    <VictoryStack
-                      colorScale={activeColorScale}
-                      aria-label="Victory Stack Demo"
-                    >
-                      {[...Array(NUM_STACKS)].map((_, i) => (
-                        <VictoryBar
-                          data={sampleStackData}
-                          key={i}
-                          labels={({ datum }) =>
-                            showTooltips ? datum.y : undefined
-                          }
-                          {...(showTooltips && {
-                            labelComponent: <VictoryTooltip />,
-                          })}
-                        />
-                      ))}
-                    </VictoryStack>
-                  </VictoryChart>
-                </div>
-                {optionsConfig.map(
-                  ({ title, content: Content, hasVictoryChart = true }, i) =>
-                    Content && (
-                      <div key={i}>
-                        <h3 className="text-base font-bold mb-3">{title}</h3>
-                        {hasVictoryChart ? (
-                          <VictoryChart
-                            theme={customThemeConfig}
-                            domainPadding={20}
-                            style={chartStyle}
-                          >
-                            {Content({
-                              labels: ({ datum }) => datum.y || datum.x,
-                              ...(showTooltips && {
-                                labelComponent: <VictoryTooltip />,
-                              }),
-                            })}
-                          </VictoryChart>
-                        ) : (
-                          Content({
-                            labels: ({ datum }) => datum.y || datum.x,
-                            style: chartStyle,
-                            theme: customThemeConfig,
-                            ...(showTooltips && {
-                              labelComponent: <VictoryTooltip />,
-                            }),
-                          })
-                        )}
-                      </div>
-                    ),
-                )}
-              </div>
-            </div>
-          )}
-        </main>
-        {showThemeConfigPreview && customThemeConfig && (
-          <ConfigPreview
-            config={customThemeConfig}
-            onClose={handleThemeConfigPreviewClose}
-          />
-        )}
-      </div>
+        </PreviewOptionsProvider>
+      </ThemeProvider>
     </Layout>
   );
 };
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
index 392402207..870b51090 100644
--- a/website/tailwind.config.ts
+++ b/website/tailwind.config.ts
@@ -50,6 +50,9 @@ module.exports = {
         "button-border": NearFormColors.Green,
         error: "#FF0000",
       },
+      height: {
+        "theme-builder": "calc(100vh - 60px)",
+      },
       width: {
         prose: "90ch",
       },

From 516190198ab62a5447b9b37c72e763412e50eeca Mon Sep 17 00:00:00 2001
From: Stef <ramenhog@gmail.com>
Date: Thu, 12 Dec 2024 09:26:53 -0500
Subject: [PATCH 12/30] Feat: theme builder responsiveness (#3004)

---
 .../pages/themes/_components/code-block.tsx   |   4 +-
 .../themes/_components/config-preview.tsx     | 108 --------
 .../pages/themes/_components/export-panel.tsx |  92 +++++++
 website/src/pages/themes/_components/main.tsx | 249 ++++++++----------
 .../src/pages/themes/_components/sidenav.tsx  |  42 ++-
 website/src/pages/themes/index.tsx            |  21 +-
 website/tailwind.config.ts                    |   1 +
 7 files changed, 260 insertions(+), 257 deletions(-)
 delete mode 100644 website/src/pages/themes/_components/config-preview.tsx
 create mode 100644 website/src/pages/themes/_components/export-panel.tsx

diff --git a/website/src/pages/themes/_components/code-block.tsx b/website/src/pages/themes/_components/code-block.tsx
index af15fb191..b063dedbe 100644
--- a/website/src/pages/themes/_components/code-block.tsx
+++ b/website/src/pages/themes/_components/code-block.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { Highlight } from "prism-react-renderer";
+import { Highlight, themes } from "prism-react-renderer";
 import React from "react";
 
 type CodeBlockProps = {
@@ -10,7 +10,7 @@ type CodeBlockProps = {
 
 const CodeBlock = ({ code, language, className: classes }: CodeBlockProps) => {
   return (
-    <Highlight code={code} language={language}>
+    <Highlight code={code} language={language} theme={themes.oneLight}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre className={clsx(classes, className)} style={style}>
           {tokens.map((line, i) => (
diff --git a/website/src/pages/themes/_components/config-preview.tsx b/website/src/pages/themes/_components/config-preview.tsx
deleted file mode 100644
index 9f8e49a38..000000000
--- a/website/src/pages/themes/_components/config-preview.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from "react";
-import Button from "./button";
-import CodeBlock from "./code-block";
-import { useTheme } from "../_providers/themeProvider";
-
-type ConfigPreviewProps = {
-  onClose: () => void;
-};
-
-const ConfigPreview = ({ onClose }: ConfigPreviewProps) => {
-  const { customThemeConfig: config } = useTheme();
-  const [copyStatus, setCopyStatus] = React.useState<string | null>(null);
-
-  const handleCopyThemeConfig = () => {
-    navigator.clipboard
-      .writeText(JSON.stringify(config, null, 2))
-      .then(() => {
-        setCopyStatus("Copied successfully.");
-        return "Theme config copied to clipboard";
-      })
-      .catch(() => {
-        setCopyStatus("Failed to copy.");
-      });
-  };
-
-  const handleClose = () => {
-    onClose();
-  };
-
-  return (
-    <div className="fixed top-[60px] right-0 w-full py-10 px-20 z-[100] bg-white flex flex-col overflow-y-auto min-h-screen">
-      <button
-        onClick={handleClose}
-        className="absolute top-3 right-3 bg-transparent border-0 text-2xl cursor-pointer"
-      >
-        &times;
-      </button>
-      <div className="flex gap-20">
-        <section className="w-1/3">
-          <h1 className="text-2xl">Using Your Exported Victory Theme Config</h1>
-          <ol>
-            <li>
-              <strong>Copy the Config</strong>
-              <ul>
-                <li>
-                  Click the <em>Copy to Clipboard</em> button to copy the JSON
-                  theme configuration.
-                </li>
-              </ul>
-            </li>
-            <li>
-              <strong>Save the Exported Theme as a File</strong>
-              <ul>
-                <li>
-                  Save the copied JSON as a <code>.js</code> or{" "}
-                  <code>.json</code> file in your project, e.g.,{" "}
-                  <code>theme.js</code>.
-                </li>
-                <li>
-                  Import the theme in your app:
-                  <CodeBlock
-                    language="javascript"
-                    code={`import customTheme from './theme.js';`}
-                  />
-                </li>
-              </ul>
-            </li>
-            <li>
-              <strong>Apply to Victory Components</strong>
-              <ul>
-                <li>
-                  Use the <code>theme</code> prop on any Victory component:
-                  <CodeBlock
-                    language="javascript"
-                    code={`<VictoryChart theme={customTheme}>
-  {/* Your Victory components */}
-</VictoryChart>`}
-                  />
-                </li>
-              </ul>
-            </li>
-          </ol>
-        </section>
-        <section className="flex-1">
-          <CodeBlock
-            language="json"
-            code={JSON.stringify(config, null, 2)}
-            className="min-h-[500px] max-h-[80vh]"
-          />
-          <div className="flex items-center justify-end gap-3 mt-5">
-            {copyStatus && (
-              <span className="text-grayscale-400 text-xs italic">
-                {copyStatus}
-              </span>
-            )}
-            <Button
-              onClick={handleCopyThemeConfig}
-              ariaLabel="Copy to Clipboard"
-            >
-              Copy to Clipboard
-            </Button>
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-};
-export default ConfigPreview;
diff --git a/website/src/pages/themes/_components/export-panel.tsx b/website/src/pages/themes/_components/export-panel.tsx
new file mode 100644
index 000000000..051a1587b
--- /dev/null
+++ b/website/src/pages/themes/_components/export-panel.tsx
@@ -0,0 +1,92 @@
+import React from "react";
+import CodeBlock from "./code-block";
+import { useTheme } from "../_providers/themeProvider";
+import { FiCheck, FiCopy } from "react-icons/fi";
+
+const ExportPanel = () => {
+  const { customThemeConfig: config } = useTheme();
+  const [copyStatus, setCopyStatus] = React.useState<string | null>(null);
+
+  const handleCopyThemeConfig = () => {
+    navigator.clipboard
+      .writeText(JSON.stringify(config, null, 2))
+      .then(() => {
+        setCopyStatus("Copied successfully.");
+        return "Theme config copied to clipboard";
+      })
+      .catch(() => {
+        setCopyStatus("Failed to copy.");
+      });
+  };
+
+  return (
+    <div className="max-w-screen-lg mx-auto p-10 w-export-panel">
+      <h1 className="text-3xl">Using Your Exported Victory Theme Config</h1>
+      <ol className="pl-4 space-y-2">
+        <li>
+          <strong>Copy the theme configuration</strong>
+          <ul className="space-y-2">
+            <li>
+              Click the <FiCopy /> button to copy the JSON theme configuration.
+              <div className="relative mt-2">
+                <div className="flex items-center justify-end gap-2 absolute top-3 right-6">
+                  {copyStatus && (
+                    <span className="text-grayscale-400 text-xs italic">
+                      {copyStatus}
+                    </span>
+                  )}
+                  <button
+                    onClick={handleCopyThemeConfig}
+                    className="bg-transparent text-lg text-grayscale-400 cursor-pointer hover:bg-grayscale-200 flex items-center justify-center p-1 rounded-md"
+                  >
+                    {copyStatus ? (
+                      <FiCheck className="text-theme-1" />
+                    ) : (
+                      <FiCopy />
+                    )}
+                  </button>
+                </div>
+                <CodeBlock
+                  language="json"
+                  code={JSON.stringify(config, null, 2)}
+                  className="h-[500px]"
+                />
+              </div>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <strong>Save the Exported Theme as a File</strong>
+          <ul className="space-y-2">
+            <li>
+              Save the copied JSON as a <code>.js</code> or <code>.json</code>{" "}
+              file in your project, e.g., <code>theme.js</code>.
+            </li>
+            <li>
+              Import the theme in your app:
+              <CodeBlock
+                language="javascript"
+                code={`import customTheme from './theme.js';`}
+              />
+            </li>
+          </ul>
+        </li>
+        <li>
+          <strong>Apply to Victory Components</strong>
+          <ul className="space-y-2">
+            <li>
+              Use the <code>theme</code> prop on any Victory component:
+              <CodeBlock
+                language="javascript"
+                code={`<VictoryChart theme={customTheme}>
+{/* Your Victory components */}
+</VictoryChart>`}
+              />
+            </li>
+          </ul>
+        </li>
+      </ol>
+    </div>
+  );
+};
+export default ExportPanel;
diff --git a/website/src/pages/themes/_components/main.tsx b/website/src/pages/themes/_components/main.tsx
index 3860a166b..c7835fb7d 100644
--- a/website/src/pages/themes/_components/main.tsx
+++ b/website/src/pages/themes/_components/main.tsx
@@ -13,13 +13,13 @@ import { usePreviewOptions } from "../_providers/previewOptionsProvider";
 import Select from "./select";
 import { colorScaleOptions } from "./color-scale-options";
 import Button from "./button";
-import ConfigPreview from "./config-preview";
+import clsx from "clsx";
 
 const chartStyle: { [key: string]: React.CSSProperties } = {
   parent: {
     border: "1px solid #ccc",
     width: "100%",
-    height: 400,
+    height: "95%",
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -52,17 +52,6 @@ const sampleStackData = [
 ];
 
 const Main = () => {
-  const [showExportModal, setShowExportModal] = React.useState(false);
-
-  const handleExportModalOpen = () => {
-    window.scrollTo({ top: 0 });
-    setShowExportModal(true);
-  };
-
-  const handleExportModalClose = () => {
-    setShowExportModal(false);
-  };
-
   const { customThemeConfig } = useTheme();
   const {
     colorScale,
@@ -75,134 +64,128 @@ const Main = () => {
   if (!customThemeConfig) return null;
 
   return (
-    <>
-      <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
-        <div className="max-w-screen-xl w-full p-10 pb-20">
-          <div className="flex justify-end items-center">
-            <Button onClick={handleExportModalOpen}>Export Theme</Button>
-          </div>
-          <div className="flex justify-between items-center mb-4">
-            <Select
-              id="color-scale"
-              label="Color Scale"
-              value={colorScale}
-              onChange={updateColorScale}
-              options={colorScaleOptions}
-              includeDefault
-              className="w-1/3"
-            />
-            <fieldset className="p-0 m-0">
-              <div className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
-                  id="show-tooltips"
-                  className="form-checkbox h-4 w-4 text-primary"
-                  checked={showTooltips}
-                  onChange={() => setShowTooltips(!showTooltips)}
-                />
-                <label
-                  htmlFor="show-tooltips"
-                  className="text-xs cursor-pointer"
+    <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
+      <div className="max-w-screen-xl w-full p-10 pb-20">
+        <div className="flex justify-between items-center mb-4">
+          <Select
+            id="color-scale"
+            label="Color Scale"
+            value={colorScale}
+            onChange={updateColorScale}
+            options={colorScaleOptions}
+            includeDefault
+            className="w-1/3"
+          />
+          <fieldset className="p-0 m-0">
+            <div className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                id="show-tooltips"
+                className="form-checkbox h-4 w-4 text-primary"
+                checked={showTooltips}
+                onChange={() => setShowTooltips(!showTooltips)}
+              />
+              <label htmlFor="show-tooltips" className="text-xs cursor-pointer">
+                Show tooltips instead of labels
+              </label>
+            </div>
+          </fieldset>
+        </div>
+        <div
+          className={clsx(
+            "grid grid-cols-1 gap-10",
+            exampleConfigs.length !== 1 && "xl:grid-cols-2",
+            exampleConfigs.length === 1
+              ? "auto-rows-[500px]"
+              : "auto-rows-[400px] xl:max-2xl:auto-rows-[300px]",
+          )}
+        >
+          {exampleConfigs.length === 0 ? (
+            <>
+              <div>
+                <h3 className="text-base font-bold mb-3">Stacked Area Chart</h3>
+                <VictoryChart
+                  theme={customThemeConfig}
+                  domainPadding={20}
+                  style={chartStyle}
                 >
-                  Show tooltips instead of labels
-                </label>
-              </div>
-            </fieldset>
-          </div>
-          <div className="grid grid-cols-2 gap-10">
-            {exampleConfigs.length === 0 ? (
-              <>
-                <div>
-                  <h3 className="text-base font-bold mb-3">
-                    Stacked Area Chart
-                  </h3>
-                  <VictoryChart
-                    theme={customThemeConfig}
-                    domainPadding={20}
-                    style={chartStyle}
+                  <VictoryAxis label="X Axis" />
+                  <VictoryAxis dependentAxis label="Y Axis" />
+                  <VictoryStack
+                    colorScale={colorScale as ColorScalePropType}
+                    aria-label="Victory Stack Demo"
                   >
-                    <VictoryAxis label="X Axis" />
-                    <VictoryAxis dependentAxis label="Y Axis" />
-                    <VictoryStack
-                      colorScale={colorScale as ColorScalePropType}
-                      aria-label="Victory Stack Demo"
-                    >
-                      {[...Array(NUM_STACKS)].map((_, i) => (
-                        <VictoryArea data={sampleStackData} key={i} />
-                      ))}
-                    </VictoryStack>
-                  </VictoryChart>
-                </div>
-                <div>
-                  <h3 className="text-base font-bold mb-3">
-                    Stacked Bar Chart
-                  </h3>
-                  <VictoryChart
-                    theme={customThemeConfig}
-                    domainPadding={20}
-                    style={chartStyle}
+                    {[...Array(NUM_STACKS)].map((_, i) => (
+                      <VictoryArea data={sampleStackData} key={i} />
+                    ))}
+                  </VictoryStack>
+                </VictoryChart>
+              </div>
+              <div>
+                <h3 className="text-base font-bold mb-3">Stacked Bar Chart</h3>
+                <VictoryChart
+                  theme={customThemeConfig}
+                  domainPadding={20}
+                  style={chartStyle}
+                >
+                  <VictoryAxis label="X Axis" />
+                  <VictoryAxis dependentAxis label="Y Axis" />
+                  <VictoryStack
+                    colorScale={colorScale as ColorScalePropType}
+                    aria-label="Victory Stack Demo"
                   >
-                    <VictoryAxis label="X Axis" />
-                    <VictoryAxis dependentAxis label="Y Axis" />
-                    <VictoryStack
-                      colorScale={colorScale as ColorScalePropType}
-                      aria-label="Victory Stack Demo"
-                    >
-                      {[...Array(NUM_STACKS)].map((_, i) => (
-                        <VictoryBar
-                          data={sampleStackData}
-                          key={i}
-                          labels={({ datum }) =>
-                            showTooltips ? datum.y : undefined
-                          }
-                          {...(showTooltips && {
-                            labelComponent: <VictoryTooltip />,
-                          })}
-                        />
-                      ))}
-                    </VictoryStack>
-                  </VictoryChart>
-                </div>
-              </>
-            ) : (
-              exampleConfigs.map(
-                ({ label, content: Content, hasVictoryChart = true }, i) =>
-                  Content && (
-                    <div key={i}>
-                      <h3 className="text-base font-bold mb-3">{label}</h3>
-                      {hasVictoryChart ? (
-                        <VictoryChart
-                          theme={customThemeConfig}
-                          domainPadding={20}
-                          style={chartStyle}
-                        >
-                          {Content({
-                            labels: ({ datum }) => datum.y || datum.x,
-                            ...(showTooltips && {
-                              labelComponent: <VictoryTooltip />,
-                            }),
-                          })}
-                        </VictoryChart>
-                      ) : (
-                        Content({
+                    {[...Array(NUM_STACKS)].map((_, i) => (
+                      <VictoryBar
+                        data={sampleStackData}
+                        key={i}
+                        labels={({ datum }) =>
+                          showTooltips ? datum.y : undefined
+                        }
+                        {...(showTooltips && {
+                          labelComponent: <VictoryTooltip />,
+                        })}
+                      />
+                    ))}
+                  </VictoryStack>
+                </VictoryChart>
+              </div>
+            </>
+          ) : (
+            exampleConfigs.map(
+              ({ label, content: Content, hasVictoryChart = true }, i) =>
+                Content && (
+                  <div key={i}>
+                    <h3 className="text-base font-bold mb-3">{label}</h3>
+                    {hasVictoryChart ? (
+                      <VictoryChart
+                        theme={customThemeConfig}
+                        domainPadding={20}
+                        style={chartStyle}
+                      >
+                        {Content({
                           labels: ({ datum }) => datum.y || datum.x,
-                          style: chartStyle,
-                          theme: customThemeConfig,
                           ...(showTooltips && {
                             labelComponent: <VictoryTooltip />,
                           }),
-                        })
-                      )}
-                    </div>
-                  ),
-              )
-            )}
-          </div>
+                        })}
+                      </VictoryChart>
+                    ) : (
+                      Content({
+                        labels: ({ datum }) => datum.y || datum.x,
+                        style: chartStyle,
+                        theme: customThemeConfig,
+                        ...(showTooltips && {
+                          labelComponent: <VictoryTooltip />,
+                        }),
+                      })
+                    )}
+                  </div>
+                ),
+            )
+          )}
         </div>
-      </main>
-
-      {showExportModal && <ConfigPreview onClose={handleExportModalClose} />}
-    </>
+      </div>
+    </main>
   );
 };
 export default Main;
diff --git a/website/src/pages/themes/_components/sidenav.tsx b/website/src/pages/themes/_components/sidenav.tsx
index 1e7fcbb7c..5cd7b6eeb 100644
--- a/website/src/pages/themes/_components/sidenav.tsx
+++ b/website/src/pages/themes/_components/sidenav.tsx
@@ -18,13 +18,14 @@ import {
   defaultExampleConfigs,
   usePreviewOptions,
 } from "../_providers/previewOptionsProvider";
+import { TiExportOutline } from "react-icons/ti";
 
 type NavItem = {
   title: string;
   icon: React.ElementType;
 } & (
   | {
-      panelType: "theme" | "chart";
+      panelType: "theme" | "chart" | "export";
     }
   | {
       panelType: "default";
@@ -70,6 +71,12 @@ export const NAV_ITEMS: NavItem[] = [
   },
 ];
 
+const exportItem: NavItem = {
+  title: "Export",
+  icon: TiExportOutline,
+  panelType: "export",
+};
+
 const SideNav = ({ activeItem, onItemSelect }: SideNavProps) => {
   const { baseTheme } = useTheme();
   const { setExampleConfigs } = usePreviewOptions();
@@ -84,9 +91,11 @@ const SideNav = ({ activeItem, onItemSelect }: SideNavProps) => {
     }
   };
 
+  const isExportItemActive = activeItem.title === exportItem.title;
+
   return (
-    <aside className="sticky top-[60px] h-theme-builder w-32 overflow-y-auto bg-black py-4">
-      <div className="w-full flex-1 space-y-1 px-2">
+    <aside className="sticky top-[60px] h-theme-builder w-[100px] overflow-y-auto bg-black py-4 flex-none flex flex-col justify-between px-2">
+      <div className="w-full space-y-1 px-2">
         {NAV_ITEMS.map((item) => {
           const isActive = item.title === activeItem.title;
           const isDisabled =
@@ -98,18 +107,18 @@ const SideNav = ({ activeItem, onItemSelect }: SideNavProps) => {
               onClick={() => handleItemSelect(item)}
               disabled={isDisabled}
               className={clsx(
-                "group flex w-full flex-col items-center rounded-md p-3 text-xs font-medium cursor-pointer",
+                "group flex w-full flex-col items-center rounded-md p-3 text-xs font-bold cursor-pointer bg-transparent",
                 isActive
-                  ? "bg-theme-1 text-theme-2"
-                  : "bg-transparent text-white hover:text-theme-1 disabled:text-grayscale-800 disabled:cursor-not-allowed",
+                  ? "text-theme-1"
+                  : "text-grayscale-300 hover:text-white disabled:text-grayscale-800 disabled:cursor-not-allowed",
               )}
             >
               <item.icon
                 aria-hidden="true"
                 className={clsx(
                   isActive
-                    ? "text-theme-2"
-                    : "text-white group-hover:text-theme-1 group-disabled:text-grayscale-800",
+                    ? "text-theme-1"
+                    : "text-grayscale-300 group-hover:text-white group-disabled:text-grayscale-800",
                   "size-6",
                 )}
               />
@@ -118,6 +127,23 @@ const SideNav = ({ activeItem, onItemSelect }: SideNavProps) => {
           );
         })}
       </div>
+      <button
+        aria-current={isExportItemActive ? "page" : undefined}
+        onClick={() => handleItemSelect(exportItem)}
+        disabled={!isBaseThemeSelected}
+        className={clsx(
+          "group flex w-full flex-col items-center rounded-md p-3 text-xs font-bold cursor-pointer text-theme-2 hover:underline disabled:bg-grayscale-400 disabled:text-grayscale-800 disabled:cursor-not-allowed",
+          isExportItemActive
+            ? "bg-theme-1/100"
+            : "bg-theme-1/80 hover:bg-theme-1/100",
+        )}
+      >
+        <exportItem.icon
+          aria-hidden="true"
+          className={"size-6 text-theme-2 group-disabled:text-grayscale-800"}
+        />
+        <span className="mt-2">{exportItem.title}</span>
+      </button>
     </aside>
   );
 };
diff --git a/website/src/pages/themes/index.tsx b/website/src/pages/themes/index.tsx
index d8dd0bc48..b61370d8b 100644
--- a/website/src/pages/themes/index.tsx
+++ b/website/src/pages/themes/index.tsx
@@ -10,13 +10,14 @@ import ChartPanel from "./_components/chart-panel";
 import { ThemeProvider } from "./_providers/themeProvider";
 import Main from "./_components/main";
 import { PreviewOptionsProvider } from "./_providers/previewOptionsProvider";
+import ExportPanel from "./_components/export-panel";
 
 const getPanel = (activeSidebarItem) => {
   switch (activeSidebarItem.panelType) {
     case "theme":
       return <BaseThemePanel />;
     case "chart":
-      return <ChartPanel optionsConfig={activeSidebarItem.config} />;
+      return <ChartPanel />;
     default:
       return (
         <OptionsPanel
@@ -33,19 +34,27 @@ const ThemeBuilder = () => {
     NAV_ITEMS[0],
   );
 
+  const isExportPanel = activeSidebarItem.panelType === "export";
+
   return (
     <Layout>
       <ThemeProvider>
         <PreviewOptionsProvider>
-          <div className="relative flex flex-row flex-wrap items-start justify-start w-full theme-builder">
+          <div className="relative flex flex-row items-start justify-start w-full theme-builder">
             <SideNav
               activeItem={activeSidebarItem}
               onItemSelect={setActiveSidebarItem}
             />
-            <aside className="sticky top-[60px] h-theme-builder w-[380px] overflow-y-scroll p-6 bg-gray-50 border-r border-grayscale-300">
-              {getPanel(activeSidebarItem)}
-            </aside>
-            <Main />
+            {isExportPanel ? (
+              <ExportPanel />
+            ) : (
+              <>
+                <aside className="sticky top-[60px] h-theme-builder p-6 border-r border-grayscale-300 overflow-y-scroll w-[380px] bg-gray-50">
+                  {getPanel(activeSidebarItem)}
+                </aside>
+                <Main />
+              </>
+            )}
           </div>
         </PreviewOptionsProvider>
       </ThemeProvider>
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
index 870b51090..d2b8de384 100644
--- a/website/tailwind.config.ts
+++ b/website/tailwind.config.ts
@@ -55,6 +55,7 @@ module.exports = {
       },
       width: {
         prose: "90ch",
+        "export-panel": "calc(100vw - 100px)",
       },
       fontFamily: {
         sans: ["Inter, Helvetica, Arial, sans-serif"],

From 2a440af2ed5e89019fb935530f868d9f6375324e Mon Sep 17 00:00:00 2001
From: Stef <ramenhog@gmail.com>
Date: Thu, 12 Dec 2024 11:00:08 -0500
Subject: [PATCH 13/30] Feat: theme builder custom colorscale overrides (#3005)

---
 .../pages/themes/_components/chart-panel.tsx  |   2 +-
 .../src/pages/themes/_components/checkbox.tsx |  43 +++++++
 ...options.tsx => color-palette-selector.tsx} |  49 ++-----
 .../pages/themes/_components/color-picker.tsx |   2 +-
 .../color-scale-override-selector.tsx         |  60 +++++++++
 .../src/pages/themes/_components/control.tsx  |  18 ++-
 website/src/pages/themes/_components/main.tsx |  32 +----
 .../themes/_components/options-panel.tsx      |   2 +-
 website/src/pages/themes/_config/axis.tsx     |   7 +-
 website/src/pages/themes/_config/chart.tsx    | 121 +++++++++++++-----
 website/src/pages/themes/_config/index.tsx    |   7 +-
 website/src/pages/themes/_config/palette.tsx  |   4 +-
 website/src/pages/themes/_const.tsx           |  67 ++++++++++
 website/src/pages/themes/_utils.ts            |  13 +-
 14 files changed, 302 insertions(+), 125 deletions(-)
 create mode 100644 website/src/pages/themes/_components/checkbox.tsx
 rename website/src/pages/themes/_components/{color-scale-options.tsx => color-palette-selector.tsx} (61%)
 create mode 100644 website/src/pages/themes/_components/color-scale-override-selector.tsx
 create mode 100644 website/src/pages/themes/_const.tsx

diff --git a/website/src/pages/themes/_components/chart-panel.tsx b/website/src/pages/themes/_components/chart-panel.tsx
index 1d3ad7245..1d5bca41d 100644
--- a/website/src/pages/themes/_components/chart-panel.tsx
+++ b/website/src/pages/themes/_components/chart-panel.tsx
@@ -45,7 +45,7 @@ const ChartPanel = () => {
             key={control.label + i}
             type={control.type}
             control={control}
-            className="mb-4"
+            className="mt-4 mb-8"
           />
         );
       })}
diff --git a/website/src/pages/themes/_components/checkbox.tsx b/website/src/pages/themes/_components/checkbox.tsx
new file mode 100644
index 000000000..2e717f9db
--- /dev/null
+++ b/website/src/pages/themes/_components/checkbox.tsx
@@ -0,0 +1,43 @@
+import clsx from "clsx";
+import React, { useId } from "react";
+
+type CheckboxProps = {
+  label?: string;
+  isChecked?: boolean;
+  onChange?: (isChecked: boolean) => void;
+  className?: string;
+};
+
+const Checkbox = ({
+  label = "Checkbox",
+  isChecked = false,
+  onChange,
+  className,
+}: CheckboxProps) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(event.target.checked);
+    }
+  };
+
+  const id = useId();
+
+  return (
+    <fieldset
+      className={clsx("p-0 m-0 flex items-center justify-start", className)}
+    >
+      <input
+        type="checkbox"
+        id={id}
+        name="checkbox"
+        checked={isChecked}
+        onChange={handleChange}
+        className="mr-2"
+      />
+      <label htmlFor={id} className="text-sm">
+        {label}
+      </label>
+    </fieldset>
+  );
+};
+export default Checkbox;
diff --git a/website/src/pages/themes/_components/color-scale-options.tsx b/website/src/pages/themes/_components/color-palette-selector.tsx
similarity index 61%
rename from website/src/pages/themes/_components/color-scale-options.tsx
rename to website/src/pages/themes/_components/color-palette-selector.tsx
index edfa2b39b..17ba71114 100644
--- a/website/src/pages/themes/_components/color-scale-options.tsx
+++ b/website/src/pages/themes/_components/color-palette-selector.tsx
@@ -2,57 +2,25 @@ import React from "react";
 import ColorPicker from "./color-picker";
 import { ColorScalePropType, VictoryThemeDefinition } from "victory";
 import { ColorChangeArgs } from "./control";
+import clsx from "clsx";
 
-type ColorScaleOptionsProps = {
+type ColorPaletteSelectorProps = {
   label?: string;
   palette?: VictoryThemeDefinition["palette"];
   colorScaleType?: ColorScalePropType;
   onColorChange: (args: ColorChangeArgs) => void;
+  className?: string;
 };
 
-export const colorScaleOptions = [
-  {
-    label: "Qualitative",
-    value: "qualitative",
-  },
-  {
-    label: "Grayscale",
-    value: "grayscale",
-  },
-  {
-    label: "Heatmap",
-    value: "heatmap",
-  },
-  {
-    label: "Warm",
-    value: "warm",
-  },
-  {
-    label: "Cool",
-    value: "cool",
-  },
-  {
-    label: "Red",
-    value: "red",
-  },
-  {
-    label: "Green",
-    value: "green",
-  },
-  {
-    label: "Blue",
-    value: "blue",
-  },
-];
-
-const ColorScaleOptions = ({
+const ColorPaletteSelector = ({
   label,
   colorScaleType,
   palette,
   onColorChange,
-}: ColorScaleOptionsProps) => {
+  className,
+}: ColorPaletteSelectorProps) => {
   return (
-    <fieldset className="p-0 mt-4 mb-8">
+    <fieldset className={clsx("p-0 m-0", className)}>
       {label && (
         <label className="block mb-3 text-base font-bold">{label}</label>
       )}
@@ -62,7 +30,6 @@ const ColorScaleOptions = ({
             <ColorPicker
               key={i}
               color={color}
-              id={`color-${i}`}
               onColorChange={(newColor) =>
                 onColorChange({
                   newColor,
@@ -77,4 +44,4 @@ const ColorScaleOptions = ({
     </fieldset>
   );
 };
-export default ColorScaleOptions;
+export default ColorPaletteSelector;
diff --git a/website/src/pages/themes/_components/color-picker.tsx b/website/src/pages/themes/_components/color-picker.tsx
index c34c39c64..021c7e2ca 100644
--- a/website/src/pages/themes/_components/color-picker.tsx
+++ b/website/src/pages/themes/_components/color-picker.tsx
@@ -58,7 +58,7 @@ const ColorPicker = ({
   const id = useId();
 
   return (
-    <fieldset className={clsx("p-0", className)}>
+    <fieldset className={clsx("p-0 m-0", className)}>
       {label && (
         <label className="block mb-1 text-sm text-grayscale-900 dark:text-white font-bold">
           {label}
diff --git a/website/src/pages/themes/_components/color-scale-override-selector.tsx b/website/src/pages/themes/_components/color-scale-override-selector.tsx
new file mode 100644
index 000000000..276b0d06a
--- /dev/null
+++ b/website/src/pages/themes/_components/color-scale-override-selector.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import ColorPicker from "./color-picker";
+import Checkbox from "./checkbox";
+import clsx from "clsx";
+
+type ColorScaleOverrideSelectorProps = {
+  label?: string;
+  value?: string | string[];
+  onChange: (value: string[] | undefined) => void;
+  className?: string;
+};
+
+const ColorScaleOverrideSelector = ({
+  label = "Color Scale",
+  value,
+  onChange,
+  className,
+}: ColorScaleOverrideSelectorProps) => {
+  const hasCustomValue = Array.isArray(value);
+  const [initialCustomValue] = React.useState(
+    hasCustomValue ? value : undefined,
+  );
+
+  const onCheckboxChange = (isChecked) => {
+    if (isChecked) {
+      onChange(initialCustomValue);
+    } else {
+      onChange(undefined);
+    }
+  };
+
+  const handleColorChange = (newColor, index) => {
+    const newValue = [...(value as string[])];
+    newValue[index] = newColor;
+    onChange(newValue);
+  };
+
+  return (
+    <fieldset className={clsx("p-0 m-0", className)}>
+      <label className="block mb-3 text-sm font-bold">{label}</label>
+      <Checkbox
+        label="Use custom color scale"
+        isChecked={hasCustomValue}
+        onChange={onCheckboxChange}
+      />
+      {hasCustomValue && (
+        <div className="flex flex-wrap gap-3 mt-3">
+          {value.map((color, i) => (
+            <ColorPicker
+              key={i}
+              color={color}
+              onColorChange={(newColor) => handleColorChange(newColor, i)}
+            />
+          ))}
+        </div>
+      )}
+    </fieldset>
+  );
+};
+export default ColorScaleOverrideSelector;
diff --git a/website/src/pages/themes/_components/control.tsx b/website/src/pages/themes/_components/control.tsx
index d93da2a95..e3ba21043 100644
--- a/website/src/pages/themes/_components/control.tsx
+++ b/website/src/pages/themes/_components/control.tsx
@@ -2,10 +2,11 @@ import React, { useId } from "react";
 import Select from "./select";
 import Slider from "./slider";
 import ColorPicker from "./color-picker";
-import ColorScaleOptions from "./color-scale-options";
+import ColorPaletteSelector from "./color-palette-selector";
 import { getConfigValue } from "../_utils";
 import { useTheme } from "../_providers/themeProvider";
 import Accordion from "./accordion";
+import ColorScaleOverrideSelector from "./color-scale-override-selector";
 
 export type ColorChangeArgs = {
   newColor?: string;
@@ -57,13 +58,14 @@ const Control = ({ type, control, className }) => {
           ))}
         </Accordion>
       );
-    case "colorScale":
+    case "colorPalette":
       return (
-        <ColorScaleOptions
+        <ColorPaletteSelector
           label={control.label}
           palette={customThemeConfig?.palette}
           colorScaleType={control.colorScaleType}
           onColorChange={handleColorChange}
+          className={className}
         />
       );
     case "section":
@@ -108,10 +110,18 @@ const Control = ({ type, control, className }) => {
           includeDefault
         />
       );
+    case "colorScale":
+      return (
+        <ColorScaleOverrideSelector
+          label={control.label}
+          value={configValue as string}
+          onChange={handleChange}
+          className={className}
+        />
+      );
     case "colorPicker":
       return (
         <ColorPicker
-          id={id}
           key={control.label}
           label={control.label}
           color={configValue as string}
diff --git a/website/src/pages/themes/_components/main.tsx b/website/src/pages/themes/_components/main.tsx
index c7835fb7d..41c206841 100644
--- a/website/src/pages/themes/_components/main.tsx
+++ b/website/src/pages/themes/_components/main.tsx
@@ -11,8 +11,7 @@ import {
 import { useTheme } from "../_providers/themeProvider";
 import { usePreviewOptions } from "../_providers/previewOptionsProvider";
 import Select from "./select";
-import { colorScaleOptions } from "./color-scale-options";
-import Button from "./button";
+import { colorScaleOptions, NUM_STACKS, sampleStackData } from "../_const";
 import clsx from "clsx";
 
 const chartStyle: { [key: string]: React.CSSProperties } = {
@@ -26,31 +25,6 @@ const chartStyle: { [key: string]: React.CSSProperties } = {
   },
 };
 
-const NUM_STACKS = 5;
-
-const sampleStackData = [
-  {
-    x: 1,
-    y: 2,
-  },
-  {
-    x: 2,
-    y: 3,
-  },
-  {
-    x: 3,
-    y: 5,
-  },
-  {
-    x: 4,
-    y: 4,
-  },
-  {
-    x: 5,
-    y: 7,
-  },
-];
-
 const Main = () => {
   const { customThemeConfig } = useTheme();
   const {
@@ -69,7 +43,7 @@ const Main = () => {
         <div className="flex justify-between items-center mb-4">
           <Select
             id="color-scale"
-            label="Color Scale"
+            label="Choose Color Scale For Preview"
             value={colorScale}
             onChange={updateColorScale}
             options={colorScaleOptions}
@@ -164,6 +138,7 @@ const Main = () => {
                       >
                         {Content({
                           labels: ({ datum }) => datum.y || datum.x,
+                          colorScale: colorScale as ColorScalePropType,
                           ...(showTooltips && {
                             labelComponent: <VictoryTooltip />,
                           }),
@@ -172,6 +147,7 @@ const Main = () => {
                     ) : (
                       Content({
                         labels: ({ datum }) => datum.y || datum.x,
+                        colorScale: colorScale as ColorScalePropType,
                         style: chartStyle,
                         theme: customThemeConfig,
                         ...(showTooltips && {
diff --git a/website/src/pages/themes/_components/options-panel.tsx b/website/src/pages/themes/_components/options-panel.tsx
index 51b5e9d7a..21ec797c6 100644
--- a/website/src/pages/themes/_components/options-panel.tsx
+++ b/website/src/pages/themes/_components/options-panel.tsx
@@ -20,7 +20,7 @@ const OptionsPanel = ({ title, description, controls }: GlobalPanelProps) => {
             key={control.label + i}
             type={control.type}
             control={control}
-            className="mb-4"
+            className="mt-4 mb-8"
           />
         );
       })}
diff --git a/website/src/pages/themes/_config/axis.tsx b/website/src/pages/themes/_config/axis.tsx
index 52a34ee9a..36c778e9d 100644
--- a/website/src/pages/themes/_config/axis.tsx
+++ b/website/src/pages/themes/_config/axis.tsx
@@ -1,12 +1,9 @@
 /* eslint-disable no-magic-numbers */
 import React from "react";
-import {
-  getBaseLabelsConfig,
-  getBaseStrokeConfig,
-  StrokeProps,
-} from "../_utils";
+import { getBaseLabelsConfig, getBaseStrokeConfig } from "../_utils";
 import { VictoryAxis, VictoryPolarAxis } from "victory";
 import { ControlConfig, OptionsPanelConfig } from ".";
+import { StrokeProps } from "../_const";
 
 const generalAxisOptionsConfig: ControlConfig = {
   type: "accordion",
diff --git a/website/src/pages/themes/_config/chart.tsx b/website/src/pages/themes/_config/chart.tsx
index 244208019..5b6890d7d 100644
--- a/website/src/pages/themes/_config/chart.tsx
+++ b/website/src/pages/themes/_config/chart.tsx
@@ -13,15 +13,16 @@ import {
   VictoryLine,
   VictoryPie,
   VictoryScatter,
+  VictoryStack,
   VictoryVoronoi,
 } from "victory";
 import {
   getBaseLabelsConfig,
   getBaseStrokeConfig,
   getNestedColorScaleConfig,
-  StrokeProps,
 } from "../_utils";
 import { ControlConfig } from ".";
+import { NUM_STACKS, sampleStackData, StrokeProps } from "../_const";
 
 const chartOptionsConfig: {
   [key: string]: ControlConfig;
@@ -81,35 +82,32 @@ const chartOptionsConfig: {
     content: (props) => [
       <VictoryAxis key="x-axis" label="X Axis" />,
       <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryGroup key="victory-group" domainPadding={{ x: 20 }} offset={20}>
-        <VictoryBar
-          {...props}
-          data={[
-            { x: "2023 Q1", y: 1 },
-            { x: "2023 Q2", y: 2 },
-            { x: "2023 Q3", y: 3 },
-            { x: "2023 Q4", y: 2 },
-          ]}
-        />
-        <VictoryBar
-          {...props}
-          data={[
-            { x: "2023 Q1", y: 2 },
-            { x: "2023 Q2", y: 3 },
-            { x: "2023 Q3", y: 4 },
-            { x: "2023 Q4", y: 5 },
-          ]}
-        />
-        <VictoryBar
-          {...props}
-          data={[
-            { x: "2023 Q1", y: 1 },
-            { x: "2023 Q2", y: 2 },
-            { x: "2023 Q3", y: 3 },
-            { x: "2023 Q4", y: 4 },
-          ]}
-        />
-      </VictoryGroup>,
+      <VictoryBar
+        {...props}
+        key="bar-chart"
+        data={[
+          {
+            x: 1,
+            y: 2,
+          },
+          {
+            x: 2,
+            y: 3,
+          },
+          {
+            x: 3,
+            y: 5,
+          },
+          {
+            x: 4,
+            y: 4,
+          },
+          {
+            x: 5,
+            y: 7,
+          },
+        ]}
+      />,
     ],
     controls: [
       {
@@ -459,6 +457,39 @@ const chartOptionsConfig: {
   group: {
     type: "section",
     label: "Group",
+    content: (props) => [
+      <VictoryAxis key="x-axis" label="X Axis" />,
+      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
+      <VictoryGroup key="victory-group" domainPadding={{ x: 20 }} offset={20}>
+        <VictoryBar
+          {...props}
+          data={[
+            { x: "2023 Q1", y: 1 },
+            { x: "2023 Q2", y: 2 },
+            { x: "2023 Q3", y: 3 },
+            { x: "2023 Q4", y: 2 },
+          ]}
+        />
+        <VictoryBar
+          {...props}
+          data={[
+            { x: "2023 Q1", y: 2 },
+            { x: "2023 Q2", y: 3 },
+            { x: "2023 Q3", y: 4 },
+            { x: "2023 Q4", y: 5 },
+          ]}
+        />
+        <VictoryBar
+          {...props}
+          data={[
+            { x: "2023 Q1", y: 1 },
+            { x: "2023 Q2", y: 2 },
+            { x: "2023 Q3", y: 3 },
+            { x: "2023 Q4", y: 4 },
+          ]}
+        />
+      </VictoryGroup>,
+    ],
     controls: [
       {
         type: "section",
@@ -728,6 +759,36 @@ const chartOptionsConfig: {
       },
     ],
   },
+  stack: {
+    type: "section",
+    label: "Stacks",
+    content: (props) => [
+      <VictoryAxis key="x-axis" label="X Axis" />,
+      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
+      <VictoryStack {...props} key="victory-stack">
+        {[...Array(NUM_STACKS)].map((_, i) => (
+          <VictoryArea data={sampleStackData} key={i} />
+        ))}
+      </VictoryStack>,
+    ],
+    controls: [
+      {
+        type: "section",
+        label: "Data",
+        controls: [
+          ...getNestedColorScaleConfig("group"),
+          {
+            type: "slider",
+            label: "Width",
+            min: 0,
+            max: 50,
+            unit: "px",
+            path: "group.style.data.width",
+          },
+        ],
+      },
+    ],
+  },
   tooltip: {
     type: "section",
     label: "Tooltip",
diff --git a/website/src/pages/themes/_config/index.tsx b/website/src/pages/themes/_config/index.tsx
index 2d4ebaf19..33dd80813 100644
--- a/website/src/pages/themes/_config/index.tsx
+++ b/website/src/pages/themes/_config/index.tsx
@@ -4,9 +4,14 @@ export type ControlConfig = {
   label: string;
   content?: (props: any) => React.ReactNode;
   controls?: ControlConfig[];
+  hasVictoryChart?: boolean;
 } & (
   | {
-      type: "section" | "colorScale" | "accordion";
+      type: "section" | "colorPalette" | "accordion";
+    }
+  | {
+      type: "colorScale";
+      path: string | string[];
     }
   | {
       type: "slider" | "select" | "colorPicker";
diff --git a/website/src/pages/themes/_config/palette.tsx b/website/src/pages/themes/_config/palette.tsx
index 55bbd31d1..4155105dd 100644
--- a/website/src/pages/themes/_config/palette.tsx
+++ b/website/src/pages/themes/_config/palette.tsx
@@ -1,11 +1,11 @@
 import { OptionsPanelConfig } from ".";
-import { colorScaleOptions } from "../_components/color-scale-options";
+import { colorScaleOptions } from "../_const";
 
 const paletteOptionsConfig: OptionsPanelConfig = {
   title: "Color Palette",
   description: "Choose custom colors for each color scale.",
   controls: colorScaleOptions.map((option) => ({
-    type: "colorScale",
+    type: "colorPalette",
     colorScaleType: option.value,
     label: option.label,
   })),
diff --git a/website/src/pages/themes/_const.tsx b/website/src/pages/themes/_const.tsx
new file mode 100644
index 000000000..d5f992692
--- /dev/null
+++ b/website/src/pages/themes/_const.tsx
@@ -0,0 +1,67 @@
+export const NUM_STACKS = 5;
+
+export const sampleStackData = [
+  {
+    x: 1,
+    y: 2,
+  },
+  {
+    x: 2,
+    y: 3,
+  },
+  {
+    x: 3,
+    y: 5,
+  },
+  {
+    x: 4,
+    y: 4,
+  },
+  {
+    x: 5,
+    y: 7,
+  },
+];
+
+export const colorScaleOptions = [
+  {
+    label: "Qualitative",
+    value: "qualitative",
+  },
+  {
+    label: "Grayscale",
+    value: "grayscale",
+  },
+  {
+    label: "Heatmap",
+    value: "heatmap",
+  },
+  {
+    label: "Warm",
+    value: "warm",
+  },
+  {
+    label: "Cool",
+    value: "cool",
+  },
+  {
+    label: "Red",
+    value: "red",
+  },
+  {
+    label: "Green",
+    value: "green",
+  },
+  {
+    label: "Blue",
+    value: "blue",
+  },
+];
+
+export enum StrokeProps {
+  STROKE = "Stroke",
+  STROKE_WIDTH = "Stroke Width",
+  STROKE_DASH_ARRAY = "Stroke Dash Array",
+  STROKE_LINE_CAP = "Stroke Line Cap",
+  STROKE_LINE_JOIN = "Stroke Line Join",
+}
diff --git a/website/src/pages/themes/_utils.ts b/website/src/pages/themes/_utils.ts
index ecac4f47c..05150014e 100644
--- a/website/src/pages/themes/_utils.ts
+++ b/website/src/pages/themes/_utils.ts
@@ -1,6 +1,6 @@
 import { VictoryThemeDefinition } from "victory-core";
 import { ControlConfig } from "./_config";
-import { colorScaleOptions } from "./_components/color-scale-options";
+import { StrokeProps } from "./_const";
 
 export const setNestedConfigValue = (
   config: VictoryThemeDefinition,
@@ -39,14 +39,6 @@ export const getConfigValue = (
 };
 
 // Config helpers
-export enum StrokeProps {
-  STROKE = "Stroke",
-  STROKE_WIDTH = "Stroke Width",
-  STROKE_DASH_ARRAY = "Stroke Dash Array",
-  STROKE_LINE_CAP = "Stroke Line Cap",
-  STROKE_LINE_JOIN = "Stroke Line Join",
-}
-
 export const getPath = (basePath: string | string[], key: string) => {
   if (Array.isArray(basePath)) {
     return basePath.map((p) => `${p}.${key}`);
@@ -58,9 +50,8 @@ export const getNestedColorScaleConfig = (
   basePath: string | string[],
 ): ControlConfig[] => [
   {
-    type: "select",
+    type: "colorScale",
     label: "Color Scale",
-    options: colorScaleOptions,
     path: getPath(basePath, "colorScale"),
   },
 ];

From 3affd3d5e471d54c1d91e15fe6066ae9440badf4 Mon Sep 17 00:00:00 2001
From: Stef <ramenhog@gmail.com>
Date: Fri, 13 Dec 2024 16:39:32 -0500
Subject: [PATCH 14/30] Feat: theme builder preview settings (#3007)

---
 .../pages/themes/_components/accordion.tsx    |  2 +-
 .../themes/_components/base-theme-panel.tsx   | 13 +--
 .../pages/themes/_components/chart-panel.tsx  | 11 +--
 .../_components/color-palette-selector.tsx    | 68 ++++++++++-----
 .../color-scale-override-selector.tsx         | 11 ++-
 .../src/pages/themes/_components/control.tsx  |  7 +-
 .../themes/_components/options-panel.tsx      |  8 +-
 .../pages/themes/_components/panel-header.tsx | 18 ++++
 .../_components/preview-settings-menu.tsx     | 87 +++++++++++++++++++
 .../src/pages/themes/_components/select.tsx   | 17 +++-
 .../src/pages/themes/_components/sidenav.tsx  |  8 +-
 .../src/pages/themes/_components/slider.tsx   |  2 +-
 .../{main.tsx => theme-preview.tsx}           | 57 ++++--------
 .../src/pages/themes/_components/toggle.tsx   | 57 ++++++++++++
 website/src/pages/themes/_config/chart.tsx    |  5 +-
 website/src/pages/themes/_config/index.tsx    |  8 +-
 website/src/pages/themes/_config/palette.tsx  |  4 +-
 .../_providers/previewOptionsProvider.tsx     |  9 +-
 .../pages/themes/_providers/themeProvider.tsx | 10 ++-
 website/src/pages/themes/index.tsx            |  4 +-
 website/tailwind.config.ts                    | 16 ++++
 21 files changed, 320 insertions(+), 102 deletions(-)
 create mode 100644 website/src/pages/themes/_components/panel-header.tsx
 create mode 100644 website/src/pages/themes/_components/preview-settings-menu.tsx
 rename website/src/pages/themes/_components/{main.tsx => theme-preview.tsx} (74%)
 create mode 100644 website/src/pages/themes/_components/toggle.tsx

diff --git a/website/src/pages/themes/_components/accordion.tsx b/website/src/pages/themes/_components/accordion.tsx
index 513195249..e583509ab 100644
--- a/website/src/pages/themes/_components/accordion.tsx
+++ b/website/src/pages/themes/_components/accordion.tsx
@@ -27,7 +27,7 @@ const Accordion = ({
         <button
           type="button"
           className={clsx(
-            "bg-white flex items-center justify-between w-full px-5 py-3 text-sm font-bold rtl:text-right text-grayscale-500 border border-b-0 border-grayscale-300 gap-3 group-last:border-b cursor-pointer",
+            "bg-white flex items-center justify-between w-full px-5 py-3 text-base font-bold rtl:text-right text-grayscale-500 border border-b-0 border-grayscale-300 gap-3 group-last:border-b cursor-pointer",
             { "group-last:border-b-0": isOpen },
           )}
           aria-expanded="true"
diff --git a/website/src/pages/themes/_components/base-theme-panel.tsx b/website/src/pages/themes/_components/base-theme-panel.tsx
index 4077c4f54..34031f4a6 100644
--- a/website/src/pages/themes/_components/base-theme-panel.tsx
+++ b/website/src/pages/themes/_components/base-theme-panel.tsx
@@ -2,9 +2,10 @@ import React from "react";
 import Select from "./select";
 import { themes, useTheme } from "../_providers/themeProvider";
 import { usePreviewOptions } from "../_providers/previewOptionsProvider";
+import PanelHeader from "./panel-header";
 
 const themeOptions = [
-  { label: "Select a theme", value: undefined },
+  { label: "Select a theme", value: "" },
   ...themes.map((theme) => ({
     label: theme.name,
     value: theme.name,
@@ -22,16 +23,16 @@ const BaseThemePanel = () => {
 
   return (
     <>
-      <h2 className="mb-0 text-xl font-bold">Customize Your Theme</h2>
-      <p className="text-sm mb-4 text-grayscale-400">
-        Select a theme to begin customizing.
-      </p>
+      <PanelHeader
+        title="Base Theme"
+        description="Select a theme to begin customizing."
+      />
       <Select
         id="theme-select"
         value={baseTheme?.name || ""}
         onChange={handleThemeSelect}
         options={themeOptions}
-        label="Base Theme"
+        label="Theme"
       />
     </>
   );
diff --git a/website/src/pages/themes/_components/chart-panel.tsx b/website/src/pages/themes/_components/chart-panel.tsx
index 1d5bca41d..be5ec05b4 100644
--- a/website/src/pages/themes/_components/chart-panel.tsx
+++ b/website/src/pages/themes/_components/chart-panel.tsx
@@ -3,6 +3,7 @@ import Control from "./control";
 import Select from "./select";
 import { usePreviewOptions } from "../_providers/previewOptionsProvider";
 import { chartOptionsConfig } from "../_config";
+import PanelHeader from "./panel-header";
 
 const ChartPanel = () => {
   const [chartType, setChartType] = React.useState("");
@@ -27,10 +28,10 @@ const ChartPanel = () => {
 
   return (
     <>
-      <h2 className="mb-0 text-xl font-bold">Chart Options</h2>
-      <p className="text-sm mb-4 text-grayscale-400">
-        Select a chart type to begin customizing.
-      </p>
+      <PanelHeader
+        title="Chart Options"
+        description="Select a chart type to begin customizing."
+      />
       <Select
         id="chart-type-select"
         value={chartType}
@@ -45,7 +46,7 @@ const ChartPanel = () => {
             key={control.label + i}
             type={control.type}
             control={control}
-            className="mt-4 mb-8"
+            className="my-4"
           />
         );
       })}
diff --git a/website/src/pages/themes/_components/color-palette-selector.tsx b/website/src/pages/themes/_components/color-palette-selector.tsx
index 17ba71114..0674ec4ee 100644
--- a/website/src/pages/themes/_components/color-palette-selector.tsx
+++ b/website/src/pages/themes/_components/color-palette-selector.tsx
@@ -3,9 +3,11 @@ import ColorPicker from "./color-picker";
 import { ColorScalePropType, VictoryThemeDefinition } from "victory";
 import { ColorChangeArgs } from "./control";
 import clsx from "clsx";
+import { usePreviewOptions } from "../_providers/previewOptionsProvider";
 
 type ColorPaletteSelectorProps = {
-  label?: string;
+  label: string;
+  value: string;
   palette?: VictoryThemeDefinition["palette"];
   colorScaleType?: ColorScalePropType;
   onColorChange: (args: ColorChangeArgs) => void;
@@ -14,34 +16,56 @@ type ColorPaletteSelectorProps = {
 
 const ColorPaletteSelector = ({
   label,
+  value,
   colorScaleType,
   palette,
   onColorChange,
   className,
 }: ColorPaletteSelectorProps) => {
+  const { colorScale, updateColorScale } = usePreviewOptions();
+
+  const handleRadioChange = () => {
+    updateColorScale(value);
+  };
+
+  const isSelected = colorScale === value;
+
   return (
-    <fieldset className={clsx("p-0 m-0", className)}>
-      {label && (
-        <label className="block mb-3 text-base font-bold">{label}</label>
-      )}
-      {!!colorScaleType && (
-        <div className="flex flex-wrap gap-3">
-          {palette?.[colorScaleType as string]?.map((color, i) => (
-            <ColorPicker
-              key={i}
-              color={color}
-              onColorChange={(newColor) =>
-                onColorChange({
-                  newColor,
-                  index: i,
-                  colorScale: colorScaleType as string,
-                })
-              }
-            />
-          ))}
-        </div>
+    <label
+      className={clsx(
+        "flex items-start gap-2 border-2 rounded-md p-4 cursor-pointer",
+        isSelected ? "border-blue-500 bg-blue-100" : "border-gray-200",
+        className,
       )}
-    </fieldset>
+    >
+      <input
+        type="radio"
+        name={label}
+        value={value}
+        checked={isSelected}
+        onChange={handleRadioChange}
+      />
+      <div className="p-0 m-0">
+        <span className="block mb-3 text-sm font-bold">{label}</span>
+        {!!colorScaleType && (
+          <div className="flex flex-wrap gap-3">
+            {palette?.[colorScaleType as string]?.map((color, i) => (
+              <ColorPicker
+                key={i}
+                color={color}
+                onColorChange={(newColor) =>
+                  onColorChange({
+                    newColor,
+                    index: i,
+                    colorScale: colorScaleType as string,
+                  })
+                }
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </label>
   );
 };
 export default ColorPaletteSelector;
diff --git a/website/src/pages/themes/_components/color-scale-override-selector.tsx b/website/src/pages/themes/_components/color-scale-override-selector.tsx
index 276b0d06a..343b02152 100644
--- a/website/src/pages/themes/_components/color-scale-override-selector.tsx
+++ b/website/src/pages/themes/_components/color-scale-override-selector.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import ColorPicker from "./color-picker";
-import Checkbox from "./checkbox";
 import clsx from "clsx";
+import Toggle from "./toggle";
 
 type ColorScaleOverrideSelectorProps = {
   label?: string;
@@ -38,13 +38,16 @@ const ColorScaleOverrideSelector = ({
   return (
     <fieldset className={clsx("p-0 m-0", className)}>
       <label className="block mb-3 text-sm font-bold">{label}</label>
-      <Checkbox
+      <Toggle
+        id="color-scale-override-toggle"
         label="Use custom color scale"
-        isChecked={hasCustomValue}
+        checked={hasCustomValue}
         onChange={onCheckboxChange}
+        className="mb-3"
+        size="sm"
       />
       {hasCustomValue && (
-        <div className="flex flex-wrap gap-3 mt-3">
+        <div className="flex flex-wrap gap-2 mt-3">
           {value.map((color, i) => (
             <ColorPicker
               key={i}
diff --git a/website/src/pages/themes/_components/control.tsx b/website/src/pages/themes/_components/control.tsx
index e3ba21043..060013973 100644
--- a/website/src/pages/themes/_components/control.tsx
+++ b/website/src/pages/themes/_components/control.tsx
@@ -62,16 +62,19 @@ const Control = ({ type, control, className }) => {
       return (
         <ColorPaletteSelector
           label={control.label}
+          value={control.value}
           palette={customThemeConfig?.palette}
           colorScaleType={control.colorScaleType}
           onColorChange={handleColorChange}
-          className={className}
+          className="my-4"
         />
       );
     case "section":
       return (
         <section className="mb-8">
-          <h3 className="text-lg text-secondary mb-4">{control.label}</h3>
+          <h3 className="text-lg font-bold text-secondary mb-4">
+            {control.label}
+          </h3>
           {control.controls?.map((nestedControl, i) => (
             <Control
               key={nestedControl.label + i}
diff --git a/website/src/pages/themes/_components/options-panel.tsx b/website/src/pages/themes/_components/options-panel.tsx
index 21ec797c6..d60ccc1c3 100644
--- a/website/src/pages/themes/_components/options-panel.tsx
+++ b/website/src/pages/themes/_components/options-panel.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Control from "./control";
+import PanelHeader from "./panel-header";
 
 type GlobalPanelProps = {
   title?: string;
@@ -10,17 +11,14 @@ type GlobalPanelProps = {
 const OptionsPanel = ({ title, description, controls }: GlobalPanelProps) => {
   return (
     <>
-      {!!title && <h2 className="mb-0 text-xl font-bold">{title}</h2>}
-      {!!description && (
-        <p className="text-sm mb-4 text-grayscale-400">{description}</p>
-      )}
+      <PanelHeader title={title} description={description} />
       {controls.map((control, i) => {
         return (
           <Control
             key={control.label + i}
             type={control.type}
             control={control}
-            className="mt-4 mb-8"
+            className="my-4"
           />
         );
       })}
diff --git a/website/src/pages/themes/_components/panel-header.tsx b/website/src/pages/themes/_components/panel-header.tsx
new file mode 100644
index 000000000..4d82ff03c
--- /dev/null
+++ b/website/src/pages/themes/_components/panel-header.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+type PanelHeaderProps = {
+  title?: string;
+  description?: string;
+};
+
+const PanelHeader = ({ title, description }: PanelHeaderProps) => {
+  return (
+    <div className="mb-4">
+      {!!title && <h2 className="mb-0 text-xl font-bold">{title}</h2>}
+      {!!description && (
+        <p className="text-sm mt-1 text-grayscale-400">{description}</p>
+      )}
+    </div>
+  );
+};
+export default PanelHeader;
diff --git a/website/src/pages/themes/_components/preview-settings-menu.tsx b/website/src/pages/themes/_components/preview-settings-menu.tsx
new file mode 100644
index 000000000..0c32511e7
--- /dev/null
+++ b/website/src/pages/themes/_components/preview-settings-menu.tsx
@@ -0,0 +1,87 @@
+import React, { useEffect, useRef } from "react";
+import Select from "./select";
+import { usePreviewOptions } from "../_providers/previewOptionsProvider";
+import { colorScaleOptions } from "../_const";
+import { FiSettings, FiX } from "react-icons/fi";
+import Toggle from "./toggle";
+
+type PreviewSettingsMenuProps = {
+  showColorScaleOptions: boolean;
+};
+
+const PreviewSettingsMenu = ({
+  showColorScaleOptions = false,
+}: PreviewSettingsMenuProps) => {
+  const [isSettingsMenuOpen, setIsSettingsMenuOpen] = React.useState(false);
+  const { colorScale, updateColorScale, showTooltips, setShowTooltips } =
+    usePreviewOptions();
+
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+      setIsSettingsMenuOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isSettingsMenuOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isSettingsMenuOpen]);
+
+  const handleSettingsMenuToggle = () => {
+    setIsSettingsMenuOpen((prev) => !prev);
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={handleSettingsMenuToggle}
+        className="bg-transparent flex justify-center items-center cursor-pointer text-grayscale-800 hover:text-grayscale-400"
+      >
+        <FiSettings className="w-4 h-4" />
+      </button>
+      {isSettingsMenuOpen && (
+        <div
+          className="absolute w-[400px] right-0 top-6 border border-grayscale-300 bg-white rounded-md z-50 p-4 shadow-md"
+          ref={menuRef}
+        >
+          <button
+            onClick={handleSettingsMenuToggle}
+            className="absolute top-2 right-2 flex items-center justify-center p-1 rounded-full bg-grayscale-100 cursor-pointer"
+          >
+            <FiX className="w-4 h-4 text-grayscale-800" />
+          </button>
+          <h1 className="text-base font-bold mb-4">Preview Settings</h1>
+          {showColorScaleOptions && (
+            <Select
+              id="color-scale-preview"
+              label="Preview color scale"
+              value={colorScale}
+              onChange={updateColorScale}
+              options={colorScaleOptions}
+              includeDefault
+              className="flex items-center justify-between my-2"
+              size="sm"
+            />
+          )}
+          <Toggle
+            id="show-tooltips"
+            label="Show tooltips instead of labels"
+            checked={showTooltips}
+            onChange={setShowTooltips}
+            className="mt-4"
+            size="sm"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+export default PreviewSettingsMenu;
diff --git a/website/src/pages/themes/_components/select.tsx b/website/src/pages/themes/_components/select.tsx
index d509f415e..3394e81c3 100644
--- a/website/src/pages/themes/_components/select.tsx
+++ b/website/src/pages/themes/_components/select.tsx
@@ -14,6 +14,7 @@ type SelectProps = {
   onChange: (value: string) => void;
   includeDefault?: boolean;
   className?: string;
+  size?: "sm" | "md";
 };
 
 const Select = ({
@@ -24,16 +25,25 @@ const Select = ({
   onChange,
   includeDefault,
   className,
+  size = "md",
 }: SelectProps) => {
   const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     if (onChange) {
       onChange(event.target.value);
     }
   };
+
+  const labelSizeClasses = size === "sm" ? "font-medium" : "font-bold";
+  const selectSizeClasses =
+    size === "sm" ? "text-sm px-2 py-1.5" : "text-base p-2";
+
   return (
     <div className={clsx("relative", className)}>
       {label && (
-        <label htmlFor={id} className="block mb-1 text-sm font-bold">
+        <label
+          htmlFor={id}
+          className={clsx("block flex-1 my-1 text-sm", labelSizeClasses)}
+        >
           {label}
         </label>
       )}
@@ -41,7 +51,10 @@ const Select = ({
         id={id}
         value={value}
         onChange={handleChange}
-        className="p-2 w-full text-base border border-grayscale-300 bg-white appearance-none rounded-md bg-select-chevron bg-no-repeat bg-[right_8px_center] bg-[length:16px]"
+        className={clsx(
+          "w-full border border-grayscale-300 bg-white appearance-none rounded-md bg-select-chevron bg-no-repeat bg-[right_8px_center] bg-[length:16px] flex-1",
+          selectSizeClasses,
+        )}
       >
         {includeDefault && <option value="">Default</option>}
         {options.map((option, i) => (
diff --git a/website/src/pages/themes/_components/sidenav.tsx b/website/src/pages/themes/_components/sidenav.tsx
index 5cd7b6eeb..31ae399c0 100644
--- a/website/src/pages/themes/_components/sidenav.tsx
+++ b/website/src/pages/themes/_components/sidenav.tsx
@@ -15,6 +15,7 @@ import {
 import axisOptionsConfig from "../_config/axis";
 import { useTheme } from "../_providers/themeProvider";
 import {
+  defaultColorScale,
   defaultExampleConfigs,
   usePreviewOptions,
 } from "../_providers/previewOptionsProvider";
@@ -79,11 +80,12 @@ const exportItem: NavItem = {
 
 const SideNav = ({ activeItem, onItemSelect }: SideNavProps) => {
   const { baseTheme } = useTheme();
-  const { setExampleConfigs } = usePreviewOptions();
+  const { setExampleConfigs, updateColorScale } = usePreviewOptions();
   const isBaseThemeSelected = !!baseTheme;
 
   const handleItemSelect = (item: NavItem) => {
     onItemSelect(item);
+    updateColorScale(defaultColorScale);
     if (item.panelType === "default" && !!item.examples) {
       setExampleConfigs(item.examples);
     } else {
@@ -109,7 +111,7 @@ const SideNav = ({ activeItem, onItemSelect }: SideNavProps) => {
               className={clsx(
                 "group flex w-full flex-col items-center rounded-md p-3 text-xs font-bold cursor-pointer bg-transparent",
                 isActive
-                  ? "text-theme-1"
+                  ? "text-orange-100"
                   : "text-grayscale-300 hover:text-white disabled:text-grayscale-800 disabled:cursor-not-allowed",
               )}
             >
@@ -117,7 +119,7 @@ const SideNav = ({ activeItem, onItemSelect }: SideNavProps) => {
                 aria-hidden="true"
                 className={clsx(
                   isActive
-                    ? "text-theme-1"
+                    ? "text-orange-100"
                     : "text-grayscale-300 group-hover:text-white group-disabled:text-grayscale-800",
                   "size-6",
                 )}
diff --git a/website/src/pages/themes/_components/slider.tsx b/website/src/pages/themes/_components/slider.tsx
index 42c3d4e49..d67fb073f 100644
--- a/website/src/pages/themes/_components/slider.tsx
+++ b/website/src/pages/themes/_components/slider.tsx
@@ -46,7 +46,7 @@ const Slider = ({
         type="range"
         value={value}
         onChange={handleChange}
-        className="w-full h-2 bg-grayscale-300 rounded-lg appearance-none cursor-pointer dark:bg-grayscale-700"
+        className="w-full h-2 bg-grayscale-300 rounded-lg appearance-none cursor-pointer accent-blue-800 dark:bg-grayscale-700"
         min={min}
         max={max}
         step={step}
diff --git a/website/src/pages/themes/_components/main.tsx b/website/src/pages/themes/_components/theme-preview.tsx
similarity index 74%
rename from website/src/pages/themes/_components/main.tsx
rename to website/src/pages/themes/_components/theme-preview.tsx
index 41c206841..7fe1c6660 100644
--- a/website/src/pages/themes/_components/main.tsx
+++ b/website/src/pages/themes/_components/theme-preview.tsx
@@ -10,9 +10,9 @@ import {
 } from "victory";
 import { useTheme } from "../_providers/themeProvider";
 import { usePreviewOptions } from "../_providers/previewOptionsProvider";
-import Select from "./select";
-import { colorScaleOptions, NUM_STACKS, sampleStackData } from "../_const";
+import { NUM_STACKS, sampleStackData } from "../_const";
 import clsx from "clsx";
+import PreviewSettingsMenu from "./preview-settings-menu";
 
 const chartStyle: { [key: string]: React.CSSProperties } = {
   parent: {
@@ -25,45 +25,24 @@ const chartStyle: { [key: string]: React.CSSProperties } = {
   },
 };
 
-const Main = () => {
+const ThemePreview = () => {
   const { customThemeConfig } = useTheme();
-  const {
-    colorScale,
-    updateColorScale,
-    showTooltips,
-    setShowTooltips,
-    exampleConfigs,
-  } = usePreviewOptions();
+  const { colorScale, showTooltips, exampleConfigs } = usePreviewOptions();
 
   if (!customThemeConfig) return null;
 
+  const showColorScaleOptions =
+    exampleConfigs.length === 0 ||
+    exampleConfigs.filter(
+      ({ allowColorScaleOverride }) => allowColorScaleOverride,
+    ).length > 0;
+
   return (
     <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
-      <div className="max-w-screen-xl w-full p-10 pb-20">
-        <div className="flex justify-between items-center mb-4">
-          <Select
-            id="color-scale"
-            label="Choose Color Scale For Preview"
-            value={colorScale}
-            onChange={updateColorScale}
-            options={colorScaleOptions}
-            includeDefault
-            className="w-1/3"
-          />
-          <fieldset className="p-0 m-0">
-            <div className="flex items-center gap-2 cursor-pointer">
-              <input
-                type="checkbox"
-                id="show-tooltips"
-                className="form-checkbox h-4 w-4 text-primary"
-                checked={showTooltips}
-                onChange={() => setShowTooltips(!showTooltips)}
-              />
-              <label htmlFor="show-tooltips" className="text-xs cursor-pointer">
-                Show tooltips instead of labels
-              </label>
-            </div>
-          </fieldset>
+      <div className="max-w-screen-xl w-full px-10 pt-6 pb-20">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-2xl font-bold m-0">Theme Preview</h1>
+          <PreviewSettingsMenu showColorScaleOptions={showColorScaleOptions} />
         </div>
         <div
           className={clsx(
@@ -77,7 +56,7 @@ const Main = () => {
           {exampleConfigs.length === 0 ? (
             <>
               <div>
-                <h3 className="text-base font-bold mb-3">Stacked Area Chart</h3>
+                <h3 className="text-lg font-bold mb-3">Stacked Area Chart</h3>
                 <VictoryChart
                   theme={customThemeConfig}
                   domainPadding={20}
@@ -96,7 +75,7 @@ const Main = () => {
                 </VictoryChart>
               </div>
               <div>
-                <h3 className="text-base font-bold mb-3">Stacked Bar Chart</h3>
+                <h3 className="text-lg font-bold mb-3">Stacked Bar Chart</h3>
                 <VictoryChart
                   theme={customThemeConfig}
                   domainPadding={20}
@@ -129,7 +108,7 @@ const Main = () => {
               ({ label, content: Content, hasVictoryChart = true }, i) =>
                 Content && (
                   <div key={i}>
-                    <h3 className="text-base font-bold mb-3">{label}</h3>
+                    <h3 className="text-lg font-bold mb-3">{label}</h3>
                     {hasVictoryChart ? (
                       <VictoryChart
                         theme={customThemeConfig}
@@ -164,4 +143,4 @@ const Main = () => {
     </main>
   );
 };
-export default Main;
+export default ThemePreview;
diff --git a/website/src/pages/themes/_components/toggle.tsx b/website/src/pages/themes/_components/toggle.tsx
new file mode 100644
index 000000000..2a85e25c1
--- /dev/null
+++ b/website/src/pages/themes/_components/toggle.tsx
@@ -0,0 +1,57 @@
+import clsx from "clsx";
+import React from "react";
+
+type ToggleProps = {
+  id: string;
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  className?: string;
+  size?: "sm" | "md";
+};
+
+const Toggle = ({
+  id,
+  label,
+  checked,
+  onChange,
+  className,
+  size = "md",
+}: ToggleProps) => {
+  const handleChange = () => {
+    onChange(!checked);
+  };
+
+  const labelSizeClasses = size === "sm" ? "font-medium" : "font-bold";
+  const toggleSize =
+    size === "sm"
+      ? "w-9 h-5 after:h-4 after:w-4"
+      : "w-11 h-6 after:h-5 after:w-5 ";
+
+  return (
+    <label
+      htmlFor={id}
+      className={clsx(
+        "flex justify-between items-center cursor-pointer",
+        className,
+      )}
+    >
+      <span className={clsx("text-sm", labelSizeClasses)}>{label}</span>
+      <input
+        id={id}
+        type="checkbox"
+        checked={checked}
+        onChange={handleChange}
+        className="sr-only peer"
+      />
+      <div
+        className={clsx(
+          "relative bg-grayscale-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-grayscale-300 after:border after:rounded-full after:transition-all peer-checked:bg-blue-800",
+          toggleSize,
+        )}
+      ></div>
+    </label>
+  );
+};
+
+export default Toggle;
diff --git a/website/src/pages/themes/_config/chart.tsx b/website/src/pages/themes/_config/chart.tsx
index 5b6890d7d..761b05e5a 100644
--- a/website/src/pages/themes/_config/chart.tsx
+++ b/website/src/pages/themes/_config/chart.tsx
@@ -457,6 +457,7 @@ const chartOptionsConfig: {
   group: {
     type: "section",
     label: "Group",
+    allowColorScaleOverride: true,
     content: (props) => [
       <VictoryAxis key="x-axis" label="X Axis" />,
       <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
@@ -673,6 +674,7 @@ const chartOptionsConfig: {
   pie: {
     type: "section",
     label: "Pie Chart",
+    allowColorScaleOverride: true,
     hasVictoryChart: false,
     content: (props) => (
       <VictoryPie
@@ -761,7 +763,8 @@ const chartOptionsConfig: {
   },
   stack: {
     type: "section",
-    label: "Stacks",
+    label: "Stack",
+    allowColorScaleOverride: true,
     content: (props) => [
       <VictoryAxis key="x-axis" label="X Axis" />,
       <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
diff --git a/website/src/pages/themes/_config/index.tsx b/website/src/pages/themes/_config/index.tsx
index 33dd80813..ea538f140 100644
--- a/website/src/pages/themes/_config/index.tsx
+++ b/website/src/pages/themes/_config/index.tsx
@@ -5,9 +5,15 @@ export type ControlConfig = {
   content?: (props: any) => React.ReactNode;
   controls?: ControlConfig[];
   hasVictoryChart?: boolean;
+  allowColorScaleOverride?: boolean;
 } & (
   | {
-      type: "section" | "colorPalette" | "accordion";
+      type: "section" | "accordion";
+    }
+  | {
+      type: "colorPalette";
+      colorScaleType: string;
+      value: string;
     }
   | {
       type: "colorScale";
diff --git a/website/src/pages/themes/_config/palette.tsx b/website/src/pages/themes/_config/palette.tsx
index 4155105dd..271e8d22a 100644
--- a/website/src/pages/themes/_config/palette.tsx
+++ b/website/src/pages/themes/_config/palette.tsx
@@ -3,11 +3,13 @@ import { colorScaleOptions } from "../_const";
 
 const paletteOptionsConfig: OptionsPanelConfig = {
   title: "Color Palette",
-  description: "Choose custom colors for each color scale.",
+  description:
+    "Select a color palette to apply it to the preview charts, then adjust individual colors in the palette to customize the theme.",
   controls: colorScaleOptions.map((option) => ({
     type: "colorPalette",
     colorScaleType: option.value,
     label: option.label,
+    value: option.value,
   })),
 };
 
diff --git a/website/src/pages/themes/_providers/previewOptionsProvider.tsx b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
index 093439dcd..439221e51 100644
--- a/website/src/pages/themes/_providers/previewOptionsProvider.tsx
+++ b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
@@ -1,12 +1,13 @@
 import React, { createContext, useContext } from "react";
+import { ControlConfig } from "../_config";
 
 type PreviewOptionsContextType = {
   colorScale?: string;
-  updateColorScale: (newColorScale: string) => void;
+  updateColorScale: (newColorScale?: string) => void;
   showTooltips: boolean;
   setShowTooltips: (showTooltips: boolean) => void;
   resetPreviewOptions: () => void;
-  exampleConfigs: any[];
+  exampleConfigs: ControlConfig[];
   setExampleConfigs: (exampleConfigs: any[]) => void;
 };
 
@@ -27,8 +28,8 @@ export const PreviewOptionsProvider = ({ children }) => {
     defaultExampleConfigs,
   );
 
-  const updateColorScale = (newColorScale: string) => {
-    const updatedColorScale = newColorScale === "" ? undefined : newColorScale;
+  const updateColorScale = (newColorScale?: string) => {
+    const updatedColorScale = !newColorScale ? undefined : newColorScale;
     setColorScale(updatedColorScale);
   };
 
diff --git a/website/src/pages/themes/_providers/themeProvider.tsx b/website/src/pages/themes/_providers/themeProvider.tsx
index f4a42a483..062dea213 100644
--- a/website/src/pages/themes/_providers/themeProvider.tsx
+++ b/website/src/pages/themes/_providers/themeProvider.tsx
@@ -32,9 +32,13 @@ export const ThemeProvider = ({ children }) => {
 
   const onBaseThemeSelect = (themeName?: string) => {
     const theme = themes.find((t) => t.name === themeName);
-    if (!theme) return;
-    setBaseTheme(theme);
-    setCustomThemeConfig({ ...theme?.config });
+    if (!theme) {
+      setBaseTheme(undefined);
+      setCustomThemeConfig(undefined);
+    } else {
+      setBaseTheme(theme);
+      setCustomThemeConfig({ ...theme?.config });
+    }
   };
 
   const updateCustomThemeConfig = useCallback(
diff --git a/website/src/pages/themes/index.tsx b/website/src/pages/themes/index.tsx
index b61370d8b..7c32e7df7 100644
--- a/website/src/pages/themes/index.tsx
+++ b/website/src/pages/themes/index.tsx
@@ -8,7 +8,7 @@ import BaseThemePanel from "./_components/base-theme-panel";
 import OptionsPanel from "./_components/options-panel";
 import ChartPanel from "./_components/chart-panel";
 import { ThemeProvider } from "./_providers/themeProvider";
-import Main from "./_components/main";
+import ThemePreview from "./_components/theme-preview";
 import { PreviewOptionsProvider } from "./_providers/previewOptionsProvider";
 import ExportPanel from "./_components/export-panel";
 
@@ -52,7 +52,7 @@ const ThemeBuilder = () => {
                 <aside className="sticky top-[60px] h-theme-builder p-6 border-r border-grayscale-300 overflow-y-scroll w-[380px] bg-gray-50">
                   {getPanel(activeSidebarItem)}
                 </aside>
-                <Main />
+                <ThemePreview />
               </>
             )}
           </div>
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
index d2b8de384..5e0c08543 100644
--- a/website/tailwind.config.ts
+++ b/website/tailwind.config.ts
@@ -16,6 +16,20 @@ const NearFormColors = {
   DeepNavy: "hsla(225, 100%, 11%, 1)",
 };
 
+const blue = {
+  100: "#E8F0FF",
+  300: "#B9D3FF",
+  500: "#8AB6FF",
+  800: "#4589FF",
+};
+
+const orange = {
+  100: "#ff684f",
+  200: "#ff4b2e",
+  300: "#ff3d1d",
+  400: "#ea2100",
+};
+
 module.exports = {
   corePlugins: {
     preflight: false, // disable Tailwind's reset
@@ -37,6 +51,8 @@ module.exports = {
           500: NearFormColors.Black,
           800: "#888888",
         },
+        orange,
+        blue,
         "theme-1": NearFormColors.Green,
         "theme-2": NearFormColors.DeepNavy,
         "theme-3": NearFormColors.DeepNavy,

From a99c340021b0fef24dde439f89eeda664f0e9817 Mon Sep 17 00:00:00 2001
From: Stef <ramenhog@gmail.com>
Date: Mon, 16 Dec 2024 09:23:18 -0500
Subject: [PATCH 15/30] Feat: theme builder refactor axis panel (#3010)

---
 .../themes/_components/base-theme-panel.tsx   | 11 ++--
 .../pages/themes/_components/chart-panel.tsx  | 57 +++++++++++--------
 .../themes/_components/options-panel.tsx      |  9 +--
 .../src/pages/themes/_components/sidenav.tsx  | 20 +++----
 website/src/pages/themes/_config/axis.tsx     | 41 ++++++-------
 website/src/pages/themes/_config/chart.tsx    |  9 ++-
 website/src/pages/themes/_config/index.tsx    |  7 +++
 .../pages/themes/_providers/themeProvider.tsx | 17 +++---
 website/src/pages/themes/index.tsx            | 14 ++---
 9 files changed, 102 insertions(+), 83 deletions(-)

diff --git a/website/src/pages/themes/_components/base-theme-panel.tsx b/website/src/pages/themes/_components/base-theme-panel.tsx
index 34031f4a6..bdbff9dda 100644
--- a/website/src/pages/themes/_components/base-theme-panel.tsx
+++ b/website/src/pages/themes/_components/base-theme-panel.tsx
@@ -4,13 +4,10 @@ import { themes, useTheme } from "../_providers/themeProvider";
 import { usePreviewOptions } from "../_providers/previewOptionsProvider";
 import PanelHeader from "./panel-header";
 
-const themeOptions = [
-  { label: "Select a theme", value: "" },
-  ...themes.map((theme) => ({
-    label: theme.name,
-    value: theme.name,
-  })),
-];
+const themeOptions = themes.map((theme) => ({
+  label: theme.name,
+  value: theme.name,
+}));
 
 const BaseThemePanel = () => {
   const { baseTheme, onBaseThemeSelect } = useTheme();
diff --git a/website/src/pages/themes/_components/chart-panel.tsx b/website/src/pages/themes/_components/chart-panel.tsx
index be5ec05b4..1fa76351d 100644
--- a/website/src/pages/themes/_components/chart-panel.tsx
+++ b/website/src/pages/themes/_components/chart-panel.tsx
@@ -1,43 +1,54 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import Control from "./control";
 import Select from "./select";
 import { usePreviewOptions } from "../_providers/previewOptionsProvider";
-import { chartOptionsConfig } from "../_config";
+import { ChartPanelConfig } from "../_config";
 import PanelHeader from "./panel-header";
 
-const ChartPanel = () => {
-  const [chartType, setChartType] = React.useState("");
+type ChartPanelProps = {
+  config: ChartPanelConfig;
+};
+
+const ChartPanel = ({
+  config: { title, description, selectLabel, types },
+}: ChartPanelProps) => {
+  const [chartType, setChartType] = React.useState(Object.keys(types)[0]);
   const { setExampleConfigs } = usePreviewOptions();
-  const selectOptions = Object.keys(chartOptionsConfig).map((key) => ({
-    label: chartOptionsConfig[key].label,
+  const selectOptions = Object.keys(types).map((key) => ({
+    label: types[key].label,
     value: key,
   }));
-  const options = [
-    { label: "Select a chart type", value: "" },
-    ...selectOptions,
-  ];
-  const controls = chartOptionsConfig[chartType]?.controls || [];
+  const options = useMemo(
+    () => [
+      { label: `Select ${selectLabel.toLowerCase()}`, value: "" },
+      ...selectOptions,
+    ],
+    [selectOptions, selectLabel],
+  );
+  const controls = types[chartType]?.controls || [];
 
-  const onChartTypeChange = (newValue: string) => {
-    setChartType(newValue);
-    const examples = chartOptionsConfig[newValue]
-      ? [chartOptionsConfig[newValue]]
-      : [];
-    setExampleConfigs(examples);
-  };
+  const onChartTypeChange = useCallback(
+    (newValue: string) => {
+      setChartType(newValue);
+      const examples = types[newValue] ? [types[newValue]] : [];
+      setExampleConfigs(examples);
+    },
+    [setExampleConfigs, types],
+  );
+
+  useEffect(() => {
+    onChartTypeChange(Object.keys(types)[0]);
+  }, [types, onChartTypeChange]);
 
   return (
     <>
-      <PanelHeader
-        title="Chart Options"
-        description="Select a chart type to begin customizing."
-      />
+      <PanelHeader title={title} description={description} />
       <Select
         id="chart-type-select"
         value={chartType}
         onChange={onChartTypeChange}
         options={options}
-        label="Chart Type"
+        label={selectLabel}
         className="mt-4 mb-8"
       />
       {controls.map((control, i) => {
diff --git a/website/src/pages/themes/_components/options-panel.tsx b/website/src/pages/themes/_components/options-panel.tsx
index d60ccc1c3..34b9ca304 100644
--- a/website/src/pages/themes/_components/options-panel.tsx
+++ b/website/src/pages/themes/_components/options-panel.tsx
@@ -1,14 +1,15 @@
 import React from "react";
 import Control from "./control";
 import PanelHeader from "./panel-header";
+import { OptionsPanelConfig } from "../_config";
 
 type GlobalPanelProps = {
-  title?: string;
-  description?: string;
-  controls: any[];
+  config: OptionsPanelConfig;
 };
 
-const OptionsPanel = ({ title, description, controls }: GlobalPanelProps) => {
+const OptionsPanel = ({
+  config: { title, description, controls },
+}: GlobalPanelProps) => {
   return (
     <>
       <PanelHeader title={title} description={description} />
diff --git a/website/src/pages/themes/_components/sidenav.tsx b/website/src/pages/themes/_components/sidenav.tsx
index 31ae399c0..4f2949697 100644
--- a/website/src/pages/themes/_components/sidenav.tsx
+++ b/website/src/pages/themes/_components/sidenav.tsx
@@ -7,7 +7,8 @@ import {
 import clsx from "clsx";
 import React from "react";
 import {
-  ControlConfig,
+  chartOptionsConfig,
+  ChartPanelConfig,
   globalOptionsConfig,
   OptionsPanelConfig,
   paletteOptionsConfig,
@@ -26,12 +27,15 @@ type NavItem = {
   icon: React.ElementType;
 } & (
   | {
-      panelType: "theme" | "chart" | "export";
+      panelType: "theme" | "export";
     }
   | {
       panelType: "default";
       config: OptionsPanelConfig;
-      examples?: ControlConfig[];
+    }
+  | {
+      panelType: "chart";
+      config: ChartPanelConfig;
     }
 );
 
@@ -61,13 +65,13 @@ export const NAV_ITEMS: NavItem[] = [
   {
     title: "Axis Options",
     icon: AdjustmentsVerticalIcon,
-    panelType: "default",
     config: axisOptionsConfig,
-    examples: axisOptionsConfig.controls,
+    panelType: "chart",
   },
   {
     title: "Chart Options",
     icon: AdjustmentsVerticalIcon,
+    config: chartOptionsConfig,
     panelType: "chart",
   },
 ];
@@ -86,11 +90,7 @@ const SideNav = ({ activeItem, onItemSelect }: SideNavProps) => {
   const handleItemSelect = (item: NavItem) => {
     onItemSelect(item);
     updateColorScale(defaultColorScale);
-    if (item.panelType === "default" && !!item.examples) {
-      setExampleConfigs(item.examples);
-    } else {
-      setExampleConfigs(defaultExampleConfigs);
-    }
+    setExampleConfigs(defaultExampleConfigs);
   };
 
   const isExportItemActive = activeItem.title === exportItem.title;
diff --git a/website/src/pages/themes/_config/axis.tsx b/website/src/pages/themes/_config/axis.tsx
index 36c778e9d..815aabc16 100644
--- a/website/src/pages/themes/_config/axis.tsx
+++ b/website/src/pages/themes/_config/axis.tsx
@@ -2,8 +2,8 @@
 import React from "react";
 import { getBaseLabelsConfig, getBaseStrokeConfig } from "../_utils";
 import { VictoryAxis, VictoryPolarAxis } from "victory";
-import { ControlConfig, OptionsPanelConfig } from ".";
 import { StrokeProps } from "../_const";
+import { ControlConfig } from ".";
 
 const generalAxisOptionsConfig: ControlConfig = {
   type: "accordion",
@@ -54,19 +54,12 @@ const generalAxisOptionsConfig: ControlConfig = {
   ],
 };
 
-const polarAxisOptionsConfig = {
+const polarAxisOptionsConfig: ControlConfig = {
   type: "accordion",
   label: "Polar Axis",
-  content: (props) => [
-    <VictoryPolarAxis {...props} key="polar-axis" standalone={false} />,
-    <VictoryPolarAxis
-      {...props}
-      key="polar-axis-dependent"
-      dependentAxis
-      domain={[0, 10]}
-      standalone={false}
-    />,
-  ],
+  content: (props) => (
+    <VictoryPolarAxis {...props} key="polar-axis" standalone={false} />
+  ),
   controls: [
     {
       type: "section",
@@ -112,6 +105,15 @@ const polarAxisOptionsConfig = {
 const polarDependentAxisOptionsConfig: ControlConfig = {
   type: "accordion",
   label: "Polar Dependent Axis",
+  content: (props) => (
+    <VictoryPolarAxis
+      {...props}
+      key="polar-axis-dependent"
+      dependentAxis
+      domain={[0, 10]}
+      standalone={false}
+    />
+  ),
   controls: [
     {
       type: "section",
@@ -154,14 +156,15 @@ const polarDependentAxisOptionsConfig: ControlConfig = {
   ],
 };
 
-const axisOptionsConfig: OptionsPanelConfig = {
+const axisOptionsConfig = {
   title: "Axis Options",
-  description: "Customize the appearance of axes in your charts.",
-  controls: [
-    generalAxisOptionsConfig,
-    polarAxisOptionsConfig,
-    polarDependentAxisOptionsConfig,
-  ],
+  description: "Customize the appearance of axes.",
+  selectLabel: "Axis Type",
+  types: {
+    base: generalAxisOptionsConfig,
+    polarAxis: polarAxisOptionsConfig,
+    polarDependentAxis: polarDependentAxisOptionsConfig,
+  },
 };
 
 export default axisOptionsConfig;
diff --git a/website/src/pages/themes/_config/chart.tsx b/website/src/pages/themes/_config/chart.tsx
index 761b05e5a..2a892866c 100644
--- a/website/src/pages/themes/_config/chart.tsx
+++ b/website/src/pages/themes/_config/chart.tsx
@@ -24,7 +24,7 @@ import {
 import { ControlConfig } from ".";
 import { NUM_STACKS, sampleStackData, StrokeProps } from "../_const";
 
-const chartOptionsConfig: {
+const chartConfigs: {
   [key: string]: ControlConfig;
 } = {
   area: {
@@ -883,4 +883,11 @@ const chartOptionsConfig: {
   },
 };
 
+const chartOptionsConfig = {
+  title: "Chart Options",
+  description: "Customize the appearance of individual charts.",
+  selectLabel: "Chart Type",
+  types: chartConfigs,
+};
+
 export default chartOptionsConfig;
diff --git a/website/src/pages/themes/_config/index.tsx b/website/src/pages/themes/_config/index.tsx
index ea538f140..7a9296da6 100644
--- a/website/src/pages/themes/_config/index.tsx
+++ b/website/src/pages/themes/_config/index.tsx
@@ -37,6 +37,13 @@ export type OptionsPanelConfig = {
   controls: ControlConfig[];
 };
 
+export type ChartPanelConfig = {
+  title: string;
+  description?: string;
+  selectLabel: string;
+  types: Record<string, ControlConfig>;
+};
+
 export { default as paletteOptionsConfig } from "./palette";
 export { default as globalOptionsConfig } from "./global";
 export { default as axisOptionsConfig } from "./axis";
diff --git a/website/src/pages/themes/_providers/themeProvider.tsx b/website/src/pages/themes/_providers/themeProvider.tsx
index 062dea213..7c730b4d6 100644
--- a/website/src/pages/themes/_providers/themeProvider.tsx
+++ b/website/src/pages/themes/_providers/themeProvider.tsx
@@ -4,7 +4,7 @@ import { setNestedConfigValue } from "../_utils";
 
 export type ThemeOption = {
   name: string;
-  config?: VictoryThemeDefinition;
+  config: VictoryThemeDefinition;
 };
 
 type ThemeContextType = {
@@ -20,21 +20,20 @@ export const themes: ThemeOption[] = [
   { name: "Grayscale", config: VictoryTheme.grayscale },
 ];
 
+const defaultTheme = themes[0];
+
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 export const ThemeProvider = ({ children }) => {
-  const [baseTheme, setBaseTheme] = React.useState<ThemeOption | undefined>(
-    undefined,
-  );
-  const [customThemeConfig, setCustomThemeConfig] = React.useState<
-    VictoryThemeDefinition | undefined
-  >(undefined);
+  const [baseTheme, setBaseTheme] = React.useState<ThemeOption>(defaultTheme);
+  const [customThemeConfig, setCustomThemeConfig] =
+    React.useState<VictoryThemeDefinition>(defaultTheme.config);
 
   const onBaseThemeSelect = (themeName?: string) => {
     const theme = themes.find((t) => t.name === themeName);
     if (!theme) {
-      setBaseTheme(undefined);
-      setCustomThemeConfig(undefined);
+      setBaseTheme(defaultTheme);
+      setCustomThemeConfig(defaultTheme.config);
     } else {
       setBaseTheme(theme);
       setCustomThemeConfig({ ...theme?.config });
diff --git a/website/src/pages/themes/index.tsx b/website/src/pages/themes/index.tsx
index 7c32e7df7..deb8e4a3b 100644
--- a/website/src/pages/themes/index.tsx
+++ b/website/src/pages/themes/index.tsx
@@ -12,20 +12,14 @@ import ThemePreview from "./_components/theme-preview";
 import { PreviewOptionsProvider } from "./_providers/previewOptionsProvider";
 import ExportPanel from "./_components/export-panel";
 
-const getPanel = (activeSidebarItem) => {
-  switch (activeSidebarItem.panelType) {
+const getPanel = ({ panelType, config }) => {
+  switch (panelType) {
     case "theme":
       return <BaseThemePanel />;
     case "chart":
-      return <ChartPanel />;
+      return <ChartPanel config={config} />;
     default:
-      return (
-        <OptionsPanel
-          title={activeSidebarItem.config.title}
-          description={activeSidebarItem.config.description}
-          controls={activeSidebarItem.config.controls}
-        />
-      );
+      return <OptionsPanel config={config} />;
   }
 };
 

From 6cd78f5a0aa93c0fcf4eadf5d1f2f2677b7634af Mon Sep 17 00:00:00 2001
From: Stef <ramenhog@gmail.com>
Date: Wed, 18 Dec 2024 09:22:29 -0500
Subject: [PATCH 16/30] Feat: theme builder export panel updates (#3012)

---
 .../pages/themes/_components/code-block.tsx   | 110 ++++++++++++--
 .../pages/themes/_components/export-panel.tsx | 141 +++++++++---------
 website/src/pages/themes/_config/chart.tsx    |  11 +-
 website/tailwind.config.ts                    |   1 +
 4 files changed, 175 insertions(+), 88 deletions(-)

diff --git a/website/src/pages/themes/_components/code-block.tsx b/website/src/pages/themes/_components/code-block.tsx
index b063dedbe..16072fb95 100644
--- a/website/src/pages/themes/_components/code-block.tsx
+++ b/website/src/pages/themes/_components/code-block.tsx
@@ -1,28 +1,108 @@
 import clsx from "clsx";
-import { Highlight, themes } from "prism-react-renderer";
+import { Highlight } from "prism-react-renderer";
 import React from "react";
+import { FiCheck, FiCopy } from "react-icons/fi";
 
-type CodeBlockProps = {
+type CodeBlock = {
+  title?: string;
   code: string;
   language: string;
-  className?: string;
 };
 
-const CodeBlock = ({ code, language, className: classes }: CodeBlockProps) => {
+type CodeBlockProps = {
+  className?: string;
+} & (CodeBlock | { blocks: CodeBlock[] });
+
+const CodeBlock = (props: CodeBlockProps) => {
+  const { className: classes } = props;
+  const [copyStatus, setCopyStatus] = React.useState<string | null>(null);
+  const [activeBlockIndex, setActiveBlockIndex] = React.useState(0);
+
+  const code =
+    "blocks" in props ? props.blocks[activeBlockIndex].code : props.code;
+  const language =
+    "blocks" in props
+      ? props.blocks[activeBlockIndex].language
+      : props.language;
+
+  const handleCopyThemeConfig = () => {
+    navigator.clipboard
+      .writeText(code)
+      // eslint-disable-next-line promise/always-return
+      .then(() => {
+        setCopyStatus("Copied successfully.");
+      })
+      .catch(() => {
+        setCopyStatus("Failed to copy.");
+      });
+  };
+
+  const handleBlockChange = (index: number) => {
+    setActiveBlockIndex(index);
+    setCopyStatus(null);
+  };
+
   return (
-    <Highlight code={code} language={language} theme={themes.oneLight}>
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <pre className={clsx(classes, className)} style={style}>
-          {tokens.map((line, i) => (
-            <div {...getLineProps({ line, key: i })} key={i}>
-              {line.map((token, key) => (
-                <span {...getTokenProps({ token, key })} key={key} />
-              ))}
-            </div>
+    <div className="bg-code-bg rounded-xl">
+      {"blocks" in props && (
+        <div className="flex pt-2">
+          {props.blocks.map(({ title }, index) => (
+            <button
+              key={index}
+              className={clsx(
+                "py-1.5 px-5 text-sm font-medium text-grayscale-600",
+                activeBlockIndex === index
+                  ? "bg-code-bg text-theme-1 border-b border-theme-1"
+                  : "bg-grayscale-400 text-grayscale-800 border-grayscale-800 border-y border-l cursor-pointer hover:text-white",
+                index === activeBlockIndex - 1 && "rounded-tr-lg border-r",
+                index === activeBlockIndex + 1 && "rounded-tl-lg",
+              )}
+              onClick={() => handleBlockChange(index)}
+            >
+              {title || "Terminal"}
+            </button>
           ))}
-        </pre>
+          <div
+            className={clsx(
+              "flex-auto px-5 bg-grayscale-400 border-grayscale-800 border-y border-l flex justify-end items-center",
+              "blocks" in props &&
+                activeBlockIndex === props.blocks.length - 1 &&
+                "rounded-tl",
+            )}
+          >
+            <div className="flex items-center justify-end gap-2">
+              {copyStatus && (
+                <span className="text-grayscale-200 text-xs italic">
+                  {copyStatus}
+                </span>
+              )}
+              <button
+                onClick={handleCopyThemeConfig}
+                className="bg-transparent text-lg text-grayscale-800 cursor-pointer hover:text-grayscale-200 flex items-center justify-center p-1 rounded-md"
+              >
+                {copyStatus ? <FiCheck className="text-theme-1" /> : <FiCopy />}
+              </button>
+            </div>
+          </div>
+        </div>
       )}
-    </Highlight>
+      <div className="text-sm">
+        <Highlight code={code} language={language}>
+          {({ className, style, tokens, getLineProps, getTokenProps }) => (
+            <pre className={clsx(classes, className)} style={style}>
+              {tokens.map((line, i) => (
+                <div {...getLineProps({ line, key: i })} key={i}>
+                  {line.map((token, key) => (
+                    <span {...getTokenProps({ token, key })} key={key} />
+                  ))}
+                </div>
+              ))}
+            </pre>
+          )}
+        </Highlight>
+      </div>
+    </div>
   );
 };
+
 export default CodeBlock;
diff --git a/website/src/pages/themes/_components/export-panel.tsx b/website/src/pages/themes/_components/export-panel.tsx
index 051a1587b..a0718db2e 100644
--- a/website/src/pages/themes/_components/export-panel.tsx
+++ b/website/src/pages/themes/_components/export-panel.tsx
@@ -1,92 +1,93 @@
-import React from "react";
+import React, { useMemo } from "react";
 import CodeBlock from "./code-block";
 import { useTheme } from "../_providers/themeProvider";
-import { FiCheck, FiCopy } from "react-icons/fi";
+
+const generateThemeCode = (config, format: "js" | "ts") => {
+  const jsonConfig = JSON.stringify(config, null, 2).replace(
+    // Remove quotes around keys
+    /"([^"]+)":/g,
+    "$1:",
+  );
+  if (format === "js") {
+    return `/** @type {import('victory').VictoryThemeDefinition} */\n\nconst customTheme = ${jsonConfig};\n\nexport default customTheme;`;
+  }
+  return `import { VictoryThemeDefinition } from 'victory';\n\nconst customTheme: VictoryThemeDefinition = ${jsonConfig};\n\nexport default customTheme;`;
+};
 
 const ExportPanel = () => {
   const { customThemeConfig: config } = useTheme();
-  const [copyStatus, setCopyStatus] = React.useState<string | null>(null);
 
-  const handleCopyThemeConfig = () => {
-    navigator.clipboard
-      .writeText(JSON.stringify(config, null, 2))
-      .then(() => {
-        setCopyStatus("Copied successfully.");
-        return "Theme config copied to clipboard";
-      })
-      .catch(() => {
-        setCopyStatus("Failed to copy.");
-      });
-  };
+  const blocks = useMemo(
+    () => [
+      {
+        title: "theme.js",
+        code: generateThemeCode(config, "js"),
+        language: "jsx",
+      },
+      {
+        title: "theme.ts",
+        code: generateThemeCode(config, "ts"),
+        language: "tsx",
+      },
+    ],
+    [config],
+  );
 
   return (
     <div className="max-w-screen-lg mx-auto p-10 w-export-panel">
-      <h1 className="text-3xl">Using Your Exported Victory Theme Config</h1>
+      <h1 className="text-3xl">
+        How to Use Your Exported Victory Theme Config
+      </h1>
       <ol className="pl-4 space-y-2">
         <li>
-          <strong>Copy the theme configuration</strong>
-          <ul className="space-y-2">
-            <li>
-              Click the <FiCopy /> button to copy the JSON theme configuration.
-              <div className="relative mt-2">
-                <div className="flex items-center justify-end gap-2 absolute top-3 right-6">
-                  {copyStatus && (
-                    <span className="text-grayscale-400 text-xs italic">
-                      {copyStatus}
-                    </span>
-                  )}
-                  <button
-                    onClick={handleCopyThemeConfig}
-                    className="bg-transparent text-lg text-grayscale-400 cursor-pointer hover:bg-grayscale-200 flex items-center justify-center p-1 rounded-md"
-                  >
-                    {copyStatus ? (
-                      <FiCheck className="text-theme-1" />
-                    ) : (
-                      <FiCopy />
-                    )}
-                  </button>
-                </div>
-                <CodeBlock
-                  language="json"
-                  code={JSON.stringify(config, null, 2)}
-                  className="h-[500px]"
-                />
-              </div>
-            </li>
-          </ul>
+          <div>
+            <strong>Save the Exported Theme File</strong>
+            <p className="mb-2">
+              Save your custom generate theme to a file in your project. Use{" "}
+              <code>theme.js</code> or <code>theme.ts</code> depending on
+              whether your project uses JavaScript or TypeScript.
+            </p>
+          </div>
+          <CodeBlock blocks={blocks} className="h-[500px]" />
         </li>
         <li>
-          <strong>Save the Exported Theme as a File</strong>
-          <ul className="space-y-2">
-            <li>
-              Save the copied JSON as a <code>.js</code> or <code>.json</code>{" "}
-              file in your project, e.g., <code>theme.js</code>.
-            </li>
-            <li>
-              Import the theme in your app:
-              <CodeBlock
-                language="javascript"
-                code={`import customTheme from './theme.js';`}
-              />
-            </li>
-          </ul>
+          <strong>Import the Theme</strong>
+          <p className="mb-2">
+            To use your custom theme in your application, import the file where
+            you saved the theme configuration. The import path should match the
+            file&apos;s location in your project directory.
+          </p>
+          <CodeBlock
+            blocks={[
+              {
+                title: "App.js",
+                code: `import customTheme from './theme.js';`,
+                language: "jsx",
+              },
+              {
+                title: "App.ts",
+                code: `import customTheme from './theme.ts';`,
+                language: "tsx",
+              },
+            ]}
+          />
         </li>
         <li>
-          <strong>Apply to Victory Components</strong>
-          <ul className="space-y-2">
-            <li>
-              Use the <code>theme</code> prop on any Victory component:
-              <CodeBlock
-                language="javascript"
-                code={`<VictoryChart theme={customTheme}>
-{/* Your Victory components */}
+          <strong>Apply the Theme to Victory Components</strong>
+          <p className="mb-2">
+            Once the theme is imported, you can apply it to Victory components
+            by passing it as the <code>theme</code> prop.
+          </p>
+          <CodeBlock
+            code={`<VictoryChart theme={customTheme}>
+  {/* Add your Victory components here */}
 </VictoryChart>`}
-              />
-            </li>
-          </ul>
+            language="jsx"
+          />
         </li>
       </ol>
     </div>
   );
 };
+
 export default ExportPanel;
diff --git a/website/src/pages/themes/_config/chart.tsx b/website/src/pages/themes/_config/chart.tsx
index 2a892866c..f64852ec8 100644
--- a/website/src/pages/themes/_config/chart.tsx
+++ b/website/src/pages/themes/_config/chart.tsx
@@ -768,7 +768,12 @@ const chartConfigs: {
     content: (props) => [
       <VictoryAxis key="x-axis" label="X Axis" />,
       <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryStack {...props} key="victory-stack">
+      <VictoryStack
+        {...props}
+        key="victory-stack"
+        colorScale={props.colorScale}
+        data-testColorScale={props.colorScale}
+      >
         {[...Array(NUM_STACKS)].map((_, i) => (
           <VictoryArea data={sampleStackData} key={i} />
         ))}
@@ -779,14 +784,14 @@ const chartConfigs: {
         type: "section",
         label: "Data",
         controls: [
-          ...getNestedColorScaleConfig("group"),
+          ...getNestedColorScaleConfig("stack"),
           {
             type: "slider",
             label: "Width",
             min: 0,
             max: 50,
             unit: "px",
-            path: "group.style.data.width",
+            path: "stack.style.data.width",
           },
         ],
       },
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
index 5e0c08543..6a48b72b2 100644
--- a/website/tailwind.config.ts
+++ b/website/tailwind.config.ts
@@ -64,6 +64,7 @@ module.exports = {
         "button-bg-hover": NearFormColors.White,
         "button-fg-hover": NearFormColors.DeepNavy,
         "button-border": NearFormColors.Green,
+        "code-bg": "#1e1e1e",
         error: "#FF0000",
       },
       height: {

From e9bb7fa371bc2f8604c218953a9fe05382bf9a41 Mon Sep 17 00:00:00 2001
From: Stef Williams <ramenhog@gmail.com>
Date: Thu, 19 Dec 2024 14:28:26 -0500
Subject: [PATCH 17/30] feat(theme-builder): allow users to choose which
 options to include in theme export (#3015)

---
 .../src/pages/themes/_components/button.tsx   | 13 ++-
 .../src/pages/themes/_components/checkbox.tsx |  9 +-
 .../pages/themes/_components/color-picker.tsx |  8 +-
 .../color-scale-override-selector.tsx         |  6 +-
 .../pages/themes/_components/export-panel.tsx | 90 ++++++++++++++++---
 5 files changed, 100 insertions(+), 26 deletions(-)

diff --git a/website/src/pages/themes/_components/button.tsx b/website/src/pages/themes/_components/button.tsx
index 515dc3451..7ae1f6203 100644
--- a/website/src/pages/themes/_components/button.tsx
+++ b/website/src/pages/themes/_components/button.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React from "react";
 
 type ButtonProps = {
@@ -6,6 +7,7 @@ type ButtonProps = {
   className?: string;
   ariaLabel?: string;
   disabled?: boolean;
+  size?: "sm" | "md";
 };
 
 const Button = ({
@@ -14,17 +16,20 @@ const Button = ({
   className = "",
   ariaLabel = "",
   disabled = false,
+  size = "md",
   ...props
 }: ButtonProps) => {
-  const baseClasses =
-    "py-2 px-5 border-none font-bold rounded-md cursor-pointer text-sm bg-button-bg text-button-fg hover:underline disabled:bg-grayscale-300 disabled:text-grayscale-400 disabled:cursor-not-allowed disabled:hover:no-underline";
-
   return (
     <button
       onClick={onClick}
       disabled={disabled}
       aria-label={ariaLabel || undefined}
-      className={`${baseClasses} ${className}`}
+      className={clsx(
+        "border-none rounded-md cursor-pointer text-sm bg-button-bg text-button-fg hover:underline disabled:bg-grayscale-300 disabled:text-grayscale-400 disabled:cursor-not-allowed disabled:hover:no-underline",
+        size === "md" && "py-2 px-5 font-bold",
+        size === "sm" && "py-1.5 px-3 font-semibold",
+        className,
+      )}
       {...props}
     >
       {children}
diff --git a/website/src/pages/themes/_components/checkbox.tsx b/website/src/pages/themes/_components/checkbox.tsx
index 2e717f9db..ee92cd3b4 100644
--- a/website/src/pages/themes/_components/checkbox.tsx
+++ b/website/src/pages/themes/_components/checkbox.tsx
@@ -23,7 +23,8 @@ const Checkbox = ({
   const id = useId();
 
   return (
-    <fieldset
+    <label
+      htmlFor={id}
       className={clsx("p-0 m-0 flex items-center justify-start", className)}
     >
       <input
@@ -34,10 +35,8 @@ const Checkbox = ({
         onChange={handleChange}
         className="mr-2"
       />
-      <label htmlFor={id} className="text-sm">
-        {label}
-      </label>
-    </fieldset>
+      <span className="text-sm">{label}</span>
+    </label>
   );
 };
 export default Checkbox;
diff --git a/website/src/pages/themes/_components/color-picker.tsx b/website/src/pages/themes/_components/color-picker.tsx
index 021c7e2ca..f0c4477d0 100644
--- a/website/src/pages/themes/_components/color-picker.tsx
+++ b/website/src/pages/themes/_components/color-picker.tsx
@@ -58,11 +58,11 @@ const ColorPicker = ({
   const id = useId();
 
   return (
-    <fieldset className={clsx("p-0 m-0", className)}>
+    <label className={clsx("p-0 m-0", className)}>
       {label && (
-        <label className="block mb-1 text-sm text-grayscale-900 dark:text-white font-bold">
+        <span className="block mb-1 text-sm text-grayscale-900 dark:text-white font-bold">
           {label}
-        </label>
+        </span>
       )}
       <div className="flex items-center gap-2">
         {showColorName && (
@@ -146,7 +146,7 @@ const ColorPicker = ({
           </div>
         )}
       </div>
-    </fieldset>
+    </label>
   );
 };
 
diff --git a/website/src/pages/themes/_components/color-scale-override-selector.tsx b/website/src/pages/themes/_components/color-scale-override-selector.tsx
index 343b02152..ca3a58eea 100644
--- a/website/src/pages/themes/_components/color-scale-override-selector.tsx
+++ b/website/src/pages/themes/_components/color-scale-override-selector.tsx
@@ -36,8 +36,8 @@ const ColorScaleOverrideSelector = ({
   };
 
   return (
-    <fieldset className={clsx("p-0 m-0", className)}>
-      <label className="block mb-3 text-sm font-bold">{label}</label>
+    <label className={clsx("p-0 m-0", className)}>
+      <span className="block mb-3 text-sm font-bold">{label}</span>
       <Toggle
         id="color-scale-override-toggle"
         label="Use custom color scale"
@@ -57,7 +57,7 @@ const ColorScaleOverrideSelector = ({
           ))}
         </div>
       )}
-    </fieldset>
+    </label>
   );
 };
 export default ColorScaleOverrideSelector;
diff --git a/website/src/pages/themes/_components/export-panel.tsx b/website/src/pages/themes/_components/export-panel.tsx
index a0718db2e..1083fd238 100644
--- a/website/src/pages/themes/_components/export-panel.tsx
+++ b/website/src/pages/themes/_components/export-panel.tsx
@@ -1,6 +1,8 @@
 import React, { useMemo } from "react";
 import CodeBlock from "./code-block";
 import { useTheme } from "../_providers/themeProvider";
+import { VictoryTheme } from "victory";
+import Button from "./button";
 
 const generateThemeCode = (config, format: "js" | "ts") => {
   const jsonConfig = JSON.stringify(config, null, 2).replace(
@@ -14,25 +16,62 @@ const generateThemeCode = (config, format: "js" | "ts") => {
   return `import { VictoryThemeDefinition } from 'victory';\n\nconst customTheme: VictoryThemeDefinition = ${jsonConfig};\n\nexport default customTheme;`;
 };
 
+const availableOptions = Object.keys(VictoryTheme.clean).map((key) => {
+  return {
+    label: key,
+    value: key,
+  };
+});
+
 const ExportPanel = () => {
   const { customThemeConfig: config } = useTheme();
+  const [selectedOptions, setSelectedOptions] = React.useState<string[]>(() =>
+    availableOptions.map((option) => option.value),
+  );
+
+  const filteredConfig = useMemo(() => {
+    if (!config) return {};
+    return Object.keys(config).reduce((acc, key) => {
+      if (selectedOptions.includes(key)) {
+        acc[key] = config[key];
+      }
+      return acc;
+    }, {});
+  }, [config, selectedOptions]);
 
   const blocks = useMemo(
     () => [
       {
         title: "theme.js",
-        code: generateThemeCode(config, "js"),
+        code: generateThemeCode(filteredConfig, "js"),
         language: "jsx",
       },
       {
         title: "theme.ts",
-        code: generateThemeCode(config, "ts"),
+        code: generateThemeCode(filteredConfig, "ts"),
         language: "tsx",
       },
     ],
-    [config],
+    [filteredConfig],
   );
 
+  const handleSelectButtonClick = () => {
+    const newOptions =
+      selectedOptions.length === availableOptions.length
+        ? []
+        : availableOptions.map((option) => option.value);
+    setSelectedOptions(newOptions);
+  };
+
+  const handleCheckboxChange = (value: string) => {
+    setSelectedOptions((prev) => {
+      if (prev.includes(value)) {
+        return prev.filter((option) => option !== value);
+      }
+      return [...prev, value];
+    });
+  };
+
   return (
     <div className="max-w-screen-lg mx-auto p-10 w-export-panel">
       <h1 className="text-3xl">
@@ -40,14 +79,45 @@ const ExportPanel = () => {
       </h1>
       <ol className="pl-4 space-y-2">
         <li>
-          <div>
-            <strong>Save the Exported Theme File</strong>
-            <p className="mb-2">
-              Save your custom generate theme to a file in your project. Use{" "}
-              <code>theme.js</code> or <code>theme.ts</code> depending on
-              whether your project uses JavaScript or TypeScript.
-            </p>
+          <strong>Choose Theme Options to Export</strong>
+          <p className="mb-2">
+            Select the theme options to include in your custom theme export.
+          </p>
+          <div className="mb-6">
+            <ul className="space-y-2 p-0 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 w-full">
+              {availableOptions.map(({ label, value }) => (
+                <li key={value} className="flex items-center cursor-pointer">
+                  <input
+                    type="checkbox"
+                    id={value}
+                    checked={selectedOptions.includes(value)}
+                    onChange={() => handleCheckboxChange(value)}
+                    className="mr-2"
+                  />
+                  <label htmlFor={value} className="cursor-pointer">
+                    {label}
+                  </label>
+                </li>
+              ))}
+            </ul>
+            <Button
+              onClick={handleSelectButtonClick}
+              size="sm"
+              className="mt-4"
+            >
+              {selectedOptions.length === availableOptions.length
+                ? "Deselect All"
+                : "Select All"}
+            </Button>
           </div>
+        </li>
+        <li>
+          <strong>Save the Exported Theme File</strong>
+          <p className="mb-2">
+            Save your custom generate theme to a file in your project. Use{" "}
+            <code>theme.js</code> or <code>theme.ts</code> depending on whether
+            your project uses JavaScript or TypeScript.
+          </p>
           <CodeBlock blocks={blocks} className="h-[500px]" />
         </li>
         <li>

From 4a0ea3e3120d7ac3577ec84d2a0864185a7eea06 Mon Sep 17 00:00:00 2001
From: Stef Williams <ramenhog@gmail.com>
Date: Fri, 20 Dec 2024 12:47:40 -0500
Subject: [PATCH 18/30] Feat: theme builder default slider (#3020)

---
 .../src/pages/themes/_components/control.tsx  | 18 ++++-
 .../src/pages/themes/_components/slider.tsx   | 81 ++++++++++++++-----
 .../src/pages/themes/_components/toggle.tsx   | 12 ++-
 3 files changed, 82 insertions(+), 29 deletions(-)

diff --git a/website/src/pages/themes/_components/control.tsx b/website/src/pages/themes/_components/control.tsx
index 060013973..2a0cc65b7 100644
--- a/website/src/pages/themes/_components/control.tsx
+++ b/website/src/pages/themes/_components/control.tsx
@@ -14,8 +14,14 @@ export type ColorChangeArgs = {
   colorScale: string;
 };
 
-const Control = ({ type, control, className }) => {
-  const { customThemeConfig, updateCustomThemeConfig } = useTheme();
+type ControlProps = {
+  type: string;
+  control: any;
+  className?: string;
+};
+
+const Control = ({ type, control, className }: ControlProps) => {
+  const { baseTheme, customThemeConfig, updateCustomThemeConfig } = useTheme();
   const handleColorChange = ({
     newColor,
     index,
@@ -31,6 +37,13 @@ const Control = ({ type, control, className }) => {
     updateCustomThemeConfig(control.path, newValue);
   };
 
+  const handleSliderToggle = (isChecked: boolean) => {
+    const defaultValue =
+      getConfigValue(baseTheme?.config, control.path, control.min) || 0;
+    const newValue = isChecked ? undefined : defaultValue;
+    handleChange(newValue);
+  };
+
   const configValue = getConfigValue(
     customThemeConfig,
     control.path,
@@ -98,6 +111,7 @@ const Control = ({ type, control, className }) => {
           max={control.max}
           step={control.step}
           className={className}
+          onDefaultToggle={handleSliderToggle}
         />
       );
     case "select":
diff --git a/website/src/pages/themes/_components/slider.tsx b/website/src/pages/themes/_components/slider.tsx
index d67fb073f..668f8e957 100644
--- a/website/src/pages/themes/_components/slider.tsx
+++ b/website/src/pages/themes/_components/slider.tsx
@@ -1,57 +1,98 @@
-import React from "react";
+import React, { useState } from "react";
+import clsx from "clsx";
+import Toggle from "./toggle";
 
 type SliderProps = {
   label: string;
   id: string;
   value?: number;
   unit?: string;
-  onChange?: (value: number) => void;
+  onChange?: (value?: number) => void;
+  onDefaultToggle?: (isChecked: boolean) => void;
   min?: number;
   max?: number;
   step?: number;
   className?: string;
 };
 
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+
 const Slider = ({
   label,
   id,
   value,
   unit,
   onChange,
-  min,
-  max,
+  onDefaultToggle,
+  min = DEFAULT_MIN,
+  max = DEFAULT_MAX,
   step = 1,
   className,
 }: SliderProps) => {
-  const handleChange = (event) => {
+  const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = event.target.valueAsNumber;
     if (onChange) {
       onChange(newValue);
     }
   };
 
-  const valueString = value !== undefined ? `${value}${unit ?? ""}` : "default";
+  const handleNumberChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(event.target.value) || min;
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+
+  const handleToggle = (isChecked: boolean) => {
+    if (!onDefaultToggle) return;
+    onDefaultToggle(isChecked);
+  };
 
   return (
-    <div className={className}>
+    <fieldset className={clsx("relative py-2 px-0 m-0", className)}>
       <label
         htmlFor={id}
-        className="flex flex-row mb-1 text-sm text-grayscale-900 dark:text-white"
+        className="flex justify-between items-center mb-2 text-sm font-bold text-grayscale-900"
       >
-        <span className="flex-1 text-sm font-bold ">{label}</span>
-        <span className="">{valueString}</span>
+        <span>{label}</span>
       </label>
-      <input
-        id={id}
-        type="range"
-        value={value}
-        onChange={handleChange}
-        className="w-full h-2 bg-grayscale-300 rounded-lg appearance-none cursor-pointer accent-blue-800 dark:bg-grayscale-700"
-        min={min}
-        max={max}
-        step={step}
+      <Toggle
+        id={`${id}-toggle`}
+        label="Use default value"
+        checked={value === undefined}
+        onChange={handleToggle}
+        size="xs"
+        className="mb-2"
       />
-    </div>
+      {value !== undefined && (
+        <div className="flex items-center gap-4">
+          <input
+            id={id}
+            type="range"
+            value={value}
+            onChange={handleSliderChange}
+            className="w-full h-2 bg-grayscale-300 rounded-lg appearance-none cursor-pointer accent-blue-800 m-0"
+            min={min}
+            max={max}
+            step={step}
+          />
+          <div className="flex items-center">
+            <input
+              type="number"
+              value={value}
+              onChange={handleNumberChange}
+              className="px-2 py-1 text-sm border border-grayscale-300 rounded-lg"
+              min={min}
+              max={max}
+              step={step}
+            />
+            {unit && <span className="text-sm ml-1">{unit}</span>}
+          </div>
+        </div>
+      )}
+    </fieldset>
   );
 };
+
 export default Slider;
diff --git a/website/src/pages/themes/_components/toggle.tsx b/website/src/pages/themes/_components/toggle.tsx
index 2a85e25c1..24d0fa5ce 100644
--- a/website/src/pages/themes/_components/toggle.tsx
+++ b/website/src/pages/themes/_components/toggle.tsx
@@ -7,7 +7,7 @@ type ToggleProps = {
   checked: boolean;
   onChange: (checked: boolean) => void;
   className?: string;
-  size?: "sm" | "md";
+  size?: "xs" | "sm" | "md";
 };
 
 const Toggle = ({
@@ -22,11 +22,7 @@ const Toggle = ({
     onChange(!checked);
   };
 
-  const labelSizeClasses = size === "sm" ? "font-medium" : "font-bold";
-  const toggleSize =
-    size === "sm"
-      ? "w-9 h-5 after:h-4 after:w-4"
-      : "w-11 h-6 after:h-5 after:w-5 ";
+  const labelSizeClasses = size === "md" ? "font-bold" : "font-medium";
 
   return (
     <label
@@ -47,7 +43,9 @@ const Toggle = ({
       <div
         className={clsx(
           "relative bg-grayscale-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-grayscale-300 after:border after:rounded-full after:transition-all peer-checked:bg-blue-800",
-          toggleSize,
+          size === "xs" && "w-7 h-4 after:h-3 after:w-3",
+          size === "sm" && "w-9 h-5 after:h-4 after:w-4",
+          size === "md" && "w-11 h-6 after:h-5 after:w-5",
         )}
       ></div>
     </label>

From 8d90c9aa1c7392414581356ba84c6a872733f13b Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Mon, 6 Jan 2025 15:54:46 -0500
Subject: [PATCH 19/30] fix: lint error

---
 website/src/pages/themes/_components/slider.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/src/pages/themes/_components/slider.tsx b/website/src/pages/themes/_components/slider.tsx
index 668f8e957..6dbd9d426 100644
--- a/website/src/pages/themes/_components/slider.tsx
+++ b/website/src/pages/themes/_components/slider.tsx
@@ -1,4 +1,3 @@
-import React, { useState } from "react";
 import clsx from "clsx";
 import Toggle from "./toggle";
 

From e40c77b28e15134c19da74697f5bc17d460f051c Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Mon, 6 Jan 2025 16:09:52 -0500
Subject: [PATCH 20/30] fix: lint error

---
 website/src/pages/themes/_components/slider.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/src/pages/themes/_components/slider.tsx b/website/src/pages/themes/_components/slider.tsx
index 6dbd9d426..7ff4c29b3 100644
--- a/website/src/pages/themes/_components/slider.tsx
+++ b/website/src/pages/themes/_components/slider.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import clsx from "clsx";
 import Toggle from "./toggle";
 

From 8e4f9ee6be34c8bc38e5db9848ed4a640b1d36fd Mon Sep 17 00:00:00 2001
From: Charlie Brown <carbonrobot@gmail.com>
Date: Tue, 7 Jan 2025 08:49:56 -0600
Subject: [PATCH 21/30] Refactor examples so we can support multiple per chart
 type (#3017)

Co-authored-by: Stef Williams <stef.williams@formidable.com>
---
 .../_components => components}/button.tsx     |   9 +-
 website/src/hooks/useClickOutside.tsx         |  29 ++
 .../pages/themes/_components/chart-panel.tsx  |  20 +-
 .../_components/color-palette-selector.tsx    |  17 +-
 .../color-scale-override-selector.tsx         |  37 +-
 .../src/pages/themes/_components/control.tsx  |  24 +-
 .../themes/_components/examples/area.tsx      |  26 ++
 .../themes/_components/examples/axis.tsx      |  16 +
 .../pages/themes/_components/examples/bar.tsx |  41 +++
 .../themes/_components/examples/box-plot.tsx  |  26 ++
 .../_components/examples/candlestick.tsx      |  57 +++
 .../themes/_components/examples/errorbar.tsx  |  23 ++
 .../themes/_components/examples/example.ts    |  15 +
 .../themes/_components/examples/group.tsx     |  45 +++
 .../themes/_components/examples/histogram.tsx |  30 ++
 .../themes/_components/examples/index.ts      |  53 +++
 .../themes/_components/examples/legend.tsx    |  58 +++
 .../themes/_components/examples/line.tsx      |  28 ++
 .../pages/themes/_components/examples/pie.tsx |  23 ++
 .../examples/polar-axis-dependent.tsx         |  21 ++
 .../_components/examples/polar-axis.tsx       |  15 +
 .../themes/_components/examples/scatter.tsx   |  22 ++
 .../themes/_components/examples/stack.tsx     |  26 ++
 .../themes/_components/examples/voronoi.tsx   |  22 ++
 .../pages/themes/_components/export-panel.tsx |   2 +-
 .../themes/_components/options-panel.tsx      |   1 -
 .../_components/preview-settings-menu.tsx     |  87 -----
 .../src/pages/themes/_components/sidenav.tsx  |  19 +-
 .../themes/_components/theme-preview.tsx      | 146 --------
 .../_components/theme-preview/header.tsx      |  27 ++
 .../_components/theme-preview/index.tsx       |  34 ++
 .../_components/theme-preview/options.tsx     |  36 ++
 .../preview-color-scale-select.tsx            |  37 ++
 .../_components/theme-preview/preview.tsx     |  33 ++
 website/src/pages/themes/_config/axis.tsx     |  27 +-
 website/src/pages/themes/_config/chart.tsx    | 337 ++----------------
 website/src/pages/themes/_config/index.tsx    |  13 +-
 website/src/pages/themes/_config/palette.tsx  |  46 ++-
 .../_providers/previewOptionsProvider.tsx     |  15 +-
 website/src/pages/themes/index.tsx            |   2 +-
 40 files changed, 924 insertions(+), 621 deletions(-)
 rename website/src/{pages/themes/_components => components}/button.tsx (66%)
 create mode 100644 website/src/hooks/useClickOutside.tsx
 create mode 100644 website/src/pages/themes/_components/examples/area.tsx
 create mode 100644 website/src/pages/themes/_components/examples/axis.tsx
 create mode 100644 website/src/pages/themes/_components/examples/bar.tsx
 create mode 100644 website/src/pages/themes/_components/examples/box-plot.tsx
 create mode 100644 website/src/pages/themes/_components/examples/candlestick.tsx
 create mode 100644 website/src/pages/themes/_components/examples/errorbar.tsx
 create mode 100644 website/src/pages/themes/_components/examples/example.ts
 create mode 100644 website/src/pages/themes/_components/examples/group.tsx
 create mode 100644 website/src/pages/themes/_components/examples/histogram.tsx
 create mode 100644 website/src/pages/themes/_components/examples/index.ts
 create mode 100644 website/src/pages/themes/_components/examples/legend.tsx
 create mode 100644 website/src/pages/themes/_components/examples/line.tsx
 create mode 100644 website/src/pages/themes/_components/examples/pie.tsx
 create mode 100644 website/src/pages/themes/_components/examples/polar-axis-dependent.tsx
 create mode 100644 website/src/pages/themes/_components/examples/polar-axis.tsx
 create mode 100644 website/src/pages/themes/_components/examples/scatter.tsx
 create mode 100644 website/src/pages/themes/_components/examples/stack.tsx
 create mode 100644 website/src/pages/themes/_components/examples/voronoi.tsx
 delete mode 100644 website/src/pages/themes/_components/preview-settings-menu.tsx
 delete mode 100644 website/src/pages/themes/_components/theme-preview.tsx
 create mode 100644 website/src/pages/themes/_components/theme-preview/header.tsx
 create mode 100644 website/src/pages/themes/_components/theme-preview/index.tsx
 create mode 100644 website/src/pages/themes/_components/theme-preview/options.tsx
 create mode 100644 website/src/pages/themes/_components/theme-preview/preview-color-scale-select.tsx
 create mode 100644 website/src/pages/themes/_components/theme-preview/preview.tsx

diff --git a/website/src/pages/themes/_components/button.tsx b/website/src/components/button.tsx
similarity index 66%
rename from website/src/pages/themes/_components/button.tsx
rename to website/src/components/button.tsx
index 7ae1f6203..f9fb1bd81 100644
--- a/website/src/pages/themes/_components/button.tsx
+++ b/website/src/components/button.tsx
@@ -10,7 +10,7 @@ type ButtonProps = {
   size?: "sm" | "md";
 };
 
-const Button = ({
+export const Button = ({
   onClick,
   children,
   className = "",
@@ -19,13 +19,16 @@ const Button = ({
   size = "md",
   ...props
 }: ButtonProps) => {
+  const baseClasses =
+    "py-2 px-4 font-semibold rounded-md cursor-pointer text-sm border-2 border-solid border-button-border bg-button-bg text-button-fg hover:bg-button-bg-hover hover:text-button-fg-hover disabled:bg-grayscale-300 disabled:text-grayscale-400 disabled:cursor-not-allowed";
+
   return (
     <button
       onClick={onClick}
       disabled={disabled}
       aria-label={ariaLabel || undefined}
       className={clsx(
-        "border-none rounded-md cursor-pointer text-sm bg-button-bg text-button-fg hover:underline disabled:bg-grayscale-300 disabled:text-grayscale-400 disabled:cursor-not-allowed disabled:hover:no-underline",
+        baseClasses,
         size === "md" && "py-2 px-5 font-bold",
         size === "sm" && "py-1.5 px-3 font-semibold",
         className,
@@ -36,5 +39,3 @@ const Button = ({
     </button>
   );
 };
-
-export default Button;
diff --git a/website/src/hooks/useClickOutside.tsx b/website/src/hooks/useClickOutside.tsx
new file mode 100644
index 000000000..867de51ea
--- /dev/null
+++ b/website/src/hooks/useClickOutside.tsx
@@ -0,0 +1,29 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+
+export function useClickOutside(cb: (e: Event) => void) {
+  const ref = useRef<HTMLDivElement>(null);
+  const refCb = useRef(cb);
+
+  useLayoutEffect(() => {
+    refCb.current = cb;
+  });
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const element = ref.current;
+      if (element && !element.contains(e.target as Node)) {
+        refCb.current(e);
+      }
+    };
+
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("touchstart", handler);
+
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("touchstart", handler);
+    };
+  }, []);
+
+  return ref;
+}
diff --git a/website/src/pages/themes/_components/chart-panel.tsx b/website/src/pages/themes/_components/chart-panel.tsx
index 1fa76351d..fddbf81ca 100644
--- a/website/src/pages/themes/_components/chart-panel.tsx
+++ b/website/src/pages/themes/_components/chart-panel.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import Control from "./control";
 import Select from "./select";
 import { usePreviewOptions } from "../_providers/previewOptionsProvider";
@@ -13,7 +13,7 @@ const ChartPanel = ({
   config: { title, description, selectLabel, types },
 }: ChartPanelProps) => {
   const [chartType, setChartType] = React.useState(Object.keys(types)[0]);
-  const { setExampleConfigs } = usePreviewOptions();
+  const { setExampleContent } = usePreviewOptions();
   const selectOptions = Object.keys(types).map((key) => ({
     label: types[key].label,
     value: key,
@@ -27,18 +27,14 @@ const ChartPanel = ({
   );
   const controls = types[chartType]?.controls || [];
 
-  const onChartTypeChange = useCallback(
-    (newValue: string) => {
-      setChartType(newValue);
-      const examples = types[newValue] ? [types[newValue]] : [];
-      setExampleConfigs(examples);
-    },
-    [setExampleConfigs, types],
-  );
+  const onChartTypeChange = (newValue: string) => {
+    setChartType(newValue);
+  };
 
   useEffect(() => {
-    onChartTypeChange(Object.keys(types)[0]);
-  }, [types, onChartTypeChange]);
+    const examples = types[chartType]?.content || [];
+    setExampleContent(examples);
+  }, [chartType, setExampleContent, types]);
 
   return (
     <>
diff --git a/website/src/pages/themes/_components/color-palette-selector.tsx b/website/src/pages/themes/_components/color-palette-selector.tsx
index 0674ec4ee..ddef79a5b 100644
--- a/website/src/pages/themes/_components/color-palette-selector.tsx
+++ b/website/src/pages/themes/_components/color-palette-selector.tsx
@@ -28,6 +28,17 @@ const ColorPaletteSelector = ({
     updateColorScale(value);
   };
 
+  const handleColorChange = (newColor, i, cScale) => {
+    onColorChange({
+      newColor,
+      index: i,
+      colorScale: cScale,
+    });
+    if (colorScale !== cScale) {
+      updateColorScale(cScale);
+    }
+  };
+
   const isSelected = colorScale === value;
 
   return (
@@ -54,11 +65,7 @@ const ColorPaletteSelector = ({
                 key={i}
                 color={color}
                 onColorChange={(newColor) =>
-                  onColorChange({
-                    newColor,
-                    index: i,
-                    colorScale: colorScaleType as string,
-                  })
+                  handleColorChange(newColor, i, colorScaleType)
                 }
               />
             ))}
diff --git a/website/src/pages/themes/_components/color-scale-override-selector.tsx b/website/src/pages/themes/_components/color-scale-override-selector.tsx
index ca3a58eea..a3f42eeb2 100644
--- a/website/src/pages/themes/_components/color-scale-override-selector.tsx
+++ b/website/src/pages/themes/_components/color-scale-override-selector.tsx
@@ -1,51 +1,70 @@
-import React from "react";
+import React, { useCallback } from "react";
 import ColorPicker from "./color-picker";
 import clsx from "clsx";
 import Toggle from "./toggle";
+import {
+  defaultColorScale,
+  usePreviewOptions,
+} from "../_providers/previewOptionsProvider";
 
 type ColorScaleOverrideSelectorProps = {
+  id: string;
   label?: string;
   value?: string | string[];
   onChange: (value: string[] | undefined) => void;
+  hideDefaultToggle?: boolean;
   className?: string;
 };
 
 const ColorScaleOverrideSelector = ({
+  id,
   label = "Color Scale",
   value,
   onChange,
+  hideDefaultToggle = false,
   className,
 }: ColorScaleOverrideSelectorProps) => {
+  const { colorScale, updateColorScale } = usePreviewOptions();
   const hasCustomValue = Array.isArray(value);
   const [initialCustomValue] = React.useState(
     hasCustomValue ? value : undefined,
   );
 
+  const setColorScaleToDefault = useCallback(() => {
+    if (colorScale !== defaultColorScale) {
+      updateColorScale(defaultColorScale);
+    }
+  }, [colorScale, updateColorScale]);
+
   const onCheckboxChange = (isChecked) => {
     if (isChecked) {
       onChange(initialCustomValue);
     } else {
       onChange(undefined);
     }
+    setColorScaleToDefault();
   };
 
   const handleColorChange = (newColor, index) => {
     const newValue = [...(value as string[])];
     newValue[index] = newColor;
     onChange(newValue);
+    setColorScaleToDefault();
   };
 
   return (
     <label className={clsx("p-0 m-0", className)}>
       <span className="block mb-3 text-sm font-bold">{label}</span>
-      <Toggle
-        id="color-scale-override-toggle"
-        label="Use custom color scale"
-        checked={hasCustomValue}
-        onChange={onCheckboxChange}
-        className="mb-3"
-        size="sm"
-      />
+      {!hideDefaultToggle && (
+        <Toggle
+          id={id}
+          label="Use custom color scale"
+          checked={hasCustomValue}
+          onChange={onCheckboxChange}
+          className="mb-3"
+          size="sm"
+        />
+      )}
       {hasCustomValue && (
         <div className="flex flex-wrap gap-2 mt-3">
           {value.map((color, i) => (
diff --git a/website/src/pages/themes/_components/control.tsx b/website/src/pages/themes/_components/control.tsx
index 2a0cc65b7..1ad0690a8 100644
--- a/website/src/pages/themes/_components/control.tsx
+++ b/website/src/pages/themes/_components/control.tsx
@@ -7,6 +7,7 @@ import { getConfigValue } from "../_utils";
 import { useTheme } from "../_providers/themeProvider";
 import Accordion from "./accordion";
 import ColorScaleOverrideSelector from "./color-scale-override-selector";
+import PreviewColorScaleSelect from "./theme-preview/preview-color-scale-select";
 
 export type ColorChangeArgs = {
   newColor?: string;
@@ -85,9 +86,16 @@ const Control = ({ type, control, className }: ControlProps) => {
     case "section":
       return (
         <section className="mb-8">
-          <h3 className="text-lg font-bold text-secondary mb-4">
-            {control.label}
-          </h3>
+          <div className="mb-4">
+            <h3 className="text-lg font-semibold text-secondary mb-0">
+              {control.label}
+            </h3>
+            {control.description && (
+              <p className="text-sm text-grayscale-400">
+                {control.description}
+              </p>
+            )}
+          </div>
           {control.controls?.map((nestedControl, i) => (
             <Control
               key={nestedControl.label + i}
@@ -130,10 +138,20 @@ const Control = ({ type, control, className }: ControlProps) => {
     case "colorScale":
       return (
         <ColorScaleOverrideSelector
+          id={id}
           label={control.label}
           value={configValue as string}
           onChange={handleChange}
           className={className}
+          hideDefaultToggle={control.hideDefaultToggle}
+        />
+      );
+    case "colorScalePreview":
+      return (
+        <PreviewColorScaleSelect
+          key={control.label}
+          label={control.label}
+          className={className}
         />
       );
     case "colorPicker":
diff --git a/website/src/pages/themes/_components/examples/area.tsx b/website/src/pages/themes/_components/examples/area.tsx
new file mode 100644
index 000000000..818787497
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/area.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { VictoryArea, VictoryAxis, VictoryChart } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const AreaExamples: ExampleConfig[] = [
+  {
+    title: "VictoryArea",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryAxis label="X Axis" />
+        <VictoryAxis dependentAxis label="Y Axis" />
+        <VictoryArea
+          {...props}
+          data={[
+            { x: 1, y: 2, label: "A" },
+            { x: 2, y: 3, label: "B" },
+            { x: 3, y: 5, label: "C" },
+            { x: 4, y: 4, label: "D" },
+            { x: 5, y: 7, label: "E" },
+          ]}
+        />
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/axis.tsx b/website/src/pages/themes/_components/examples/axis.tsx
new file mode 100644
index 000000000..3b9be9c98
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/axis.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { VictoryAxis, VictoryChart } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const AxisExamples: ExampleConfig[] = [
+  {
+    title: "VictoryAxis",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryAxis label="X Axis" {...props} />
+        <VictoryAxis dependentAxis label="Y Axis" {...props} />
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/bar.tsx b/website/src/pages/themes/_components/examples/bar.tsx
new file mode 100644
index 000000000..d4ca918b0
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/bar.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { VictoryBar, VictoryAxis, VictoryChart } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const BarExamples: ExampleConfig[] = [
+  {
+    title: "VictoryBar",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryAxis label="X Axis" />
+        <VictoryAxis dependentAxis label="Y Axis" />
+        <VictoryBar
+          {...props}
+          data={[
+            {
+              x: 1,
+              y: 2,
+            },
+            {
+              x: 2,
+              y: 3,
+            },
+            {
+              x: 3,
+              y: 5,
+            },
+            {
+              x: 4,
+              y: 4,
+            },
+            {
+              x: 5,
+              y: 7,
+            },
+          ]}
+        />
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/box-plot.tsx b/website/src/pages/themes/_components/examples/box-plot.tsx
new file mode 100644
index 000000000..147156eb5
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/box-plot.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable no-magic-numbers */
+
+import React from "react";
+import { VictoryBoxPlot } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const BoxPlotExamples: ExampleConfig[] = [
+  {
+    title: "VictoryBoxPlot",
+    content: (props) => (
+      <VictoryBoxPlot
+        {...props}
+        data={[
+          { x: 1, y: [1, 2, 3, 5, 8] },
+          { x: 2, y: [3, 2, 8, 10, 12] },
+          { x: 3, y: [2, 8, 6, 5, 10] },
+          { x: 4, y: [1, 3, 2, 9, 5] },
+          { x: 5, y: [3, 2, 9, 5, 7] },
+        ]}
+        labels
+        labelOrientation="right"
+      />
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/candlestick.tsx b/website/src/pages/themes/_components/examples/candlestick.tsx
new file mode 100644
index 000000000..c4845a2d0
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/candlestick.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import { VictoryCandlestick } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const CandlestickExamples: ExampleConfig[] = [
+  {
+    title: "VictoryCandlestick",
+    content: (props) => (
+      <VictoryCandlestick
+        {...props}
+        data={[
+          {
+            x: "3/1/23",
+            open: 5,
+            close: 10,
+            high: 15,
+            low: 0,
+            label: "A",
+          },
+          {
+            x: "3/2/23",
+            open: 10,
+            close: 15,
+            high: 20,
+            low: 5,
+            label: "B",
+          },
+          {
+            x: "3/3/23",
+            open: 15,
+            close: 20,
+            high: 22,
+            low: 10,
+            label: "C",
+          },
+          {
+            x: "3/4/23",
+            open: 20,
+            close: 10,
+            high: 25,
+            low: 7,
+            label: "D",
+          },
+          {
+            x: "3/5/23",
+            open: 10,
+            close: 8,
+            high: 15,
+            low: 5,
+            label: "E",
+          },
+        ]}
+      />
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/errorbar.tsx b/website/src/pages/themes/_components/examples/errorbar.tsx
new file mode 100644
index 000000000..a0a48b42c
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/errorbar.tsx
@@ -0,0 +1,23 @@
+/* eslint-disable no-magic-numbers */
+import React from "react";
+import { VictoryErrorBar } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const ErrorBarExamples: ExampleConfig[] = [
+  {
+    title: "VictoryErrorBar",
+    content: (props) => (
+      <VictoryErrorBar
+        {...props}
+        data={[
+          { x: 1, y: 1, errorX: [1, 0.5], errorY: 0.1 },
+          { x: 2, y: 2, errorX: [1, 3], errorY: 0.1 },
+          { x: 3, y: 3, errorX: [1, 3], errorY: [0.2, 0.3] },
+          { x: 4, y: 2, errorX: [1, 0.5], errorY: 0.1 },
+          { x: 5, y: 1, errorX: [1, 0.5], errorY: 0.2 },
+        ]}
+      />
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/example.ts b/website/src/pages/themes/_components/examples/example.ts
new file mode 100644
index 000000000..48a1ef537
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/example.ts
@@ -0,0 +1,15 @@
+import { ReactElement } from "react";
+import { ColorScalePropType, VictoryThemeDefinition } from "victory";
+
+type ExampleRenderProps = {
+  colorScale: ColorScalePropType;
+  labels: ({ datum }: { datum: any }) => string;
+  labelComponent?: ReactElement | undefined;
+  theme: VictoryThemeDefinition;
+};
+
+export type ExampleConfig = {
+  title: string;
+  content: (props: ExampleRenderProps) => ReactElement;
+  hasVictoryChart?: boolean;
+};
diff --git a/website/src/pages/themes/_components/examples/group.tsx b/website/src/pages/themes/_components/examples/group.tsx
new file mode 100644
index 000000000..a1579983b
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/group.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const GroupExamples: ExampleConfig[] = [
+  {
+    title: "VictoryGroup",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryAxis label="X Axis" />
+        <VictoryAxis dependentAxis label="Y Axis" />
+        <VictoryGroup domainPadding={{ x: 20 }} offset={20}>
+          <VictoryBar
+            {...props}
+            data={[
+              { x: "2023 Q1", y: 1 },
+              { x: "2023 Q2", y: 2 },
+              { x: "2023 Q3", y: 3 },
+              { x: "2023 Q4", y: 2 },
+            ]}
+          />
+          <VictoryBar
+            {...props}
+            data={[
+              { x: "2023 Q1", y: 2 },
+              { x: "2023 Q2", y: 3 },
+              { x: "2023 Q3", y: 4 },
+              { x: "2023 Q4", y: 5 },
+            ]}
+          />
+          <VictoryBar
+            {...props}
+            data={[
+              { x: "2023 Q1", y: 1 },
+              { x: "2023 Q2", y: 2 },
+              { x: "2023 Q3", y: 3 },
+              { x: "2023 Q4", y: 4 },
+            ]}
+          />
+        </VictoryGroup>
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/histogram.tsx b/website/src/pages/themes/_components/examples/histogram.tsx
new file mode 100644
index 000000000..6e147dd63
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/histogram.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { VictoryHistogram } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const HistogramExamples: ExampleConfig[] = [
+  {
+    title: "VictoryHistogram",
+    content: (props) => (
+      <VictoryHistogram
+        {...props}
+        data={[
+          { x: 0 },
+          { x: 1 },
+          { x: 1 },
+          { x: 1 },
+          { x: 1 },
+          { x: 2 },
+          { x: 2 },
+          { x: 3 },
+          { x: 4 },
+          { x: 7 },
+          { x: 7 },
+          { x: 10 },
+        ]}
+        labels={({ datum }) => `Bin count:\n ${datum.x}`}
+      />
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/index.ts b/website/src/pages/themes/_components/examples/index.ts
new file mode 100644
index 000000000..b15bc9c59
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/index.ts
@@ -0,0 +1,53 @@
+import { AreaExamples } from "./area";
+import { AxisExamples } from "./axis";
+import { BarExamples } from "./bar";
+import { BoxPlotExamples } from "./box-plot";
+import { CandlestickExamples } from "./candlestick";
+import { ErrorBarExamples } from "./errorbar";
+import { GroupExamples } from "./group";
+import { HistogramExamples } from "./histogram";
+import { LineExamples } from "./line";
+import { PieExamples } from "./pie";
+import { PolarAxisExamples } from "./polar-axis";
+import { PolarAxisDependentExamples } from "./polar-axis-dependent";
+import { ScatterExamples } from "./scatter";
+import { StackExamples } from "./stack";
+import { VoronoiExamples } from "./voronoi";
+
+// NOTE: these are ordered specifically for the previews
+//       to show the most common examples first
+export const AllExamples = [
+  ...AreaExamples,
+  ...BarExamples,
+  ...GroupExamples,
+  ...LineExamples,
+  ...PieExamples,
+  ...StackExamples,
+  ...BoxPlotExamples,
+  ...CandlestickExamples,
+  ...ErrorBarExamples,
+  ...HistogramExamples,
+  ...ScatterExamples,
+  ...VoronoiExamples,
+  ...AxisExamples,
+  ...PolarAxisExamples,
+  ...PolarAxisDependentExamples,
+];
+
+export * from "./area";
+export * from "./axis";
+export * from "./bar";
+export * from "./box-plot";
+export * from "./candlestick";
+export * from "./errorbar";
+export * from "./example";
+export * from "./group";
+export * from "./histogram";
+export * from "./legend";
+export * from "./line";
+export * from "./pie";
+export * from "./polar-axis";
+export * from "./polar-axis-dependent";
+export * from "./scatter";
+export * from "./stack";
+export * from "./voronoi";
diff --git a/website/src/pages/themes/_components/examples/legend.tsx b/website/src/pages/themes/_components/examples/legend.tsx
new file mode 100644
index 000000000..87bf1f113
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/legend.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { VictoryBar, VictoryChart, VictoryLegend } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const LegendExamples: ExampleConfig[] = [
+  {
+    title: "VictoryLegend",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryLegend
+          {...props}
+          x={125}
+          y={20}
+          title="Pets"
+          data={[
+            {
+              name: "Dogs",
+              symbol: { fill: "tomato" },
+            },
+            {
+              name: "Cats",
+              symbol: { fill: "orange" },
+            },
+            {
+              name: "Rabbits",
+              symbol: { fill: "gold" },
+            },
+          ]}
+        />
+        <VictoryBar
+          data={[
+            {
+              x: "Dogs",
+              y: 6,
+              fill: "tomato",
+            },
+            {
+              x: "Cats",
+              y: 4,
+              fill: "orange",
+            },
+            {
+              x: "Rabbits",
+              y: 2,
+              fill: "gold",
+            },
+          ]}
+          style={{
+            data: {
+              fill: ({ datum }) => datum.fill,
+            },
+          }}
+        />
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/line.tsx b/website/src/pages/themes/_components/examples/line.tsx
new file mode 100644
index 000000000..2b231c764
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/line.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { VictoryAxis, VictoryChart, VictoryLine } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const LineExamples: ExampleConfig[] = [
+  {
+    title: "VictoryLine",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryAxis label="X Axis" />
+        <VictoryAxis dependentAxis label="Y Axis" />
+        <VictoryLine
+          {...props}
+          data={[
+            { x: 1, y: 2 },
+            { x: 2, y: 3 },
+            { x: 3, y: 5 },
+            { x: 4, y: 4 },
+            { x: 5, y: 7 },
+          ]}
+          labels={({ datum }) => datum.y}
+        />
+        ,
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/pie.tsx b/website/src/pages/themes/_components/examples/pie.tsx
new file mode 100644
index 000000000..9e4609f59
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/pie.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { VictoryPie } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const PieExamples: ExampleConfig[] = [
+  {
+    title: "VictoryPie",
+    content: (props) => (
+      <VictoryPie
+        {...props}
+        data={[
+          { x: "Cats", y: 35 },
+          { x: "Dogs", y: 40 },
+          { x: "Birds", y: 55 },
+          { x: "Fishes", y: 15 },
+          { x: "Reptiles", y: 10 },
+        ]}
+      />
+    ),
+    hasVictoryChart: false,
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx b/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx
new file mode 100644
index 000000000..6d470155c
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx
@@ -0,0 +1,21 @@
+/* eslint-disable no-magic-numbers */
+import React from "react";
+import { VictoryChart, VictoryPolarAxis } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const PolarAxisDependentExamples: ExampleConfig[] = [
+  {
+    title: "VictoryPolarAxis - Dependent",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryPolarAxis
+          {...props}
+          dependentAxis
+          domain={[0, 10]}
+          standalone={false}
+        />
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/polar-axis.tsx b/website/src/pages/themes/_components/examples/polar-axis.tsx
new file mode 100644
index 000000000..aedd3efc5
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/polar-axis.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { VictoryChart, VictoryPolarAxis } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const PolarAxisExamples: ExampleConfig[] = [
+  {
+    title: "VictoryPolarAxis",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryPolarAxis {...props} standalone={false} />
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/scatter.tsx b/website/src/pages/themes/_components/examples/scatter.tsx
new file mode 100644
index 000000000..b2fa3b54b
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/scatter.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { VictoryScatter } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const ScatterExamples: ExampleConfig[] = [
+  {
+    title: "VictoryScatter",
+    content: (props) => (
+      <VictoryScatter
+        {...props}
+        data={[
+          { x: 1, y: 2 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5 },
+          { x: 4, y: 4 },
+          { x: 5, y: 7 },
+        ]}
+      />
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/stack.tsx b/website/src/pages/themes/_components/examples/stack.tsx
new file mode 100644
index 000000000..a68074d8e
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/stack.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { VictoryArea, VictoryAxis, VictoryChart, VictoryStack } from "victory";
+import { NUM_STACKS, sampleStackData } from "../../_const";
+
+import { ExampleConfig } from "./example";
+
+export const StackExamples: ExampleConfig[] = [
+  {
+    title: "VictoryStack",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryAxis label="X Axis" />
+        <VictoryAxis dependentAxis label="Y Axis" />
+        <VictoryStack
+          {...props}
+          key="victory-stack"
+          colorScale={props.colorScale}
+        >
+          {[...Array(NUM_STACKS)].map((_, i) => (
+            <VictoryArea data={sampleStackData} key={i} />
+          ))}
+        </VictoryStack>
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/voronoi.tsx b/website/src/pages/themes/_components/examples/voronoi.tsx
new file mode 100644
index 000000000..bc57e3e8a
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/voronoi.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { VictoryVoronoi } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const VoronoiExamples: ExampleConfig[] = [
+  {
+    title: "VictoryVoronoi",
+    content: (props) => (
+      <VictoryVoronoi
+        {...props}
+        data={[
+          { x: 1, y: 2 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5 },
+          { x: 4, y: 4 },
+          { x: 5, y: 7 },
+        ]}
+      />
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/export-panel.tsx b/website/src/pages/themes/_components/export-panel.tsx
index 1083fd238..f72769415 100644
--- a/website/src/pages/themes/_components/export-panel.tsx
+++ b/website/src/pages/themes/_components/export-panel.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import CodeBlock from "./code-block";
 import { useTheme } from "../_providers/themeProvider";
 import { VictoryTheme } from "victory";
-import Button from "./button";
+import { Button } from "@site/src/components/button";
 
 const generateThemeCode = (config, format: "js" | "ts") => {
   const jsonConfig = JSON.stringify(config, null, 2).replace(
diff --git a/website/src/pages/themes/_components/options-panel.tsx b/website/src/pages/themes/_components/options-panel.tsx
index 34b9ca304..897fd2423 100644
--- a/website/src/pages/themes/_components/options-panel.tsx
+++ b/website/src/pages/themes/_components/options-panel.tsx
@@ -19,7 +19,6 @@ const OptionsPanel = ({
             key={control.label + i}
             type={control.type}
             control={control}
-            className="my-4"
           />
         );
       })}
diff --git a/website/src/pages/themes/_components/preview-settings-menu.tsx b/website/src/pages/themes/_components/preview-settings-menu.tsx
deleted file mode 100644
index 0c32511e7..000000000
--- a/website/src/pages/themes/_components/preview-settings-menu.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import Select from "./select";
-import { usePreviewOptions } from "../_providers/previewOptionsProvider";
-import { colorScaleOptions } from "../_const";
-import { FiSettings, FiX } from "react-icons/fi";
-import Toggle from "./toggle";
-
-type PreviewSettingsMenuProps = {
-  showColorScaleOptions: boolean;
-};
-
-const PreviewSettingsMenu = ({
-  showColorScaleOptions = false,
-}: PreviewSettingsMenuProps) => {
-  const [isSettingsMenuOpen, setIsSettingsMenuOpen] = React.useState(false);
-  const { colorScale, updateColorScale, showTooltips, setShowTooltips } =
-    usePreviewOptions();
-
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-      setIsSettingsMenuOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    if (isSettingsMenuOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    } else {
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isSettingsMenuOpen]);
-
-  const handleSettingsMenuToggle = () => {
-    setIsSettingsMenuOpen((prev) => !prev);
-  };
-
-  return (
-    <div className="relative">
-      <button
-        onClick={handleSettingsMenuToggle}
-        className="bg-transparent flex justify-center items-center cursor-pointer text-grayscale-800 hover:text-grayscale-400"
-      >
-        <FiSettings className="w-4 h-4" />
-      </button>
-      {isSettingsMenuOpen && (
-        <div
-          className="absolute w-[400px] right-0 top-6 border border-grayscale-300 bg-white rounded-md z-50 p-4 shadow-md"
-          ref={menuRef}
-        >
-          <button
-            onClick={handleSettingsMenuToggle}
-            className="absolute top-2 right-2 flex items-center justify-center p-1 rounded-full bg-grayscale-100 cursor-pointer"
-          >
-            <FiX className="w-4 h-4 text-grayscale-800" />
-          </button>
-          <h1 className="text-base font-bold mb-4">Preview Settings</h1>
-          {showColorScaleOptions && (
-            <Select
-              id="color-scale-preview"
-              label="Preview color scale"
-              value={colorScale}
-              onChange={updateColorScale}
-              options={colorScaleOptions}
-              includeDefault
-              className="flex items-center justify-between my-2"
-              size="sm"
-            />
-          )}
-          <Toggle
-            id="show-tooltips"
-            label="Show tooltips instead of labels"
-            checked={showTooltips}
-            onChange={setShowTooltips}
-            className="mt-4"
-            size="sm"
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-export default PreviewSettingsMenu;
diff --git a/website/src/pages/themes/_components/sidenav.tsx b/website/src/pages/themes/_components/sidenav.tsx
index 4f2949697..b3072287a 100644
--- a/website/src/pages/themes/_components/sidenav.tsx
+++ b/website/src/pages/themes/_components/sidenav.tsx
@@ -17,14 +17,21 @@ import axisOptionsConfig from "../_config/axis";
 import { useTheme } from "../_providers/themeProvider";
 import {
   defaultColorScale,
-  defaultExampleConfigs,
   usePreviewOptions,
 } from "../_providers/previewOptionsProvider";
 import { TiExportOutline } from "react-icons/ti";
+import {
+  AllExamples,
+  ExampleConfig,
+  GroupExamples,
+  PieExamples,
+  StackExamples,
+} from "./examples";
 
 type NavItem = {
   title: string;
   icon: React.ElementType;
+  content: ExampleConfig[];
 } & (
   | {
       panelType: "theme" | "export";
@@ -49,30 +56,35 @@ export const NAV_ITEMS: NavItem[] = [
     title: "Base Theme",
     icon: CircleStackIcon,
     panelType: "theme",
+    content: AllExamples,
   },
   {
     title: "Color Palette",
     icon: SwatchIcon,
     config: paletteOptionsConfig,
     panelType: "default",
+    content: [...StackExamples, ...GroupExamples, ...PieExamples],
   },
   {
     title: "Global Options",
     icon: GlobeAmericasIcon,
     config: globalOptionsConfig,
     panelType: "default",
+    content: AllExamples,
   },
   {
     title: "Axis Options",
     icon: AdjustmentsVerticalIcon,
     config: axisOptionsConfig,
     panelType: "chart",
+    content: [],
   },
   {
     title: "Chart Options",
     icon: AdjustmentsVerticalIcon,
     config: chartOptionsConfig,
     panelType: "chart",
+    content: [],
   },
 ];
 
@@ -80,17 +92,18 @@ const exportItem: NavItem = {
   title: "Export",
   icon: TiExportOutline,
   panelType: "export",
+  content: [],
 };
 
 const SideNav = ({ activeItem, onItemSelect }: SideNavProps) => {
   const { baseTheme } = useTheme();
-  const { setExampleConfigs, updateColorScale } = usePreviewOptions();
+  const { setExampleContent, updateColorScale } = usePreviewOptions();
   const isBaseThemeSelected = !!baseTheme;
 
   const handleItemSelect = (item: NavItem) => {
     onItemSelect(item);
     updateColorScale(defaultColorScale);
-    setExampleConfigs(defaultExampleConfigs);
+    setExampleContent(item.content);
   };
 
   const isExportItemActive = activeItem.title === exportItem.title;
diff --git a/website/src/pages/themes/_components/theme-preview.tsx b/website/src/pages/themes/_components/theme-preview.tsx
deleted file mode 100644
index 7fe1c6660..000000000
--- a/website/src/pages/themes/_components/theme-preview.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React from "react";
-import {
-  ColorScalePropType,
-  VictoryArea,
-  VictoryAxis,
-  VictoryBar,
-  VictoryChart,
-  VictoryStack,
-  VictoryTooltip,
-} from "victory";
-import { useTheme } from "../_providers/themeProvider";
-import { usePreviewOptions } from "../_providers/previewOptionsProvider";
-import { NUM_STACKS, sampleStackData } from "../_const";
-import clsx from "clsx";
-import PreviewSettingsMenu from "./preview-settings-menu";
-
-const chartStyle: { [key: string]: React.CSSProperties } = {
-  parent: {
-    border: "1px solid #ccc",
-    width: "100%",
-    height: "95%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-};
-
-const ThemePreview = () => {
-  const { customThemeConfig } = useTheme();
-  const { colorScale, showTooltips, exampleConfigs } = usePreviewOptions();
-
-  if (!customThemeConfig) return null;
-
-  const showColorScaleOptions =
-    exampleConfigs.length === 0 ||
-    exampleConfigs.filter(
-      ({ allowColorScaleOverride }) => allowColorScaleOverride,
-    ).length > 0;
-
-  return (
-    <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
-      <div className="max-w-screen-xl w-full px-10 pt-6 pb-20">
-        <div className="flex justify-between items-center mb-6">
-          <h1 className="text-2xl font-bold m-0">Theme Preview</h1>
-          <PreviewSettingsMenu showColorScaleOptions={showColorScaleOptions} />
-        </div>
-        <div
-          className={clsx(
-            "grid grid-cols-1 gap-10",
-            exampleConfigs.length !== 1 && "xl:grid-cols-2",
-            exampleConfigs.length === 1
-              ? "auto-rows-[500px]"
-              : "auto-rows-[400px] xl:max-2xl:auto-rows-[300px]",
-          )}
-        >
-          {exampleConfigs.length === 0 ? (
-            <>
-              <div>
-                <h3 className="text-lg font-bold mb-3">Stacked Area Chart</h3>
-                <VictoryChart
-                  theme={customThemeConfig}
-                  domainPadding={20}
-                  style={chartStyle}
-                >
-                  <VictoryAxis label="X Axis" />
-                  <VictoryAxis dependentAxis label="Y Axis" />
-                  <VictoryStack
-                    colorScale={colorScale as ColorScalePropType}
-                    aria-label="Victory Stack Demo"
-                  >
-                    {[...Array(NUM_STACKS)].map((_, i) => (
-                      <VictoryArea data={sampleStackData} key={i} />
-                    ))}
-                  </VictoryStack>
-                </VictoryChart>
-              </div>
-              <div>
-                <h3 className="text-lg font-bold mb-3">Stacked Bar Chart</h3>
-                <VictoryChart
-                  theme={customThemeConfig}
-                  domainPadding={20}
-                  style={chartStyle}
-                >
-                  <VictoryAxis label="X Axis" />
-                  <VictoryAxis dependentAxis label="Y Axis" />
-                  <VictoryStack
-                    colorScale={colorScale as ColorScalePropType}
-                    aria-label="Victory Stack Demo"
-                  >
-                    {[...Array(NUM_STACKS)].map((_, i) => (
-                      <VictoryBar
-                        data={sampleStackData}
-                        key={i}
-                        labels={({ datum }) =>
-                          showTooltips ? datum.y : undefined
-                        }
-                        {...(showTooltips && {
-                          labelComponent: <VictoryTooltip />,
-                        })}
-                      />
-                    ))}
-                  </VictoryStack>
-                </VictoryChart>
-              </div>
-            </>
-          ) : (
-            exampleConfigs.map(
-              ({ label, content: Content, hasVictoryChart = true }, i) =>
-                Content && (
-                  <div key={i}>
-                    <h3 className="text-lg font-bold mb-3">{label}</h3>
-                    {hasVictoryChart ? (
-                      <VictoryChart
-                        theme={customThemeConfig}
-                        domainPadding={20}
-                        style={chartStyle}
-                      >
-                        {Content({
-                          labels: ({ datum }) => datum.y || datum.x,
-                          colorScale: colorScale as ColorScalePropType,
-                          ...(showTooltips && {
-                            labelComponent: <VictoryTooltip />,
-                          }),
-                        })}
-                      </VictoryChart>
-                    ) : (
-                      Content({
-                        labels: ({ datum }) => datum.y || datum.x,
-                        colorScale: colorScale as ColorScalePropType,
-                        style: chartStyle,
-                        theme: customThemeConfig,
-                        ...(showTooltips && {
-                          labelComponent: <VictoryTooltip />,
-                        }),
-                      })
-                    )}
-                  </div>
-                ),
-            )
-          )}
-        </div>
-      </div>
-    </main>
-  );
-};
-export default ThemePreview;
diff --git a/website/src/pages/themes/_components/theme-preview/header.tsx b/website/src/pages/themes/_components/theme-preview/header.tsx
new file mode 100644
index 000000000..3cf03de7a
--- /dev/null
+++ b/website/src/pages/themes/_components/theme-preview/header.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+
+import { Button } from "@site/src/components/button";
+import { useClickOutside } from "@site/src/hooks/useClickOutside";
+import { Options } from "./options";
+
+export function Header() {
+  const [isSettingsMenuOpen, setIsSettingsMenuOpen] = useState(false);
+
+  const ref = useClickOutside(() => {
+    setIsSettingsMenuOpen((prev) => !prev);
+  });
+
+  const handlePreviewClick = () => {
+    setIsSettingsMenuOpen((prev) => !prev);
+  };
+
+  return (
+    <div className="border-b border-gray-200 pb-3 mb-6 sm:flex sm:items-center sm:justify-between">
+      <h3 className="mb-0 font-semibold text-gray-900">Chart Previews</h3>
+      <div className="mt-3 sm:ml-4 sm:mt-0">
+        <Button onClick={handlePreviewClick}>Preview Options</Button>
+        <Options isOpen={isSettingsMenuOpen} ref={ref} />
+      </div>
+    </div>
+  );
+}
diff --git a/website/src/pages/themes/_components/theme-preview/index.tsx b/website/src/pages/themes/_components/theme-preview/index.tsx
new file mode 100644
index 000000000..37279970c
--- /dev/null
+++ b/website/src/pages/themes/_components/theme-preview/index.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+import { ColorScalePropType } from "victory";
+
+import { useTheme } from "../../_providers/themeProvider";
+import { usePreviewOptions } from "../../_providers/previewOptionsProvider";
+import { Preview } from "./preview";
+import { Header } from "./header";
+
+export function ThemePreview() {
+  const { customThemeConfig } = useTheme();
+  const { colorScale, exampleContent, showTooltips } = usePreviewOptions();
+
+  if (!customThemeConfig) return null;
+
+  return (
+    <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
+      <div className="max-w-screen-xl w-full px-10 pt-6 pb-20">
+        <Header />
+        <div className="grid grid-cols-1 gap-10 xl:grid-cols-2">
+          {exampleContent.map((content, i) => (
+            <Preview
+              key={i}
+              config={content}
+              colorScale={colorScale as ColorScalePropType}
+              showTooltips={showTooltips}
+              theme={customThemeConfig}
+            />
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/website/src/pages/themes/_components/theme-preview/options.tsx b/website/src/pages/themes/_components/theme-preview/options.tsx
new file mode 100644
index 000000000..2f187f717
--- /dev/null
+++ b/website/src/pages/themes/_components/theme-preview/options.tsx
@@ -0,0 +1,36 @@
+import React, { forwardRef } from "react";
+import Select from "../select";
+import { usePreviewOptions } from "../../_providers/previewOptionsProvider";
+import { colorScaleOptions } from "../../_const";
+import Toggle from "../toggle";
+import PreviewColorScaleSelect from "./preview-color-scale-select";
+
+type Props = {
+  isOpen: boolean;
+};
+
+export const Options = forwardRef<HTMLDivElement, Props>(({ isOpen }, ref) => {
+  const { showTooltips, setShowTooltips } = usePreviewOptions();
+
+  return (
+    <div className="relative">
+      {isOpen && (
+        <div
+          className="absolute w-[400px] right-0 mt-1 border border-grayscale-300 bg-white rounded-md z-50 p-4 shadow-md"
+          ref={ref}
+        >
+          <h1 className="text-base font-bold mb-4">Preview Settings</h1>
+          <PreviewColorScaleSelect size="sm" />
+          <Toggle
+            id="show-tooltips"
+            label="Show tooltips instead of labels"
+            checked={showTooltips}
+            onChange={setShowTooltips}
+            className="mt-4"
+            size="sm"
+          />
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/website/src/pages/themes/_components/theme-preview/preview-color-scale-select.tsx b/website/src/pages/themes/_components/theme-preview/preview-color-scale-select.tsx
new file mode 100644
index 000000000..c6fffd34a
--- /dev/null
+++ b/website/src/pages/themes/_components/theme-preview/preview-color-scale-select.tsx
@@ -0,0 +1,37 @@
+import React, { useId } from "react";
+import Select from "../select";
+import { usePreviewOptions } from "../../_providers/previewOptionsProvider";
+import { colorScaleOptions } from "../../_const";
+import clsx from "clsx";
+
+type PreviewColorScaleSelectProps = {
+  label?: string;
+  size?: "sm" | "md";
+  className?: string;
+};
+
+const PreviewColorScaleSelect = ({
+  label = "Preview color scale",
+  size = "md",
+  className,
+}: PreviewColorScaleSelectProps) => {
+  const { colorScale, updateColorScale } = usePreviewOptions();
+  const id = useId();
+  return (
+    <Select
+      id={id}
+      label={label}
+      value={colorScale}
+      onChange={updateColorScale}
+      options={colorScaleOptions}
+      includeDefault
+      className={clsx(
+        "my-2",
+        size === "sm" && "flex items-center justify-between",
+        className,
+      )}
+      size={size}
+    />
+  );
+};
+export default PreviewColorScaleSelect;
diff --git a/website/src/pages/themes/_components/theme-preview/preview.tsx b/website/src/pages/themes/_components/theme-preview/preview.tsx
new file mode 100644
index 000000000..92790b187
--- /dev/null
+++ b/website/src/pages/themes/_components/theme-preview/preview.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+import {
+  ColorScalePropType,
+  VictoryThemeDefinition,
+  VictoryTooltip,
+} from "victory";
+import { ExampleConfig } from "../examples";
+
+type Props = {
+  config: ExampleConfig;
+  theme: VictoryThemeDefinition;
+  colorScale: ColorScalePropType;
+  showTooltips: boolean;
+};
+
+export function Preview({ config, theme, colorScale, showTooltips }: Props) {
+  const { content: Content, title } = config;
+
+  return (
+    <div className="border border-solid border-gray-200 p-8">
+      <h3 className="text-lg font-bold mb-3">{title}</h3>
+      {Content({
+        labels: ({ datum }) => datum.y || datum.x,
+        colorScale: colorScale as ColorScalePropType,
+        theme,
+        ...(showTooltips && {
+          labelComponent: <VictoryTooltip />,
+        }),
+      })}
+    </div>
+  );
+}
diff --git a/website/src/pages/themes/_config/axis.tsx b/website/src/pages/themes/_config/axis.tsx
index 815aabc16..83f258804 100644
--- a/website/src/pages/themes/_config/axis.tsx
+++ b/website/src/pages/themes/_config/axis.tsx
@@ -1,17 +1,16 @@
-/* eslint-disable no-magic-numbers */
-import React from "react";
 import { getBaseLabelsConfig, getBaseStrokeConfig } from "../_utils";
-import { VictoryAxis, VictoryPolarAxis } from "victory";
 import { StrokeProps } from "../_const";
 import { ControlConfig } from ".";
+import {
+  AxisExamples,
+  PolarAxisExamples,
+  PolarAxisDependentExamples,
+} from "../_components/examples";
 
 const generalAxisOptionsConfig: ControlConfig = {
   type: "accordion",
   label: "Base Axis",
-  content: (props) => [
-    <VictoryAxis key="x-axis" label="X Axis" {...props} />,
-    <VictoryAxis key="y-axis" dependentAxis label="Y Axis" {...props} />,
-  ],
+  content: AxisExamples,
   controls: [
     {
       type: "section",
@@ -57,9 +56,7 @@ const generalAxisOptionsConfig: ControlConfig = {
 const polarAxisOptionsConfig: ControlConfig = {
   type: "accordion",
   label: "Polar Axis",
-  content: (props) => (
-    <VictoryPolarAxis {...props} key="polar-axis" standalone={false} />
-  ),
+  content: PolarAxisExamples,
   controls: [
     {
       type: "section",
@@ -105,15 +102,7 @@ const polarAxisOptionsConfig: ControlConfig = {
 const polarDependentAxisOptionsConfig: ControlConfig = {
   type: "accordion",
   label: "Polar Dependent Axis",
-  content: (props) => (
-    <VictoryPolarAxis
-      {...props}
-      key="polar-axis-dependent"
-      dependentAxis
-      domain={[0, 10]}
-      standalone={false}
-    />
-  ),
+  content: PolarAxisDependentExamples,
   controls: [
     {
       type: "section",
diff --git a/website/src/pages/themes/_config/chart.tsx b/website/src/pages/themes/_config/chart.tsx
index f64852ec8..5c50be22e 100644
--- a/website/src/pages/themes/_config/chart.tsx
+++ b/website/src/pages/themes/_config/chart.tsx
@@ -1,28 +1,25 @@
-/* eslint-disable no-magic-numbers */
-import React from "react";
-import {
-  VictoryArea,
-  VictoryAxis,
-  VictoryBar,
-  VictoryBoxPlot,
-  VictoryCandlestick,
-  VictoryErrorBar,
-  VictoryGroup,
-  VictoryHistogram,
-  VictoryLegend,
-  VictoryLine,
-  VictoryPie,
-  VictoryScatter,
-  VictoryStack,
-  VictoryVoronoi,
-} from "victory";
 import {
   getBaseLabelsConfig,
   getBaseStrokeConfig,
   getNestedColorScaleConfig,
 } from "../_utils";
 import { ControlConfig } from ".";
-import { NUM_STACKS, sampleStackData, StrokeProps } from "../_const";
+import { StrokeProps } from "../_const";
+import {
+  AreaExamples,
+  BarExamples,
+  BoxPlotExamples,
+  CandlestickExamples,
+  ErrorBarExamples,
+  GroupExamples,
+  HistogramExamples,
+  LegendExamples,
+  LineExamples,
+  PieExamples,
+  ScatterExamples,
+  StackExamples,
+  VoronoiExamples,
+} from "../_components/examples";
 
 const chartConfigs: {
   [key: string]: ControlConfig;
@@ -30,21 +27,7 @@ const chartConfigs: {
   area: {
     type: "section",
     label: "Area Chart",
-    content: (props) => [
-      <VictoryAxis key="x-axis" label="X Axis" />,
-      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryArea
-        {...props}
-        key="area-chart"
-        data={[
-          { x: 1, y: 2, label: "A" },
-          { x: 2, y: 3, label: "B" },
-          { x: 3, y: 5, label: "C" },
-          { x: 4, y: 4, label: "D" },
-          { x: 5, y: 7, label: "E" },
-        ]}
-      />,
-    ],
+    content: AreaExamples,
     controls: [
       {
         type: "section",
@@ -79,36 +62,7 @@ const chartConfigs: {
   bar: {
     type: "section",
     label: "Bar Chart",
-    content: (props) => [
-      <VictoryAxis key="x-axis" label="X Axis" />,
-      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryBar
-        {...props}
-        key="bar-chart"
-        data={[
-          {
-            x: 1,
-            y: 2,
-          },
-          {
-            x: 2,
-            y: 3,
-          },
-          {
-            x: 3,
-            y: 5,
-          },
-          {
-            x: 4,
-            y: 4,
-          },
-          {
-            x: 5,
-            y: 7,
-          },
-        ]}
-      />,
-    ],
+    content: BarExamples,
     controls: [
       {
         type: "section",
@@ -150,20 +104,7 @@ const chartConfigs: {
   boxPlot: {
     type: "section",
     label: "Box Plot",
-    content: (props) => (
-      <VictoryBoxPlot
-        {...props}
-        data={[
-          { x: 1, y: [1, 2, 3, 5, 8] },
-          { x: 2, y: [3, 2, 8, 10, 12] },
-          { x: 3, y: [2, 8, 6, 5, 10] },
-          { x: 4, y: [1, 3, 2, 9, 5] },
-          { x: 5, y: [3, 2, 9, 5, 7] },
-        ]}
-        labels
-        labelOrientation="right"
-      />
-    ),
+    content: BoxPlotExamples,
     controls: [
       {
         type: "section",
@@ -251,53 +192,7 @@ const chartConfigs: {
   candlestick: {
     type: "section",
     label: "Candlestick Chart",
-    content: (props) => (
-      <VictoryCandlestick
-        {...props}
-        data={[
-          {
-            x: "3/1/23",
-            open: 5,
-            close: 10,
-            high: 15,
-            low: 0,
-            label: "A",
-          },
-          {
-            x: "3/2/23",
-            open: 10,
-            close: 15,
-            high: 20,
-            low: 5,
-            label: "B",
-          },
-          {
-            x: "3/3/23",
-            open: 15,
-            close: 20,
-            high: 22,
-            low: 10,
-            label: "C",
-          },
-          {
-            x: "3/4/23",
-            open: 20,
-            close: 10,
-            high: 25,
-            low: 7,
-            label: "D",
-          },
-          {
-            x: "3/5/23",
-            open: 10,
-            close: 8,
-            high: 15,
-            low: 5,
-            label: "E",
-          },
-        ]}
-      />
-    ),
+    content: CandlestickExamples,
     controls: [
       {
         type: "section",
@@ -350,18 +245,7 @@ const chartConfigs: {
   errorBar: {
     type: "section",
     label: "Error Bar",
-    content: (props) => (
-      <VictoryErrorBar
-        {...props}
-        data={[
-          { x: 1, y: 1, errorX: [1, 0.5], errorY: 0.1 },
-          { x: 2, y: 2, errorX: [1, 3], errorY: 0.1 },
-          { x: 3, y: 3, errorX: [1, 3], errorY: [0.2, 0.3] },
-          { x: 4, y: 2, errorX: [1, 0.5], errorY: 0.1 },
-          { x: 5, y: 1, errorX: [1, 0.5], errorY: 0.2 },
-        ]}
-      />
-    ),
+    content: ErrorBarExamples,
     controls: [
       {
         type: "section",
@@ -392,26 +276,7 @@ const chartConfigs: {
   histogram: {
     type: "section",
     label: "Histogram",
-    content: (props) => (
-      <VictoryHistogram
-        {...props}
-        data={[
-          { x: 0 },
-          { x: 1 },
-          { x: 1 },
-          { x: 1 },
-          { x: 1 },
-          { x: 2 },
-          { x: 2 },
-          { x: 3 },
-          { x: 4 },
-          { x: 7 },
-          { x: 7 },
-          { x: 10 },
-        ]}
-        labels={({ datum }) => `Bin count:\n ${datum.x}`}
-      />
-    ),
+    content: HistogramExamples,
     controls: [
       {
         type: "section",
@@ -457,40 +322,7 @@ const chartConfigs: {
   group: {
     type: "section",
     label: "Group",
-    allowColorScaleOverride: true,
-    content: (props) => [
-      <VictoryAxis key="x-axis" label="X Axis" />,
-      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryGroup key="victory-group" domainPadding={{ x: 20 }} offset={20}>
-        <VictoryBar
-          {...props}
-          data={[
-            { x: "2023 Q1", y: 1 },
-            { x: "2023 Q2", y: 2 },
-            { x: "2023 Q3", y: 3 },
-            { x: "2023 Q4", y: 2 },
-          ]}
-        />
-        <VictoryBar
-          {...props}
-          data={[
-            { x: "2023 Q1", y: 2 },
-            { x: "2023 Q2", y: 3 },
-            { x: "2023 Q3", y: 4 },
-            { x: "2023 Q4", y: 5 },
-          ]}
-        />
-        <VictoryBar
-          {...props}
-          data={[
-            { x: "2023 Q1", y: 1 },
-            { x: "2023 Q2", y: 2 },
-            { x: "2023 Q3", y: 3 },
-            { x: "2023 Q4", y: 4 },
-          ]}
-        />
-      </VictoryGroup>,
-    ],
+    content: GroupExamples,
     controls: [
       {
         type: "section",
@@ -512,54 +344,7 @@ const chartConfigs: {
   legend: {
     type: "section",
     label: "Legend",
-    content: (props) => [
-      <VictoryLegend
-        {...props}
-        key="legend"
-        x={125}
-        y={20}
-        title="Pets"
-        data={[
-          {
-            name: "Dogs",
-            symbol: { fill: "tomato" },
-          },
-          {
-            name: "Cats",
-            symbol: { fill: "orange" },
-          },
-          {
-            name: "Rabbits",
-            symbol: { fill: "gold" },
-          },
-        ]}
-      />,
-      <VictoryBar
-        key="legend-chart"
-        data={[
-          {
-            x: "Dogs",
-            y: 6,
-            fill: "tomato",
-          },
-          {
-            x: "Cats",
-            y: 4,
-            fill: "orange",
-          },
-          {
-            x: "Rabbits",
-            y: 2,
-            fill: "gold",
-          },
-        ]}
-        style={{
-          data: {
-            fill: ({ datum }) => datum.fill,
-          },
-        }}
-      />,
-    ],
+    content: LegendExamples,
     controls: [
       {
         type: "section",
@@ -637,22 +422,7 @@ const chartConfigs: {
   line: {
     type: "section",
     label: "Line Chart",
-    content: (props) => [
-      <VictoryAxis key="x-axis" label="X Axis" />,
-      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryLine
-        key="line-chart"
-        {...props}
-        data={[
-          { x: 1, y: 2 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 4 },
-          { x: 5, y: 7 },
-        ]}
-        labels={({ datum }) => datum.y}
-      />,
-    ],
+    content: LineExamples,
     controls: [
       {
         type: "section",
@@ -674,20 +444,7 @@ const chartConfigs: {
   pie: {
     type: "section",
     label: "Pie Chart",
-    allowColorScaleOverride: true,
-    hasVictoryChart: false,
-    content: (props) => (
-      <VictoryPie
-        {...props}
-        data={[
-          { x: "Cats", y: 35 },
-          { x: "Dogs", y: 40 },
-          { x: "Birds", y: 55 },
-          { x: "Fishes", y: 15 },
-          { x: "Reptiles", y: 10 },
-        ]}
-      />
-    ),
+    content: PieExamples,
     controls: [
       {
         type: "section",
@@ -718,18 +475,7 @@ const chartConfigs: {
   scatter: {
     type: "section",
     label: "Scatter Chart",
-    content: (props) => (
-      <VictoryScatter
-        {...props}
-        data={[
-          { x: 1, y: 2 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 4 },
-          { x: 5, y: 7 },
-        ]}
-      />
-    ),
+    content: ScatterExamples,
     controls: [
       {
         type: "section",
@@ -764,21 +510,7 @@ const chartConfigs: {
   stack: {
     type: "section",
     label: "Stack",
-    allowColorScaleOverride: true,
-    content: (props) => [
-      <VictoryAxis key="x-axis" label="X Axis" />,
-      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryStack
-        {...props}
-        key="victory-stack"
-        colorScale={props.colorScale}
-        data-testColorScale={props.colorScale}
-      >
-        {[...Array(NUM_STACKS)].map((_, i) => (
-          <VictoryArea data={sampleStackData} key={i} />
-        ))}
-      </VictoryStack>,
-    ],
+    content: StackExamples,
     controls: [
       {
         type: "section",
@@ -851,18 +583,7 @@ const chartConfigs: {
   voronoi: {
     type: "section",
     label: "Voronoi",
-    content: (props) => (
-      <VictoryVoronoi
-        {...props}
-        data={[
-          { x: 1, y: 2 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 4 },
-          { x: 5, y: 7 },
-        ]}
-      />
-    ),
+    content: VoronoiExamples,
     controls: [
       {
         type: "section",
diff --git a/website/src/pages/themes/_config/index.tsx b/website/src/pages/themes/_config/index.tsx
index 7a9296da6..6ffa8a868 100644
--- a/website/src/pages/themes/_config/index.tsx
+++ b/website/src/pages/themes/_config/index.tsx
@@ -1,14 +1,16 @@
-import React from "react";
+import { ExampleConfig } from "../_components/examples";
 
 export type ControlConfig = {
   label: string;
-  content?: (props: any) => React.ReactNode;
+  content?: ExampleConfig[];
   controls?: ControlConfig[];
-  hasVictoryChart?: boolean;
-  allowColorScaleOverride?: boolean;
 } & (
   | {
-      type: "section" | "accordion";
+      type: "accordion" | "colorScalePreview";
+    }
+  | {
+      type: "section";
+      description?: string;
     }
   | {
       type: "colorPalette";
@@ -18,6 +20,7 @@ export type ControlConfig = {
   | {
       type: "colorScale";
       path: string | string[];
+      showDefaultToggle?: boolean;
     }
   | {
       type: "slider" | "select" | "colorPicker";
diff --git a/website/src/pages/themes/_config/palette.tsx b/website/src/pages/themes/_config/palette.tsx
index 271e8d22a..ac4e8a385 100644
--- a/website/src/pages/themes/_config/palette.tsx
+++ b/website/src/pages/themes/_config/palette.tsx
@@ -1,16 +1,46 @@
 import { OptionsPanelConfig } from ".";
 import { colorScaleOptions } from "../_const";
+import { getNestedColorScaleConfig } from "../_utils";
 
 const paletteOptionsConfig: OptionsPanelConfig = {
   title: "Color Palette",
-  description:
-    "Select a color palette to apply it to the preview charts, then adjust individual colors in the palette to customize the theme.",
-  controls: colorScaleOptions.map((option) => ({
-    type: "colorPalette",
-    colorScaleType: option.value,
-    label: option.label,
-    value: option.value,
-  })),
+  description: "Customize your theme's color palettes.",
+  controls: [
+    {
+      type: "section",
+      label: "Defaults",
+      description:
+        "Set the default color scale for each of the following Victory components.",
+      controls: [
+        {
+          type: "accordion",
+          label: "VictoryStack",
+          controls: getNestedColorScaleConfig("stack"),
+        },
+        {
+          type: "accordion",
+          label: "VictoryGroup",
+          controls: getNestedColorScaleConfig("group"),
+        },
+        {
+          type: "accordion",
+          label: "VictoryPie",
+          controls: getNestedColorScaleConfig("pie"),
+        },
+      ],
+    },
+    {
+      type: "section",
+      label: "Color Scales",
+      description: "Customize the theme's predefined color scale palettes.",
+      controls: colorScaleOptions.map((option) => ({
+        type: "colorPalette",
+        label: option.label,
+        colorScaleType: option.value,
+        value: option.value,
+      })),
+    },
+  ],
 };
 
 export default paletteOptionsConfig;
diff --git a/website/src/pages/themes/_providers/previewOptionsProvider.tsx b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
index 439221e51..fa1e22e7d 100644
--- a/website/src/pages/themes/_providers/previewOptionsProvider.tsx
+++ b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from "react";
-import { ControlConfig } from "../_config";
+import { AllExamples, ExampleConfig } from "../_components/examples";
 
 type PreviewOptionsContextType = {
   colorScale?: string;
@@ -7,13 +7,12 @@ type PreviewOptionsContextType = {
   showTooltips: boolean;
   setShowTooltips: (showTooltips: boolean) => void;
   resetPreviewOptions: () => void;
-  exampleConfigs: ControlConfig[];
-  setExampleConfigs: (exampleConfigs: any[]) => void;
+  exampleContent: ExampleConfig[];
+  setExampleContent: (content: ExampleConfig[]) => void;
 };
 
 export const defaultColorScale = undefined;
 export const defaultShowTooltips = false;
-export const defaultExampleConfigs = [];
 
 const PreviewOptionsContext = createContext<
   PreviewOptionsContextType | undefined
@@ -24,9 +23,7 @@ export const PreviewOptionsProvider = ({ children }) => {
     defaultColorScale,
   );
   const [showTooltips, setShowTooltips] = React.useState(defaultShowTooltips);
-  const [exampleConfigs, setExampleConfigs] = React.useState<any[]>(
-    defaultExampleConfigs,
-  );
+  const [exampleContent, setExampleContent] = React.useState(AllExamples);
 
   const updateColorScale = (newColorScale?: string) => {
     const updatedColorScale = !newColorScale ? undefined : newColorScale;
@@ -46,8 +43,8 @@ export const PreviewOptionsProvider = ({ children }) => {
         showTooltips,
         setShowTooltips,
         resetPreviewOptions,
-        exampleConfigs,
-        setExampleConfigs,
+        exampleContent,
+        setExampleContent,
       }}
     >
       {children}
diff --git a/website/src/pages/themes/index.tsx b/website/src/pages/themes/index.tsx
index deb8e4a3b..3cec6edf0 100644
--- a/website/src/pages/themes/index.tsx
+++ b/website/src/pages/themes/index.tsx
@@ -8,7 +8,7 @@ import BaseThemePanel from "./_components/base-theme-panel";
 import OptionsPanel from "./_components/options-panel";
 import ChartPanel from "./_components/chart-panel";
 import { ThemeProvider } from "./_providers/themeProvider";
-import ThemePreview from "./_components/theme-preview";
+import { ThemePreview } from "./_components/theme-preview";
 import { PreviewOptionsProvider } from "./_providers/previewOptionsProvider";
 import ExportPanel from "./_components/export-panel";
 

From 945e97ed95f82e09de476c7fee7c20e4787a4c2a Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Tue, 7 Jan 2025 10:00:42 -0500
Subject: [PATCH 22/30] fix: lint errors

---
 website/src/pages/themes/_components/theme-preview/options.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/website/src/pages/themes/_components/theme-preview/options.tsx b/website/src/pages/themes/_components/theme-preview/options.tsx
index 2f187f717..de1ee634c 100644
--- a/website/src/pages/themes/_components/theme-preview/options.tsx
+++ b/website/src/pages/themes/_components/theme-preview/options.tsx
@@ -1,7 +1,5 @@
 import React, { forwardRef } from "react";
-import Select from "../select";
 import { usePreviewOptions } from "../../_providers/previewOptionsProvider";
-import { colorScaleOptions } from "../../_const";
 import Toggle from "../toggle";
 import PreviewColorScaleSelect from "./preview-color-scale-select";
 

From 03b9a513194f7d6e93fffcfa2ccbe975b38dc1ae Mon Sep 17 00:00:00 2001
From: Stef Williams <ramenhog@gmail.com>
Date: Fri, 10 Jan 2025 11:37:19 -0500
Subject: [PATCH 23/30] feat(theme-builder): simplify color picker (#3028)

---
 .../_components/color-palette-selector.tsx    | 44 +++--------
 .../themes/_components/color-picker-list.tsx  | 58 +++++++++++++++
 .../pages/themes/_components/color-picker.tsx | 73 +++++++------------
 .../color-scale-override-selector.tsx         | 44 ++++-------
 .../src/pages/themes/_components/control.tsx  | 19 +----
 website/src/pages/themes/_config/index.tsx    |  2 +-
 website/src/pages/themes/_config/palette.tsx  |  2 +-
 7 files changed, 119 insertions(+), 123 deletions(-)
 create mode 100644 website/src/pages/themes/_components/color-picker-list.tsx

diff --git a/website/src/pages/themes/_components/color-palette-selector.tsx b/website/src/pages/themes/_components/color-palette-selector.tsx
index ddef79a5b..33c5cac27 100644
--- a/website/src/pages/themes/_components/color-palette-selector.tsx
+++ b/website/src/pages/themes/_components/color-palette-selector.tsx
@@ -1,26 +1,23 @@
 import React from "react";
-import ColorPicker from "./color-picker";
-import { ColorScalePropType, VictoryThemeDefinition } from "victory";
-import { ColorChangeArgs } from "./control";
+import { VictoryThemeDefinition } from "victory";
 import clsx from "clsx";
 import { usePreviewOptions } from "../_providers/previewOptionsProvider";
+import ColorPickerList from "./color-picker-list";
 
 type ColorPaletteSelectorProps = {
   label: string;
   value: string;
   palette?: VictoryThemeDefinition["palette"];
-  colorScaleType?: ColorScalePropType;
-  onColorChange: (args: ColorChangeArgs) => void;
   className?: string;
+  onColorsChange: (newColors: string[]) => void;
 };
 
 const ColorPaletteSelector = ({
   label,
   value,
-  colorScaleType,
   palette,
-  onColorChange,
   className,
+  onColorsChange,
 }: ColorPaletteSelectorProps) => {
   const { colorScale, updateColorScale } = usePreviewOptions();
 
@@ -28,15 +25,9 @@ const ColorPaletteSelector = ({
     updateColorScale(value);
   };
 
-  const handleColorChange = (newColor, i, cScale) => {
-    onColorChange({
-      newColor,
-      index: i,
-      colorScale: cScale,
-    });
-    if (colorScale !== cScale) {
-      updateColorScale(cScale);
-    }
+  const handleColorsChange = (newColors) => {
+    onColorsChange(newColors);
+    updateColorScale(value);
   };
 
   const isSelected = colorScale === value;
@@ -56,22 +47,11 @@ const ColorPaletteSelector = ({
         checked={isSelected}
         onChange={handleRadioChange}
       />
-      <div className="p-0 m-0">
-        <span className="block mb-3 text-sm font-bold">{label}</span>
-        {!!colorScaleType && (
-          <div className="flex flex-wrap gap-3">
-            {palette?.[colorScaleType as string]?.map((color, i) => (
-              <ColorPicker
-                key={i}
-                color={color}
-                onColorChange={(newColor) =>
-                  handleColorChange(newColor, i, colorScaleType)
-                }
-              />
-            ))}
-          </div>
-        )}
-      </div>
+      <ColorPickerList
+        label={label}
+        colors={palette?.[value as string]}
+        onColorsChange={handleColorsChange}
+      />
     </label>
   );
 };
diff --git a/website/src/pages/themes/_components/color-picker-list.tsx b/website/src/pages/themes/_components/color-picker-list.tsx
new file mode 100644
index 000000000..a9e122cd9
--- /dev/null
+++ b/website/src/pages/themes/_components/color-picker-list.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import ColorPicker, { PLACEHOLDER_COLOR } from "./color-picker";
+import clsx from "clsx";
+import { TiPlus } from "react-icons/ti";
+
+type ColorPickerListProps = {
+  label?: string;
+  colors?: string[];
+  onColorsChange: (newColors: string[]) => void;
+  className?: string;
+};
+
+const ColorPickerList = ({
+  label,
+  colors = [],
+  onColorsChange,
+  className,
+}: ColorPickerListProps) => {
+  const handleColorChange = (newColor, i) => {
+    const updatedColors = [...colors];
+    updatedColors[i] = newColor;
+    onColorsChange(updatedColors);
+  };
+
+  const handleRemoveColor = (i) => {
+    const updatedColors = [...colors];
+    updatedColors.splice(i, 1);
+    onColorsChange(updatedColors);
+  };
+
+  const handleAddColor = () => {
+    const updatedColors = [...colors, PLACEHOLDER_COLOR];
+    onColorsChange(updatedColors);
+  };
+
+  return (
+    <div className={clsx("p-0 m-0", className)}>
+      {label && <span className="block mb-3 text-sm font-bold">{label}</span>}
+      <div className="flex flex-wrap gap-3">
+        {colors.map((color, i) => (
+          <ColorPicker
+            key={i}
+            color={color}
+            onColorChange={(newColor) => handleColorChange(newColor, i)}
+            onColorRemove={() => handleRemoveColor(i)}
+          />
+        ))}
+        <button
+          onClick={handleAddColor}
+          className="flex w-[35px] h-[35px] p-0.5 rounded-full cursor-pointer justify-center items-center border-2 border-grayscale-300"
+        >
+          <TiPlus />
+        </button>
+      </div>
+    </div>
+  );
+};
+export default ColorPickerList;
diff --git a/website/src/pages/themes/_components/color-picker.tsx b/website/src/pages/themes/_components/color-picker.tsx
index f0c4477d0..6c91db375 100644
--- a/website/src/pages/themes/_components/color-picker.tsx
+++ b/website/src/pages/themes/_components/color-picker.tsx
@@ -1,5 +1,5 @@
 import React, { useId } from "react";
-import { TiPencil } from "react-icons/ti";
+import { IoMdClose } from "react-icons/io";
 import clsx from "clsx";
 import Select from "./select";
 
@@ -7,11 +7,12 @@ type ColorPickerProps = {
   label?: string;
   color: string;
   onColorChange: (color?: string) => void;
-  showColorName?: boolean;
+  onColorRemove?: () => void;
+  showSelectOptions?: boolean;
   className?: string;
 };
 
-const PLACEHOLDER_COLOR = "#000000";
+export const PLACEHOLDER_COLOR = "#000000";
 const DEFAULT_COLOR = undefined;
 enum ColorPickerOptions {
   NONE = "none",
@@ -22,7 +23,8 @@ const ColorPicker = ({
   label,
   color,
   onColorChange,
-  showColorName = false,
+  onColorRemove,
+  showSelectOptions = false,
   className,
 }: ColorPickerProps) => {
   const [isPickerOpen, setIsPickerOpen] = React.useState(false);
@@ -55,6 +57,10 @@ const ColorPicker = ({
     }
   };
 
+  const handleRemoveColor = () => {
+    if (onColorRemove) onColorRemove();
+  };
+
   const id = useId();
 
   return (
@@ -64,8 +70,8 @@ const ColorPicker = ({
           {label}
         </span>
       )}
-      <div className="flex items-center gap-2">
-        {showColorName && (
+      <div className="flex items-center justify-between gap-2">
+        {showSelectOptions && (
           <div className="flex items-center my-2 flex-1">
             <Select
               id={id}
@@ -81,57 +87,32 @@ const ColorPicker = ({
           </div>
         )}
         {colorOption === ColorPickerOptions.CUSTOM && (
-          <div
-            className={clsx(
-              "relative inline-flex rounded-full group/swatch flex-1",
-              {
-                "border-2 border-grayscale-300 p-0.5 cursor-pointer justify-between bg-grayscale-100":
-                  showColorName,
-              },
-            )}
-          >
+          <div className="relative inline-flex rounded-full group/swatch">
             <div className="flex items-center">
               <div className="relative">
+                {onColorRemove && (
+                  <div className="absolute -top-1 -right-1 z-20 group/remove">
+                    <button
+                      onClick={handleRemoveColor}
+                      className="w-4 h-4 text-white bg-red-500 flex justify-center items-center text-2xl font-bold rounded-full p-0.5 cursor-pointer opacity-0 group-hover/swatch:opacity-100 group-hover/remove:bg-red-800"
+                    >
+                      <IoMdClose />
+                    </button>
+                  </div>
+                )}
                 <div
                   className={clsx(
-                    "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-grayscale-300":
-                        !showColorName,
-                    },
-                    { "w-[30px] h-[30px] p-0.5": 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-grayscale-300",
+                    isPickerOpen
+                      ? "outline-currentColor"
+                      : "outline-grayscale-300",
                   )}
                   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/swatch:opacity-100 ${
-                      isPickerOpen ? "opacity-100" : ""
-                    }`}
-                  >
-                    <TiPencil />
-                  </div>
-                )}
               </div>
-              {showColorName && (
-                <span
-                  className={
-                    "text-sm font-medium text-grayscale-900 uppercase ml-2 cursor-pointer"
-                  }
-                >
-                  {color}
-                </span>
-              )}
             </div>
-            {showColorName && (
-              <div
-                className={`text-grayscale-400 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/swatch:border-currentColor ${
diff --git a/website/src/pages/themes/_components/color-scale-override-selector.tsx b/website/src/pages/themes/_components/color-scale-override-selector.tsx
index a3f42eeb2..61915fd8c 100644
--- a/website/src/pages/themes/_components/color-scale-override-selector.tsx
+++ b/website/src/pages/themes/_components/color-scale-override-selector.tsx
@@ -1,17 +1,17 @@
-import React, { useCallback } from "react";
-import ColorPicker from "./color-picker";
+import React, { useCallback, useEffect } from "react";
 import clsx from "clsx";
 import Toggle from "./toggle";
 import {
   defaultColorScale,
   usePreviewOptions,
 } from "../_providers/previewOptionsProvider";
+import ColorPickerList from "./color-picker-list";
 
 type ColorScaleOverrideSelectorProps = {
   id: string;
   label?: string;
-  value?: string | string[];
-  onChange: (value: string[] | undefined) => void;
+  colors?: string | string[];
+  onColorsChange: (colors: string[] | undefined) => void;
   hideDefaultToggle?: boolean;
   className?: string;
 };
@@ -19,15 +19,14 @@ type ColorScaleOverrideSelectorProps = {
 const ColorScaleOverrideSelector = ({
   id,
   label = "Color Scale",
-  value,
-  onChange,
+  colors,
+  onColorsChange,
   hideDefaultToggle = false,
   className,
 }: ColorScaleOverrideSelectorProps) => {
   const { colorScale, updateColorScale } = usePreviewOptions();
-  const hasCustomValue = Array.isArray(value);
-  const [initialCustomValue] = React.useState(
-    hasCustomValue ? value : undefined,
+  const [showCustomColors, setShowCustomColors] = React.useState(
+    () => !!colors && Array.isArray(colors),
   );
 
   const setColorScaleToDefault = useCallback(() => {
@@ -37,18 +36,15 @@ const ColorScaleOverrideSelector = ({
   }, [colorScale, updateColorScale]);
 
   const onCheckboxChange = (isChecked) => {
-    if (isChecked) {
-      onChange(initialCustomValue);
-    } else {
-      onChange(undefined);
+    setShowCustomColors(isChecked);
+    if (!isChecked) {
+      onColorsChange(undefined);
     }
     setColorScaleToDefault();
   };
 
-  const handleColorChange = (newColor, index) => {
-    const newValue = [...(value as string[])];
-    newValue[index] = newColor;
-    onChange(newValue);
+  const handleColorsChange = (newColors) => {
+    onColorsChange(newColors);
     setColorScaleToDefault();
   };
 
@@ -59,22 +55,14 @@ const ColorScaleOverrideSelector = ({
         <Toggle
           id={id}
           label="Use custom color scale"
-          checked={hasCustomValue}
+          checked={showCustomColors}
           onChange={onCheckboxChange}
           className="mb-3"
           size="sm"
         />
       )}
-      {hasCustomValue && (
-        <div className="flex flex-wrap gap-2 mt-3">
-          {value.map((color, i) => (
-            <ColorPicker
-              key={i}
-              color={color}
-              onColorChange={(newColor) => handleColorChange(newColor, i)}
-            />
-          ))}
-        </div>
+      {showCustomColors && typeof colors !== "string" && (
+        <ColorPickerList colors={colors} onColorsChange={handleColorsChange} />
       )}
     </label>
   );
diff --git a/website/src/pages/themes/_components/control.tsx b/website/src/pages/themes/_components/control.tsx
index 1ad0690a8..e45a8fc1c 100644
--- a/website/src/pages/themes/_components/control.tsx
+++ b/website/src/pages/themes/_components/control.tsx
@@ -23,16 +23,6 @@ type ControlProps = {
 
 const Control = ({ type, control, className }: ControlProps) => {
   const { baseTheme, customThemeConfig, updateCustomThemeConfig } = useTheme();
-  const handleColorChange = ({
-    newColor,
-    index,
-    colorScale,
-  }: ColorChangeArgs) => {
-    const updatedColors = customThemeConfig?.palette?.[colorScale]?.map(
-      (color, i) => (i === index ? newColor : color),
-    );
-    updateCustomThemeConfig(`palette.${colorScale}`, updatedColors);
-  };
 
   const handleChange = (newValue) => {
     updateCustomThemeConfig(control.path, newValue);
@@ -78,8 +68,7 @@ const Control = ({ type, control, className }: ControlProps) => {
           label={control.label}
           value={control.value}
           palette={customThemeConfig?.palette}
-          colorScaleType={control.colorScaleType}
-          onColorChange={handleColorChange}
+          onColorsChange={handleChange}
           className="my-4"
         />
       );
@@ -140,8 +129,8 @@ const Control = ({ type, control, className }: ControlProps) => {
         <ColorScaleOverrideSelector
           id={id}
           label={control.label}
-          value={configValue as string}
-          onChange={handleChange}
+          colors={configValue as string}
+          onColorsChange={handleChange}
           className={className}
           hideDefaultToggle={control.hideDefaultToggle}
         />
@@ -162,7 +151,7 @@ const Control = ({ type, control, className }: ControlProps) => {
           color={configValue as string}
           onColorChange={handleChange}
           className={className}
-          showColorName
+          showSelectOptions
         />
       );
     default:
diff --git a/website/src/pages/themes/_config/index.tsx b/website/src/pages/themes/_config/index.tsx
index 6ffa8a868..2b5c896f1 100644
--- a/website/src/pages/themes/_config/index.tsx
+++ b/website/src/pages/themes/_config/index.tsx
@@ -14,8 +14,8 @@ export type ControlConfig = {
     }
   | {
       type: "colorPalette";
-      colorScaleType: string;
       value: string;
+      path: string | string[];
     }
   | {
       type: "colorScale";
diff --git a/website/src/pages/themes/_config/palette.tsx b/website/src/pages/themes/_config/palette.tsx
index ac4e8a385..b2879b579 100644
--- a/website/src/pages/themes/_config/palette.tsx
+++ b/website/src/pages/themes/_config/palette.tsx
@@ -36,8 +36,8 @@ const paletteOptionsConfig: OptionsPanelConfig = {
       controls: colorScaleOptions.map((option) => ({
         type: "colorPalette",
         label: option.label,
-        colorScaleType: option.value,
         value: option.value,
+        path: `palette.${option.value}`,
       })),
     },
   ],

From 1078fdc560c761e3d97a06a54592761765c86caf Mon Sep 17 00:00:00 2001
From: Stef Williams <ramenhog@gmail.com>
Date: Fri, 10 Jan 2025 11:37:28 -0500
Subject: [PATCH 24/30] feat(theme-builder): improve toggle accessibility
 (#3029)

---
 .../color-scale-override-selector.tsx         |  2 +-
 .../src/pages/themes/_components/toggle.tsx   | 45 ++++++++++---------
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/website/src/pages/themes/_components/color-scale-override-selector.tsx b/website/src/pages/themes/_components/color-scale-override-selector.tsx
index 61915fd8c..b1b06a51c 100644
--- a/website/src/pages/themes/_components/color-scale-override-selector.tsx
+++ b/website/src/pages/themes/_components/color-scale-override-selector.tsx
@@ -58,7 +58,7 @@ const ColorScaleOverrideSelector = ({
           checked={showCustomColors}
           onChange={onCheckboxChange}
           className="mb-3"
-          size="sm"
+          size="xs"
         />
       )}
       {showCustomColors && typeof colors !== "string" && (
diff --git a/website/src/pages/themes/_components/toggle.tsx b/website/src/pages/themes/_components/toggle.tsx
index 24d0fa5ce..e7a92ad51 100644
--- a/website/src/pages/themes/_components/toggle.tsx
+++ b/website/src/pages/themes/_components/toggle.tsx
@@ -18,37 +18,38 @@ const Toggle = ({
   className,
   size = "md",
 }: ToggleProps) => {
-  const handleChange = () => {
+  const handleToggle = () => {
     onChange(!checked);
   };
 
   const labelSizeClasses = size === "md" ? "font-bold" : "font-medium";
 
   return (
-    <label
-      htmlFor={id}
-      className={clsx(
-        "flex justify-between items-center cursor-pointer",
-        className,
-      )}
-    >
-      <span className={clsx("text-sm", labelSizeClasses)}>{label}</span>
-      <input
+    <div className={clsx("flex justify-between items-center", className)}>
+      <label className={clsx("text-sm", labelSizeClasses)}>{label}</label>
+      <button
+        type="button"
         id={id}
-        type="checkbox"
-        checked={checked}
-        onChange={handleChange}
-        className="sr-only peer"
-      />
-      <div
+        role="switch"
+        aria-checked={checked}
+        onClick={handleToggle}
         className={clsx(
-          "relative bg-grayscale-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-grayscale-300 after:border after:rounded-full after:transition-all peer-checked:bg-blue-800",
-          size === "xs" && "w-7 h-4 after:h-3 after:w-3",
-          size === "sm" && "w-9 h-5 after:h-4 after:w-4",
-          size === "md" && "w-11 h-6 after:h-5 after:w-5",
+          "group flex p-0.5 rounded-full bg-grayscale-300 transition-colors duration-200 ease-in-out overflow-hidden aria-checked:bg-blue-800 cursor-pointer",
+          size === "xs" && "w-7 h-4",
+          size === "sm" && "w-9 h-5",
+          size === "md" && "w-11 h-6",
         )}
-      ></div>
-    </label>
+      >
+        <span
+          className={clsx(
+            "rounded-full bg-white transition-transform duration-200 ease-in-out group-aria-checked:translate-x-full",
+            size === "xs" && "h-3 w-3",
+            size === "sm" && "h-4 w-4",
+            size === "md" && "h-5 w-5",
+          )}
+        ></span>
+      </button>
+    </div>
   );
 };
 

From b81e09cea29d147047739487d03bd0ea20c769f2 Mon Sep 17 00:00:00 2001
From: Stef Williams <ramenhog@gmail.com>
Date: Mon, 13 Jan 2025 15:16:51 -0500
Subject: [PATCH 25/30] feat(theme-builder): keep config in local storage
 (#3032)

---
 website/src/hooks/useLocalStorage.tsx         | 26 +++++++++++++++++++
 .../pages/themes/_providers/themeProvider.tsx | 21 +++++++++++----
 2 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 website/src/hooks/useLocalStorage.tsx

diff --git a/website/src/hooks/useLocalStorage.tsx b/website/src/hooks/useLocalStorage.tsx
new file mode 100644
index 000000000..ce95d0451
--- /dev/null
+++ b/website/src/hooks/useLocalStorage.tsx
@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+export const useLocalStorage = (key: string, initialValue: any) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    if (typeof window === "undefined") return initialValue;
+
+    try {
+      const item = localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      try {
+        localStorage.setItem(key, JSON.stringify(storedValue));
+      } catch (error) {
+        console.error("Error saving to localStorage", error);
+      }
+    }
+  }, [storedValue, key]);
+
+  return [storedValue, setStoredValue];
+};
diff --git a/website/src/pages/themes/_providers/themeProvider.tsx b/website/src/pages/themes/_providers/themeProvider.tsx
index 7c730b4d6..1cc9aa65c 100644
--- a/website/src/pages/themes/_providers/themeProvider.tsx
+++ b/website/src/pages/themes/_providers/themeProvider.tsx
@@ -1,6 +1,7 @@
 import React, { createContext, useCallback, useContext } from "react";
 import { VictoryTheme, VictoryThemeDefinition } from "victory";
 import { setNestedConfigValue } from "../_utils";
+import { useLocalStorage } from "@site/src/hooks/useLocalStorage";
 
 export type ThemeOption = {
   name: string;
@@ -22,12 +23,20 @@ export const themes: ThemeOption[] = [
 
 const defaultTheme = themes[0];
 
+const localStorageCustomConfigKey = "customThemeConfig";
+const localStorageBaseThemeKey = "baseTheme";
+
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 export const ThemeProvider = ({ children }) => {
-  const [baseTheme, setBaseTheme] = React.useState<ThemeOption>(defaultTheme);
-  const [customThemeConfig, setCustomThemeConfig] =
-    React.useState<VictoryThemeDefinition>(defaultTheme.config);
+  const [baseTheme, setBaseTheme] = useLocalStorage(
+    localStorageBaseThemeKey,
+    defaultTheme,
+  );
+  const [customThemeConfig, setCustomThemeConfig] = useLocalStorage(
+    localStorageCustomConfigKey,
+    defaultTheme.config,
+  );
 
   const onBaseThemeSelect = (themeName?: string) => {
     const theme = themes.find((t) => t.name === themeName);
@@ -36,7 +45,9 @@ export const ThemeProvider = ({ children }) => {
       setCustomThemeConfig(defaultTheme.config);
     } else {
       setBaseTheme(theme);
-      setCustomThemeConfig({ ...theme?.config });
+      if (theme.name !== "Custom") {
+        setCustomThemeConfig({ ...theme?.config });
+      }
     }
   };
 
@@ -50,7 +61,7 @@ export const ThemeProvider = ({ children }) => {
       );
       setCustomThemeConfig(updatedConfig);
     },
-    [customThemeConfig],
+    [customThemeConfig, setCustomThemeConfig],
   );
 
   return (

From 70336022ea6ab80f83754df574b67a7e18027107 Mon Sep 17 00:00:00 2001
From: Stef Williams <ramenhog@gmail.com>
Date: Mon, 13 Jan 2025 15:17:03 -0500
Subject: [PATCH 26/30] feat(theme-builder): default chart + axis type (#3035)

---
 .../pages/themes/_components/chart-panel.tsx  | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/website/src/pages/themes/_components/chart-panel.tsx b/website/src/pages/themes/_components/chart-panel.tsx
index fddbf81ca..ae7924bb1 100644
--- a/website/src/pages/themes/_components/chart-panel.tsx
+++ b/website/src/pages/themes/_components/chart-panel.tsx
@@ -14,28 +14,36 @@ const ChartPanel = ({
 }: ChartPanelProps) => {
   const [chartType, setChartType] = React.useState(Object.keys(types)[0]);
   const { setExampleContent } = usePreviewOptions();
-  const selectOptions = Object.keys(types).map((key) => ({
-    label: types[key].label,
-    value: key,
-  }));
+
+  useEffect(() => {
+    const newChartType = Object.keys(types)[0];
+    setChartType((prevChartType) =>
+      prevChartType !== newChartType ? newChartType : prevChartType,
+    );
+  }, [types]);
+
+  useEffect(() => {
+    const examples = types[chartType]?.content ?? [];
+    setExampleContent(examples);
+  }, [types, chartType, setExampleContent]);
+
   const options = useMemo(
-    () => [
-      { label: `Select ${selectLabel.toLowerCase()}`, value: "" },
-      ...selectOptions,
-    ],
-    [selectOptions, selectLabel],
+    () =>
+      Object.keys(types).map((key) => ({
+        label: types[key].label,
+        value: key,
+      })),
+    [types],
+  );
+  const controls = useMemo(
+    () => types[chartType]?.controls || [],
+    [types, chartType],
   );
-  const controls = types[chartType]?.controls || [];
 
   const onChartTypeChange = (newValue: string) => {
     setChartType(newValue);
   };
 
-  useEffect(() => {
-    const examples = types[chartType]?.content || [];
-    setExampleContent(examples);
-  }, [chartType, setExampleContent, types]);
-
   return (
     <>
       <PanelHeader title={title} description={description} />

From dc1c31eefaa25977ecee516576658b6a22b6193e Mon Sep 17 00:00:00 2001
From: Stef Williams <ramenhog@gmail.com>
Date: Thu, 16 Jan 2025 16:05:09 -0500
Subject: [PATCH 27/30] feat(theme-builder): code editor (#3037)

---
 pnpm-lock.yaml                                |  37 ++++++
 website/package.json                          |   3 +-
 website/src/css/custom.css                    |   9 ++
 .../pages/themes/_components/accordion.tsx    |   4 +-
 .../src/pages/themes/_components/alert.tsx    | 119 +++++++++++++++++
 .../themes/_components/base-theme-panel.tsx   |  42 ++++--
 website/src/pages/themes/_components/card.tsx |  15 +++
 .../pages/themes/_components/chart-panel.tsx  |   1 -
 .../pages/themes/_components/code-panel.tsx   |  98 ++++++++++++++
 .../themes/_components/color-picker-list.tsx  |   6 +-
 .../pages/themes/_components/color-picker.tsx |  13 +-
 .../color-scale-override-selector.tsx         |   8 +-
 .../src/pages/themes/_components/control.tsx  |   5 +-
 .../pages/themes/_components/export-panel.tsx |   2 +-
 website/src/pages/themes/_components/main.tsx |  34 +++++
 .../pages/themes/_components/panel-header.tsx |   4 +-
 .../src/pages/themes/_components/select.tsx   |   9 +-
 .../themes/_components/sideNavButton.tsx      |  47 +++++++
 .../src/pages/themes/_components/sidenav.tsx  | 123 +++++++++---------
 .../src/pages/themes/_components/slider.tsx   |  58 +++++----
 .../_components/theme-preview/options.tsx     |   6 +-
 .../src/pages/themes/_components/toggle.tsx   |  10 +-
 .../pages/themes/_providers/alertProvider.tsx |  48 +++++++
 .../themes/_providers/sideNavProvider.tsx     |  32 +++++
 .../pages/themes/_providers/themeProvider.tsx |  55 ++++++--
 website/src/pages/themes/_utils.ts            |   4 +
 website/src/pages/themes/index.tsx            |  51 ++------
 website/tailwind.config.ts                    |  10 +-
 28 files changed, 672 insertions(+), 181 deletions(-)
 create mode 100644 website/src/pages/themes/_components/alert.tsx
 create mode 100644 website/src/pages/themes/_components/card.tsx
 create mode 100644 website/src/pages/themes/_components/code-panel.tsx
 create mode 100644 website/src/pages/themes/_components/main.tsx
 create mode 100644 website/src/pages/themes/_components/sideNavButton.tsx
 create mode 100644 website/src/pages/themes/_providers/alertProvider.tsx
 create mode 100644 website/src/pages/themes/_providers/sideNavProvider.tsx

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 23624e32d..960c8e366 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1157,6 +1157,9 @@ importers:
       '@mdx-js/react':
         specifier: ^3.0.0
         version: 3.1.0(@types/react@18.0.15)(react@18.2.0)
+      '@monaco-editor/react':
+        specifier: ^4.6.0
+        version: 4.6.0(monaco-editor@0.52.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       axios:
         specifier: ^1.7.7
         version: 1.7.7
@@ -3492,6 +3495,18 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
+  '@monaco-editor/loader@1.4.0':
+    resolution: {integrity: sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==}
+    peerDependencies:
+      monaco-editor: '>= 0.21.0 < 1'
+
+  '@monaco-editor/react@4.6.0':
+    resolution: {integrity: sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==}
+    peerDependencies:
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+
   '@napi-rs/wasm-runtime@0.2.5':
     resolution: {integrity: sha512-kwUxR7J9WLutBbulqg1dfOrMTwhMdXLdcGUhcbCcGwnPLt3gz19uHVdwH1syKVDbE022ZS2vZxOWflFLS0YTjw==}
 
@@ -9081,6 +9096,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  monaco-editor@0.52.2:
+    resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
+
   mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
@@ -10902,6 +10920,9 @@ packages:
   starts-with@1.0.2:
     resolution: {integrity: sha512-QUw5X+IMTGDm1nrdowEdDaA0MNiUmRlQFwpTTXmhuPKQc+7b0h8fOHtlt1zZqcEK5x1Fsitrobo7KEusc+d1rg==}
 
+  state-local@1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+
   state-toggle@1.0.3:
     resolution: {integrity: sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==}
 
@@ -16526,6 +16547,18 @@ snapshots:
       '@types/react': 18.0.15
       react: 18.2.0
 
+  '@monaco-editor/loader@1.4.0(monaco-editor@0.52.2)':
+    dependencies:
+      monaco-editor: 0.52.2
+      state-local: 1.0.7
+
+  '@monaco-editor/react@4.6.0(monaco-editor@0.52.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@monaco-editor/loader': 1.4.0(monaco-editor@0.52.2)
+      monaco-editor: 0.52.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   '@napi-rs/wasm-runtime@0.2.5':
     dependencies:
       '@emnapi/core': 1.3.1
@@ -24060,6 +24093,8 @@ snapshots:
 
   mkdirp@1.0.4: {}
 
+  monaco-editor@0.52.2: {}
+
   mrmime@2.0.0: {}
 
   ms@2.0.0: {}
@@ -26185,6 +26220,8 @@ snapshots:
 
   starts-with@1.0.2: {}
 
+  state-local@1.0.7: {}
+
   state-toggle@1.0.3: {}
 
   statuses@1.5.0: {}
diff --git a/website/package.json b/website/package.json
index 2717a857f..7d79437ff 100644
--- a/website/package.json
+++ b/website/package.json
@@ -25,6 +25,7 @@
     "@docusaurus/theme-live-codeblock": "^3.5.2",
     "@easyops-cn/docusaurus-search-local": "^0.44.5",
     "@mdx-js/react": "^3.0.0",
+    "@monaco-editor/react": "^4.6.0",
     "axios": "^1.7.7",
     "clsx": "^2.0.0",
     "date-fns": "^3.6.0",
@@ -41,13 +42,13 @@
     "@docusaurus/module-type-aliases": "^3.5.2",
     "@docusaurus/tsconfig": "^3.5.2",
     "@docusaurus/types": "^3.5.2",
+    "@heroicons/react": "^2.2.0",
     "@types/react": "^18.0.0",
     "autoprefixer": "^10.4.20",
     "d3-array": "^2.4.0",
     "d3-scale": "^3.2.1",
     "d3-time": "^1.1.0",
     "find-cache-dir": "5.0.0",
-    "@heroicons/react": "^2.2.0",
     "mdast-util-from-markdown": "^2.0.1",
     "postcss": "^8.4.38",
     "prismjs": "^1.29.0",
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 2ec7e827e..798ce8e19 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -112,5 +112,14 @@ body {
   .theme-builder * {
     border-width: 0;
     border-style: solid;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-family: Inter, Helvetica, Arial, sans-serif;
+    }
   }
 }
diff --git a/website/src/pages/themes/_components/accordion.tsx b/website/src/pages/themes/_components/accordion.tsx
index e583509ab..a03180b81 100644
--- a/website/src/pages/themes/_components/accordion.tsx
+++ b/website/src/pages/themes/_components/accordion.tsx
@@ -7,6 +7,7 @@ type AccordionProps = {
   title: string;
   children: React.ReactNode;
   defaultOpen?: boolean;
+  className?: string;
 };
 
 const Accordion = ({
@@ -14,6 +15,7 @@ const Accordion = ({
   title,
   children,
   defaultOpen = false,
+  className,
 }: AccordionProps) => {
   const [isOpen, setIsOpen] = React.useState(defaultOpen);
 
@@ -22,7 +24,7 @@ const Accordion = ({
   };
 
   return (
-    <div id={id} className="group">
+    <div id={id} className={clsx("group", className)}>
       <h2 id={`${id}-heading`} className="mb-0">
         <button
           type="button"
diff --git a/website/src/pages/themes/_components/alert.tsx b/website/src/pages/themes/_components/alert.tsx
new file mode 100644
index 000000000..45e994f94
--- /dev/null
+++ b/website/src/pages/themes/_components/alert.tsx
@@ -0,0 +1,119 @@
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { IoClose } from "react-icons/io5";
+import {
+  FaCircleCheck,
+  FaCircleInfo,
+  FaCircleXmark,
+  FaTriangleExclamation,
+} from "react-icons/fa6";
+
+export enum AlertType {
+  SUCCESS = "success",
+  ERROR = "error",
+  INFO = "info",
+  WARNING = "warning",
+}
+
+export type AlertProps = {
+  id: string;
+  type: AlertType;
+  title: string;
+  message?: string;
+  duration?: number;
+};
+
+type AlertComponentProps = Omit<AlertProps, "id"> & {
+  onClose: () => void;
+};
+
+const alertStyles: Record<
+  AlertComponentProps["type"],
+  {
+    iconStyle: string;
+    typeStyle: string;
+    buttonStyle: string;
+    Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  }
+> = {
+  success: {
+    iconStyle: "text-green-400",
+    typeStyle: "bg-green-50 text-green-800",
+    buttonStyle: "hover:bg-green-100",
+    Icon: FaCircleCheck,
+  },
+  error: {
+    iconStyle: "text-red-400",
+    typeStyle: "bg-red-50 text-red-800",
+    buttonStyle: "hover:bg-red-100",
+    Icon: FaCircleXmark,
+  },
+  info: {
+    iconStyle: "text-blue-400",
+    typeStyle: "bg-blue-50 text-blue-800",
+    buttonStyle: "hover:bg-blue-100",
+    Icon: FaCircleInfo,
+  },
+  warning: {
+    iconStyle: "text-yellow-400",
+    typeStyle: "bg-yellow-50 text-yellow-800",
+    buttonStyle: "hover:bg-yellow-100",
+    Icon: FaTriangleExclamation,
+  },
+};
+
+const DEFAULT_DURATION = 5000;
+
+const Alert = ({
+  type,
+  title,
+  message,
+  onClose,
+  duration = DEFAULT_DURATION,
+}: AlertComponentProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(true);
+
+    if (duration) {
+      const timer = setTimeout(() => setIsVisible(false), duration);
+      return () => clearTimeout(timer);
+    }
+  }, [onClose, duration]);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  const { Icon, typeStyle, iconStyle, buttonStyle } = alertStyles[type];
+
+  return (
+    <div
+      className={clsx(
+        "flex items-start p-4 mb-4 rounded shadow-md gap-3 min-w-[500px] transform transition-all duration-500",
+        typeStyle,
+        isVisible ? "translate-x-0 opacity-100" : "translate-x-full opacity-0",
+      )}
+      onTransitionEnd={() => !isVisible && onClose()}
+    >
+      <Icon className={clsx("pt-0.5 h-5 w-5", iconStyle)} />
+      <div className="flex-1">
+        <h4 className="text-sm font-medium m-0">{title}</h4>
+        {message && <p className="text-sm font-normal mt-2 mb-0">{message}</p>}
+      </div>
+      <button
+        onClick={handleClose}
+        className={clsx(
+          "bg-transparent border-none cursor-pointer p-1.5 -m-1.5 rounded-md",
+          iconStyle,
+          buttonStyle,
+        )}
+      >
+        <IoClose className="h-5 w-5" />
+      </button>
+    </div>
+  );
+};
+
+export default Alert;
diff --git a/website/src/pages/themes/_components/base-theme-panel.tsx b/website/src/pages/themes/_components/base-theme-panel.tsx
index bdbff9dda..96d621729 100644
--- a/website/src/pages/themes/_components/base-theme-panel.tsx
+++ b/website/src/pages/themes/_components/base-theme-panel.tsx
@@ -1,8 +1,12 @@
 import React from "react";
 import Select from "./select";
-import { themes, useTheme } from "../_providers/themeProvider";
+import { CUSTOM_THEME, themes, useTheme } from "../_providers/themeProvider";
 import { usePreviewOptions } from "../_providers/previewOptionsProvider";
 import PanelHeader from "./panel-header";
+import Card from "./card";
+import { codeItem } from "./sidenav";
+import { TiArrowRight } from "react-icons/ti";
+import { useSideNavContext } from "../_providers/sideNavProvider";
 
 const themeOptions = themes.map((theme) => ({
   label: theme.name,
@@ -12,25 +16,45 @@ const themeOptions = themes.map((theme) => ({
 const BaseThemePanel = () => {
   const { baseTheme, onBaseThemeSelect } = useTheme();
   const { resetPreviewOptions } = usePreviewOptions();
+  const { setActiveSideNavItem } = useSideNavContext();
 
   const handleThemeSelect = (themeName?: string) => {
     onBaseThemeSelect(themeName);
     resetPreviewOptions();
   };
 
+  const isCustomTheme = baseTheme?.name === CUSTOM_THEME.name;
+
   return (
     <>
       <PanelHeader
         title="Base Theme"
-        description="Select a theme to begin customizing."
-      />
-      <Select
-        id="theme-select"
-        value={baseTheme?.name || ""}
-        onChange={handleThemeSelect}
-        options={themeOptions}
-        label="Theme"
+        description='Select a theme to begin customizing. Choose from pre-defined themes or select "Custom" to import your own theme.'
       />
+      <Card>
+        <Select
+          id="theme-select"
+          value={baseTheme?.name || ""}
+          onChange={handleThemeSelect}
+          options={themeOptions}
+          label="Theme"
+        />
+      </Card>
+      {isCustomTheme && (
+        <Card className="mt-6">
+          <h3 className="text-sm font-bold mb-3">Theme Code</h3>
+          <p className="text-sm mb-3">
+            Extend the theme object to apply your own theme configuration. Any
+            modifications will change the base theme to &quot;Custom&quot;.
+          </p>
+          <button
+            onClick={() => setActiveSideNavItem(codeItem)}
+            className="text-blue-600 bg-transparent p-0 m-0 flex items-center cursor-pointer"
+          >
+            Theme Code <TiArrowRight className="h-4 w-4" />
+          </button>
+        </Card>
+      )}
     </>
   );
 };
diff --git a/website/src/pages/themes/_components/card.tsx b/website/src/pages/themes/_components/card.tsx
new file mode 100644
index 000000000..051119f3d
--- /dev/null
+++ b/website/src/pages/themes/_components/card.tsx
@@ -0,0 +1,15 @@
+import clsx from "clsx";
+import React from "react";
+
+type CardProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Card = ({ children, className }: CardProps) => {
+  return (
+    <div className={clsx("bg-white p-4 rounded-md", className)}>{children}</div>
+  );
+};
+
+export default Card;
diff --git a/website/src/pages/themes/_components/chart-panel.tsx b/website/src/pages/themes/_components/chart-panel.tsx
index ae7924bb1..326a59fa4 100644
--- a/website/src/pages/themes/_components/chart-panel.tsx
+++ b/website/src/pages/themes/_components/chart-panel.tsx
@@ -61,7 +61,6 @@ const ChartPanel = ({
             key={control.label + i}
             type={control.type}
             control={control}
-            className="my-4"
           />
         );
       })}
diff --git a/website/src/pages/themes/_components/code-panel.tsx b/website/src/pages/themes/_components/code-panel.tsx
new file mode 100644
index 000000000..196a9bf3e
--- /dev/null
+++ b/website/src/pages/themes/_components/code-panel.tsx
@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from "react";
+import Editor from "@monaco-editor/react";
+import { CUSTOM_THEME, useTheme } from "../_providers/themeProvider";
+import { stringifyWithoutQuotes } from "../_utils";
+import { Button } from "@site/src/components/button";
+import { useAlert } from "../_providers/alertProvider";
+import { AlertType } from "./alert";
+
+const EDITOR_OPTIONS = {
+  minimap: { enabled: false },
+  fontSize: 12,
+};
+
+const CodePanel = () => {
+  const { onBaseThemeSelect, customThemeConfig } = useTheme();
+  const { addAlert } = useAlert();
+  const [customTheme, setCustomTheme] = useState<string>(() =>
+    stringifyWithoutQuotes(customThemeConfig),
+  );
+
+  useEffect(() => {
+    setCustomTheme(stringifyWithoutQuotes(customThemeConfig));
+  }, [customThemeConfig]);
+
+  const handleCustomThemeChange = (value: string | undefined) => {
+    setCustomTheme(value || "");
+  };
+
+  const applyCustomTheme = () => {
+    try {
+      const parsedTheme = new Function(`return (${customTheme.trim()});`)();
+      if (typeof parsedTheme !== "object" || Array.isArray(parsedTheme)) {
+        addAlert({
+          type: AlertType.ERROR,
+          title: "Invalid theme structure.",
+          message: "Must be an object.",
+        });
+        return;
+      }
+      addAlert({
+        type: AlertType.SUCCESS,
+        title: "Changes applied successfully.",
+      });
+      onBaseThemeSelect(CUSTOM_THEME.name, parsedTheme);
+    } catch {
+      addAlert({
+        type: AlertType.ERROR,
+        title: "Invalid JavaScript object.",
+        message: "Please check your theme configuration.",
+      });
+    }
+  };
+
+  const handleEditorMount = (_, monaco) => {
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: false,
+      enableSchemaRequest: false,
+      schemas: [],
+    });
+  };
+
+  return (
+    <div className="max-w-screen-lg mx-auto p-10 w-full-panel flex-1 flex flex-col justify-start">
+      <h1 className="text-3xl">Theme Code</h1>
+      <p className="text-sm text-grayscale-400 mb-2">
+        You can <strong>import your code</strong> by pasting your custom theme
+        here or <strong>edit the existing theme</strong> configuration.
+      </p>
+      <div className="flex justify-between items-center mb-4 gap-4">
+        <p className="text-sm bg-yellow-100 text-yellow-800 py-0.5 px-1.5 m-0">
+          <code className="align-baseline font-bold bg-transparent">
+            `candlestick.style.labels.padding`
+          </code>{" "}
+          and{" "}
+          <code className="align-baseline font-bold bg-transparent">
+            `errorbar.borderWidth`
+          </code>{" "}
+          are required for proper theme functionality.
+        </p>
+        <Button onClick={applyCustomTheme} className="flex-shrink-0">
+          Apply Changes
+        </Button>
+      </div>
+      <div className="w-full flex-1 border rounded">
+        <Editor
+          height={650}
+          defaultLanguage="json"
+          theme="vs-dark"
+          value={customTheme}
+          onChange={handleCustomThemeChange}
+          onMount={handleEditorMount}
+          options={EDITOR_OPTIONS}
+        />
+      </div>
+    </div>
+  );
+};
+export default CodePanel;
diff --git a/website/src/pages/themes/_components/color-picker-list.tsx b/website/src/pages/themes/_components/color-picker-list.tsx
index a9e122cd9..9228ad6ad 100644
--- a/website/src/pages/themes/_components/color-picker-list.tsx
+++ b/website/src/pages/themes/_components/color-picker-list.tsx
@@ -35,7 +35,11 @@ const ColorPickerList = ({
 
   return (
     <div className={clsx("p-0 m-0", className)}>
-      {label && <span className="block mb-3 text-sm font-bold">{label}</span>}
+      {label && (
+        <span className="block mb-3 text-sm font-semibold text-gray-800">
+          {label}
+        </span>
+      )}
       <div className="flex flex-wrap gap-3">
         {colors.map((color, i) => (
           <ColorPicker
diff --git a/website/src/pages/themes/_components/color-picker.tsx b/website/src/pages/themes/_components/color-picker.tsx
index 6c91db375..51a89f122 100644
--- a/website/src/pages/themes/_components/color-picker.tsx
+++ b/website/src/pages/themes/_components/color-picker.tsx
@@ -64,15 +64,18 @@ const ColorPicker = ({
   const id = useId();
 
   return (
-    <label className={clsx("p-0 m-0", className)}>
+    <div className={clsx("p-0 m-0", className)}>
       {label && (
-        <span className="block mb-1 text-sm text-grayscale-900 dark:text-white font-bold">
+        <label
+          htmlFor={id}
+          className="block mb-1 text-sm font-semibold text-gray-800 dark:text-white"
+        >
           {label}
-        </span>
+        </label>
       )}
       <div className="flex items-center justify-between gap-2">
         {showSelectOptions && (
-          <div className="flex items-center my-2 flex-1">
+          <div className="flex items-center flex-1">
             <Select
               id={id}
               value={colorOption}
@@ -127,7 +130,7 @@ const ColorPicker = ({
           </div>
         )}
       </div>
-    </label>
+    </div>
   );
 };
 
diff --git a/website/src/pages/themes/_components/color-scale-override-selector.tsx b/website/src/pages/themes/_components/color-scale-override-selector.tsx
index b1b06a51c..75f8ff7c8 100644
--- a/website/src/pages/themes/_components/color-scale-override-selector.tsx
+++ b/website/src/pages/themes/_components/color-scale-override-selector.tsx
@@ -49,8 +49,10 @@ const ColorScaleOverrideSelector = ({
   };
 
   return (
-    <label className={clsx("p-0 m-0", className)}>
-      <span className="block mb-3 text-sm font-bold">{label}</span>
+    <div className={clsx("p-0 m-0", className)}>
+      <label htmlFor={id} className="block mb-3 text-sm font-bold">
+        {label}
+      </label>
       {!hideDefaultToggle && (
         <Toggle
           id={id}
@@ -64,7 +66,7 @@ const ColorScaleOverrideSelector = ({
       {showCustomColors && typeof colors !== "string" && (
         <ColorPickerList colors={colors} onColorsChange={handleColorsChange} />
       )}
-    </label>
+    </div>
   );
 };
 export default ColorScaleOverrideSelector;
diff --git a/website/src/pages/themes/_components/control.tsx b/website/src/pages/themes/_components/control.tsx
index e45a8fc1c..4444eb238 100644
--- a/website/src/pages/themes/_components/control.tsx
+++ b/website/src/pages/themes/_components/control.tsx
@@ -51,6 +51,7 @@ const Control = ({ type, control, className }: ControlProps) => {
           title={control.label}
           id={id}
           defaultOpen={control.defaultOpen}
+          className="!my-0"
         >
           {control.controls?.map((nestedControl, i) => (
             <Control
@@ -74,9 +75,9 @@ const Control = ({ type, control, className }: ControlProps) => {
       );
     case "section":
       return (
-        <section className="mb-8">
+        <section className="mb-6 bg-white p-4 rounded-md space-y-4">
           <div className="mb-4">
-            <h3 className="text-lg font-semibold text-secondary mb-0">
+            <h3 className="text-lg font-bold text-secondary mb-0 text-gray-800">
               {control.label}
             </h3>
             {control.description && (
diff --git a/website/src/pages/themes/_components/export-panel.tsx b/website/src/pages/themes/_components/export-panel.tsx
index f72769415..988b8699c 100644
--- a/website/src/pages/themes/_components/export-panel.tsx
+++ b/website/src/pages/themes/_components/export-panel.tsx
@@ -73,7 +73,7 @@ const ExportPanel = () => {
   };
 
   return (
-    <div className="max-w-screen-lg mx-auto p-10 w-export-panel">
+    <div className="max-w-screen-lg mx-auto p-10 w-full-panel">
       <h1 className="text-3xl">
         How to Use Your Exported Victory Theme Config
       </h1>
diff --git a/website/src/pages/themes/_components/main.tsx b/website/src/pages/themes/_components/main.tsx
new file mode 100644
index 000000000..7f556d248
--- /dev/null
+++ b/website/src/pages/themes/_components/main.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { useSideNavContext } from "../_providers/sideNavProvider";
+import { ThemePreview } from "./theme-preview";
+import BaseThemePanel from "./base-theme-panel";
+import ChartPanel from "./chart-panel";
+import OptionsPanel from "./options-panel";
+import ExportPanel from "./export-panel";
+import CodePanel from "./code-panel";
+
+const Main = () => {
+  const { activeSideNavItem } = useSideNavContext();
+
+  const isExportPanel = activeSideNavItem.panelType === "export";
+
+  if (isExportPanel) return <ExportPanel />;
+
+  if (activeSideNavItem.panelType === "code") return <CodePanel />;
+
+  return (
+    <>
+      <aside className="sticky top-[60px] h-theme-builder p-6 border-r border-grayscale-300 overflow-y-scroll w-[390px] bg-gray-100">
+        {activeSideNavItem.panelType === "theme" && <BaseThemePanel />}
+        {activeSideNavItem.panelType === "chart" && (
+          <ChartPanel config={activeSideNavItem.config} />
+        )}
+        {activeSideNavItem.panelType === "default" && (
+          <OptionsPanel config={activeSideNavItem.config} />
+        )}
+      </aside>
+      <ThemePreview />
+    </>
+  );
+};
+export default Main;
diff --git a/website/src/pages/themes/_components/panel-header.tsx b/website/src/pages/themes/_components/panel-header.tsx
index 4d82ff03c..5005f984b 100644
--- a/website/src/pages/themes/_components/panel-header.tsx
+++ b/website/src/pages/themes/_components/panel-header.tsx
@@ -8,7 +8,9 @@ type PanelHeaderProps = {
 const PanelHeader = ({ title, description }: PanelHeaderProps) => {
   return (
     <div className="mb-4">
-      {!!title && <h2 className="mb-0 text-xl font-bold">{title}</h2>}
+      {!!title && (
+        <h2 className="mb-0 text-xl font-bold text-gray-800">{title}</h2>
+      )}
       {!!description && (
         <p className="text-sm mt-1 text-grayscale-400">{description}</p>
       )}
diff --git a/website/src/pages/themes/_components/select.tsx b/website/src/pages/themes/_components/select.tsx
index 3394e81c3..69f9026e3 100644
--- a/website/src/pages/themes/_components/select.tsx
+++ b/website/src/pages/themes/_components/select.tsx
@@ -33,7 +33,7 @@ const Select = ({
     }
   };
 
-  const labelSizeClasses = size === "sm" ? "font-medium" : "font-bold";
+  const labelSizeClasses = size === "sm" ? "font-medium" : "font-semibold";
   const selectSizeClasses =
     size === "sm" ? "text-sm px-2 py-1.5" : "text-base p-2";
 
@@ -42,7 +42,10 @@ const Select = ({
       {label && (
         <label
           htmlFor={id}
-          className={clsx("block flex-1 my-1 text-sm", labelSizeClasses)}
+          className={clsx(
+            "block flex-1 mb-1 text-sm text-gray-800",
+            labelSizeClasses,
+          )}
         >
           {label}
         </label>
@@ -52,7 +55,7 @@ const Select = ({
         value={value}
         onChange={handleChange}
         className={clsx(
-          "w-full border border-grayscale-300 bg-white appearance-none rounded-md bg-select-chevron bg-no-repeat bg-[right_8px_center] bg-[length:16px] flex-1",
+          "w-full border border-grayscale-300 bg-white appearance-none rounded-md bg-select-chevron bg-no-repeat bg-[right_8px_center] bg-[length:16px] flex-1 font-sans text-sm p-2.5",
           selectSizeClasses,
         )}
       >
diff --git a/website/src/pages/themes/_components/sideNavButton.tsx b/website/src/pages/themes/_components/sideNavButton.tsx
new file mode 100644
index 000000000..18ff2bd3c
--- /dev/null
+++ b/website/src/pages/themes/_components/sideNavButton.tsx
@@ -0,0 +1,47 @@
+import clsx from "clsx";
+import React from "react";
+import { NavItem } from "./sidenav";
+
+type SideNavButtonProps = {
+  item: NavItem;
+  Icon: React.ElementType;
+  isActive: boolean;
+  isDisabled?: boolean;
+  onClick: () => void;
+};
+
+const SideNavButton = ({
+  item,
+  Icon,
+  isActive,
+  isDisabled = false,
+  onClick,
+}: SideNavButtonProps) => {
+  return (
+    <button
+      key={item.title}
+      aria-current={isActive ? "page" : undefined}
+      onClick={onClick}
+      disabled={isDisabled}
+      className={clsx(
+        "group flex w-full flex-col items-center rounded-md p-3 text-xs font-semibold cursor-pointer",
+        isActive
+          ? "text-white bg-gray-800"
+          : "text-grayscale-300 hover:text-white disabled:text-grayscale-800 disabled:cursor-not-allowed bg-transparent hover:bg-gray-900",
+      )}
+    >
+      <Icon
+        aria-hidden="true"
+        className={clsx(
+          isActive
+            ? "text-orange-100"
+            : "text-grayscale-300 group-hover:text-white group-disabled:text-grayscale-800",
+          "size-6",
+        )}
+      />
+      <span className="mt-2">{item.title}</span>
+    </button>
+  );
+};
+
+export default SideNavButton;
diff --git a/website/src/pages/themes/_components/sidenav.tsx b/website/src/pages/themes/_components/sidenav.tsx
index b3072287a..56f9aa993 100644
--- a/website/src/pages/themes/_components/sidenav.tsx
+++ b/website/src/pages/themes/_components/sidenav.tsx
@@ -27,14 +27,18 @@ import {
   PieExamples,
   StackExamples,
 } from "./examples";
+import { HiOutlineCode } from "react-icons/hi";
+import SideNavButton from "./sideNavButton";
+import { useSideNavContext } from "../_providers/sideNavProvider";
+import { TbAxisX } from "react-icons/tb";
 
-type NavItem = {
+export type NavItem = {
   title: string;
-  icon: React.ElementType;
+  Icon: React.ElementType;
   content: ExampleConfig[];
 } & (
   | {
-      panelType: "theme" | "export";
+      panelType: "theme" | "export" | "code";
     }
   | {
       panelType: "default";
@@ -46,119 +50,116 @@ type NavItem = {
     }
 );
 
-type SideNavProps = {
-  activeItem: NavItem;
-  onItemSelect: (item: NavItem) => void;
-};
-
 export const NAV_ITEMS: NavItem[] = [
   {
     title: "Base Theme",
-    icon: CircleStackIcon,
+    Icon: CircleStackIcon,
     panelType: "theme",
     content: AllExamples,
   },
   {
     title: "Color Palette",
-    icon: SwatchIcon,
+    Icon: SwatchIcon,
     config: paletteOptionsConfig,
     panelType: "default",
     content: [...StackExamples, ...GroupExamples, ...PieExamples],
   },
   {
     title: "Global Options",
-    icon: GlobeAmericasIcon,
+    Icon: GlobeAmericasIcon,
     config: globalOptionsConfig,
     panelType: "default",
     content: AllExamples,
   },
   {
     title: "Axis Options",
-    icon: AdjustmentsVerticalIcon,
+    Icon: TbAxisX,
     config: axisOptionsConfig,
     panelType: "chart",
     content: [],
   },
   {
     title: "Chart Options",
-    icon: AdjustmentsVerticalIcon,
+    Icon: AdjustmentsVerticalIcon,
     config: chartOptionsConfig,
     panelType: "chart",
     content: [],
   },
 ];
 
-const exportItem: NavItem = {
-  title: "Export",
-  icon: TiExportOutline,
+export const codeItem: NavItem = {
+  title: "Theme Code",
+  Icon: HiOutlineCode,
+  panelType: "code",
+  content: [],
+};
+
+export const exportItem: NavItem = {
+  title: "Export Theme",
+  Icon: TiExportOutline,
   panelType: "export",
   content: [],
 };
 
-const SideNav = ({ activeItem, onItemSelect }: SideNavProps) => {
+const SideNav = () => {
   const { baseTheme } = useTheme();
+  const { activeSideNavItem, setActiveSideNavItem } = useSideNavContext();
   const { setExampleContent, updateColorScale } = usePreviewOptions();
   const isBaseThemeSelected = !!baseTheme;
 
   const handleItemSelect = (item: NavItem) => {
-    onItemSelect(item);
+    setActiveSideNavItem(item);
     updateColorScale(defaultColorScale);
     setExampleContent(item.content);
   };
 
-  const isExportItemActive = activeItem.title === exportItem.title;
+  const isExportItemActive = activeSideNavItem.title === exportItem.title;
+  const isCodeItemActive = activeSideNavItem.title === codeItem.title;
 
   return (
-    <aside className="sticky top-[60px] h-theme-builder w-[100px] overflow-y-auto bg-black py-4 flex-none flex flex-col justify-between px-2">
-      <div className="w-full space-y-1 px-2">
-        {NAV_ITEMS.map((item) => {
-          const isActive = item.title === activeItem.title;
+    <aside className="sticky top-[60px] h-theme-builder w-[100px] overflow-y-auto bg-black py-2 flex-none flex flex-col justify-between px-2">
+      <div className="w-full space-y-1">
+        {NAV_ITEMS.map((item, i) => {
+          const isActive = item.title === activeSideNavItem.title;
           const isDisabled =
             item.title !== "Base Theme" && !isBaseThemeSelected;
           return (
-            <button
-              key={item.title}
-              aria-current={isActive ? "page" : undefined}
+            <SideNavButton
+              key={item.title + i}
+              item={item}
+              Icon={item.Icon}
+              isActive={isActive}
+              isDisabled={isDisabled}
               onClick={() => handleItemSelect(item)}
-              disabled={isDisabled}
-              className={clsx(
-                "group flex w-full flex-col items-center rounded-md p-3 text-xs font-bold cursor-pointer bg-transparent",
-                isActive
-                  ? "text-orange-100"
-                  : "text-grayscale-300 hover:text-white disabled:text-grayscale-800 disabled:cursor-not-allowed",
-              )}
-            >
-              <item.icon
-                aria-hidden="true"
-                className={clsx(
-                  isActive
-                    ? "text-orange-100"
-                    : "text-grayscale-300 group-hover:text-white group-disabled:text-grayscale-800",
-                  "size-6",
-                )}
-              />
-              <span className="mt-2">{item.title}</span>
-            </button>
+            />
           );
         })}
       </div>
-      <button
-        aria-current={isExportItemActive ? "page" : undefined}
-        onClick={() => handleItemSelect(exportItem)}
-        disabled={!isBaseThemeSelected}
-        className={clsx(
-          "group flex w-full flex-col items-center rounded-md p-3 text-xs font-bold cursor-pointer text-theme-2 hover:underline disabled:bg-grayscale-400 disabled:text-grayscale-800 disabled:cursor-not-allowed",
-          isExportItemActive
-            ? "bg-theme-1/100"
-            : "bg-theme-1/80 hover:bg-theme-1/100",
-        )}
-      >
-        <exportItem.icon
-          aria-hidden="true"
-          className={"size-6 text-theme-2 group-disabled:text-grayscale-800"}
+      <div className="w-full space-y-4">
+        <SideNavButton
+          item={codeItem}
+          Icon={codeItem.Icon}
+          isActive={isCodeItemActive}
+          onClick={() => handleItemSelect(codeItem)}
         />
-        <span className="mt-2">{exportItem.title}</span>
-      </button>
+        <button
+          aria-current={isExportItemActive ? "page" : undefined}
+          onClick={() => handleItemSelect(exportItem)}
+          disabled={!isBaseThemeSelected}
+          className={clsx(
+            "group flex w-full flex-col items-center rounded-md p-3 text-xs font-bold cursor-pointer text-theme-2 hover:underline disabled:bg-grayscale-400 disabled:text-grayscale-800 disabled:cursor-not-allowed",
+            isExportItemActive
+              ? "bg-theme-1/100"
+              : "bg-theme-1/80 hover:bg-theme-1/100",
+          )}
+        >
+          <exportItem.Icon
+            aria-hidden="true"
+            className={"size-6 group-disabled:text-grayscale-800"}
+          />
+          <span className="mt-2">{exportItem.title}</span>
+        </button>
+      </div>
     </aside>
   );
 };
diff --git a/website/src/pages/themes/_components/slider.tsx b/website/src/pages/themes/_components/slider.tsx
index 7ff4c29b3..3592d7e47 100644
--- a/website/src/pages/themes/_components/slider.tsx
+++ b/website/src/pages/themes/_components/slider.tsx
@@ -49,48 +49,58 @@ const Slider = ({
     onDefaultToggle(isChecked);
   };
 
+  const isUsingDefault = value === undefined;
+
   return (
-    <fieldset className={clsx("relative py-2 px-0 m-0", className)}>
+    <fieldset className={clsx("relative p-0 m-0", className)}>
       <label
         htmlFor={id}
-        className="flex justify-between items-center mb-2 text-sm font-bold text-grayscale-900"
+        className="flex justify-between items-center mb-2 text-sm font-semibold text-gray-800"
       >
         <span>{label}</span>
       </label>
       <Toggle
         id={`${id}-toggle`}
-        label="Use default value"
+        label="Use default"
         checked={value === undefined}
         onChange={handleToggle}
         size="xs"
-        className="mb-2"
       />
-      {value !== undefined && (
-        <div className="flex items-center gap-4">
+      <div
+        className={clsx(
+          "flex items-center gap-4 mt-2",
+          isUsingDefault && "opacity-30",
+        )}
+      >
+        <input
+          id={id}
+          type="range"
+          value={isUsingDefault ? "" : value}
+          onChange={handleSliderChange}
+          className={clsx(
+            "w-full h-2 bg-grayscale-300 rounded-lg appearance-none accent-blue-500 m-0",
+            !isUsingDefault && "cursor-pointer",
+          )}
+          min={min}
+          max={max}
+          step={step}
+          disabled={isUsingDefault}
+        />
+        <div className="flex items-center">
           <input
-            id={id}
-            type="range"
-            value={value}
-            onChange={handleSliderChange}
-            className="w-full h-2 bg-grayscale-300 rounded-lg appearance-none cursor-pointer accent-blue-800 m-0"
+            id={`${id}-number-input`}
+            type="number"
+            value={isUsingDefault ? "" : value}
+            onChange={handleNumberChange}
+            className="px-2 py-1 text-sm border border-grayscale-300 rounded-lg"
             min={min}
             max={max}
             step={step}
+            disabled={isUsingDefault}
           />
-          <div className="flex items-center">
-            <input
-              type="number"
-              value={value}
-              onChange={handleNumberChange}
-              className="px-2 py-1 text-sm border border-grayscale-300 rounded-lg"
-              min={min}
-              max={max}
-              step={step}
-            />
-            {unit && <span className="text-sm ml-1">{unit}</span>}
-          </div>
+          {unit && <span className="text-sm ml-1">{unit}</span>}
         </div>
-      )}
+      </div>
     </fieldset>
   );
 };
diff --git a/website/src/pages/themes/_components/theme-preview/options.tsx b/website/src/pages/themes/_components/theme-preview/options.tsx
index de1ee634c..78dac4c9e 100644
--- a/website/src/pages/themes/_components/theme-preview/options.tsx
+++ b/website/src/pages/themes/_components/theme-preview/options.tsx
@@ -17,7 +17,9 @@ export const Options = forwardRef<HTMLDivElement, Props>(({ isOpen }, ref) => {
           className="absolute w-[400px] right-0 mt-1 border border-grayscale-300 bg-white rounded-md z-50 p-4 shadow-md"
           ref={ref}
         >
-          <h1 className="text-base font-bold mb-4">Preview Settings</h1>
+          <h1 className="text-base font-bold mb-4 text-gray-800">
+            Preview Settings
+          </h1>
           <PreviewColorScaleSelect size="sm" />
           <Toggle
             id="show-tooltips"
@@ -25,7 +27,7 @@ export const Options = forwardRef<HTMLDivElement, Props>(({ isOpen }, ref) => {
             checked={showTooltips}
             onChange={setShowTooltips}
             className="mt-4"
-            size="sm"
+            size="xs"
           />
         </div>
       )}
diff --git a/website/src/pages/themes/_components/toggle.tsx b/website/src/pages/themes/_components/toggle.tsx
index e7a92ad51..a19c89606 100644
--- a/website/src/pages/themes/_components/toggle.tsx
+++ b/website/src/pages/themes/_components/toggle.tsx
@@ -22,11 +22,8 @@ const Toggle = ({
     onChange(!checked);
   };
 
-  const labelSizeClasses = size === "md" ? "font-bold" : "font-medium";
-
   return (
-    <div className={clsx("flex justify-between items-center", className)}>
-      <label className={clsx("text-sm", labelSizeClasses)}>{label}</label>
+    <div className={clsx("flex justify-start items-center gap-2", className)}>
       <button
         type="button"
         id={id}
@@ -34,7 +31,7 @@ const Toggle = ({
         aria-checked={checked}
         onClick={handleToggle}
         className={clsx(
-          "group flex p-0.5 rounded-full bg-grayscale-300 transition-colors duration-200 ease-in-out overflow-hidden aria-checked:bg-blue-800 cursor-pointer",
+          "group flex p-0.5 rounded-full bg-gray-300 transition-colors duration-200 ease-in-out overflow-hidden aria-checked:bg-blue-500 cursor-pointer",
           size === "xs" && "w-7 h-4",
           size === "sm" && "w-9 h-5",
           size === "md" && "w-11 h-6",
@@ -49,6 +46,9 @@ const Toggle = ({
           )}
         ></span>
       </button>
+      <label htmlFor={id} className="text-sm font-medium">
+        {label}
+      </label>
     </div>
   );
 };
diff --git a/website/src/pages/themes/_providers/alertProvider.tsx b/website/src/pages/themes/_providers/alertProvider.tsx
new file mode 100644
index 000000000..153df85e8
--- /dev/null
+++ b/website/src/pages/themes/_providers/alertProvider.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { createContext, useContext, useState } from "react";
+import Alert, { AlertProps } from "../_components/alert";
+
+type AlertContextType = {
+  addAlert: (args: Omit<AlertProps, "id">) => void;
+};
+
+const AlertContext = createContext<AlertContextType | undefined>(undefined);
+
+export const AlertProvider = ({ children }) => {
+  const [alerts, setAlerts] = useState<AlertProps[]>([]);
+
+  const addAlert = (alertProps: Omit<AlertProps, "id">) => {
+    const id = crypto.randomUUID();
+    setAlerts((prev) => [...prev, { ...alertProps, id }]);
+  };
+
+  const removeAlert = (id) => {
+    setAlerts((prev) => prev.filter((alert) => alert.id !== id));
+  };
+
+  return (
+    <AlertContext.Provider value={{ addAlert }}>
+      {children}
+      <div className="fixed bottom-4 right-4 space-y-4 z-50">
+        {alerts.map(({ id, type, title, message, duration }) => (
+          <Alert
+            key={id}
+            type={type}
+            title={title}
+            message={message}
+            duration={duration}
+            onClose={() => removeAlert(id)}
+          />
+        ))}
+      </div>
+    </AlertContext.Provider>
+  );
+};
+
+export const useAlert = () => {
+  const context = useContext(AlertContext);
+  if (!context) {
+    throw new Error("useAlert must be used within a AlertProvider");
+  }
+  return context;
+};
diff --git a/website/src/pages/themes/_providers/sideNavProvider.tsx b/website/src/pages/themes/_providers/sideNavProvider.tsx
new file mode 100644
index 000000000..f2ddd23fc
--- /dev/null
+++ b/website/src/pages/themes/_providers/sideNavProvider.tsx
@@ -0,0 +1,32 @@
+import { NAV_ITEMS, NavItem } from "../_components/sidenav";
+import React, { createContext, useContext, useState } from "react";
+
+type SideNavContextType = {
+  activeSideNavItem: NavItem;
+  setActiveSideNavItem: (navItem: NavItem) => void;
+};
+
+const SideNavContext = createContext<SideNavContextType | undefined>(undefined);
+
+export const SideNavProvider = ({ children }) => {
+  const [activeSideNavItem, setActiveSideNavItem] = useState(NAV_ITEMS[0]);
+
+  return (
+    <SideNavContext.Provider
+      value={{
+        activeSideNavItem,
+        setActiveSideNavItem,
+      }}
+    >
+      {children}
+    </SideNavContext.Provider>
+  );
+};
+
+export const useSideNavContext = () => {
+  const context = useContext(SideNavContext);
+  if (context === undefined) {
+    throw new Error("useSideNavContext must be used within a SideNavProvider");
+  }
+  return context;
+};
diff --git a/website/src/pages/themes/_providers/themeProvider.tsx b/website/src/pages/themes/_providers/themeProvider.tsx
index 1cc9aa65c..8aef25be3 100644
--- a/website/src/pages/themes/_providers/themeProvider.tsx
+++ b/website/src/pages/themes/_providers/themeProvider.tsx
@@ -10,15 +10,37 @@ export type ThemeOption = {
 
 type ThemeContextType = {
   baseTheme: ThemeOption | undefined;
-  onBaseThemeSelect: (themeName?: string) => void;
+  onBaseThemeSelect: (
+    themeName?: string,
+    config?: VictoryThemeDefinition,
+  ) => void;
   customThemeConfig: VictoryThemeDefinition | undefined;
   updateCustomThemeConfig: (path: string | string[], newValue: unknown) => void;
 };
 
+const CUSTOM_THEME_CONFIG: VictoryThemeDefinition = {
+  candlestick: {
+    style: {
+      labels: {
+        padding: 5,
+      },
+    },
+  },
+  errorbar: {
+    borderWidth: 8,
+  },
+};
+
+export const CUSTOM_THEME = {
+  name: "Custom",
+  config: CUSTOM_THEME_CONFIG,
+};
+
 export const themes: ThemeOption[] = [
   { name: "Clean", config: VictoryTheme.clean },
   { name: "Material", config: VictoryTheme.material },
   { name: "Grayscale", config: VictoryTheme.grayscale },
+  CUSTOM_THEME,
 ];
 
 const defaultTheme = themes[0];
@@ -38,18 +60,22 @@ export const ThemeProvider = ({ children }) => {
     defaultTheme.config,
   );
 
-  const onBaseThemeSelect = (themeName?: string) => {
-    const theme = themes.find((t) => t.name === themeName);
-    if (!theme) {
-      setBaseTheme(defaultTheme);
-      setCustomThemeConfig(defaultTheme.config);
-    } else {
-      setBaseTheme(theme);
-      if (theme.name !== "Custom") {
-        setCustomThemeConfig({ ...theme?.config });
+  const onBaseThemeSelect = useCallback(
+    (themeName?: string, config?: VictoryThemeDefinition) => {
+      const theme = themes.find((t) => t.name === themeName);
+      if (!theme) {
+        setBaseTheme(defaultTheme);
+        setCustomThemeConfig(defaultTheme.config);
+      } else {
+        setBaseTheme(theme);
+        setCustomThemeConfig({
+          ...CUSTOM_THEME_CONFIG,
+          ...(config ?? theme?.config),
+        });
       }
-    }
-  };
+    },
+    [setBaseTheme, setCustomThemeConfig],
+  );
 
   const updateCustomThemeConfig = useCallback(
     (path: string | string[], newValue: unknown) => {
@@ -59,9 +85,12 @@ export const ThemeProvider = ({ children }) => {
         path,
         newValue,
       );
+      if (baseTheme.name !== CUSTOM_THEME.name) {
+        setBaseTheme(CUSTOM_THEME);
+      }
       setCustomThemeConfig(updatedConfig);
     },
-    [customThemeConfig, setCustomThemeConfig],
+    [customThemeConfig, setBaseTheme, setCustomThemeConfig, baseTheme],
   );
 
   return (
diff --git a/website/src/pages/themes/_utils.ts b/website/src/pages/themes/_utils.ts
index 05150014e..301158d7c 100644
--- a/website/src/pages/themes/_utils.ts
+++ b/website/src/pages/themes/_utils.ts
@@ -134,3 +134,7 @@ export const getBaseLabelsConfig = (
     path: getPath(basePath, "fill"),
   },
 ];
+
+export const stringifyWithoutQuotes = (config: unknown) => {
+  return JSON.stringify(config, null, 2).replace(/"([^"]+)":/g, "$1:");
+};
diff --git a/website/src/pages/themes/index.tsx b/website/src/pages/themes/index.tsx
index 3cec6edf0..ef75b52dd 100644
--- a/website/src/pages/themes/index.tsx
+++ b/website/src/pages/themes/index.tsx
@@ -3,53 +3,26 @@ import React from "react";
 import "../../css/custom.css";
 
 import Layout from "@theme/Layout";
-import SideNav, { NAV_ITEMS } from "./_components/sidenav";
-import BaseThemePanel from "./_components/base-theme-panel";
-import OptionsPanel from "./_components/options-panel";
-import ChartPanel from "./_components/chart-panel";
+import SideNav from "./_components/sidenav";
 import { ThemeProvider } from "./_providers/themeProvider";
-import { ThemePreview } from "./_components/theme-preview";
 import { PreviewOptionsProvider } from "./_providers/previewOptionsProvider";
-import ExportPanel from "./_components/export-panel";
-
-const getPanel = ({ panelType, config }) => {
-  switch (panelType) {
-    case "theme":
-      return <BaseThemePanel />;
-    case "chart":
-      return <ChartPanel config={config} />;
-    default:
-      return <OptionsPanel config={config} />;
-  }
-};
+import { SideNavProvider } from "./_providers/sideNavProvider";
+import Main from "./_components/main";
+import { AlertProvider } from "./_providers/alertProvider";
 
 const ThemeBuilder = () => {
-  const [activeSidebarItem, setActiveSidebarItem] = React.useState(
-    NAV_ITEMS[0],
-  );
-
-  const isExportPanel = activeSidebarItem.panelType === "export";
-
   return (
     <Layout>
       <ThemeProvider>
         <PreviewOptionsProvider>
-          <div className="relative flex flex-row items-start justify-start w-full theme-builder">
-            <SideNav
-              activeItem={activeSidebarItem}
-              onItemSelect={setActiveSidebarItem}
-            />
-            {isExportPanel ? (
-              <ExportPanel />
-            ) : (
-              <>
-                <aside className="sticky top-[60px] h-theme-builder p-6 border-r border-grayscale-300 overflow-y-scroll w-[380px] bg-gray-50">
-                  {getPanel(activeSidebarItem)}
-                </aside>
-                <ThemePreview />
-              </>
-            )}
-          </div>
+          <AlertProvider>
+            <SideNavProvider>
+              <div className="relative flex flex-row items-start justify-start w-full theme-builder font-sans text-gray-700">
+                <SideNav />
+                <Main />
+              </div>
+            </SideNavProvider>
+          </AlertProvider>
         </PreviewOptionsProvider>
       </ThemeProvider>
     </Layout>
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
index 6a48b72b2..6714a8aad 100644
--- a/website/tailwind.config.ts
+++ b/website/tailwind.config.ts
@@ -16,13 +16,6 @@ const NearFormColors = {
   DeepNavy: "hsla(225, 100%, 11%, 1)",
 };
 
-const blue = {
-  100: "#E8F0FF",
-  300: "#B9D3FF",
-  500: "#8AB6FF",
-  800: "#4589FF",
-};
-
 const orange = {
   100: "#ff684f",
   200: "#ff4b2e",
@@ -52,7 +45,6 @@ module.exports = {
           800: "#888888",
         },
         orange,
-        blue,
         "theme-1": NearFormColors.Green,
         "theme-2": NearFormColors.DeepNavy,
         "theme-3": NearFormColors.DeepNavy,
@@ -72,7 +64,7 @@ module.exports = {
       },
       width: {
         prose: "90ch",
-        "export-panel": "calc(100vw - 100px)",
+        "full-panel": "calc(100vw - 100px)",
       },
       fontFamily: {
         sans: ["Inter, Helvetica, Arial, sans-serif"],

From 33d5a843e5bdd7bfa464f011888ad297c701b580 Mon Sep 17 00:00:00 2001
From: Stef Williams <ramenhog@gmail.com>
Date: Thu, 23 Jan 2025 13:17:48 -0500
Subject: [PATCH 28/30] feat(theme-builder): chart preview options (#3042)

---
 .../pages/themes/_components/chart-panel.tsx  |  22 ++--
 .../themes/_components/examples/area.tsx      |   2 +
 .../themes/_components/examples/axis.tsx      |   2 +
 .../pages/themes/_components/examples/bar.tsx |   2 +
 .../themes/_components/examples/box-plot.tsx  |   2 +
 .../_components/examples/candlestick.tsx      |   2 +
 .../themes/_components/examples/errorbar.tsx  |   2 +
 .../themes/_components/examples/example.ts    |   2 +
 .../themes/_components/examples/group.tsx     |   2 +
 .../themes/_components/examples/histogram.tsx |   2 +
 .../themes/_components/examples/legend.tsx    |   2 +
 .../themes/_components/examples/line.tsx      |   2 +
 .../pages/themes/_components/examples/pie.tsx |   2 +
 .../examples/polar-axis-dependent.tsx         |   2 +
 .../_components/examples/polar-axis.tsx       |   2 +
 .../themes/_components/examples/scatter.tsx   |   2 +
 .../themes/_components/examples/stack.tsx     |   7 +-
 .../themes/_components/examples/voronoi.tsx   |   2 +
 .../themes/_components/sideNavButton.tsx      |   2 +-
 .../src/pages/themes/_components/sidenav.tsx  | 103 ++++++++++--------
 .../_components/theme-preview/index.tsx       |   1 +
 .../_components/theme-preview/preview.tsx     |  47 +++++++-
 website/src/pages/themes/_config/axis.tsx     |   9 +-
 website/src/pages/themes/_config/chart.tsx    |  30 ++---
 website/src/pages/themes/_const.tsx           |  20 ++++
 .../pages/themes/_icons/axis-options-icon.tsx |  23 ++++
 .../themes/_icons/chart-options-icon.tsx      |  25 +++++
 .../src/pages/themes/_icons/export-icon.tsx   |  22 ++++
 website/src/pages/themes/_icons/index.tsx     |   3 +
 .../_providers/previewOptionsProvider.tsx     |  13 ++-
 30 files changed, 274 insertions(+), 85 deletions(-)
 create mode 100644 website/src/pages/themes/_icons/axis-options-icon.tsx
 create mode 100644 website/src/pages/themes/_icons/chart-options-icon.tsx
 create mode 100644 website/src/pages/themes/_icons/export-icon.tsx
 create mode 100644 website/src/pages/themes/_icons/index.tsx

diff --git a/website/src/pages/themes/_components/chart-panel.tsx b/website/src/pages/themes/_components/chart-panel.tsx
index 326a59fa4..e2332f046 100644
--- a/website/src/pages/themes/_components/chart-panel.tsx
+++ b/website/src/pages/themes/_components/chart-panel.tsx
@@ -12,20 +12,20 @@ type ChartPanelProps = {
 const ChartPanel = ({
   config: { title, description, selectLabel, types },
 }: ChartPanelProps) => {
-  const [chartType, setChartType] = React.useState(Object.keys(types)[0]);
-  const { setExampleContent } = usePreviewOptions();
+  const { activeChartType, setActiveChartType, setExampleContent } =
+    usePreviewOptions();
 
   useEffect(() => {
     const newChartType = Object.keys(types)[0];
-    setChartType((prevChartType) =>
-      prevChartType !== newChartType ? newChartType : prevChartType,
+    setActiveChartType((prevChartType) =>
+      prevChartType === null ? newChartType : prevChartType,
     );
-  }, [types]);
+  }, [types, setActiveChartType]);
 
   useEffect(() => {
-    const examples = types[chartType]?.content ?? [];
+    const examples = types[activeChartType]?.content ?? [];
     setExampleContent(examples);
-  }, [types, chartType, setExampleContent]);
+  }, [types, activeChartType, setExampleContent]);
 
   const options = useMemo(
     () =>
@@ -36,12 +36,12 @@ const ChartPanel = ({
     [types],
   );
   const controls = useMemo(
-    () => types[chartType]?.controls || [],
-    [types, chartType],
+    () => types[activeChartType]?.controls || [],
+    [types, activeChartType],
   );
 
   const onChartTypeChange = (newValue: string) => {
-    setChartType(newValue);
+    setActiveChartType(newValue);
   };
 
   return (
@@ -49,7 +49,7 @@ const ChartPanel = ({
       <PanelHeader title={title} description={description} />
       <Select
         id="chart-type-select"
-        value={chartType}
+        value={activeChartType}
         onChange={onChartTypeChange}
         options={options}
         label={selectLabel}
diff --git a/website/src/pages/themes/_components/examples/area.tsx b/website/src/pages/themes/_components/examples/area.tsx
index 818787497..b8adf118a 100644
--- a/website/src/pages/themes/_components/examples/area.tsx
+++ b/website/src/pages/themes/_components/examples/area.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryArea, VictoryAxis, VictoryChart } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const AreaExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.AREA,
     title: "VictoryArea",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/axis.tsx b/website/src/pages/themes/_components/examples/axis.tsx
index 3b9be9c98..d6cf03e35 100644
--- a/website/src/pages/themes/_components/examples/axis.tsx
+++ b/website/src/pages/themes/_components/examples/axis.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryAxis, VictoryChart } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const AxisExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.AXIS,
     title: "VictoryAxis",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/bar.tsx b/website/src/pages/themes/_components/examples/bar.tsx
index d4ca918b0..93940d5d6 100644
--- a/website/src/pages/themes/_components/examples/bar.tsx
+++ b/website/src/pages/themes/_components/examples/bar.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryBar, VictoryAxis, VictoryChart } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const BarExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.BAR,
     title: "VictoryBar",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/box-plot.tsx b/website/src/pages/themes/_components/examples/box-plot.tsx
index 147156eb5..3e450fc43 100644
--- a/website/src/pages/themes/_components/examples/box-plot.tsx
+++ b/website/src/pages/themes/_components/examples/box-plot.tsx
@@ -4,9 +4,11 @@ import React from "react";
 import { VictoryBoxPlot } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const BoxPlotExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.BOX_PLOT,
     title: "VictoryBoxPlot",
     content: (props) => (
       <VictoryBoxPlot
diff --git a/website/src/pages/themes/_components/examples/candlestick.tsx b/website/src/pages/themes/_components/examples/candlestick.tsx
index c4845a2d0..b6dca24d5 100644
--- a/website/src/pages/themes/_components/examples/candlestick.tsx
+++ b/website/src/pages/themes/_components/examples/candlestick.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryCandlestick } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const CandlestickExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.CANDLESTICK,
     title: "VictoryCandlestick",
     content: (props) => (
       <VictoryCandlestick
diff --git a/website/src/pages/themes/_components/examples/errorbar.tsx b/website/src/pages/themes/_components/examples/errorbar.tsx
index a0a48b42c..3fa2cf012 100644
--- a/website/src/pages/themes/_components/examples/errorbar.tsx
+++ b/website/src/pages/themes/_components/examples/errorbar.tsx
@@ -3,9 +3,11 @@ import React from "react";
 import { VictoryErrorBar } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const ErrorBarExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.ERROR_BAR,
     title: "VictoryErrorBar",
     content: (props) => (
       <VictoryErrorBar
diff --git a/website/src/pages/themes/_components/examples/example.ts b/website/src/pages/themes/_components/examples/example.ts
index 48a1ef537..1e93fac18 100644
--- a/website/src/pages/themes/_components/examples/example.ts
+++ b/website/src/pages/themes/_components/examples/example.ts
@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 import { ColorScalePropType, VictoryThemeDefinition } from "victory";
+import { VictoryComponentType } from "../../_const";
 
 type ExampleRenderProps = {
   colorScale: ColorScalePropType;
@@ -9,6 +10,7 @@ type ExampleRenderProps = {
 };
 
 export type ExampleConfig = {
+  key: VictoryComponentType;
   title: string;
   content: (props: ExampleRenderProps) => ReactElement;
   hasVictoryChart?: boolean;
diff --git a/website/src/pages/themes/_components/examples/group.tsx b/website/src/pages/themes/_components/examples/group.tsx
index a1579983b..90a996f3f 100644
--- a/website/src/pages/themes/_components/examples/group.tsx
+++ b/website/src/pages/themes/_components/examples/group.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const GroupExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.GROUP,
     title: "VictoryGroup",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/histogram.tsx b/website/src/pages/themes/_components/examples/histogram.tsx
index 6e147dd63..865b5658a 100644
--- a/website/src/pages/themes/_components/examples/histogram.tsx
+++ b/website/src/pages/themes/_components/examples/histogram.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryHistogram } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const HistogramExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.HISTOGRAM,
     title: "VictoryHistogram",
     content: (props) => (
       <VictoryHistogram
diff --git a/website/src/pages/themes/_components/examples/legend.tsx b/website/src/pages/themes/_components/examples/legend.tsx
index 87bf1f113..6094dc51b 100644
--- a/website/src/pages/themes/_components/examples/legend.tsx
+++ b/website/src/pages/themes/_components/examples/legend.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryBar, VictoryChart, VictoryLegend } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const LegendExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.LEGEND,
     title: "VictoryLegend",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/line.tsx b/website/src/pages/themes/_components/examples/line.tsx
index 2b231c764..faf5ce909 100644
--- a/website/src/pages/themes/_components/examples/line.tsx
+++ b/website/src/pages/themes/_components/examples/line.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryAxis, VictoryChart, VictoryLine } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const LineExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.LINE,
     title: "VictoryLine",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/pie.tsx b/website/src/pages/themes/_components/examples/pie.tsx
index 9e4609f59..633b4a4c0 100644
--- a/website/src/pages/themes/_components/examples/pie.tsx
+++ b/website/src/pages/themes/_components/examples/pie.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryPie } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const PieExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.PIE,
     title: "VictoryPie",
     content: (props) => (
       <VictoryPie
diff --git a/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx b/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx
index 6d470155c..987748d17 100644
--- a/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx
+++ b/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx
@@ -3,9 +3,11 @@ import React from "react";
 import { VictoryChart, VictoryPolarAxis } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const PolarAxisDependentExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.POLAR_DEPENDENT_AXIS,
     title: "VictoryPolarAxis - Dependent",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/polar-axis.tsx b/website/src/pages/themes/_components/examples/polar-axis.tsx
index aedd3efc5..b73db6b6e 100644
--- a/website/src/pages/themes/_components/examples/polar-axis.tsx
+++ b/website/src/pages/themes/_components/examples/polar-axis.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryChart, VictoryPolarAxis } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const PolarAxisExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.POLAR_AXIS,
     title: "VictoryPolarAxis",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/scatter.tsx b/website/src/pages/themes/_components/examples/scatter.tsx
index b2fa3b54b..af8d67815 100644
--- a/website/src/pages/themes/_components/examples/scatter.tsx
+++ b/website/src/pages/themes/_components/examples/scatter.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryScatter } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const ScatterExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.SCATTER,
     title: "VictoryScatter",
     content: (props) => (
       <VictoryScatter
diff --git a/website/src/pages/themes/_components/examples/stack.tsx b/website/src/pages/themes/_components/examples/stack.tsx
index a68074d8e..a515cf395 100644
--- a/website/src/pages/themes/_components/examples/stack.tsx
+++ b/website/src/pages/themes/_components/examples/stack.tsx
@@ -1,11 +1,16 @@
 import React from "react";
 import { VictoryArea, VictoryAxis, VictoryChart, VictoryStack } from "victory";
-import { NUM_STACKS, sampleStackData } from "../../_const";
+import {
+  NUM_STACKS,
+  sampleStackData,
+  VictoryComponentType,
+} from "../../_const";
 
 import { ExampleConfig } from "./example";
 
 export const StackExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.STACK,
     title: "VictoryStack",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/voronoi.tsx b/website/src/pages/themes/_components/examples/voronoi.tsx
index bc57e3e8a..5f952af50 100644
--- a/website/src/pages/themes/_components/examples/voronoi.tsx
+++ b/website/src/pages/themes/_components/examples/voronoi.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryVoronoi } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const VoronoiExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.VORONOI,
     title: "VictoryVoronoi",
     content: (props) => (
       <VictoryVoronoi
diff --git a/website/src/pages/themes/_components/sideNavButton.tsx b/website/src/pages/themes/_components/sideNavButton.tsx
index 18ff2bd3c..330d1a2a9 100644
--- a/website/src/pages/themes/_components/sideNavButton.tsx
+++ b/website/src/pages/themes/_components/sideNavButton.tsx
@@ -36,7 +36,7 @@ const SideNavButton = ({
           isActive
             ? "text-orange-100"
             : "text-grayscale-300 group-hover:text-white group-disabled:text-grayscale-800",
-          "size-6",
+          "size-5",
         )}
       />
       <span className="mt-2">{item.title}</span>
diff --git a/website/src/pages/themes/_components/sidenav.tsx b/website/src/pages/themes/_components/sidenav.tsx
index 56f9aa993..feee8ad19 100644
--- a/website/src/pages/themes/_components/sidenav.tsx
+++ b/website/src/pages/themes/_components/sidenav.tsx
@@ -1,9 +1,3 @@
-import {
-  AdjustmentsVerticalIcon,
-  CircleStackIcon,
-  GlobeAmericasIcon,
-  SwatchIcon,
-} from "@heroicons/react/24/outline";
 import clsx from "clsx";
 import React from "react";
 import {
@@ -19,7 +13,6 @@ import {
   defaultColorScale,
   usePreviewOptions,
 } from "../_providers/previewOptionsProvider";
-import { TiExportOutline } from "react-icons/ti";
 import {
   AllExamples,
   ExampleConfig,
@@ -27,10 +20,12 @@ import {
   PieExamples,
   StackExamples,
 } from "./examples";
-import { HiOutlineCode } from "react-icons/hi";
 import SideNavButton from "./sideNavButton";
 import { useSideNavContext } from "../_providers/sideNavProvider";
-import { TbAxisX } from "react-icons/tb";
+import { AxisOptionsIcon, ChartOptionsIcon, ExportIcon } from "../_icons";
+import { FiGlobe } from "react-icons/fi";
+import { LuDatabase } from "react-icons/lu";
+import { HiOutlineColorSwatch, HiCode } from "react-icons/hi";
 
 export type NavItem = {
   title: string;
@@ -50,53 +45,63 @@ export type NavItem = {
     }
 );
 
+export const baseThemeItem: NavItem = {
+  title: "Base Theme",
+  Icon: LuDatabase,
+  panelType: "theme",
+  content: AllExamples,
+};
+
+export const colorPaletteItem: NavItem = {
+  title: "Color Palette",
+  Icon: HiOutlineColorSwatch,
+  config: paletteOptionsConfig,
+  panelType: "default",
+  content: [...StackExamples, ...GroupExamples, ...PieExamples],
+};
+
+export const globalOptionsItem: NavItem = {
+  title: "Global Options",
+  Icon: FiGlobe,
+  config: globalOptionsConfig,
+  panelType: "default",
+  content: AllExamples,
+};
+
+export const axisOptionsItem: NavItem = {
+  title: "Axis Options",
+  Icon: AxisOptionsIcon,
+  config: axisOptionsConfig,
+  panelType: "chart",
+  content: [],
+};
+
+export const chartOptionsItem: NavItem = {
+  title: "Chart Options",
+  Icon: ChartOptionsIcon,
+  config: chartOptionsConfig,
+  panelType: "chart",
+  content: [],
+};
+
 export const NAV_ITEMS: NavItem[] = [
-  {
-    title: "Base Theme",
-    Icon: CircleStackIcon,
-    panelType: "theme",
-    content: AllExamples,
-  },
-  {
-    title: "Color Palette",
-    Icon: SwatchIcon,
-    config: paletteOptionsConfig,
-    panelType: "default",
-    content: [...StackExamples, ...GroupExamples, ...PieExamples],
-  },
-  {
-    title: "Global Options",
-    Icon: GlobeAmericasIcon,
-    config: globalOptionsConfig,
-    panelType: "default",
-    content: AllExamples,
-  },
-  {
-    title: "Axis Options",
-    Icon: TbAxisX,
-    config: axisOptionsConfig,
-    panelType: "chart",
-    content: [],
-  },
-  {
-    title: "Chart Options",
-    Icon: AdjustmentsVerticalIcon,
-    config: chartOptionsConfig,
-    panelType: "chart",
-    content: [],
-  },
+  baseThemeItem,
+  colorPaletteItem,
+  globalOptionsItem,
+  axisOptionsItem,
+  chartOptionsItem,
 ];
 
 export const codeItem: NavItem = {
   title: "Theme Code",
-  Icon: HiOutlineCode,
+  Icon: HiCode,
   panelType: "code",
   content: [],
 };
 
 export const exportItem: NavItem = {
   title: "Export Theme",
-  Icon: TiExportOutline,
+  Icon: ExportIcon,
   panelType: "export",
   content: [],
 };
@@ -104,10 +109,12 @@ export const exportItem: NavItem = {
 const SideNav = () => {
   const { baseTheme } = useTheme();
   const { activeSideNavItem, setActiveSideNavItem } = useSideNavContext();
-  const { setExampleContent, updateColorScale } = usePreviewOptions();
+  const { setExampleContent, updateColorScale, setActiveChartType } =
+    usePreviewOptions();
   const isBaseThemeSelected = !!baseTheme;
 
   const handleItemSelect = (item: NavItem) => {
+    setActiveChartType(null);
     setActiveSideNavItem(item);
     updateColorScale(defaultColorScale);
     setExampleContent(item.content);
@@ -147,7 +154,7 @@ const SideNav = () => {
           onClick={() => handleItemSelect(exportItem)}
           disabled={!isBaseThemeSelected}
           className={clsx(
-            "group flex w-full flex-col items-center rounded-md p-3 text-xs font-bold cursor-pointer text-theme-2 hover:underline disabled:bg-grayscale-400 disabled:text-grayscale-800 disabled:cursor-not-allowed",
+            "group flex w-full flex-col items-center rounded-md p-3 text-xs font-bold cursor-pointer text-theme-2 disabled:bg-grayscale-400 disabled:text-grayscale-800 disabled:cursor-not-allowed",
             isExportItemActive
               ? "bg-theme-1/100"
               : "bg-theme-1/80 hover:bg-theme-1/100",
@@ -155,7 +162,7 @@ const SideNav = () => {
         >
           <exportItem.Icon
             aria-hidden="true"
-            className={"size-6 group-disabled:text-grayscale-800"}
+            className={"size-5 group-disabled:text-grayscale-800"}
           />
           <span className="mt-2">{exportItem.title}</span>
         </button>
diff --git a/website/src/pages/themes/_components/theme-preview/index.tsx b/website/src/pages/themes/_components/theme-preview/index.tsx
index 37279970c..ab214274c 100644
--- a/website/src/pages/themes/_components/theme-preview/index.tsx
+++ b/website/src/pages/themes/_components/theme-preview/index.tsx
@@ -25,6 +25,7 @@ export function ThemePreview() {
               colorScale={colorScale as ColorScalePropType}
               showTooltips={showTooltips}
               theme={customThemeConfig}
+              showOptions={exampleContent.length > 1}
             />
           ))}
         </div>
diff --git a/website/src/pages/themes/_components/theme-preview/preview.tsx b/website/src/pages/themes/_components/theme-preview/preview.tsx
index 92790b187..079732cfd 100644
--- a/website/src/pages/themes/_components/theme-preview/preview.tsx
+++ b/website/src/pages/themes/_components/theme-preview/preview.tsx
@@ -6,20 +6,61 @@ import {
   VictoryTooltip,
 } from "victory";
 import { ExampleConfig } from "../examples";
+import { useSideNavContext } from "../../_providers/sideNavProvider";
+import { axisOptionsItem, chartOptionsItem } from "../sidenav";
+import { usePreviewOptions } from "../../_providers/previewOptionsProvider";
+import { VictoryComponentType } from "../../_const";
+import { AdjustmentsVerticalIcon } from "@heroicons/react/24/outline";
 
 type Props = {
   config: ExampleConfig;
   theme: VictoryThemeDefinition;
   colorScale: ColorScalePropType;
   showTooltips: boolean;
+  showOptions: boolean;
 };
 
-export function Preview({ config, theme, colorScale, showTooltips }: Props) {
-  const { content: Content, title } = config;
+export function Preview({
+  config,
+  theme,
+  colorScale,
+  showTooltips,
+  showOptions = true,
+}: Props) {
+  const { content: Content, title, key } = config;
+  const { setActiveChartType } = usePreviewOptions();
+  const { setActiveSideNavItem } = useSideNavContext();
+
+  const handleOptionsClick = () => {
+    if (
+      [
+        VictoryComponentType.AXIS,
+        VictoryComponentType.POLAR_AXIS,
+        VictoryComponentType.POLAR_DEPENDENT_AXIS,
+      ].includes(key)
+    ) {
+      setActiveSideNavItem(axisOptionsItem);
+    } else {
+      setActiveSideNavItem(chartOptionsItem);
+    }
+    setActiveChartType(key);
+    if (typeof window !== "undefined") window.scrollTo(0, 0);
+  };
 
   return (
     <div className="border border-solid border-gray-200 p-8">
-      <h3 className="text-lg font-bold mb-3">{title}</h3>
+      <div className="flex justify-between items-center mb-3">
+        <h3 className="text-lg font-bold mb-0">{title}</h3>
+        {showOptions && (
+          <button
+            onClick={handleOptionsClick}
+            className="bg-transparent border border-gray-200 font-sans font-medium cursor-pointer p-1.5 -m-1 rounded-md hover:bg-gray-200 flex items-center justify-center text-gray-500"
+          >
+            Chart Options
+            <AdjustmentsVerticalIcon className="ml-1 size-5" />
+          </button>
+        )}
+      </div>
       {Content({
         labels: ({ datum }) => datum.y || datum.x,
         colorScale: colorScale as ColorScalePropType,
diff --git a/website/src/pages/themes/_config/axis.tsx b/website/src/pages/themes/_config/axis.tsx
index 83f258804..977245706 100644
--- a/website/src/pages/themes/_config/axis.tsx
+++ b/website/src/pages/themes/_config/axis.tsx
@@ -1,5 +1,5 @@
 import { getBaseLabelsConfig, getBaseStrokeConfig } from "../_utils";
-import { StrokeProps } from "../_const";
+import { StrokeProps, VictoryComponentType } from "../_const";
 import { ControlConfig } from ".";
 import {
   AxisExamples,
@@ -150,9 +150,10 @@ const axisOptionsConfig = {
   description: "Customize the appearance of axes.",
   selectLabel: "Axis Type",
   types: {
-    base: generalAxisOptionsConfig,
-    polarAxis: polarAxisOptionsConfig,
-    polarDependentAxis: polarDependentAxisOptionsConfig,
+    [VictoryComponentType.AXIS]: generalAxisOptionsConfig,
+    [VictoryComponentType.POLAR_AXIS]: polarAxisOptionsConfig,
+    [VictoryComponentType.POLAR_DEPENDENT_AXIS]:
+      polarDependentAxisOptionsConfig,
   },
 };
 
diff --git a/website/src/pages/themes/_config/chart.tsx b/website/src/pages/themes/_config/chart.tsx
index 5c50be22e..6eef98e57 100644
--- a/website/src/pages/themes/_config/chart.tsx
+++ b/website/src/pages/themes/_config/chart.tsx
@@ -4,7 +4,7 @@ import {
   getNestedColorScaleConfig,
 } from "../_utils";
 import { ControlConfig } from ".";
-import { StrokeProps } from "../_const";
+import { VictoryComponentType, StrokeProps } from "../_const";
 import {
   AreaExamples,
   BarExamples,
@@ -24,7 +24,7 @@ import {
 const chartConfigs: {
   [key: string]: ControlConfig;
 } = {
-  area: {
+  [VictoryComponentType.AREA]: {
     type: "section",
     label: "Area Chart",
     content: AreaExamples,
@@ -59,7 +59,7 @@ const chartConfigs: {
       },
     ],
   },
-  bar: {
+  [VictoryComponentType.BAR]: {
     type: "section",
     label: "Bar Chart",
     content: BarExamples,
@@ -101,7 +101,7 @@ const chartConfigs: {
       },
     ],
   },
-  boxPlot: {
+  [VictoryComponentType.BOX_PLOT]: {
     type: "section",
     label: "Box Plot",
     content: BoxPlotExamples,
@@ -189,7 +189,7 @@ const chartConfigs: {
       },
     ],
   },
-  candlestick: {
+  [VictoryComponentType.CANDLESTICK]: {
     type: "section",
     label: "Candlestick Chart",
     content: CandlestickExamples,
@@ -242,7 +242,7 @@ const chartConfigs: {
       },
     ],
   },
-  errorBar: {
+  [VictoryComponentType.ERROR_BAR]: {
     type: "section",
     label: "Error Bar",
     content: ErrorBarExamples,
@@ -273,7 +273,7 @@ const chartConfigs: {
       },
     ],
   },
-  histogram: {
+  [VictoryComponentType.HISTOGRAM]: {
     type: "section",
     label: "Histogram",
     content: HistogramExamples,
@@ -319,7 +319,7 @@ const chartConfigs: {
       },
     ],
   },
-  group: {
+  [VictoryComponentType.GROUP]: {
     type: "section",
     label: "Group",
     content: GroupExamples,
@@ -341,7 +341,7 @@ const chartConfigs: {
       },
     ],
   },
-  legend: {
+  [VictoryComponentType.LEGEND]: {
     type: "section",
     label: "Legend",
     content: LegendExamples,
@@ -419,7 +419,7 @@ const chartConfigs: {
       },
     ],
   },
-  line: {
+  [VictoryComponentType.LINE]: {
     type: "section",
     label: "Line Chart",
     content: LineExamples,
@@ -441,7 +441,7 @@ const chartConfigs: {
       },
     ],
   },
-  pie: {
+  [VictoryComponentType.PIE]: {
     type: "section",
     label: "Pie Chart",
     content: PieExamples,
@@ -472,7 +472,7 @@ const chartConfigs: {
       },
     ],
   },
-  scatter: {
+  [VictoryComponentType.SCATTER]: {
     type: "section",
     label: "Scatter Chart",
     content: ScatterExamples,
@@ -507,7 +507,7 @@ const chartConfigs: {
       },
     ],
   },
-  stack: {
+  [VictoryComponentType.STACK]: {
     type: "section",
     label: "Stack",
     content: StackExamples,
@@ -529,7 +529,7 @@ const chartConfigs: {
       },
     ],
   },
-  tooltip: {
+  [VictoryComponentType.TOOLTIP]: {
     type: "section",
     label: "Tooltip",
     controls: [
@@ -580,7 +580,7 @@ const chartConfigs: {
       },
     ],
   },
-  voronoi: {
+  [VictoryComponentType.VORONOI]: {
     type: "section",
     label: "Voronoi",
     content: VoronoiExamples,
diff --git a/website/src/pages/themes/_const.tsx b/website/src/pages/themes/_const.tsx
index d5f992692..a98caf14c 100644
--- a/website/src/pages/themes/_const.tsx
+++ b/website/src/pages/themes/_const.tsx
@@ -65,3 +65,23 @@ export enum StrokeProps {
   STROKE_LINE_CAP = "Stroke Line Cap",
   STROKE_LINE_JOIN = "Stroke Line Join",
 }
+
+export enum VictoryComponentType {
+  AREA = "area",
+  AXIS = "axis",
+  BAR = "bar",
+  BOX_PLOT = "boxPlot",
+  CANDLESTICK = "candlestick",
+  ERROR_BAR = "errorBar",
+  HISTOGRAM = "histogram",
+  GROUP = "group",
+  LEGEND = "legend",
+  LINE = "line",
+  PIE = "pie",
+  POLAR_AXIS = "polarAxis",
+  POLAR_DEPENDENT_AXIS = "polarDependentAxis",
+  SCATTER = "scatter",
+  STACK = "stack",
+  TOOLTIP = "tooltip",
+  VORONOI = "voronoi",
+}
diff --git a/website/src/pages/themes/_icons/axis-options-icon.tsx b/website/src/pages/themes/_icons/axis-options-icon.tsx
new file mode 100644
index 000000000..c32eda722
--- /dev/null
+++ b/website/src/pages/themes/_icons/axis-options-icon.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const AxisOptionsIcon = ({ className, ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M3.75 3.75C3.75 2.98945 3.13555 2.375 2.375 2.375C1.61445 2.375 1 2.98945 1 3.75V18.1875C1 20.0867 2.53828 21.625 4.4375 21.625H21.625C22.3855 21.625 23 21.0105 23 20.25C23 19.4895 22.3855 18.875 21.625 18.875H4.4375C4.05938 18.875 3.75 18.5656 3.75 18.1875V3.75Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.6207 7.34081C21.0752 7.79523 21.0752 8.53321 20.6207 8.98763L20.6244 8.99126L15.9711 13.6445C15.5167 14.0989 14.7787 14.0989 14.3243 13.6445L12.2376 11.5578L8.98763 14.8042C8.53321 15.2586 7.79523 15.2586 7.34081 14.8042C6.8864 14.3498 6.8864 13.6118 7.34081 13.1574L11.4124 9.08578C11.8668 8.63136 12.6048 8.63136 13.0592 9.08578L15.1459 11.1725L18.9739 7.34081C19.4283 6.8864 20.1663 6.8864 20.6207 7.34081Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+export default AxisOptionsIcon;
diff --git a/website/src/pages/themes/_icons/chart-options-icon.tsx b/website/src/pages/themes/_icons/chart-options-icon.tsx
new file mode 100644
index 000000000..82f6379c7
--- /dev/null
+++ b/website/src/pages/themes/_icons/chart-options-icon.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+const ChartOptionsIcon = ({ className, ...props }) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
+  >
+    <g clipPath="url(#clip0_398_1136)">
+      <path
+        d="M8.66656 17.5556H6.44434V10.7778C6.44434 10.2255 6.89205 9.77778 7.44434 9.77778H7.66656C8.21884 9.77778 8.66656 10.2255 8.66656 10.7778V17.5556ZM13.111 17.5556H10.8888V7.44444C10.8888 6.89216 11.3365 6.44444 11.8888 6.44444H12.111C12.6633 6.44444 13.111 6.89216 13.111 7.44444V17.5556ZM17.5554 17.5556H15.3332V14.1111C15.3332 13.5588 15.7809 13.1111 16.3332 13.1111H16.5554C17.1077 13.1111 17.5554 13.5588 17.5554 14.1111V17.5556ZM20.3332 19.8889H3.66656V4.22222H20.3332V19.8889ZM20.3332 2H3.66656C2.44434 2 1.44434 3 1.44434 4.22222V19.7778C1.44434 21 2.44434 22 3.66656 22H20.3332C21.5554 22 22.5554 21 22.5554 19.7778V4.22222C22.5554 3 21.5554 2 20.3332 2Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_398_1136">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default ChartOptionsIcon;
diff --git a/website/src/pages/themes/_icons/export-icon.tsx b/website/src/pages/themes/_icons/export-icon.tsx
new file mode 100644
index 000000000..f903c9072
--- /dev/null
+++ b/website/src/pages/themes/_icons/export-icon.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+const ExportIcon = ({ className, ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 20 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M8.3335 5.61003H5.00016C4.55814 5.61003 4.13421 5.78562 3.82165 6.09818C3.50909 6.41074 3.3335 6.83467 3.3335 7.27669V15.61C3.3335 16.0521 3.50909 16.476 3.82165 16.7885C4.13421 17.1011 4.55814 17.2767 5.00016 17.2767H13.3335C13.7755 17.2767 14.1994 17.1011 14.512 16.7885C14.8246 16.476 15.0002 16.0521 15.0002 15.61V12.2767M11.6668 3.94336H16.6668M16.6668 3.94336V8.94336M16.6668 3.94336L8.3335 12.2767"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+export default ExportIcon;
diff --git a/website/src/pages/themes/_icons/index.tsx b/website/src/pages/themes/_icons/index.tsx
new file mode 100644
index 000000000..4575afcba
--- /dev/null
+++ b/website/src/pages/themes/_icons/index.tsx
@@ -0,0 +1,3 @@
+export { default as ChartOptionsIcon } from "./chart-options-icon";
+export { default as AxisOptionsIcon } from "./axis-options-icon";
+export { default as ExportIcon } from "./export-icon";
diff --git a/website/src/pages/themes/_providers/previewOptionsProvider.tsx b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
index fa1e22e7d..cf34384f1 100644
--- a/website/src/pages/themes/_providers/previewOptionsProvider.tsx
+++ b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
@@ -1,14 +1,19 @@
 import React, { createContext, useContext } from "react";
 import { AllExamples, ExampleConfig } from "../_components/examples";
+import { VictoryComponentType } from "../_const";
 
 type PreviewOptionsContextType = {
   colorScale?: string;
   updateColorScale: (newColorScale?: string) => void;
   showTooltips: boolean;
-  setShowTooltips: (showTooltips: boolean) => void;
+  setShowTooltips: React.Dispatch<React.SetStateAction<boolean>>;
   resetPreviewOptions: () => void;
   exampleContent: ExampleConfig[];
-  setExampleContent: (content: ExampleConfig[]) => void;
+  setExampleContent: React.Dispatch<React.SetStateAction<ExampleConfig[]>>;
+  activeChartType: VictoryComponentType | null;
+  setActiveChartType: React.Dispatch<
+    React.SetStateAction<VictoryComponentType | null>
+  >;
 };
 
 export const defaultColorScale = undefined;
@@ -23,6 +28,8 @@ export const PreviewOptionsProvider = ({ children }) => {
     defaultColorScale,
   );
   const [showTooltips, setShowTooltips] = React.useState(defaultShowTooltips);
+  const [activeChartType, setActiveChartType] =
+    React.useState<VictoryComponentType | null>(null);
   const [exampleContent, setExampleContent] = React.useState(AllExamples);
 
   const updateColorScale = (newColorScale?: string) => {
@@ -45,6 +52,8 @@ export const PreviewOptionsProvider = ({ children }) => {
         resetPreviewOptions,
         exampleContent,
         setExampleContent,
+        activeChartType,
+        setActiveChartType,
       }}
     >
       {children}

From d6fe72bffdf3f4fcfe2b16ba33266701a64cc2ba Mon Sep 17 00:00:00 2001
From: Stef Williams <ramenhog@gmail.com>
Date: Tue, 28 Jan 2025 17:02:23 -0500
Subject: [PATCH 29/30] docs(theme-builder): update docs and launch-blocking
 bug fixes (#3045)

---
 website/docs/api/victory-area.mdx             |   4 +-
 website/docs/api/victory-theme.mdx            |  17 ++
 website/docs/guides/themes.mdx                | 170 +++++++++++++++---
 website/docusaurus.config.ts                  |   4 +
 .../color-scale-override-selector.tsx         |  10 +-
 .../src/pages/themes/_components/control.tsx  |  18 +-
 .../src/pages/themes/_components/slider.tsx   |  18 +-
 website/src/pages/themes/_config/global.tsx   |   4 +-
 website/src/pages/themes/_config/index.tsx    |  11 +-
 website/src/pages/themes/_utils.ts            |  14 +-
 10 files changed, 213 insertions(+), 57 deletions(-)

diff --git a/website/docs/api/victory-area.mdx b/website/docs/api/victory-area.mdx
index 53fea2eca..5f1c8cd13 100644
--- a/website/docs/api/victory-area.mdx
+++ b/website/docs/api/victory-area.mdx
@@ -129,7 +129,7 @@ See the [Events Guide](/docs/guides/events) for more information on defining eve
 `VictoryArea` uses the standard `groupComponent` prop. [Read about it in detail](/docs/api/victory-common-theme-props#groupcomponent)
 
 :::note
-`VictoryArea` uses [`VictoryClipContainer`](/docs/api/victory-clip-container) as its default `groupComponent` `VictoryClipContainer` renders a `<g>` tag with a `clipPath` `def`. This allows continuous data components to transition smoothly when new data points enter and exit. 
+`VictoryArea` uses [`VictoryClipContainer`](/docs/api/victory-clip-container) as its default `groupComponent` `VictoryClipContainer` renders a `<g>` tag with a `clipPath` `def`. This allows continuous data components to transition smoothly when new data points enter and exit.
 :::
 
 :::warning
@@ -241,7 +241,7 @@ To enable tooltips on `VictoryArea`, it is necessary to use [`VictoryVoronoiCont
 Defines the style of the component using [VictoryStyleInterface](/docs/api/victory-style-interface).
 
 :::note
-Since `VictoryArea` renders a single element to represent an entire dataset, it is not possible to use functional styles to change the style of the line as a function of an individual `datum`. Instead, try using [gradient fills](/docs/guides/themes#gradient-fills) for styling continuous data.
+Since `VictoryArea` renders a single element to represent an entire dataset, it is not possible to use functional styles to change the style of the line as a function of an individual `datum`. Instead, try using [gradient fills](/docs/guides/themes#using-gradient-fills) for styling continuous data.
 :::
 
 ```jsx live
diff --git a/website/docs/api/victory-theme.mdx b/website/docs/api/victory-theme.mdx
index f9a9c0d22..d6d9c7cb6 100644
--- a/website/docs/api/victory-theme.mdx
+++ b/website/docs/api/victory-theme.mdx
@@ -43,6 +43,23 @@ interface VictoryThemeDefinition {
 }
 ```
 
+### `palette`
+
+The `palette` property defines a collection of colors that can be used across all chart elements. Each palette contains predefined color arrays that you can use directly or customize as needed.
+
+#### Properties
+
+| Property      | Type       | Description                                                                                   |
+| ------------- | ---------- | --------------------------------------------------------------------------------------------- |
+| `grayscale`   | `string[]` | Shades of gray, ideal for minimalist or monochrome chart designs                              |
+| `qualitative` | `string[]` | Used for categorical data, containing distinct colors that are easy to differentiate visually |
+| `heatmap`     | `string[]` | A gradient-based color scheme often used for heatmaps or data density visualizations          |
+| `warm`        | `string[]` | Warm colors like reds, oranges, and yellows                                                   |
+| `cool`        | `string[]` | Cool colors such as blues, purples, and greens                                                |
+| `red`         | `string[]` | Various shades of red                                                                         |
+| `blue`        | `string[]` | Various shades of blue                                                                        |
+| `green`       | `string[]` | Various shades of green                                                                       |
+
 ## Example
 
 ```jsx live
diff --git a/website/docs/guides/themes.mdx b/website/docs/guides/themes.mdx
index da2038252..76862d6c5 100644
--- a/website/docs/guides/themes.mdx
+++ b/website/docs/guides/themes.mdx
@@ -4,7 +4,61 @@ title: Themes & Styling
 
 ## Themes
 
-Try out the Victory themes and make your own. Check out the [VictoryTheme API documentation](/docs/api/victory-theme) more details on themes.
+Victory themes are reusable style configurations that enable you to standardize the appearance of charts across your application. Themes simplify chart development by reducing repetitive styling logic and ensuring visual consistency.
+
+Themes are applied at the chart level and automatically cascade to all child components, such as axes, bars, lines, and legends. Victory provides built-in themes like `clean`, `material` and `grayscale`, but you can also create custom themes to match your branding.
+
+### How Themes Work in Victory
+
+Victory themes are essentially JavaScript objects that define styling properties for various chart elements. These theme configurations enable consistent and reusable styling across charts. Each theme configuration variable corresponds to a specific chart element and takes props that define its styles.
+
+Theme configuration variables include:
+
+- [`.palette`](/docs/api/victory-theme#palette)
+  - Defines color schemes used across the theme.
+- [`.chart`](/docs/api/victory-chart)
+  - Global styles like background and padding.
+- [`.area`](/docs/api/victory-area)
+- [`.axis`](/docs/api/victory-axis)
+- [`.polarAxis`](/docs/api/victory-polar-axis)
+- [`.polarDependentAxis`](/docs/api/victory-polar-axis)
+- [`.bar`](/docs/api/victory-bar)
+- [`.boxplot`](/docs/api/victory-boxplot)
+- [`.candlestick`](/docs/api/victory-candlestick)
+- [`.errorbar`](/docs/api/victory-error-bar)
+- [`.group`](/docs/api/victory-group)
+- [`.histogram`](/docs/api/victory-histogram)
+- [`.legend`](/docs/api/victory-legend)
+- [`.line`](/docs/api/victory-line)
+- [`.pie`](/docs/api/victory-pie)
+- [`.scatter`](/docs/api/victory-scatter)
+- [`.stack`](/docs/api/victory-stack)
+- [`.tooltip`](/docs/api/victory-tooltip)
+- [`.voronoi`](/docs/api/victory-voronoi)
+
+Each configuration variable takes props specific to its chart element, allowing customization of styles like colors, padding, labels, and more. For detailed information about each variable, refer to the [VictoryTheme API page](/docs/api/victory-theme).
+
+When a theme is passed to a chart via the `theme` prop, the styles from the theme object are applied to the corresponding child components unless they are explicitly overridden by inline props.
+
+```jsx live
+<VictoryChart
+  theme={VictoryTheme.material}
+>
+  <VictoryBar />
+</VictoryChart>
+```
+
+### Predefined Themes
+
+Victory includes several built-in themes to help you quickly style your charts:
+
+| Theme                    | Description                                                                                         |
+| ------------------------ | --------------------------------------------------------------------------------------------------- |
+| `VictoryTheme.clean`     | A minimalist theme with no gridlines or extra styling, perfect for clean and modern visualizations. |
+| `VictoryTheme.material`  | Inspired by Google's Material Design, this theme includes bold colors and a structured grid.        |
+| `VictoryTheme.grayscale` | A neutral theme featuring grayscale tones, ideal for muted and professional-looking charts.         |
+
+Each of these themes can be applied to your Victory components by passing it into the `theme` prop.
 
 ```jsx live noInline
 const result = [...Array(10).keys()];
@@ -39,34 +93,34 @@ const DemoComponent = () => {
   ];
   return (
     <div>
-      <div className="mb-8 p-4 mx-auto">
+      <div className="mb-8 p-4 mx-auto flex justify-between w-full">
         <button
-          className="bg-gray-600 border border-gray-800 text-white uppercase py-6 px-12"
+          className="bg-blue-600 border-none rounded-md text-white uppercase py-3 px-6 hover:bg-blue-700 cursor-pointer"
           onClick={() =>
-            setTheme(
-              VictoryTheme.grayscale,
-            )
+            setTheme(VictoryTheme.clean)
           }
         >
-          use grayscale
+          clean
         </button>
         <button
-          className="bg-orange-600 border border-blue-800 text-white uppercase py-6 px-12 ml-2"
+          className="bg-orange-600 border-none rounded-md text-white uppercase py-3 px-6 hover:bg-orange-700 cursor-pointer"
           onClick={() =>
             setTheme(
               VictoryTheme.material,
             )
           }
         >
-          use material
+          material
         </button>
         <button
-          className="bg-blue-600 border border-blue-800 text-white uppercase py-6 px-12 ml-2"
+          className="bg-gray-600 border-none rounded-md text-white uppercase py-3 px-6 hover:bg-gray-700 cursor-pointer"
           onClick={() =>
-            setTheme(VictoryTheme.clean)
+            setTheme(
+              VictoryTheme.grayscale,
+            )
           }
         >
-          use clean
+          grayscale
         </button>
       </div>
       <svg
@@ -231,11 +285,83 @@ const DemoComponent = () => {
 render(<DemoComponent />);
 ```
 
-## Styles
+You can also customize these themes or use them as a base to create your own. To build upon a predefined theme, you can extend it using the spread operator:
 
-### How can I change the colors of lines and other elements in Victory?
+```jsx
+const extendedTheme = {
+  ...VictoryTheme.material,
+  axis: {
+    ...VictoryTheme.material.axis,
+    style: {
+      ...VictoryTheme.material.axis
+        .style,
+      tickLabels: {
+        fill: "#444",
+        fontSize: 10,
+        fontStyle: "italic",
+      },
+    },
+  },
+};
+```
+
+### Creating a Custom Theme
 
-Most components in Victory use a standard `style` prop with style namespaces for "data" and "labels". Any styles added to the "data" namespace will be applied to all the svg elements rendered for a given dataset.
+To create a completely custom theme, define a JavaScript object that includes styles for the components you want to theme. You can omit components that use default styling.
+
+```jsx live noInline
+const customTheme = {
+  axis: {
+    style: {
+      grid: { stroke: "none" },
+      axis: {
+        stroke: "#333",
+        strokeWidth: 2,
+      },
+      ticks: {
+        stroke: "#555",
+        size: 5,
+      },
+      tickLabels: {
+        fill: "#222",
+        fontSize: 12,
+        padding: 5,
+      },
+    },
+  },
+  bar: {
+    style: {
+      data: {
+        fill: "#0074d9",
+        width: 15,
+      },
+    },
+  },
+};
+
+render(
+  <VictoryChart
+    theme={customTheme}
+    domainPadding={{ x: 40 }}
+  >
+    <VictoryBar
+      data={[
+        { x: 1, y: 2 },
+        { x: 2, y: 4 },
+        { x: 3, y: 6 },
+      ]}
+    />
+  </VictoryChart>,
+);
+```
+
+To enhance the "Styles" section of the Victory Themes guide, consider incorporating the following detailed explanations and examples:
+
+## Styling Individual Components
+
+To customize the appearance of Victory components, you can use the `style` prop, which accepts an object containing styles for various component elements like `data`, `labels`, and `parent`. For a detailed breakdown of the style options available, refer to the [Victory Style Interface](/docs/api/victory-style-interface).
+
+**Example: Customizing Bar and Line Colors**
 
 ```jsx live
 <VictoryChart
@@ -262,9 +388,11 @@ Most components in Victory use a standard `style` prop with style namespaces for
 </VictoryChart>
 ```
 
-### How can I change the color of an individual point or bar?
+### Styling Data
+
+To style individual elements within a dataset, you can include style attributes directly in your data objects and utilize functional styles.
 
-Individual elements in Victory can be styled by adding style attributes directly to your data object and using functional styles and props as in the example below. Functions are called with all the props that correspond to the element they render.
+**Note:** Continuous data components like `VictoryLine` and `VictoryArea` render a single SVG element for the entire dataset, so individual styling of data points within these components is not applicable.
 
 ```jsx live
 <VictoryChart>
@@ -284,7 +412,7 @@ Individual elements in Victory can be styled by adding style attributes directly
     style={{
       data: {
         fill: ({ index }) =>
-          +index % 2 === 0
+          index % 2 === 0
             ? "blue"
             : "grey",
         stroke: ({ datum }) =>
@@ -307,11 +435,9 @@ Individual elements in Victory can be styled by adding style attributes directly
 </VictoryChart>
 ```
 
-Note that continuous data types such as `VictoryLine` and `VictoryArea` cannot be styled in this way, as they only render a single element for a given dataset.
-
-### Gradient Fills
+### Using Gradient Fills
 
-Create a gradient def as usual and then reference it by id in your style object. Gradients can be used to give continuous charts (_i.e._ line or area charts) the appearance of discrete data elements and hover states. 
+To apply gradient fills to your charts, define a gradient in the SVG `defs` section and reference it by id in your component's style. Gradients can be used to give continuous charts (i.e. line or area charts) the appearance of discrete data elements and hover states.
 
 ```jsx live
 <div>
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index 35fe7b465..27c8b6501 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -175,6 +175,10 @@ const config: Config = {
       darkTheme: prismThemes.dracula,
       additionalLanguages: ["diff", "diff-ts"],
     },
+    colorMode: {
+      defaultMode: "light",
+      disableSwitch: true,
+    },
   },
   headTags: [
     {
diff --git a/website/src/pages/themes/_components/color-scale-override-selector.tsx b/website/src/pages/themes/_components/color-scale-override-selector.tsx
index 75f8ff7c8..c624bd87f 100644
--- a/website/src/pages/themes/_components/color-scale-override-selector.tsx
+++ b/website/src/pages/themes/_components/color-scale-override-selector.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback } from "react";
 import clsx from "clsx";
 import Toggle from "./toggle";
 import {
@@ -28,6 +28,9 @@ const ColorScaleOverrideSelector = ({
   const [showCustomColors, setShowCustomColors] = React.useState(
     () => !!colors && Array.isArray(colors),
   );
+  const [prevColors, setPrevColors] = React.useState<string[]>(
+    Array.isArray(colors) ? colors : [],
+  );
 
   const setColorScaleToDefault = useCallback(() => {
     if (colorScale !== defaultColorScale) {
@@ -37,14 +40,13 @@ const ColorScaleOverrideSelector = ({
 
   const onCheckboxChange = (isChecked) => {
     setShowCustomColors(isChecked);
-    if (!isChecked) {
-      onColorsChange(undefined);
-    }
+    onColorsChange(!isChecked ? undefined : prevColors);
     setColorScaleToDefault();
   };
 
   const handleColorsChange = (newColors) => {
     onColorsChange(newColors);
+    setPrevColors(newColors);
     setColorScaleToDefault();
   };
 
diff --git a/website/src/pages/themes/_components/control.tsx b/website/src/pages/themes/_components/control.tsx
index 4444eb238..c1dd35d35 100644
--- a/website/src/pages/themes/_components/control.tsx
+++ b/website/src/pages/themes/_components/control.tsx
@@ -22,25 +22,13 @@ type ControlProps = {
 };
 
 const Control = ({ type, control, className }: ControlProps) => {
-  const { baseTheme, customThemeConfig, updateCustomThemeConfig } = useTheme();
+  const { customThemeConfig, updateCustomThemeConfig } = useTheme();
 
   const handleChange = (newValue) => {
     updateCustomThemeConfig(control.path, newValue);
   };
 
-  const handleSliderToggle = (isChecked: boolean) => {
-    const defaultValue =
-      getConfigValue(baseTheme?.config, control.path, control.min) || 0;
-    const newValue = isChecked ? undefined : defaultValue;
-    handleChange(newValue);
-  };
-
-  const configValue = getConfigValue(
-    customThemeConfig,
-    control.path,
-    control.default,
-  );
-
+  const configValue = getConfigValue(customThemeConfig, control.path);
   const id = useId();
 
   switch (type) {
@@ -103,13 +91,13 @@ const Control = ({ type, control, className }: ControlProps) => {
           key={control.label}
           label={control.label}
           value={configValue as number}
+          defaultValue={control.default}
           unit={control.unit}
           onChange={handleChange}
           min={control.min}
           max={control.max}
           step={control.step}
           className={className}
-          onDefaultToggle={handleSliderToggle}
         />
       );
     case "select":
diff --git a/website/src/pages/themes/_components/slider.tsx b/website/src/pages/themes/_components/slider.tsx
index 3592d7e47..6885bf841 100644
--- a/website/src/pages/themes/_components/slider.tsx
+++ b/website/src/pages/themes/_components/slider.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import clsx from "clsx";
 import Toggle from "./toggle";
 
@@ -6,34 +6,39 @@ type SliderProps = {
   label: string;
   id: string;
   value?: number;
+  defaultValue?: number;
   unit?: string;
   onChange?: (value?: number) => void;
-  onDefaultToggle?: (isChecked: boolean) => void;
   min?: number;
   max?: number;
   step?: number;
   className?: string;
 };
 
-const DEFAULT_MIN = 0;
+const DEFAULT_MIN = 1;
 const DEFAULT_MAX = 100;
 
 const Slider = ({
   label,
   id,
   value,
+  defaultValue,
   unit,
   onChange,
-  onDefaultToggle,
   min = DEFAULT_MIN,
   max = DEFAULT_MAX,
   step = 1,
   className,
 }: SliderProps) => {
+  const [prevValue, setPrevValue] = useState(() => {
+    return value ?? defaultValue ?? min;
+  });
+
   const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = event.target.valueAsNumber;
     if (onChange) {
       onChange(newValue);
+      setPrevValue(newValue);
     }
   };
 
@@ -45,8 +50,9 @@ const Slider = ({
   };
 
   const handleToggle = (isChecked: boolean) => {
-    if (!onDefaultToggle) return;
-    onDefaultToggle(isChecked);
+    if (!onChange) return;
+    const newValue = isChecked ? undefined : prevValue;
+    onChange(newValue);
   };
 
   const isUsingDefault = value === undefined;
diff --git a/website/src/pages/themes/_config/global.tsx b/website/src/pages/themes/_config/global.tsx
index 6493d507a..9a039b040 100644
--- a/website/src/pages/themes/_config/global.tsx
+++ b/website/src/pages/themes/_config/global.tsx
@@ -12,7 +12,7 @@ const globalOptionsConfig: OptionsPanelConfig = {
         {
           type: "slider",
           label: "Width",
-          min: 0,
+          min: 150,
           max: 500,
           unit: "px",
           path: [
@@ -35,7 +35,7 @@ const globalOptionsConfig: OptionsPanelConfig = {
         {
           type: "slider",
           label: "Height",
-          min: 0,
+          min: 150,
           max: 500,
           unit: "px",
           path: [
diff --git a/website/src/pages/themes/_config/index.tsx b/website/src/pages/themes/_config/index.tsx
index 2b5c896f1..78d5a3912 100644
--- a/website/src/pages/themes/_config/index.tsx
+++ b/website/src/pages/themes/_config/index.tsx
@@ -23,14 +23,23 @@ export type ControlConfig = {
       showDefaultToggle?: boolean;
     }
   | {
-      type: "slider" | "select" | "colorPicker";
+      type: "slider";
       path: string | string[];
       min?: number;
       max?: number;
       step?: number;
       unit?: string;
+      default?: number;
+    }
+  | {
+      type: "select" | "colorPicker";
+      path: string | string[];
       options?: { label: string; value: string }[];
     }
+  | {
+      type: "colorPicker";
+      path: string | string[];
+    }
 );
 
 export type OptionsPanelConfig = {
diff --git a/website/src/pages/themes/_utils.ts b/website/src/pages/themes/_utils.ts
index 301158d7c..14f317bf7 100644
--- a/website/src/pages/themes/_utils.ts
+++ b/website/src/pages/themes/_utils.ts
@@ -28,13 +28,12 @@ export const setNestedConfigValue = (
 export const getConfigValue = (
   config: VictoryThemeDefinition,
   path: string | string[],
-  defaultValue?: unknown,
 ) => {
   const pathString = Array.isArray(path) ? path[0] : path;
   if (!pathString) return undefined;
   const pathArray = pathString.split(".");
   return pathArray.reduce((acc, key) => {
-    return acc && acc[key] !== undefined ? acc[key] : defaultValue;
+    return acc?.[key];
   }, config);
 };
 
@@ -73,13 +72,18 @@ export const getBaseStrokeConfig = (
       max: 5,
       unit: "px",
       path: getPath(basePath, "strokeWidth"),
+      default: 1,
     },
     {
-      type: "slider",
+      type: "select",
       label: StrokeProps.STROKE_DASH_ARRAY,
-      min: 0,
-      max: 10,
       path: getPath(basePath, "strokeDasharray"),
+      options: [
+        { label: "Solid", value: "0" },
+        { label: "Dashed", value: "4, 4" },
+        { label: "Dotted", value: "1, 1" },
+        { label: "Long Dash", value: "10, 5" },
+      ],
     },
     {
       type: "select",

From 4ed5c4d4ee2d8c77890831821d14642da16eaea8 Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Wed, 29 Jan 2025 10:09:45 -0500
Subject: [PATCH 30/30] fix(theme-builder): lint errors

---
 website/src/hooks/useLocalStorage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/src/hooks/useLocalStorage.tsx b/website/src/hooks/useLocalStorage.tsx
index ce95d0451..1cd84df26 100644
--- a/website/src/hooks/useLocalStorage.tsx
+++ b/website/src/hooks/useLocalStorage.tsx
@@ -17,6 +17,7 @@ export const useLocalStorage = (key: string, initialValue: any) => {
       try {
         localStorage.setItem(key, JSON.stringify(storedValue));
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.error("Error saving to localStorage", error);
       }
     }