@salesmind-ai/design-system 0.3.3 → 0.3.4

package/dist/chunk-CH42VPWE.cjs

@@ -1,421 +0,0 @@
-'use strict';
-
-var React2 = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React2__default = /*#__PURE__*/_interopDefault(React2);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-
-// src/theme/AppearanceProvider.tsx
-var STORAGE_KEY = "void-appearance-settings";
-var DEFAULT_SETTINGS = {
-  theme: "dark",
-  brand: "default",
-  navPlacement: "left",
-  density: "comfortable",
-  radius: "playful",
-  customColor: "#f97316"
-  // Default orange as fallback
-};
-function hexToRgb(hex) {
-  const cleanHex = hex.replace(/^#/, "");
-  const r = parseInt(cleanHex.substring(0, 2), 16);
-  const g = parseInt(cleanHex.substring(2, 4), 16);
-  const b = parseInt(cleanHex.substring(4, 6), 16);
-  if (isNaN(r) || isNaN(g) || isNaN(b)) {
-    return "249, 115, 22";
-  }
-  return `${r}, ${g}, ${b}`;
-}
-function generateSecondaryColor(hex) {
-  const cleanHex = hex.replace(/^#/, "");
-  const r = parseInt(cleanHex.substring(0, 2), 16);
-  const g = parseInt(cleanHex.substring(2, 4), 16);
-  const b = parseInt(cleanHex.substring(4, 6), 16);
-  if (isNaN(r) || isNaN(g) || isNaN(b)) {
-    return "255, 208, 0";
-  }
-  const secondary = {
-    r: Math.min(255, g + 50),
-    g: Math.min(255, b + 100),
-    b: Math.min(255, r)
-  };
-  return `${secondary.r}, ${secondary.g}, ${secondary.b}`;
-}
-function loadSettings() {
-  if (typeof window === "undefined") return DEFAULT_SETTINGS;
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored) {
-      const parsed = JSON.parse(stored);
-      return {
-        theme: parsed.theme || DEFAULT_SETTINGS.theme,
-        brand: parsed.brand || DEFAULT_SETTINGS.brand,
-        navPlacement: parsed.navPlacement || DEFAULT_SETTINGS.navPlacement,
-        density: parsed.density || DEFAULT_SETTINGS.density,
-        radius: parsed.radius || DEFAULT_SETTINGS.radius,
-        customColor: parsed.customColor || DEFAULT_SETTINGS.customColor
-      };
-    }
-  } catch {
-  }
-  return {
-    ...DEFAULT_SETTINGS,
-    theme: "dark"
-  };
-}
-function saveSettings(settings) {
-  if (typeof window === "undefined") return;
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
-  } catch {
-  }
-}
-function applySettings(settings) {
-  if (typeof document === "undefined") return;
-  const root = document.documentElement;
-  root.setAttribute("data-theme", settings.theme);
-  root.setAttribute("data-brand", settings.brand);
-  root.setAttribute("data-nav", settings.navPlacement);
-  root.setAttribute("data-density", settings.density);
-  root.setAttribute("data-radius", settings.radius);
-  if (settings.brand === "custom") {
-    const primaryRgb = hexToRgb(settings.customColor);
-    const secondaryRgb = generateSecondaryColor(settings.customColor);
-    root.style.setProperty("--custom-accent-rgb", primaryRgb);
-    root.style.setProperty("--custom-accent2-rgb", secondaryRgb);
-  } else {
-    root.style.removeProperty("--custom-accent-rgb");
-    root.style.removeProperty("--custom-accent2-rgb");
-  }
-}
-function prefersReducedMotion() {
-  if (typeof window === "undefined") return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-var AppearanceContext = React2.createContext(null);
-function AppearanceProvider({
-  initialSettings,
-  disablePersistence = false,
-  children
-}) {
-  const [settings, setSettings] = React2.useState(() => ({
-    ...DEFAULT_SETTINGS,
-    ...initialSettings
-  }));
-  const [hydrated, setHydrated] = React2.useState(false);
-  React2.useEffect(() => {
-    if (!disablePersistence) {
-      const loaded = loadSettings();
-      setSettings({
-        ...loaded,
-        // initialSettings still take priority over localStorage
-        ...initialSettings
-      });
-    }
-    setHydrated(true);
-  }, []);
-  React2.useEffect(() => {
-    applySettings(settings);
-    if (!disablePersistence && hydrated) {
-      saveSettings(settings);
-    }
-  }, [settings, disablePersistence, hydrated]);
-  React2.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: light)");
-    const handleChange = (e) => {
-      setSettings((prev) => {
-        if (prev.theme === "light-contrast" || prev.theme === "dark-contrast") {
-          return prev;
-        }
-        return {
-          ...prev,
-          theme: e.matches ? "light" : "dark"
-        };
-      });
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, []);
-  React2.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const handleChange = () => {
-      applySettings(settings);
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [settings]);
-  const setTheme = React2.useCallback((theme) => {
-    setSettings((prev) => ({ ...prev, theme }));
-  }, []);
-  const setBrand = React2.useCallback((brand) => {
-    setSettings((prev) => ({ ...prev, brand }));
-  }, []);
-  const setNavPlacement = React2.useCallback((navPlacement) => {
-    setSettings((prev) => ({ ...prev, navPlacement }));
-  }, []);
-  const setDensity = React2.useCallback((density) => {
-    setSettings((prev) => ({ ...prev, density }));
-  }, []);
-  const setRadius = React2.useCallback((radius) => {
-    setSettings((prev) => ({ ...prev, radius }));
-  }, []);
-  const setCustomColor = React2.useCallback((customColor) => {
-    setSettings((prev) => ({ ...prev, customColor, brand: "custom" }));
-  }, []);
-  const setAppearance = React2.useCallback((partial) => {
-    setSettings((prev) => ({ ...prev, ...partial }));
-  }, []);
-  const resetToDefaults = React2.useCallback(() => {
-    setSettings(DEFAULT_SETTINGS);
-  }, []);
-  const contextValue = {
-    ...settings,
-    setTheme,
-    setBrand,
-    setNavPlacement,
-    setDensity,
-    setRadius,
-    setCustomColor,
-    setAppearance,
-    resetToDefaults
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(AppearanceContext.Provider, { value: contextValue, children });
-}
-function useAppearance() {
-  const context = React2.useContext(AppearanceContext);
-  if (!context) {
-    throw new Error("useAppearance must be used within an AppearanceProvider");
-  }
-  return context;
-}
-function initializeAppearance(settings) {
-  const loaded = loadSettings();
-  const merged = { ...loaded, ...settings };
-  applySettings(merged);
-}
-var AppearancePanel = React2__default.default.forwardRef(
-  ({ className, labels: l }, ref) => {
-    const {
-      theme,
-      brand,
-      navPlacement,
-      density,
-      radius,
-      customColor,
-      setTheme,
-      setBrand,
-      setNavPlacement,
-      setDensity,
-      setRadius,
-      setCustomColor,
-      resetToDefaults
-    } = useAppearance();
-    const colorPickerId = React2.useId();
-    const themeOptions = [
-      { value: "light", label: l?.themeLight ?? "Light" },
-      { value: "light-contrast", label: l?.themeLightContrast ?? "Light (High Contrast)" },
-      { value: "dark", label: l?.themeDark ?? "Dark" },
-      { value: "dark-contrast", label: l?.themeDarkContrast ?? "Dark (High Contrast)" }
-    ];
-    const brandOptions = [
-      { value: "default", label: l?.brandDefault ?? "Default", description: l?.brandDefaultDescription ?? "Warm Intelligence" },
-      { value: "salesmind", label: l?.brandSalesmind ?? "SalesMind", description: l?.brandSalesmindDescription ?? "Pink-red + Gold" },
-      { value: "custom", label: l?.brandCustom ?? "Custom", description: l?.brandCustomDescription ?? "Your color" }
-    ];
-    const navOptions = [
-      { value: "left", label: l?.navLeft ?? "Left Sidebar" },
-      { value: "right", label: l?.navRight ?? "Right Sidebar" },
-      { value: "bottom", label: l?.navBottom ?? "Bottom Tabs" }
-    ];
-    const densityOptions = [
-      { value: "comfortable", label: l?.densityComfortable ?? "Comfortable", description: l?.densityComfortableDescription ?? "Generous spacing" },
-      { value: "compact", label: l?.densityCompact ?? "Compact", description: l?.densityCompactDescription ?? "Higher density" }
-    ];
-    const radiusOptions = [
-      { value: "playful", label: l?.radiusPlayful ?? "Playful", description: l?.radiusPlayfulDescription ?? "Rounded corners" },
-      { value: "sharp", label: l?.radiusSharp ?? "Sharp", description: l?.radiusSharpDescription ?? "Technical feel" }
-    ];
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx__default.default("ds-appearance-panel", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-appearance-panel__title", children: l?.title ?? "Appearance Settings" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "ds-appearance-panel__legend", children: l?.themeHeading ?? "Theme" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options", children: themeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
-          {
-            className: clsx__default.default(
-              "ds-appearance-panel__option",
-              theme === option.value && "ds-appearance-panel__option--active"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "radio",
-                  name: "theme",
-                  value: option.value,
-                  checked: theme === option.value,
-                  onChange: () => setTheme(option.value),
-                  className: "ds-appearance-panel__radio"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-appearance-panel__option-label", children: option.label })
-            ]
-          },
-          option.value
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "ds-appearance-panel__legend", children: l?.brandHeading ?? "Brand" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options", children: brandOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
-          {
-            className: clsx__default.default(
-              "ds-appearance-panel__option",
-              brand === option.value && "ds-appearance-panel__option--active"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "radio",
-                  name: "brand",
-                  value: option.value,
-                  checked: brand === option.value,
-                  onChange: () => setBrand(option.value),
-                  className: "ds-appearance-panel__radio"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-appearance-panel__option-content", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-appearance-panel__option-label", children: option.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-appearance-panel__option-description", children: option.description })
-              ] })
-            ]
-          },
-          option.value
-        )) }),
-        brand === "custom" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-appearance-panel__color-picker", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: colorPickerId, className: "ds-appearance-panel__color-label", children: l?.accentColorLabel ?? "Accent Color" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-appearance-panel__color-input-wrapper", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "color",
-                id: colorPickerId,
-                value: customColor,
-                onChange: (e) => setCustomColor(e.target.value),
-                className: "ds-appearance-panel__color-input"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-appearance-panel__color-value", children: customColor.toUpperCase() })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "ds-appearance-panel__legend", children: l?.densityHeading ?? "Density" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: densityOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
-          {
-            className: clsx__default.default(
-              "ds-appearance-panel__option",
-              "ds-appearance-panel__option--toggle",
-              density === option.value && "ds-appearance-panel__option--active"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "radio",
-                  name: "density",
-                  value: option.value,
-                  checked: density === option.value,
-                  onChange: () => setDensity(option.value),
-                  className: "ds-appearance-panel__radio"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-appearance-panel__option-content", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-appearance-panel__option-label", children: option.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-appearance-panel__option-description", children: option.description })
-              ] })
-            ]
-          },
-          option.value
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "ds-appearance-panel__legend", children: l?.geometryHeading ?? "Geometry" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: radiusOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
-          {
-            className: clsx__default.default(
-              "ds-appearance-panel__option",
-              "ds-appearance-panel__option--toggle",
-              radius === option.value && "ds-appearance-panel__option--active"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "radio",
-                  name: "radius",
-                  value: option.value,
-                  checked: radius === option.value,
-                  onChange: () => setRadius(option.value),
-                  className: "ds-appearance-panel__radio"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-appearance-panel__option-content", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-appearance-panel__option-label", children: option.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-appearance-panel__option-description", children: option.description })
-              ] })
-            ]
-          },
-          option.value
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "ds-appearance-panel__legend", children: l?.navHeading ?? "Navigation Layout" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options", children: navOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
-          {
-            className: clsx__default.default(
-              "ds-appearance-panel__option",
-              navPlacement === option.value && "ds-appearance-panel__option--active"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "radio",
-                  name: "nav",
-                  value: option.value,
-                  checked: navPlacement === option.value,
-                  onChange: () => setNavPlacement(option.value),
-                  className: "ds-appearance-panel__radio"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-appearance-panel__option-label", children: option.label })
-            ]
-          },
-          option.value
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: resetToDefaults, className: "ds-appearance-panel__reset", children: l?.resetLabel ?? "Reset to Defaults" })
-    ] });
-  }
-);
-AppearancePanel.displayName = "AppearancePanel";
-
-exports.AppearancePanel = AppearancePanel;
-exports.AppearanceProvider = AppearanceProvider;
-exports.hexToRgb = hexToRgb;
-exports.initializeAppearance = initializeAppearance;
-exports.prefersReducedMotion = prefersReducedMotion;
-exports.useAppearance = useAppearance;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-CH42VPWE.cjs.map

package/dist/chunk-CH42VPWE.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/theme/AppearanceProvider.tsx","../src/components/AppearancePanel/AppearancePanel.tsx"],"names":["React","jsx"],"mappings":"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","sourcesContent":["import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';\n\n/* ============================================================================\n   APPEARANCE TYPES\n   ============================================================================ */\n\nexport type Theme = 'light' | 'light-contrast' | 'dark' | 'dark-contrast';\nexport type Brand = 'default' | 'salesmind' | 'custom';\nexport type NavPlacement = 'left' | 'right' | 'bottom';\nexport type Density = 'comfortable' | 'compact';\nexport type Radius = 'playful' | 'sharp';\n\nexport interface AppearanceSettings {\n  theme: Theme;\n  brand: Brand;\n  navPlacement: NavPlacement;\n  density: Density;\n  radius: Radius;\n  /** Hex color for custom brand (e.g., \"#ff2d8a\") */\n  customColor: string;\n}\n\nexport interface AppearanceContextValue extends AppearanceSettings {\n  setTheme: (theme: Theme) => void;\n  setBrand: (brand: Brand) => void;\n  setNavPlacement: (nav: NavPlacement) => void;\n  setDensity: (density: Density) => void;\n  setRadius: (radius: Radius) => void;\n  setCustomColor: (color: string) => void;\n  setAppearance: (settings: Partial<AppearanceSettings>) => void;\n  resetToDefaults: () => void;\n}\n\n/* ============================================================================\n   CONSTANTS\n   ============================================================================ */\n\nconst STORAGE_KEY = 'void-appearance-settings';\n\nconst DEFAULT_SETTINGS: AppearanceSettings = {\n  theme: 'dark',\n  brand: 'default',\n  navPlacement: 'left',\n  density: 'comfortable',\n  radius: 'playful',\n  customColor: '#f97316', // Default orange as fallback\n};\n\n/* ============================================================================\n   UTILITIES\n   ============================================================================ */\n\n/** Detect system color scheme preference */\n\n\n/** Convert hex color to RGB triplet string (e.g., \"255, 45, 138\") */\nfunction hexToRgb(hex: string): string {\n  // Remove # if present\n  const cleanHex = hex.replace(/^#/, '');\n\n  // Parse hex values\n  const r = parseInt(cleanHex.substring(0, 2), 16);\n  const g = parseInt(cleanHex.substring(2, 4), 16);\n  const b = parseInt(cleanHex.substring(4, 6), 16);\n\n  // Validate parsed values\n  if (isNaN(r) || isNaN(g) || isNaN(b)) {\n    // Fallback to default orange if parsing fails\n    return '249, 115, 22';\n  }\n\n  return `${r}, ${g}, ${b}`;\n}\n\n/** Generate a complementary/secondary color from primary */\nfunction generateSecondaryColor(hex: string): string {\n  const cleanHex = hex.replace(/^#/, '');\n  const r = parseInt(cleanHex.substring(0, 2), 16);\n  const g = parseInt(cleanHex.substring(2, 4), 16);\n  const b = parseInt(cleanHex.substring(4, 6), 16);\n\n  if (isNaN(r) || isNaN(g) || isNaN(b)) {\n    return '255, 208, 0'; // Default yellow\n  }\n\n  // Shift hue by ~60 degrees for a harmonious secondary\n  // Simple approach: rotate RGB channels and boost brightness\n  const secondary = {\n    r: Math.min(255, g + 50),\n    g: Math.min(255, b + 100),\n    b: Math.min(255, r),\n  };\n\n  return `${secondary.r}, ${secondary.g}, ${secondary.b}`;\n}\n\n/** Load settings from localStorage */\nfunction loadSettings(): AppearanceSettings {\n  if (typeof window === 'undefined') return DEFAULT_SETTINGS;\n\n  try {\n    const stored = localStorage.getItem(STORAGE_KEY);\n    if (stored) {\n      const parsed = JSON.parse(stored) as Partial<AppearanceSettings>;\n      return {\n        theme: parsed.theme || DEFAULT_SETTINGS.theme,\n        brand: parsed.brand || DEFAULT_SETTINGS.brand,\n        navPlacement: parsed.navPlacement || DEFAULT_SETTINGS.navPlacement,\n        density: parsed.density || DEFAULT_SETTINGS.density,\n        radius: parsed.radius || DEFAULT_SETTINGS.radius,\n        customColor: parsed.customColor || DEFAULT_SETTINGS.customColor,\n      };\n    }\n  } catch {\n    // Ignore parse errors\n  }\n\n  // Use default dark preference for initial theme if no stored value\n  return {\n    ...DEFAULT_SETTINGS,\n    theme: 'dark',\n  };\n}\n\n/** Save settings to localStorage */\nfunction saveSettings(settings: AppearanceSettings): void {\n  if (typeof window === 'undefined') return;\n\n  try {\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));\n  } catch {\n    // Ignore storage errors (e.g., private browsing)\n  }\n}\n\n/** Apply settings to document.documentElement */\nfunction applySettings(settings: AppearanceSettings): void {\n  if (typeof document === 'undefined') return;\n\n  const root = document.documentElement;\n\n  // Apply data attributes\n  root.setAttribute('data-theme', settings.theme);\n  root.setAttribute('data-brand', settings.brand);\n  root.setAttribute('data-nav', settings.navPlacement);\n  root.setAttribute('data-density', settings.density);\n  root.setAttribute('data-radius', settings.radius);\n\n  // Handle custom brand RGB injection\n  if (settings.brand === 'custom') {\n    const primaryRgb = hexToRgb(settings.customColor);\n    const secondaryRgb = generateSecondaryColor(settings.customColor);\n\n    // Inject custom CSS variables\n    root.style.setProperty('--custom-accent-rgb', primaryRgb);\n    root.style.setProperty('--custom-accent2-rgb', secondaryRgb);\n  } else {\n    // Clean up injected variables when switching away from custom brand\n    root.style.removeProperty('--custom-accent-rgb');\n    root.style.removeProperty('--custom-accent2-rgb');\n  }\n}\n\n/** Check if user prefers reduced motion */\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined') return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/* ============================================================================\n   CONTEXT\n   ============================================================================ */\n\nconst AppearanceContext = createContext<AppearanceContextValue | null>(null);\n\n/* ============================================================================\n   PROVIDER COMPONENT\n   ============================================================================ */\n\nexport interface AppearanceProviderProps {\n  /** Initial settings (overrides localStorage) */\n  initialSettings?: Partial<AppearanceSettings>;\n  /** Disable localStorage persistence */\n  disablePersistence?: boolean;\n  /** Children */\n  children: React.ReactNode;\n}\n\nexport function AppearanceProvider({\n  initialSettings,\n  disablePersistence = false,\n  children,\n}: AppearanceProviderProps) {\n  // Start with deterministic defaults to avoid SSR/client hydration mismatch.\n  // localStorage is read after mount in the effect below.\n  const [settings, setSettings] = useState<AppearanceSettings>(() => ({\n    ...DEFAULT_SETTINGS,\n    ...initialSettings,\n  }));\n\n  // After hydration, sync with localStorage (runs once on mount)\n  const [hydrated, setHydrated] = useState(false);\n  useEffect(() => {\n    if (!disablePersistence) {\n      const loaded = loadSettings();\n      setSettings({\n        ...loaded,\n        // initialSettings still take priority over localStorage\n        ...initialSettings,\n      });\n    }\n    setHydrated(true);\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Apply settings to DOM whenever they change\n  useEffect(() => {\n    applySettings(settings);\n    if (!disablePersistence && hydrated) {\n      saveSettings(settings);\n    }\n  }, [settings, disablePersistence, hydrated]);\n\n  // Listen for system theme changes\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: light)');\n\n    const handleChange = (e: MediaQueryListEvent) => {\n      // Only auto-switch if user hasn't explicitly set a contrast variant\n      setSettings((prev) => {\n        if (prev.theme === 'light-contrast' || prev.theme === 'dark-contrast') {\n          return prev; // Don't override contrast preferences\n        }\n        return {\n          ...prev,\n          theme: e.matches ? 'light' : 'dark',\n        };\n      });\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, []);\n\n  // Listen for reduced motion preference changes\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n    // Initial check is handled by CSS media queries in tokens.css\n    // This effect ensures we respect the preference dynamically\n    const handleChange = () => {\n      // Re-apply settings to ensure any motion-dependent values are updated\n      applySettings(settings);\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, [settings]);\n\n  const setTheme = useCallback((theme: Theme) => {\n    setSettings((prev) => ({ ...prev, theme }));\n  }, []);\n\n  const setBrand = useCallback((brand: Brand) => {\n    setSettings((prev) => ({ ...prev, brand }));\n  }, []);\n\n  const setNavPlacement = useCallback((navPlacement: NavPlacement) => {\n    setSettings((prev) => ({ ...prev, navPlacement }));\n  }, []);\n\n  const setDensity = useCallback((density: Density) => {\n    setSettings((prev) => ({ ...prev, density }));\n  }, []);\n\n  const setRadius = useCallback((radius: Radius) => {\n    setSettings((prev) => ({ ...prev, radius }));\n  }, []);\n\n  const setCustomColor = useCallback((customColor: string) => {\n    setSettings((prev) => ({ ...prev, customColor, brand: 'custom' }));\n  }, []);\n\n  const setAppearance = useCallback((partial: Partial<AppearanceSettings>) => {\n    setSettings((prev) => ({ ...prev, ...partial }));\n  }, []);\n\n  const resetToDefaults = useCallback(() => {\n    setSettings(DEFAULT_SETTINGS);\n  }, []);\n\n  const contextValue: AppearanceContextValue = {\n    ...settings,\n    setTheme,\n    setBrand,\n    setNavPlacement,\n    setDensity,\n    setRadius,\n    setCustomColor,\n    setAppearance,\n    resetToDefaults,\n  };\n\n  return <AppearanceContext.Provider value={contextValue}>{children}</AppearanceContext.Provider>;\n}\n\n/* ============================================================================\n   HOOK\n   ============================================================================ */\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useAppearance(): AppearanceContextValue {\n  const context = useContext(AppearanceContext);\n\n  if (!context) {\n    throw new Error('useAppearance must be used within an AppearanceProvider');\n  }\n\n  return context;\n}\n\n/* ============================================================================\n   STANDALONE UTILITY (for use outside React, e.g., SSR or initial load)\n   ============================================================================ */\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function initializeAppearance(settings?: Partial<AppearanceSettings>): void {\n  const loaded = loadSettings();\n  const merged = { ...loaded, ...settings };\n  applySettings(merged);\n}\n\n/* ============================================================================\n   UTILITY EXPORTS\n   ============================================================================ */\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport { hexToRgb, prefersReducedMotion };\n","import React, { useId } from 'react';\nimport clsx from 'clsx';\nimport {\n  useAppearance,\n  Theme,\n  Brand,\n  NavPlacement,\n  Density,\n  Radius,\n} from '../../theme/AppearanceProvider';\nimport './AppearancePanel.css';\n\n/* ============================================================================\n   APPEARANCE PANEL — Internal Settings UI\n   ============================================================================ */\n\n/** All translatable labels for the AppearancePanel. */\nexport interface AppearancePanelLabels {\n  /** Panel heading. @default \"Appearance Settings\" */\n  title?: string;\n  /** Theme section heading. @default \"Theme\" */\n  themeHeading?: string;\n  /** Brand section heading. @default \"Brand\" */\n  brandHeading?: string;\n  /** Density section heading. @default \"Density\" */\n  densityHeading?: string;\n  /** Geometry section heading. @default \"Geometry\" */\n  geometryHeading?: string;\n  /** Navigation section heading. @default \"Navigation Layout\" */\n  navHeading?: string;\n  /** Accent color label (shown for Custom brand). @default \"Accent Color\" */\n  accentColorLabel?: string;\n  /** Reset button text. @default \"Reset to Defaults\" */\n  resetLabel?: string;\n\n  /* Theme options */\n  themeLight?: string;\n  themeLightContrast?: string;\n  themeDark?: string;\n  themeDarkContrast?: string;\n\n  /* Brand options */\n  brandDefault?: string;\n  brandDefaultDescription?: string;\n  brandSalesmind?: string;\n  brandSalesmindDescription?: string;\n  brandCustom?: string;\n  brandCustomDescription?: string;\n\n  /* Density options */\n  densityComfortable?: string;\n  densityComfortableDescription?: string;\n  densityCompact?: string;\n  densityCompactDescription?: string;\n\n  /* Radius / geometry options */\n  radiusPlayful?: string;\n  radiusPlayfulDescription?: string;\n  radiusSharp?: string;\n  radiusSharpDescription?: string;\n\n  /* Navigation options */\n  navLeft?: string;\n  navRight?: string;\n  navBottom?: string;\n}\n\nexport interface AppearancePanelProps {\n  /** Custom class name */\n  className?: string;\n  /** Override default English labels for i18n. */\n  labels?: AppearancePanelLabels;\n}\n\nexport const AppearancePanel = React.forwardRef<HTMLDivElement, AppearancePanelProps>(\n  ({ className, labels: l }, ref) => {\n    const {\n      theme,\n      brand,\n      navPlacement,\n      density,\n      radius,\n      customColor,\n      setTheme,\n      setBrand,\n      setNavPlacement,\n      setDensity,\n      setRadius,\n      setCustomColor,\n      resetToDefaults,\n    } = useAppearance();\n\n    // Generate unique IDs for accessibility\n    const colorPickerId = useId();\n\n    // Build option arrays from labels (fallback to English defaults)\n    const themeOptions: { value: Theme; label: string }[] = [\n      { value: 'light', label: l?.themeLight ?? 'Light' },\n      { value: 'light-contrast', label: l?.themeLightContrast ?? 'Light (High Contrast)' },\n      { value: 'dark', label: l?.themeDark ?? 'Dark' },\n      { value: 'dark-contrast', label: l?.themeDarkContrast ?? 'Dark (High Contrast)' },\n    ];\n\n    const brandOptions: { value: Brand; label: string; description: string }[] = [\n      { value: 'default', label: l?.brandDefault ?? 'Default', description: l?.brandDefaultDescription ?? 'Warm Intelligence' },\n      { value: 'salesmind', label: l?.brandSalesmind ?? 'SalesMind', description: l?.brandSalesmindDescription ?? 'Pink-red + Gold' },\n      { value: 'custom', label: l?.brandCustom ?? 'Custom', description: l?.brandCustomDescription ?? 'Your color' },\n    ];\n\n    const navOptions: { value: NavPlacement; label: string }[] = [\n      { value: 'left', label: l?.navLeft ?? 'Left Sidebar' },\n      { value: 'right', label: l?.navRight ?? 'Right Sidebar' },\n      { value: 'bottom', label: l?.navBottom ?? 'Bottom Tabs' },\n    ];\n\n    const densityOptions: { value: Density; label: string; description: string }[] = [\n      { value: 'comfortable', label: l?.densityComfortable ?? 'Comfortable', description: l?.densityComfortableDescription ?? 'Generous spacing' },\n      { value: 'compact', label: l?.densityCompact ?? 'Compact', description: l?.densityCompactDescription ?? 'Higher density' },\n    ];\n\n    const radiusOptions: { value: Radius; label: string; description: string }[] = [\n      { value: 'playful', label: l?.radiusPlayful ?? 'Playful', description: l?.radiusPlayfulDescription ?? 'Rounded corners' },\n      { value: 'sharp', label: l?.radiusSharp ?? 'Sharp', description: l?.radiusSharpDescription ?? 'Technical feel' },\n    ];\n\n    return (\n      <div ref={ref} className={clsx('ds-appearance-panel', className)}>\n        <h3 className=\"ds-appearance-panel__title\">{l?.title ?? 'Appearance Settings'}</h3>\n\n        {/* Theme Section */}\n        <fieldset className=\"ds-appearance-panel__section\">\n          <legend className=\"ds-appearance-panel__legend\">{l?.themeHeading ?? 'Theme'}</legend>\n          <div className=\"ds-appearance-panel__options\">\n            {themeOptions.map((option) => (\n              <label\n                key={option.value}\n                className={clsx(\n                  'ds-appearance-panel__option',\n                  theme === option.value && 'ds-appearance-panel__option--active',\n                )}\n              >\n                <input\n                  type=\"radio\"\n                  name=\"theme\"\n                  value={option.value}\n                  checked={theme === option.value}\n                  onChange={() => setTheme(option.value)}\n                  className=\"ds-appearance-panel__radio\"\n                />\n                <span className=\"ds-appearance-panel__option-label\">{option.label}</span>\n              </label>\n            ))}\n          </div>\n        </fieldset>\n\n        {/* Brand Section */}\n        <fieldset className=\"ds-appearance-panel__section\">\n          <legend className=\"ds-appearance-panel__legend\">{l?.brandHeading ?? 'Brand'}</legend>\n          <div className=\"ds-appearance-panel__options\">\n            {brandOptions.map((option) => (\n              <label\n                key={option.value}\n                className={clsx(\n                  'ds-appearance-panel__option',\n                  brand === option.value && 'ds-appearance-panel__option--active',\n                )}\n              >\n                <input\n                  type=\"radio\"\n                  name=\"brand\"\n                  value={option.value}\n                  checked={brand === option.value}\n                  onChange={() => setBrand(option.value)}\n                  className=\"ds-appearance-panel__radio\"\n                />\n                <span className=\"ds-appearance-panel__option-content\">\n                  <span className=\"ds-appearance-panel__option-label\">{option.label}</span>\n                  <span className=\"ds-appearance-panel__option-description\">\n                    {option.description}\n                  </span>\n                </span>\n              </label>\n            ))}\n          </div>\n\n          {/* Color Picker (shown only for Custom brand) */}\n          {brand === 'custom' && (\n            <div className=\"ds-appearance-panel__color-picker\">\n              <label htmlFor={colorPickerId} className=\"ds-appearance-panel__color-label\">\n                {l?.accentColorLabel ?? 'Accent Color'}\n              </label>\n              <div className=\"ds-appearance-panel__color-input-wrapper\">\n                <input\n                  type=\"color\"\n                  id={colorPickerId}\n                  value={customColor}\n                  onChange={(e) => setCustomColor(e.target.value)}\n                  className=\"ds-appearance-panel__color-input\"\n                />\n                <span className=\"ds-appearance-panel__color-value\">\n                  {customColor.toUpperCase()}\n                </span>\n              </div>\n            </div>\n          )}\n        </fieldset>\n\n        {/* Density Section */}\n        <fieldset className=\"ds-appearance-panel__section\">\n          <legend className=\"ds-appearance-panel__legend\">{l?.densityHeading ?? 'Density'}</legend>\n          <div className=\"ds-appearance-panel__options ds-appearance-panel__options--row\">\n            {densityOptions.map((option) => (\n              <label\n                key={option.value}\n                className={clsx(\n                  'ds-appearance-panel__option',\n                  'ds-appearance-panel__option--toggle',\n                  density === option.value && 'ds-appearance-panel__option--active',\n                )}\n              >\n                <input\n                  type=\"radio\"\n                  name=\"density\"\n                  value={option.value}\n                  checked={density === option.value}\n                  onChange={() => setDensity(option.value)}\n                  className=\"ds-appearance-panel__radio\"\n                />\n                <span className=\"ds-appearance-panel__option-content\">\n                  <span className=\"ds-appearance-panel__option-label\">{option.label}</span>\n                  <span className=\"ds-appearance-panel__option-description\">\n                    {option.description}\n                  </span>\n                </span>\n              </label>\n            ))}\n          </div>\n        </fieldset>\n\n        {/* Geometry Section */}\n        <fieldset className=\"ds-appearance-panel__section\">\n          <legend className=\"ds-appearance-panel__legend\">{l?.geometryHeading ?? 'Geometry'}</legend>\n          <div className=\"ds-appearance-panel__options ds-appearance-panel__options--row\">\n            {radiusOptions.map((option) => (\n              <label\n                key={option.value}\n                className={clsx(\n                  'ds-appearance-panel__option',\n                  'ds-appearance-panel__option--toggle',\n                  radius === option.value && 'ds-appearance-panel__option--active',\n                )}\n              >\n                <input\n                  type=\"radio\"\n                  name=\"radius\"\n                  value={option.value}\n                  checked={radius === option.value}\n                  onChange={() => setRadius(option.value)}\n                  className=\"ds-appearance-panel__radio\"\n                />\n                <span className=\"ds-appearance-panel__option-content\">\n                  <span className=\"ds-appearance-panel__option-label\">{option.label}</span>\n                  <span className=\"ds-appearance-panel__option-description\">\n                    {option.description}\n                  </span>\n                </span>\n              </label>\n            ))}\n          </div>\n        </fieldset>\n\n        {/* Navigation Section */}\n        <fieldset className=\"ds-appearance-panel__section\">\n          <legend className=\"ds-appearance-panel__legend\">{l?.navHeading ?? 'Navigation Layout'}</legend>\n          <div className=\"ds-appearance-panel__options\">\n            {navOptions.map((option) => (\n              <label\n                key={option.value}\n                className={clsx(\n                  'ds-appearance-panel__option',\n                  navPlacement === option.value && 'ds-appearance-panel__option--active',\n                )}\n              >\n                <input\n                  type=\"radio\"\n                  name=\"nav\"\n                  value={option.value}\n                  checked={navPlacement === option.value}\n                  onChange={() => setNavPlacement(option.value)}\n                  className=\"ds-appearance-panel__radio\"\n                />\n                <span className=\"ds-appearance-panel__option-label\">{option.label}</span>\n              </label>\n            ))}\n          </div>\n        </fieldset>\n\n        {/* Reset Button */}\n        <button type=\"button\" onClick={resetToDefaults} className=\"ds-appearance-panel__reset\">\n          {l?.resetLabel ?? 'Reset to Defaults'}\n        </button>\n      </div>\n    );\n  },\n);\n\nAppearancePanel.displayName = 'AppearancePanel';\n"]}

package/dist/chunk-CJ2MKVAF.cjs

@@ -1,46 +0,0 @@
-'use strict';
-
-var React = require('react');
-var checkbox = require('@base-ui/react/checkbox');
-var clsx = require('clsx');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-
-// src/components/Checkbox/Checkbox.tsx
-var Checkbox = React__default.default.forwardRef(
-  ({ className, label, id, ...props }, ref) => {
-    const generatedId = React__default.default.useId();
-    const checkboxId = id || generatedId;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx__default.default("ds-checkbox-wrapper", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox.Root, { id: checkboxId, ref, className: "ds-checkbox", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox.Indicator, { className: "ds-checkbox__indicator", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          viewBox: "0 0 14 14",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          className: "ds-checkbox__icon",
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: "M11.6666 3.5L5.24992 9.91667L2.33325 7",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          )
-        }
-      ) }) }),
-      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: checkboxId, className: "ds-checkbox__label", children: label })
-    ] });
-  }
-);
-Checkbox.displayName = "Checkbox";
-
-exports.Checkbox = Checkbox;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-CJ2MKVAF.cjs.map

package/dist/chunk-CJ2MKVAF.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW;AAClB,SAAS,YAAY,oBAAoB;AACzC,OAAO,UAAU;AAuBX,SASQ,KATR;AANC,IAAM,WAAW,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,OAAO,IAAI,GAAG,MAAM,GAAG,QAAQ;AAC3C,UAAM,cAAc,MAAM,MAAM;AAChC,UAAM,aAAa,MAAM;AAEzB,WACE,qBAAC,SAAI,WAAW,KAAK,uBAAuB,SAAS,GACnD;AAAA,0BAAC,aAAa,MAAb,EAAkB,IAAI,YAAY,KAAU,WAAU,eAAe,GAAG,OACvE,8BAAC,aAAa,WAAb,EAAuB,WAAU,0BAChC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAM;AAAA,UACN,WAAU;AAAA,UAEV;AAAA,YAAC;AAAA;AAAA,cACC,GAAE;AAAA,cACF,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA;AAAA,UACjB;AAAA;AAAA,MACF,GACF,GACF;AAAA,MACC,SACC,oBAAC,WAAM,SAAS,YAAY,WAAU,sBACnC,iBACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc","sourcesContent":["import React from 'react';\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport clsx from 'clsx';\nimport './Checkbox.css';\n\nexport interface CheckboxProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  required?: boolean;\n  readOnly?: boolean;\n  name?: string;\n  value?: string;\n  id?: string;\n  label?: string;\n  className?: string;\n}\n\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  ({ className, label, id, ...props }, ref) => {\n    const generatedId = React.useId();\n    const checkboxId = id || generatedId;\n\n    return (\n      <div className={clsx('ds-checkbox-wrapper', className)}>\n        <BaseCheckbox.Root id={checkboxId} ref={ref} className=\"ds-checkbox\" {...props}>\n          <BaseCheckbox.Indicator className=\"ds-checkbox__indicator\">\n            <svg\n              viewBox=\"0 0 14 14\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"ds-checkbox__icon\"\n            >\n              <path\n                d=\"M11.6666 3.5L5.24992 9.91667L2.33325 7\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </BaseCheckbox.Indicator>\n        </BaseCheckbox.Root>\n        {label && (\n          <label htmlFor={checkboxId} className=\"ds-checkbox__label\">\n            {label}\n          </label>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}

package/dist/chunk-DP74LUXG.cjs

@@ -1,98 +0,0 @@
-'use strict';
-
-var react = require('react');
-var clsx = require('clsx');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-
-// src/components/MetricCounter/MetricCounter.tsx
-var MetricCounter = react.forwardRef(
-  ({
-    value,
-    prefix = "",
-    suffix = "",
-    duration = 1500,
-    decimals = 0,
-    label,
-    className,
-    ...props
-  }, ref) => {
-    const [displayValue, setDisplayValue] = react.useState(0);
-    const [hasAnimated, setHasAnimated] = react.useState(false);
-    const containerRef = react.useRef(null);
-    const prefersReducedMotion = react.useRef(false);
-    react.useEffect(() => {
-      prefersReducedMotion.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-      if (prefersReducedMotion.current) {
-        setDisplayValue(value);
-        setHasAnimated(true);
-        return;
-      }
-      const observer = new IntersectionObserver(
-        (entries) => {
-          if (entries[0].isIntersecting && !hasAnimated) {
-            startAnimation();
-            observer.disconnect();
-          }
-        },
-        { threshold: 0.5 }
-      );
-      if (containerRef.current) {
-        observer.observe(containerRef.current);
-      }
-      return () => observer.disconnect();
-    }, [value, hasAnimated]);
-    const startAnimation = () => {
-      let startTime;
-      setHasAnimated(true);
-      const easeOutExpo = (t) => {
-        return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
-      };
-      const animate = (currentTime) => {
-        if (!startTime) startTime = currentTime;
-        const progress = Math.min((currentTime - startTime) / duration, 1);
-        const currentMultiplier = easeOutExpo(progress);
-        const nextValue = value * currentMultiplier;
-        setDisplayValue(nextValue);
-        if (progress < 1) {
-          requestAnimationFrame(animate);
-        } else {
-          setDisplayValue(value);
-        }
-      };
-      requestAnimationFrame(animate);
-    };
-    const formattedValue = displayValue.toLocaleString(void 0, {
-      minimumFractionDigits: decimals,
-      maximumFractionDigits: decimals
-    });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: (node) => {
-          containerRef.current = node;
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-        },
-        className: clsx__default.default("ds-metric-counter", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-metric-counter__value-wrapper", children: [
-            prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-metric-counter__prefix", children: prefix }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-metric-counter__value", children: formattedValue }),
-            suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-metric-counter__suffix", children: suffix })
-          ] }),
-          label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-metric-counter__label", children: label })
-        ]
-      }
-    );
-  }
-);
-MetricCounter.displayName = "MetricCounter";
-
-exports.MetricCounter = MetricCounter;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-DP74LUXG.cjs.map