@razzusharma/accent-theme 1.0.0

package/dist/index.js

@@ -0,0 +1,463 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AccentColorPicker: () => AccentColorPicker,
+  AccentColorSwatch: () => AccentColorSwatch,
+  AccentThemeProvider: () => AccentThemeProvider,
+  adjustHSL: () => adjustHSL,
+  applyCSSVariables: () => applyCSSVariables,
+  createGradient: () => createGradient,
+  createShadow: () => createShadow,
+  defaultAccentColors: () => defaultAccentColors,
+  generateCSSVariables: () => generateCSSVariables,
+  getContrastColor: () => getContrastColor,
+  isClient: () => isClient,
+  storage: () => storage,
+  useAccentColor: () => useAccentColor,
+  useAccentTheme: () => useAccentTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/AccentThemeProvider.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+
+// src/colors.ts
+var defaultAccentColors = {
+  teal: {
+    name: "Teal",
+    primary: "174 72% 35%",
+    primaryForeground: "210 40% 98%",
+    light: "174 72% 45%",
+    dark: "174 72% 25%",
+    gradient: "from-teal-500 to-emerald-500"
+  },
+  blue: {
+    name: "Ocean Blue",
+    primary: "217 91% 45%",
+    primaryForeground: "210 40% 98%",
+    light: "217 91% 55%",
+    dark: "217 91% 35%",
+    gradient: "from-blue-500 to-cyan-500"
+  },
+  purple: {
+    name: "Royal Purple",
+    primary: "270 60% 45%",
+    primaryForeground: "210 40% 98%",
+    light: "270 60% 55%",
+    dark: "270 60% 35%",
+    gradient: "from-purple-500 to-pink-500"
+  },
+  rose: {
+    name: "Rose Pink",
+    primary: "350 80% 50%",
+    primaryForeground: "210 40% 98%",
+    light: "350 80% 60%",
+    dark: "350 80% 40%",
+    gradient: "from-rose-500 to-pink-500"
+  },
+  amber: {
+    name: "Sunset Amber",
+    primary: "35 95% 45%",
+    primaryForeground: "210 40% 98%",
+    light: "35 95% 55%",
+    dark: "35 95% 35%",
+    gradient: "from-amber-500 to-orange-500"
+  },
+  emerald: {
+    name: "Forest Emerald",
+    primary: "150 65% 35%",
+    primaryForeground: "210 40% 98%",
+    light: "150 65% 45%",
+    dark: "150 65% 25%",
+    gradient: "from-emerald-500 to-green-500"
+  },
+  indigo: {
+    name: "Deep Indigo",
+    primary: "240 60% 50%",
+    primaryForeground: "210 40% 98%",
+    light: "240 60% 60%",
+    dark: "240 60% 40%",
+    gradient: "from-indigo-500 to-purple-500"
+  },
+  cyan: {
+    name: "Electric Cyan",
+    primary: "190 90% 45%",
+    primaryForeground: "210 40% 98%",
+    light: "190 90% 55%",
+    dark: "190 90% 35%",
+    gradient: "from-cyan-500 to-blue-500"
+  }
+};
+function mergeColors(defaultColors, customColors) {
+  if (!customColors) return defaultColors;
+  return { ...defaultColors, ...customColors };
+}
+
+// src/AccentThemeProvider.tsx
+var defaultContext = {
+  accentColor: "teal",
+  setAccentColor: () => {
+  },
+  accentConfig: defaultAccentColors.teal,
+  mounted: false
+};
+var AccentThemeContext = (0, import_react.createContext)(defaultContext);
+function AccentThemeProvider({
+  children,
+  defaultColor = "teal",
+  customColors,
+  storageKey = "accent-color",
+  cssVariablePrefix = ""
+}) {
+  const colors = mergeColors(defaultAccentColors, customColors);
+  const [accentColor, setAccentColorState] = (0, import_react.useState)(defaultColor);
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  const getVarName = (name) => {
+    return cssVariablePrefix ? `${cssVariablePrefix}-${name}` : name;
+  };
+  (0, import_react.useEffect)(() => {
+    setMounted(true);
+    const stored = localStorage.getItem(storageKey);
+    if (stored && colors[stored]) {
+      setAccentColorState(stored);
+    }
+  }, [storageKey, colors]);
+  (0, import_react.useEffect)(() => {
+    if (!mounted) return;
+    const root = document.documentElement;
+    const config = colors[accentColor];
+    if (!config) return;
+    root.style.setProperty(`--${getVarName("primary")}`, config.primary);
+    root.style.setProperty(`--${getVarName("primary-foreground")}`, config.primaryForeground);
+    root.style.setProperty(`--${getVarName("ring")}`, config.light);
+    root.style.setProperty(`--${getVarName("accent")}`, config.light);
+    localStorage.setItem(storageKey, accentColor);
+    root.setAttribute(`data-${getVarName("accent")}`, accentColor);
+  }, [accentColor, mounted, colors, cssVariablePrefix, getVarName]);
+  const setAccentColor = (0, import_react.useCallback)((color) => {
+    if (colors[color]) {
+      setAccentColorState(color);
+    } else {
+      console.warn(`[AccentTheme] Color "${color}" not found in available colors`);
+    }
+  }, [colors]);
+  const value = {
+    accentColor,
+    setAccentColor,
+    accentConfig: colors[accentColor] || colors[defaultColor],
+    mounted
+  };
+  return React.createElement(
+    AccentThemeContext.Provider,
+    { value },
+    children
+  );
+}
+function useAccentTheme() {
+  return (0, import_react.useContext)(AccentThemeContext);
+}
+function useAccentColor() {
+  const { accentConfig, mounted } = useAccentTheme();
+  return {
+    primary: `hsl(${accentConfig.primary})`,
+    primaryForeground: `hsl(${accentConfig.primaryForeground})`,
+    light: `hsl(${accentConfig.light})`,
+    dark: `hsl(${accentConfig.dark})`,
+    gradient: accentConfig.gradient,
+    mounted
+  };
+}
+
+// src/AccentColorPicker.tsx
+var React2 = __toESM(require("react"));
+var import_react2 = require("react");
+function AccentColorPicker({
+  size = "md",
+  variant = "dropdown",
+  columns = 4,
+  className = "",
+  onChange
+}) {
+  const { accentColor, setAccentColor, mounted } = useAccentTheme();
+  const { primary } = useAccentColor();
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const handleColorChange = (color) => {
+    setAccentColor(color);
+    onChange?.(color);
+    if (variant === "dropdown") {
+      setIsOpen(false);
+    }
+  };
+  const sizeClasses = {
+    sm: "w-6 h-6",
+    md: "w-8 h-8",
+    lg: "w-10 h-10"
+  };
+  const selectedSizeClasses = {
+    sm: "w-7 h-7",
+    md: "w-9 h-9",
+    lg: "w-11 h-11"
+  };
+  if (!mounted) {
+    return React2.createElement("div", {
+      className: `animate-pulse bg-gray-200 rounded-full ${sizeClasses[size]}`
+    });
+  }
+  if (variant === "inline") {
+    return React2.createElement("div", {
+      className: `grid gap-2 ${className}`,
+      style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }
+    }, Object.entries(defaultAccentColors).map(([color, config]) => {
+      const isSelected = accentColor === color;
+      return React2.createElement("button", {
+        key: color,
+        onClick: () => handleColorChange(color),
+        className: `
+          relative rounded-full transition-all duration-200
+          hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2
+          ${isSelected ? `ring-2 ring-offset-2 scale-110 ${selectedSizeClasses[size]}` : sizeClasses[size]}
+        `,
+        style: {
+          background: `hsl(${config.primary})`,
+          ["--tw-ring-color"]: `hsl(${config.light})`
+        },
+        title: config.name,
+        "aria-label": `Select ${config.name} theme`,
+        "aria-pressed": isSelected
+      }, isSelected && React2.createElement("svg", {
+        className: "absolute inset-0 w-full h-full p-1.5 text-white",
+        viewBox: "0 0 20 20",
+        fill: "currentColor"
+      }, React2.createElement("path", {
+        fillRule: "evenodd",
+        d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+        clipRule: "evenodd"
+      })));
+    }));
+  }
+  return React2.createElement(
+    "div",
+    { className: `relative ${className}` },
+    React2.createElement("button", {
+      onClick: () => setIsOpen(!isOpen),
+      className: "flex items-center gap-2 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors",
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox"
+    }, [
+      React2.createElement("div", {
+        key: "swatch",
+        className: "w-5 h-5 rounded-full",
+        style: { background: primary }
+      }),
+      React2.createElement("span", {
+        key: "label",
+        className: "text-sm font-medium text-gray-700 dark:text-gray-300"
+      }, "Theme"),
+      React2.createElement("svg", {
+        key: "chevron",
+        className: `w-4 h-4 text-gray-500 transition-transform ${isOpen ? "rotate-180" : ""}`,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor"
+      }, React2.createElement("path", {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M19 9l-7 7-7-7"
+      }))
+    ]),
+    isOpen && React2.createElement(React2.Fragment, {}, [
+      React2.createElement("div", {
+        key: "backdrop",
+        className: "fixed inset-0 z-40",
+        onClick: () => setIsOpen(false)
+      }),
+      React2.createElement("div", {
+        key: "dropdown",
+        className: "absolute right-0 mt-2 p-3 bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 z-50 min-w-[200px]",
+        role: "listbox"
+      }, [
+        React2.createElement("div", {
+          key: "grid",
+          className: "grid grid-cols-4 gap-2"
+        }, Object.entries(defaultAccentColors).map(([color, config]) => {
+          const isSelected = accentColor === color;
+          return React2.createElement("button", {
+            key: color,
+            onClick: () => handleColorChange(color),
+            className: `
+              relative w-10 h-10 rounded-lg transition-all duration-200
+              hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2
+              ${isSelected ? "ring-2 ring-offset-2 scale-105" : ""}
+            `,
+            style: {
+              background: `hsl(${config.primary})`,
+              ["--tw-ring-color"]: `hsl(${config.light})`
+            },
+            title: config.name,
+            role: "option",
+            "aria-selected": isSelected
+          }, isSelected && React2.createElement("svg", {
+            className: "absolute inset-0 w-full h-full p-2 text-white",
+            viewBox: "0 0 20 20",
+            fill: "currentColor"
+          }, React2.createElement("path", {
+            fillRule: "evenodd",
+            d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+            clipRule: "evenodd"
+          })));
+        })),
+        React2.createElement("div", {
+          key: "footer",
+          className: "mt-3 pt-3 border-t border-gray-100 dark:border-gray-700"
+        }, React2.createElement("p", {
+          className: "text-xs text-gray-500 dark:text-gray-400 text-center"
+        }, `Current: ${defaultAccentColors[accentColor]?.name || accentColor}`))
+      ])
+    ])
+  );
+}
+function AccentColorSwatch({
+  color,
+  isSelected,
+  onClick,
+  size = "md"
+}) {
+  const config = defaultAccentColors[color];
+  if (!config) return null;
+  const sizeClasses = {
+    sm: "w-6 h-6",
+    md: "w-8 h-8",
+    lg: "w-10 h-10"
+  };
+  return React2.createElement("button", {
+    onClick,
+    className: `
+      relative rounded-full transition-all duration-200
+      hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2
+      ${sizeClasses[size]}
+      ${isSelected ? "ring-2 ring-offset-2 scale-110" : ""}
+    `,
+    style: {
+      background: `hsl(${config.primary})`,
+      ["--tw-ring-color"]: `hsl(${config.light})`
+    },
+    title: config.name
+  }, isSelected && React2.createElement("svg", {
+    className: "absolute inset-0 w-full h-full p-1.5 text-white",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, React2.createElement("path", {
+    fillRule: "evenodd",
+    d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+    clipRule: "evenodd"
+  })));
+}
+
+// src/utils.ts
+function generateCSSVariables(config, prefix = "") {
+  const p = prefix ? `${prefix}-` : "";
+  return {
+    [`--${p}primary`]: config.primary,
+    [`--${p}primary-foreground`]: config.primaryForeground,
+    [`--${p}accent`]: config.light,
+    [`--${p}ring`]: config.light
+  };
+}
+function applyCSSVariables(element, variables) {
+  Object.entries(variables).forEach(([key, value]) => {
+    element.style.setProperty(key, value);
+  });
+}
+function createGradient(config, direction = "to right") {
+  return `linear-gradient(${direction}, hsl(${config.light}), hsl(${config.primary}))`;
+}
+function createShadow(config, intensity = 0.3, blur = 20) {
+  return `0 4px ${blur}px hsl(${config.primary} / ${intensity})`;
+}
+function adjustHSL(hsl, adjustments) {
+  const [h, s, l] = hsl.split(" ").map((v) => parseFloat(v));
+  const newH = h + (adjustments.hue || 0);
+  const newS = Math.max(0, Math.min(100, s + (adjustments.saturation || 0)));
+  const newL = Math.max(0, Math.min(100, l + (adjustments.lightness || 0)));
+  return `${newH} ${newS}% ${newL}%`;
+}
+function getContrastColor(hsl, threshold = 50) {
+  const [, , l] = hsl.split(" ").map((v) => parseFloat(v));
+  return l > threshold ? "black" : "white";
+}
+function isClient() {
+  return typeof window !== "undefined";
+}
+var storage = {
+  get: (key, defaultValue) => {
+    if (!isClient()) return defaultValue;
+    try {
+      return localStorage.getItem(key) || defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  },
+  set: (key, value) => {
+    if (!isClient()) return;
+    try {
+      localStorage.setItem(key, value);
+    } catch {
+    }
+  },
+  remove: (key) => {
+    if (!isClient()) return;
+    try {
+      localStorage.removeItem(key);
+    } catch {
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AccentColorPicker,
+  AccentColorSwatch,
+  AccentThemeProvider,
+  adjustHSL,
+  applyCSSVariables,
+  createGradient,
+  createShadow,
+  defaultAccentColors,
+  generateCSSVariables,
+  getContrastColor,
+  isClient,
+  storage,
+  useAccentColor,
+  useAccentTheme
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/AccentThemeProvider.tsx","../src/colors.ts","../src/AccentColorPicker.tsx","../src/utils.ts"],"sourcesContent":["// Main exports\nexport { AccentThemeProvider, useAccentTheme, useAccentColor } from './AccentThemeProvider';\nexport { AccentColorPicker, AccentColorSwatch } from './AccentColorPicker';\nexport { defaultAccentColors } from './colors';\n\n// Types\nexport type {\n  AccentColor,\n  AccentColorConfig,\n  AccentThemeContextType,\n  AccentThemeProviderProps,\n} from './types';\n\n// Utilities\nexport {\n  generateCSSVariables,\n  applyCSSVariables,\n  createGradient,\n  createShadow,\n  adjustHSL,\n  getContrastColor,\n  isClient,\n  storage,\n} from './utils';\n","\"use client\";\n\nimport * as React from \"react\";\nimport { \n  createContext, \n  useContext, \n  useEffect, \n  useState, \n  useCallback\n} from \"react\";\nimport type { \n  AccentColor, \n  AccentThemeContextType, \n  AccentThemeProviderProps \n} from \"./types\";\nimport { defaultAccentColors, mergeColors } from \"./colors\";\n\nconst defaultContext: AccentThemeContextType = {\n  accentColor: \"teal\",\n  setAccentColor: () => {},\n  accentConfig: defaultAccentColors.teal,\n  mounted: false,\n};\n\nconst AccentThemeContext = createContext<AccentThemeContextType>(defaultContext);\n\nexport function AccentThemeProvider({ \n  children, \n  defaultColor = \"teal\",\n  customColors,\n  storageKey = \"accent-color\",\n  cssVariablePrefix = \"\"\n}: AccentThemeProviderProps) {\n  const colors = mergeColors(defaultAccentColors, customColors);\n  \n  const [accentColor, setAccentColorState] = useState<AccentColor>(defaultColor);\n  const [mounted, setMounted] = useState(false);\n\n  // Get CSS variable names\n  const getVarName = (name: string) => {\n    return cssVariablePrefix ? `${cssVariablePrefix}-${name}` : name;\n  };\n\n  useEffect(() => {\n    setMounted(true);\n    // Check local storage\n    const stored = localStorage.getItem(storageKey) as AccentColor;\n    if (stored && colors[stored]) {\n      setAccentColorState(stored);\n    }\n  }, [storageKey, colors]);\n\n  useEffect(() => {\n    if (!mounted) return;\n    \n    const root = document.documentElement;\n    const config = colors[accentColor];\n    \n    if (!config) return;\n    \n    // Update CSS variables\n    root.style.setProperty(`--${getVarName('primary')}`, config.primary);\n    root.style.setProperty(`--${getVarName('primary-foreground')}`, config.primaryForeground);\n    root.style.setProperty(`--${getVarName('ring')}`, config.light);\n    root.style.setProperty(`--${getVarName('accent')}`, config.light);\n    \n    // Store preference\n    localStorage.setItem(storageKey, accentColor);\n    \n    // Add data attribute for Tailwind selectors\n    root.setAttribute(`data-${getVarName('accent')}`, accentColor);\n  }, [accentColor, mounted, colors, cssVariablePrefix, getVarName]);\n\n  const setAccentColor = useCallback((color: AccentColor) => {\n    if (colors[color]) {\n      setAccentColorState(color);\n    } else {\n      console.warn(`[AccentTheme] Color \"${color}\" not found in available colors`);\n    }\n  }, [colors]);\n\n  const value: AccentThemeContextType = {\n    accentColor,\n    setAccentColor,\n    accentConfig: colors[accentColor] || colors[defaultColor],\n    mounted,\n  };\n\n  return React.createElement(\n    AccentThemeContext.Provider,\n    { value },\n    children\n  );\n}\n\nexport function useAccentTheme() {\n  return useContext(AccentThemeContext);\n}\n\n// Utility hook for getting color values\nexport function useAccentColor() {\n  const { accentConfig, mounted } = useAccentTheme();\n  \n  return {\n    primary: `hsl(${accentConfig.primary})`,\n    primaryForeground: `hsl(${accentConfig.primaryForeground})`,\n    light: `hsl(${accentConfig.light})`,\n    dark: `hsl(${accentConfig.dark})`,\n    gradient: accentConfig.gradient,\n    mounted,\n  };\n}\n","import { AccentColor, AccentColorConfig } from './types';\n\nexport const defaultAccentColors: Record<AccentColor, AccentColorConfig> = {\n  teal: {\n    name: \"Teal\",\n    primary: \"174 72% 35%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"174 72% 45%\",\n    dark: \"174 72% 25%\",\n    gradient: \"from-teal-500 to-emerald-500\",\n  },\n  blue: {\n    name: \"Ocean Blue\",\n    primary: \"217 91% 45%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"217 91% 55%\",\n    dark: \"217 91% 35%\",\n    gradient: \"from-blue-500 to-cyan-500\",\n  },\n  purple: {\n    name: \"Royal Purple\",\n    primary: \"270 60% 45%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"270 60% 55%\",\n    dark: \"270 60% 35%\",\n    gradient: \"from-purple-500 to-pink-500\",\n  },\n  rose: {\n    name: \"Rose Pink\",\n    primary: \"350 80% 50%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"350 80% 60%\",\n    dark: \"350 80% 40%\",\n    gradient: \"from-rose-500 to-pink-500\",\n  },\n  amber: {\n    name: \"Sunset Amber\",\n    primary: \"35 95% 45%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"35 95% 55%\",\n    dark: \"35 95% 35%\",\n    gradient: \"from-amber-500 to-orange-500\",\n  },\n  emerald: {\n    name: \"Forest Emerald\",\n    primary: \"150 65% 35%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"150 65% 45%\",\n    dark: \"150 65% 25%\",\n    gradient: \"from-emerald-500 to-green-500\",\n  },\n  indigo: {\n    name: \"Deep Indigo\",\n    primary: \"240 60% 50%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"240 60% 60%\",\n    dark: \"240 60% 40%\",\n    gradient: \"from-indigo-500 to-purple-500\",\n  },\n  cyan: {\n    name: \"Electric Cyan\",\n    primary: \"190 90% 45%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"190 90% 55%\",\n    dark: \"190 90% 35%\",\n    gradient: \"from-cyan-500 to-blue-500\",\n  },\n};\n\nexport function mergeColors(\n  defaultColors: Record<string, AccentColorConfig>,\n  customColors?: Record<string, AccentColorConfig>\n): Record<string, AccentColorConfig> {\n  if (!customColors) return defaultColors;\n  return { ...defaultColors, ...customColors };\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { useState } from \"react\";\nimport { useAccentTheme, useAccentColor } from \"./AccentThemeProvider\";\nimport { defaultAccentColors } from \"./colors\";\nimport { AccentColor } from \"./types\";\n\ninterface AccentColorPickerProps {\n  /** Size of the color swatches */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Show as a dropdown or inline grid */\n  variant?: \"dropdown\" | \"inline\";\n  /** Number of columns for inline variant */\n  columns?: number;\n  /** Custom className */\n  className?: string;\n  /** Callback when color changes */\n  onChange?: (color: AccentColor) => void;\n}\n\nexport function AccentColorPicker({\n  size = \"md\",\n  variant = \"dropdown\",\n  columns = 4,\n  className = \"\",\n  onChange,\n}: AccentColorPickerProps) {\n  const { accentColor, setAccentColor, mounted } = useAccentTheme();\n  const { primary } = useAccentColor();\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleColorChange = (color: AccentColor) => {\n    setAccentColor(color);\n    onChange?.(color);\n    if (variant === \"dropdown\") {\n      setIsOpen(false);\n    }\n  };\n\n  const sizeClasses = {\n    sm: \"w-6 h-6\",\n    md: \"w-8 h-8\",\n    lg: \"w-10 h-10\",\n  };\n\n  const selectedSizeClasses = {\n    sm: \"w-7 h-7\",\n    md: \"w-9 h-9\",\n    lg: \"w-11 h-11\",\n  };\n\n  if (!mounted) {\n    return React.createElement(\"div\", {\n      className: `animate-pulse bg-gray-200 rounded-full ${sizeClasses[size]}`\n    });\n  }\n\n  // Inline variant - show all colors\n  if (variant === \"inline\") {\n    return React.createElement(\"div\", {\n      className: `grid gap-2 ${className}`,\n      style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }\n    }, Object.entries(defaultAccentColors).map(([color, config]) => {\n      const isSelected = accentColor === color;\n      return React.createElement(\"button\", {\n        key: color,\n        onClick: () => handleColorChange(color),\n        className: `\n          relative rounded-full transition-all duration-200\n          hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2\n          ${isSelected ? `ring-2 ring-offset-2 scale-110 ${selectedSizeClasses[size]}` : sizeClasses[size]}\n        `,\n        style: {\n          background: `hsl(${config.primary})`,\n          ['--tw-ring-color' as string]: `hsl(${config.light})`,\n        },\n        title: config.name,\n        'aria-label': `Select ${config.name} theme`,\n        'aria-pressed': isSelected,\n      }, isSelected && React.createElement(\"svg\", {\n        className: \"absolute inset-0 w-full h-full p-1.5 text-white\",\n        viewBox: \"0 0 20 20\",\n        fill: \"currentColor\"\n      }, React.createElement(\"path\", {\n        fillRule: \"evenodd\",\n        d: \"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\",\n        clipRule: \"evenodd\"\n      })));\n    }));\n  }\n\n  // Dropdown variant\n  return React.createElement(\"div\", { className: `relative ${className}` },\n    React.createElement(\"button\", {\n      onClick: () => setIsOpen(!isOpen),\n      className: \"flex items-center gap-2 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\",\n      'aria-expanded': isOpen,\n      'aria-haspopup': \"listbox\"\n    }, [\n      React.createElement(\"div\", {\n        key: \"swatch\",\n        className: \"w-5 h-5 rounded-full\",\n        style: { background: primary }\n      }),\n      React.createElement(\"span\", {\n        key: \"label\",\n        className: \"text-sm font-medium text-gray-700 dark:text-gray-300\"\n      }, \"Theme\"),\n      React.createElement(\"svg\", {\n        key: \"chevron\",\n        className: `w-4 h-4 text-gray-500 transition-transform ${isOpen ? \"rotate-180\" : \"\"}`,\n        fill: \"none\",\n        viewBox: \"0 0 24 24\",\n        stroke: \"currentColor\"\n      }, React.createElement(\"path\", {\n        strokeLinecap: \"round\",\n        strokeLinejoin: \"round\",\n        strokeWidth: 2,\n        d: \"M19 9l-7 7-7-7\"\n      }))\n    ]),\n    isOpen && React.createElement(React.Fragment, {}, [\n      React.createElement(\"div\", {\n        key: \"backdrop\",\n        className: \"fixed inset-0 z-40\",\n        onClick: () => setIsOpen(false)\n      }),\n      React.createElement(\"div\", {\n        key: \"dropdown\",\n        className: \"absolute right-0 mt-2 p-3 bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 z-50 min-w-[200px]\",\n        role: \"listbox\"\n      }, [\n        React.createElement(\"div\", {\n          key: \"grid\",\n          className: \"grid grid-cols-4 gap-2\"\n        }, Object.entries(defaultAccentColors).map(([color, config]) => {\n          const isSelected = accentColor === color;\n          return React.createElement(\"button\", {\n            key: color,\n            onClick: () => handleColorChange(color),\n            className: `\n              relative w-10 h-10 rounded-lg transition-all duration-200\n              hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2\n              ${isSelected ? \"ring-2 ring-offset-2 scale-105\" : \"\"}\n            `,\n            style: {\n              background: `hsl(${config.primary})`,\n              ['--tw-ring-color' as string]: `hsl(${config.light})`,\n            },\n            title: config.name,\n            role: \"option\",\n            'aria-selected': isSelected\n          }, isSelected && React.createElement(\"svg\", {\n            className: \"absolute inset-0 w-full h-full p-2 text-white\",\n            viewBox: \"0 0 20 20\",\n            fill: \"currentColor\"\n          }, React.createElement(\"path\", {\n            fillRule: \"evenodd\",\n            d: \"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\",\n            clipRule: \"evenodd\"\n          })));\n        })),\n        React.createElement(\"div\", {\n          key: \"footer\",\n          className: \"mt-3 pt-3 border-t border-gray-100 dark:border-gray-700\"\n        }, React.createElement(\"p\", {\n          className: \"text-xs text-gray-500 dark:text-gray-400 text-center\"\n        }, `Current: ${defaultAccentColors[accentColor]?.name || accentColor}`))\n      ])\n    ])\n  );\n}\n\n// Simple swatch component\ninterface AccentColorSwatchProps {\n  color: AccentColor;\n  isSelected?: boolean;\n  onClick?: () => void;\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\nexport function AccentColorSwatch({ \n  color, \n  isSelected, \n  onClick,\n  size = \"md\"\n}: AccentColorSwatchProps) {\n  const config = defaultAccentColors[color];\n  if (!config) return null;\n\n  const sizeClasses = {\n    sm: \"w-6 h-6\",\n    md: \"w-8 h-8\",\n    lg: \"w-10 h-10\",\n  };\n\n  return React.createElement(\"button\", {\n    onClick,\n    className: `\n      relative rounded-full transition-all duration-200\n      hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2\n      ${sizeClasses[size]}\n      ${isSelected ? \"ring-2 ring-offset-2 scale-110\" : \"\"}\n    `,\n    style: {\n      background: `hsl(${config.primary})`,\n      ['--tw-ring-color' as string]: `hsl(${config.light})`,\n    },\n    title: config.name\n  }, isSelected && React.createElement(\"svg\", {\n    className: \"absolute inset-0 w-full h-full p-1.5 text-white\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\"\n  }, React.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    d: \"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\",\n    clipRule: \"evenodd\"\n  })));\n}\n","import { AccentColorConfig } from './types';\n\n/**\n * Generate CSS custom properties for an accent color\n */\nexport function generateCSSVariables(\n  config: AccentColorConfig,\n  prefix: string = \"\"\n): Record<string, string> {\n  const p = prefix ? `${prefix}-` : \"\";\n  return {\n    [`--${p}primary`]: config.primary,\n    [`--${p}primary-foreground`]: config.primaryForeground,\n    [`--${p}accent`]: config.light,\n    [`--${p}ring`]: config.light,\n  };\n}\n\n/**\n * Apply CSS variables to an element\n */\nexport function applyCSSVariables(\n  element: HTMLElement,\n  variables: Record<string, string>\n): void {\n  Object.entries(variables).forEach(([key, value]) => {\n    element.style.setProperty(key, value);\n  });\n}\n\n/**\n * Create a gradient string from accent color config\n */\nexport function createGradient(\n  config: AccentColorConfig,\n  direction: string = \"to right\"\n): string {\n  return `linear-gradient(${direction}, hsl(${config.light}), hsl(${config.primary}))`;\n}\n\n/**\n * Create a shadow with the accent color\n */\nexport function createShadow(\n  config: AccentColorConfig,\n  intensity: number = 0.3,\n  blur: number = 20\n): string {\n  return `0 4px ${blur}px hsl(${config.primary} / ${intensity})`;\n}\n\n/**\n * Lighten or darken an HSL color\n */\nexport function adjustHSL(\n  hsl: string,\n  adjustments: {\n    hue?: number;\n    saturation?: number;\n    lightness?: number;\n  }\n): string {\n  const [h, s, l] = hsl.split(\" \").map((v) => parseFloat(v));\n  const newH = h + (adjustments.hue || 0);\n  const newS = Math.max(0, Math.min(100, s + (adjustments.saturation || 0)));\n  const newL = Math.max(0, Math.min(100, l + (adjustments.lightness || 0)));\n  return `${newH} ${newS}% ${newL}%`;\n}\n\n/**\n * Get contrasting text color (black or white) for a background\n */\nexport function getContrastColor(\n  hsl: string,\n  threshold: number = 50\n): \"black\" | \"white\" {\n  const [, , l] = hsl.split(\" \").map((v) => parseFloat(v));\n  return l > threshold ? \"black\" : \"white\";\n}\n\n/**\n * Check if code is running on client side\n */\nexport function isClient(): boolean {\n  return typeof window !== \"undefined\";\n}\n\n/**\n * Local storage wrapper with error handling\n */\nexport const storage = {\n  get: (key: string, defaultValue?: string): string | undefined => {\n    if (!isClient()) return defaultValue;\n    try {\n      return localStorage.getItem(key) || defaultValue;\n    } catch {\n      return defaultValue;\n    }\n  },\n  set: (key: string, value: string): void => {\n    if (!isClient()) return;\n    try {\n      localStorage.setItem(key, value);\n    } catch {\n      // Ignore storage errors\n    }\n  },\n  remove: (key: string): void => {\n    if (!isClient()) return;\n    try {\n      localStorage.removeItem(key);\n    } catch {\n      // Ignore storage errors\n    }\n  },\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,YAAuB;AACvB,mBAMO;;;ACPA,IAAM,sBAA8D;AAAA,EACzE,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;AAEO,SAAS,YACd,eACA,cACmC;AACnC,MAAI,CAAC,aAAc,QAAO;AAC1B,SAAO,EAAE,GAAG,eAAe,GAAG,aAAa;AAC7C;;;AD1DA,IAAM,iBAAyC;AAAA,EAC7C,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc,oBAAoB;AAAA,EAClC,SAAS;AACX;AAEA,IAAM,yBAAqB,4BAAsC,cAAc;AAExE,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACtB,GAA6B;AAC3B,QAAM,SAAS,YAAY,qBAAqB,YAAY;AAE5D,QAAM,CAAC,aAAa,mBAAmB,QAAI,uBAAsB,YAAY;AAC7E,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAG5C,QAAM,aAAa,CAAC,SAAiB;AACnC,WAAO,oBAAoB,GAAG,iBAAiB,IAAI,IAAI,KAAK;AAAA,EAC9D;AAEA,8BAAU,MAAM;AACd,eAAW,IAAI;AAEf,UAAM,SAAS,aAAa,QAAQ,UAAU;AAC9C,QAAI,UAAU,OAAO,MAAM,GAAG;AAC5B,0BAAoB,MAAM;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,YAAY,MAAM,CAAC;AAEvB,8BAAU,MAAM;AACd,QAAI,CAAC,QAAS;AAEd,UAAM,OAAO,SAAS;AACtB,UAAM,SAAS,OAAO,WAAW;AAEjC,QAAI,CAAC,OAAQ;AAGb,SAAK,MAAM,YAAY,KAAK,WAAW,SAAS,CAAC,IAAI,OAAO,OAAO;AACnE,SAAK,MAAM,YAAY,KAAK,WAAW,oBAAoB,CAAC,IAAI,OAAO,iBAAiB;AACxF,SAAK,MAAM,YAAY,KAAK,WAAW,MAAM,CAAC,IAAI,OAAO,KAAK;AAC9D,SAAK,MAAM,YAAY,KAAK,WAAW,QAAQ,CAAC,IAAI,OAAO,KAAK;AAGhE,iBAAa,QAAQ,YAAY,WAAW;AAG5C,SAAK,aAAa,QAAQ,WAAW,QAAQ,CAAC,IAAI,WAAW;AAAA,EAC/D,GAAG,CAAC,aAAa,SAAS,QAAQ,mBAAmB,UAAU,CAAC;AAEhE,QAAM,qBAAiB,0BAAY,CAAC,UAAuB;AACzD,QAAI,OAAO,KAAK,GAAG;AACjB,0BAAoB,KAAK;AAAA,IAC3B,OAAO;AACL,cAAQ,KAAK,wBAAwB,KAAK,iCAAiC;AAAA,IAC7E;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,QAAgC;AAAA,IACpC;AAAA,IACA;AAAA,IACA,cAAc,OAAO,WAAW,KAAK,OAAO,YAAY;AAAA,IACxD;AAAA,EACF;AAEA,SAAa;AAAA,IACX,mBAAmB;AAAA,IACnB,EAAE,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,SAAS,iBAAiB;AAC/B,aAAO,yBAAW,kBAAkB;AACtC;AAGO,SAAS,iBAAiB;AAC/B,QAAM,EAAE,cAAc,QAAQ,IAAI,eAAe;AAEjD,SAAO;AAAA,IACL,SAAS,OAAO,aAAa,OAAO;AAAA,IACpC,mBAAmB,OAAO,aAAa,iBAAiB;AAAA,IACxD,OAAO,OAAO,aAAa,KAAK;AAAA,IAChC,MAAM,OAAO,aAAa,IAAI;AAAA,IAC9B,UAAU,aAAa;AAAA,IACvB;AAAA,EACF;AACF;;;AE7GA,IAAAA,SAAuB;AACvB,IAAAC,gBAAyB;AAkBlB,SAAS,kBAAkB;AAAA,EAChC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AACF,GAA2B;AACzB,QAAM,EAAE,aAAa,gBAAgB,QAAQ,IAAI,eAAe;AAChE,QAAM,EAAE,QAAQ,IAAI,eAAe;AACnC,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAAS,KAAK;AAE1C,QAAM,oBAAoB,CAAC,UAAuB;AAChD,mBAAe,KAAK;AACpB,eAAW,KAAK;AAChB,QAAI,YAAY,YAAY;AAC1B,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,cAAc;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,QAAM,sBAAsB;AAAA,IAC1B,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,MAAI,CAAC,SAAS;AACZ,WAAa,qBAAc,OAAO;AAAA,MAChC,WAAW,0CAA0C,YAAY,IAAI,CAAC;AAAA,IACxE,CAAC;AAAA,EACH;AAGA,MAAI,YAAY,UAAU;AACxB,WAAa,qBAAc,OAAO;AAAA,MAChC,WAAW,cAAc,SAAS;AAAA,MAClC,OAAO,EAAE,qBAAqB,UAAU,OAAO,oBAAoB;AAAA,IACrE,GAAG,OAAO,QAAQ,mBAAmB,EAAE,IAAI,CAAC,CAAC,OAAO,MAAM,MAAM;AAC9D,YAAM,aAAa,gBAAgB;AACnC,aAAa,qBAAc,UAAU;AAAA,QACnC,KAAK;AAAA,QACL,SAAS,MAAM,kBAAkB,KAAK;AAAA,QACtC,WAAW;AAAA;AAAA;AAAA,YAGP,aAAa,kCAAkC,oBAAoB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC;AAAA;AAAA,QAElG,OAAO;AAAA,UACL,YAAY,OAAO,OAAO,OAAO;AAAA,UACjC,CAAC,iBAA2B,GAAG,OAAO,OAAO,KAAK;AAAA,QACpD;AAAA,QACA,OAAO,OAAO;AAAA,QACd,cAAc,UAAU,OAAO,IAAI;AAAA,QACnC,gBAAgB;AAAA,MAClB,GAAG,cAAoB,qBAAc,OAAO;AAAA,QAC1C,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,MACR,GAAS,qBAAc,QAAQ;AAAA,QAC7B,UAAU;AAAA,QACV,GAAG;AAAA,QACH,UAAU;AAAA,MACZ,CAAC,CAAC,CAAC;AAAA,IACL,CAAC,CAAC;AAAA,EACJ;AAGA,SAAa;AAAA,IAAc;AAAA,IAAO,EAAE,WAAW,YAAY,SAAS,GAAG;AAAA,IAC/D,qBAAc,UAAU;AAAA,MAC5B,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,MAChC,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IACnB,GAAG;AAAA,MACK,qBAAc,OAAO;AAAA,QACzB,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO,EAAE,YAAY,QAAQ;AAAA,MAC/B,CAAC;AAAA,MACK,qBAAc,QAAQ;AAAA,QAC1B,KAAK;AAAA,QACL,WAAW;AAAA,MACb,GAAG,OAAO;AAAA,MACJ,qBAAc,OAAO;AAAA,QACzB,KAAK;AAAA,QACL,WAAW,8CAA8C,SAAS,eAAe,EAAE;AAAA,QACnF,MAAM;AAAA,QACN,SAAS;AAAA,QACT,QAAQ;AAAA,MACV,GAAS,qBAAc,QAAQ;AAAA,QAC7B,eAAe;AAAA,QACf,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,GAAG;AAAA,MACL,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,IACD,UAAgB,qBAAoB,iBAAU,CAAC,GAAG;AAAA,MAC1C,qBAAc,OAAO;AAAA,QACzB,KAAK;AAAA,QACL,WAAW;AAAA,QACX,SAAS,MAAM,UAAU,KAAK;AAAA,MAChC,CAAC;AAAA,MACK,qBAAc,OAAO;AAAA,QACzB,KAAK;AAAA,QACL,WAAW;AAAA,QACX,MAAM;AAAA,MACR,GAAG;AAAA,QACK,qBAAc,OAAO;AAAA,UACzB,KAAK;AAAA,UACL,WAAW;AAAA,QACb,GAAG,OAAO,QAAQ,mBAAmB,EAAE,IAAI,CAAC,CAAC,OAAO,MAAM,MAAM;AAC9D,gBAAM,aAAa,gBAAgB;AACnC,iBAAa,qBAAc,UAAU;AAAA,YACnC,KAAK;AAAA,YACL,SAAS,MAAM,kBAAkB,KAAK;AAAA,YACtC,WAAW;AAAA;AAAA;AAAA,gBAGP,aAAa,mCAAmC,EAAE;AAAA;AAAA,YAEtD,OAAO;AAAA,cACL,YAAY,OAAO,OAAO,OAAO;AAAA,cACjC,CAAC,iBAA2B,GAAG,OAAO,OAAO,KAAK;AAAA,YACpD;AAAA,YACA,OAAO,OAAO;AAAA,YACd,MAAM;AAAA,YACN,iBAAiB;AAAA,UACnB,GAAG,cAAoB,qBAAc,OAAO;AAAA,YAC1C,WAAW;AAAA,YACX,SAAS;AAAA,YACT,MAAM;AAAA,UACR,GAAS,qBAAc,QAAQ;AAAA,YAC7B,UAAU;AAAA,YACV,GAAG;AAAA,YACH,UAAU;AAAA,UACZ,CAAC,CAAC,CAAC;AAAA,QACL,CAAC,CAAC;AAAA,QACI,qBAAc,OAAO;AAAA,UACzB,KAAK;AAAA,UACL,WAAW;AAAA,QACb,GAAS,qBAAc,KAAK;AAAA,UAC1B,WAAW;AAAA,QACb,GAAG,YAAY,oBAAoB,WAAW,GAAG,QAAQ,WAAW,EAAE,CAAC;AAAA,MACzE,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAUO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAA2B;AACzB,QAAM,SAAS,oBAAoB,KAAK;AACxC,MAAI,CAAC,OAAQ,QAAO;AAEpB,QAAM,cAAc;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SAAa,qBAAc,UAAU;AAAA,IACnC;AAAA,IACA,WAAW;AAAA;AAAA;AAAA,QAGP,YAAY,IAAI,CAAC;AAAA,QACjB,aAAa,mCAAmC,EAAE;AAAA;AAAA,IAEtD,OAAO;AAAA,MACL,YAAY,OAAO,OAAO,OAAO;AAAA,MACjC,CAAC,iBAA2B,GAAG,OAAO,OAAO,KAAK;AAAA,IACpD;AAAA,IACA,OAAO,OAAO;AAAA,EAChB,GAAG,cAAoB,qBAAc,OAAO;AAAA,IAC1C,WAAW;AAAA,IACX,SAAS;AAAA,IACT,MAAM;AAAA,EACR,GAAS,qBAAc,QAAQ;AAAA,IAC7B,UAAU;AAAA,IACV,GAAG;AAAA,IACH,UAAU;AAAA,EACZ,CAAC,CAAC,CAAC;AACL;;;ACtNO,SAAS,qBACd,QACA,SAAiB,IACO;AACxB,QAAM,IAAI,SAAS,GAAG,MAAM,MAAM;AAClC,SAAO;AAAA,IACL,CAAC,KAAK,CAAC,SAAS,GAAG,OAAO;AAAA,IAC1B,CAAC,KAAK,CAAC,oBAAoB,GAAG,OAAO;AAAA,IACrC,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO;AAAA,IACzB,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO;AAAA,EACzB;AACF;AAKO,SAAS,kBACd,SACA,WACM;AACN,SAAO,QAAQ,SAAS,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AAClD,YAAQ,MAAM,YAAY,KAAK,KAAK;AAAA,EACtC,CAAC;AACH;AAKO,SAAS,eACd,QACA,YAAoB,YACZ;AACR,SAAO,mBAAmB,SAAS,SAAS,OAAO,KAAK,UAAU,OAAO,OAAO;AAClF;AAKO,SAAS,aACd,QACA,YAAoB,KACpB,OAAe,IACP;AACR,SAAO,SAAS,IAAI,UAAU,OAAO,OAAO,MAAM,SAAS;AAC7D;AAKO,SAAS,UACd,KACA,aAKQ;AACR,QAAM,CAAC,GAAG,GAAG,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC;AACzD,QAAM,OAAO,KAAK,YAAY,OAAO;AACrC,QAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,YAAY,cAAc,EAAE,CAAC;AACzE,QAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,YAAY,aAAa,EAAE,CAAC;AACxE,SAAO,GAAG,IAAI,IAAI,IAAI,KAAK,IAAI;AACjC;AAKO,SAAS,iBACd,KACA,YAAoB,IACD;AACnB,QAAM,CAAC,EAAE,EAAE,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC;AACvD,SAAO,IAAI,YAAY,UAAU;AACnC;AAKO,SAAS,WAAoB;AAClC,SAAO,OAAO,WAAW;AAC3B;AAKO,IAAM,UAAU;AAAA,EACrB,KAAK,CAAC,KAAa,iBAA8C;AAC/D,QAAI,CAAC,SAAS,EAAG,QAAO;AACxB,QAAI;AACF,aAAO,aAAa,QAAQ,GAAG,KAAK;AAAA,IACtC,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,KAAK,CAAC,KAAa,UAAwB;AACzC,QAAI,CAAC,SAAS,EAAG;AACjB,QAAI;AACF,mBAAa,QAAQ,KAAK,KAAK;AAAA,IACjC,QAAQ;AAAA,IAER;AAAA,EACF;AAAA,EACA,QAAQ,CAAC,QAAsB;AAC7B,QAAI,CAAC,SAAS,EAAG;AACjB,QAAI;AACF,mBAAa,WAAW,GAAG;AAAA,IAC7B,QAAQ;AAAA,IAER;AAAA,EACF;AACF;","names":["React","import_react"]}