@szum-tech/design-system 3.17.0 → 3.18.2

package/dist/chunk-AAPMLWYK.js

@@ -1,2831 +0,0 @@
-import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-U7XZJQ4O.js';
-import { Spinner } from './chunk-P5IUC7HJ.js';
-import { useDirection, useComposedRefs as useComposedRefs$1 } from './chunk-VK2FJ65F.js';
-import { Select, SelectContent, SelectItem } from './chunk-XKCLVPUC.js';
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from './chunk-H5NHGMSQ.js';
-import { Skeleton } from './chunk-X7WREEFD.js';
-import { Input } from './chunk-S3ZUFD6U.js';
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-IZU3KULT.js';
-import { Separator } from './chunk-A72LE53B.js';
-import { useComposedRefs, useIsMobile } from './chunk-P4IL77YC.js';
-import { useLazyRef, useAsRef, useIsomorphicLayoutEffect } from './chunk-G24PWQKG.js';
-import { cn } from './chunk-ZD2QRAOX.js';
-import * as React16 from 'react';
-import { Slot as Slot$1 } from '@radix-ui/react-slot';
-import { Direction, Slot, Slider } from 'radix-ui';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { PipetteIcon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, PanelLeftIcon } from 'lucide-react';
-import { cva } from 'class-variance-authority';
-import { Toaster as Toaster$1 } from 'sonner';
-export { toast } from 'sonner';
-
-function VisuallyHiddenInput(props) {
-  const { control, value, checked, bubbles = true, type = "hidden", style, ...inputProps } = props;
-  const isCheckInput = React16.useMemo(() => type === "checkbox" || type === "radio" || type === "switch", [type]);
-  const inputRef = React16.useRef(null);
-  const prevValueRef = React16.useRef({
-    value: isCheckInput ? checked : value,
-    previous: isCheckInput ? checked : value
-  });
-  const prevValue = React16.useMemo(() => {
-    const currentValue = isCheckInput ? checked : value;
-    if (prevValueRef.current.value !== currentValue) {
-      prevValueRef.current.previous = prevValueRef.current.value;
-      prevValueRef.current.value = currentValue;
-    }
-    return prevValueRef.current.previous;
-  }, [isCheckInput, value, checked]);
-  const [controlSize, setControlSize] = React16.useState({});
-  React16.useLayoutEffect(() => {
-    if (!control) {
-      setControlSize({});
-      return;
-    }
-    setControlSize({
-      width: control.offsetWidth,
-      height: control.offsetHeight
-    });
-    if (typeof window === "undefined") return;
-    const resizeObserver = new ResizeObserver((entries) => {
-      if (!Array.isArray(entries) || !entries.length) return;
-      const entry = entries[0];
-      if (!entry) return;
-      let width;
-      let height;
-      if ("borderBoxSize" in entry) {
-        const borderSizeEntry = entry.borderBoxSize;
-        const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
-        width = borderSize.inlineSize;
-        height = borderSize.blockSize;
-      } else {
-        width = control.offsetWidth;
-        height = control.offsetHeight;
-      }
-      setControlSize({ width, height });
-    });
-    resizeObserver.observe(control, { box: "border-box" });
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [control]);
-  React16.useEffect(() => {
-    const input = inputRef.current;
-    if (!input) return;
-    const inputProto = window.HTMLInputElement.prototype;
-    const propertyKey = isCheckInput ? "checked" : "value";
-    const eventType = isCheckInput ? "click" : "input";
-    const currentValue = isCheckInput ? checked : value;
-    const serializedCurrentValue = isCheckInput ? checked : typeof value === "object" && value !== null ? JSON.stringify(value) : value;
-    const descriptor = Object.getOwnPropertyDescriptor(inputProto, propertyKey);
-    const setter = descriptor?.set;
-    if (prevValue !== currentValue && setter) {
-      const event = new Event(eventType, { bubbles });
-      setter.call(input, serializedCurrentValue);
-      input.dispatchEvent(event);
-    }
-  }, [prevValue, value, checked, bubbles, isCheckInput]);
-  const composedStyle = React16.useMemo(() => {
-    return {
-      ...style,
-      ...controlSize.width !== void 0 && controlSize.height !== void 0 ? controlSize : {},
-      border: 0,
-      clip: "rect(0 0 0 0)",
-      clipPath: "inset(50%)",
-      height: "1px",
-      margin: "-1px",
-      overflow: "hidden",
-      padding: 0,
-      position: "absolute",
-      whiteSpace: "nowrap",
-      width: "1px"
-    };
-  }, [style, controlSize]);
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type,
-      ...inputProps,
-      ref: inputRef,
-      "aria-hidden": isCheckInput,
-      tabIndex: -1,
-      defaultChecked: isCheckInput ? checked : void 0,
-      style: composedStyle
-    }
-  );
-}
-
-// src/components/color-picker/color-picker.constants.ts
-var COLOR_PICKER_ROOT_NAME = "ColorPicker";
-var COLOR_PICKER_IMPL_NAME = "ColorPickerImpl";
-var COLOR_PICKER_TRIGGER_NAME = "ColorPickerTrigger";
-var COLOR_PICKER_CONTENT_NAME = "ColorPickerContent";
-var COLOR_PICKER_AREA_NAME = "ColorPickerArea";
-var COLOR_PICKER_HUE_SLIDER_NAME = "ColorPickerHueSlider";
-var COLOR_PICKER_ALPHA_SLIDER_NAME = "ColorPickerAlphaSlider";
-var COLOR_PICKER_SWATCH_NAME = "ColorPickerSwatch";
-var COLOR_PICKER_EYE_DROPPER_NAME = "ColorPickerEyeDropper";
-var COLOR_PICKER_FORMAT_SELECT_NAME = "ColorPickerFormatSelect";
-var COLOR_PICKER_INPUT_NAME = "ColorPickerInput";
-var COLOR_FORMATS = ["hex", "rgb", "hsl", "hsb"];
-var ColorPickerContext = React16.createContext(null);
-function useColorPickerContext(consumerName) {
-  const context = React16.useContext(ColorPickerContext);
-  if (!context) {
-    throw new Error(`\`${consumerName}\` must be used within \`${COLOR_PICKER_ROOT_NAME}\``);
-  }
-  return context;
-}
-
-// src/components/color-picker/color-picker.utils.ts
-function hexToRgb(hex, alpha) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? {
-    r: Number.parseInt(result[1] ?? "0", 16),
-    g: Number.parseInt(result[2] ?? "0", 16),
-    b: Number.parseInt(result[3] ?? "0", 16),
-    a: alpha ?? 1
-  } : { r: 0, g: 0, b: 0, a: alpha ?? 1 };
-}
-function rgbToHex(color) {
-  const toHex = (n) => {
-    const hex = Math.round(n).toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-  };
-  return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`;
-}
-function rgbToHsv(color) {
-  const r = color.r / 255;
-  const g = color.g / 255;
-  const b = color.b / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const diff = max - min;
-  let h = 0;
-  if (diff !== 0) {
-    switch (max) {
-      case r:
-        h = (g - b) / diff % 6;
-        break;
-      case g:
-        h = (b - r) / diff + 2;
-        break;
-      case b:
-        h = (r - g) / diff + 4;
-        break;
-    }
-  }
-  h = Math.round(h * 60);
-  if (h < 0) h += 360;
-  const s = max === 0 ? 0 : diff / max;
-  return {
-    h,
-    s: Math.round(s * 100),
-    v: Math.round(max * 100),
-    a: color.a
-  };
-}
-function hsvToRgb(hsv) {
-  const h = hsv.h / 360;
-  const s = hsv.s / 100;
-  const v = hsv.v / 100;
-  const i = Math.floor(h * 6);
-  const f = h * 6 - i;
-  const p = v * (1 - s);
-  const q = v * (1 - f * s);
-  const t = v * (1 - (1 - f) * s);
-  let r;
-  let g;
-  let b;
-  switch (i % 6) {
-    case 0: {
-      r = v;
-      g = t;
-      b = p;
-      break;
-    }
-    case 1: {
-      r = q;
-      g = v;
-      b = p;
-      break;
-    }
-    case 2: {
-      r = p;
-      g = v;
-      b = t;
-      break;
-    }
-    case 3: {
-      r = p;
-      g = q;
-      b = v;
-      break;
-    }
-    case 4: {
-      r = t;
-      g = p;
-      b = v;
-      break;
-    }
-    case 5: {
-      r = v;
-      g = p;
-      b = q;
-      break;
-    }
-    default: {
-      r = 0;
-      g = 0;
-      b = 0;
-    }
-  }
-  return {
-    r: Math.round(r * 255),
-    g: Math.round(g * 255),
-    b: Math.round(b * 255),
-    a: hsv.a
-  };
-}
-function rgbToHsl(color) {
-  const r = color.r / 255;
-  const g = color.g / 255;
-  const b = color.b / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const diff = max - min;
-  const sum = max + min;
-  const l = sum / 2;
-  let h = 0;
-  let s = 0;
-  if (diff !== 0) {
-    s = l > 0.5 ? diff / (2 - sum) : diff / sum;
-    if (max === r) {
-      h = (g - b) / diff + (g < b ? 6 : 0);
-    } else if (max === g) {
-      h = (b - r) / diff + 2;
-    } else if (max === b) {
-      h = (r - g) / diff + 4;
-    }
-    h /= 6;
-  }
-  return {
-    h: Math.round(h * 360),
-    s: Math.round(s * 100),
-    l: Math.round(l * 100)
-  };
-}
-function hslToRgb(hsl, alpha = 1) {
-  const h = hsl.h / 360;
-  const s = hsl.s / 100;
-  const l = hsl.l / 100;
-  const c = (1 - Math.abs(2 * l - 1)) * s;
-  const x = c * (1 - Math.abs(h * 6 % 2 - 1));
-  const m = l - c / 2;
-  let r = 0;
-  let g = 0;
-  let b = 0;
-  if (h >= 0 && h < 1 / 6) {
-    r = c;
-    g = x;
-    b = 0;
-  } else if (h >= 1 / 6 && h < 2 / 6) {
-    r = x;
-    g = c;
-    b = 0;
-  } else if (h >= 2 / 6 && h < 3 / 6) {
-    r = 0;
-    g = c;
-    b = x;
-  } else if (h >= 3 / 6 && h < 4 / 6) {
-    r = 0;
-    g = x;
-    b = c;
-  } else if (h >= 4 / 6 && h < 5 / 6) {
-    r = x;
-    g = 0;
-    b = c;
-  } else if (h >= 5 / 6 && h < 1) {
-    r = c;
-    g = 0;
-    b = x;
-  }
-  return {
-    r: Math.round((r + m) * 255),
-    g: Math.round((g + m) * 255),
-    b: Math.round((b + m) * 255),
-    a: alpha
-  };
-}
-function colorToString(color, format = "hex") {
-  switch (format) {
-    case "hex":
-      return rgbToHex(color);
-    case "rgb":
-      return color.a < 1 ? `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})` : `rgb(${color.r}, ${color.g}, ${color.b})`;
-    case "hsl": {
-      const hsl = rgbToHsl(color);
-      return color.a < 1 ? `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${color.a})` : `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
-    }
-    case "hsb": {
-      const hsv = rgbToHsv(color);
-      return color.a < 1 ? `hsba(${hsv.h}, ${hsv.s}%, ${hsv.v}%, ${color.a})` : `hsb(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`;
-    }
-    default:
-      return rgbToHex(color);
-  }
-}
-function parseColorString(value) {
-  const trimmed = value.trim();
-  if (trimmed.startsWith("#")) {
-    const hexMatch = trimmed.match(/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$/);
-    if (hexMatch) return hexToRgb(trimmed);
-  }
-  const rgbMatch = trimmed.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);
-  if (rgbMatch) {
-    return {
-      r: Number.parseInt(rgbMatch[1] ?? "0", 10),
-      g: Number.parseInt(rgbMatch[2] ?? "0", 10),
-      b: Number.parseInt(rgbMatch[3] ?? "0", 10),
-      a: rgbMatch[4] ? Number.parseFloat(rgbMatch[4]) : 1
-    };
-  }
-  const hslMatch = trimmed.match(/^hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*\)$/);
-  if (hslMatch) {
-    const h = Number.parseInt(hslMatch[1] ?? "0", 10);
-    const s = Number.parseInt(hslMatch[2] ?? "0", 10) / 100;
-    const l = Number.parseInt(hslMatch[3] ?? "0", 10) / 100;
-    const a = hslMatch[4] ? Number.parseFloat(hslMatch[4]) : 1;
-    const c = (1 - Math.abs(2 * l - 1)) * s;
-    const x = c * (1 - Math.abs(h / 60 % 2 - 1));
-    const m = l - c / 2;
-    let r = 0;
-    let g = 0;
-    let b = 0;
-    if (h >= 0 && h < 60) {
-      r = c;
-      g = x;
-    } else if (h >= 60 && h < 120) {
-      r = x;
-      g = c;
-    } else if (h >= 120 && h < 180) {
-      g = c;
-      b = x;
-    } else if (h >= 180 && h < 240) {
-      g = x;
-      b = c;
-    } else if (h >= 240 && h < 300) {
-      r = x;
-      b = c;
-    } else if (h >= 300 && h < 360) {
-      r = c;
-      b = x;
-    }
-    return {
-      r: Math.round((r + m) * 255),
-      g: Math.round((g + m) * 255),
-      b: Math.round((b + m) * 255),
-      a
-    };
-  }
-  const hsbMatch = trimmed.match(/^hsba?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*\)$/);
-  if (hsbMatch) {
-    const h = Number.parseInt(hsbMatch[1] ?? "0", 10);
-    const s = Number.parseInt(hsbMatch[2] ?? "0", 10);
-    const v = Number.parseInt(hsbMatch[3] ?? "0", 10);
-    const a = hsbMatch[4] ? Number.parseFloat(hsbMatch[4]) : 1;
-    return hsvToRgb({ h, s, v, a });
-  }
-  return null;
-}
-
-// src/components/color-picker/color-picker.store.tsx
-var ColorPickerStoreContext = React16.createContext(null);
-function useColorPickerStoreContext(consumerName) {
-  const context = React16.useContext(ColorPickerStoreContext);
-  if (!context) {
-    throw new Error(`\`${consumerName}\` must be used within \`ColorPicker\``);
-  }
-  return context;
-}
-function useColorPickerStore(selector) {
-  const store = useColorPickerStoreContext("useColorPickerStore");
-  const getSnapshot = React16.useCallback(() => selector(store.getState()), [store, selector]);
-  return React16.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
-}
-function createColorPickerStore(listenersRef, stateRef, propsRef) {
-  const store = {
-    subscribe: (cb) => {
-      listenersRef.current.add(cb);
-      return () => listenersRef.current.delete(cb);
-    },
-    getState: () => stateRef.current,
-    setColor: (value) => {
-      if (Object.is(stateRef.current.color, value)) return;
-      const prevState = { ...stateRef.current };
-      stateRef.current.color = value;
-      if (propsRef.current.onValueChange) {
-        propsRef.current.onValueChange(colorToString(value, prevState.format));
-      }
-      store.notify();
-    },
-    setHsv: (value) => {
-      if (Object.is(stateRef.current.hsv, value)) return;
-      const prevState = { ...stateRef.current };
-      stateRef.current.hsv = value;
-      if (propsRef.current.onValueChange) {
-        propsRef.current.onValueChange(colorToString(hsvToRgb(value), prevState.format));
-      }
-      store.notify();
-    },
-    setOpen: (value) => {
-      if (Object.is(stateRef.current.open, value)) return;
-      stateRef.current.open = value;
-      propsRef.current.onOpenChange?.(value);
-      store.notify();
-    },
-    setFormat: (value) => {
-      if (Object.is(stateRef.current.format, value)) return;
-      stateRef.current.format = value;
-      propsRef.current.onFormatChange?.(value);
-      store.notify();
-    },
-    notify: () => {
-      for (const cb of listenersRef.current) cb();
-    }
-  };
-  return store;
-}
-function ColorPicker(props) {
-  const {
-    value: valueProp,
-    defaultValue = "#000000",
-    onValueChange,
-    format: formatProp,
-    defaultFormat = "hex",
-    onFormatChange,
-    defaultOpen,
-    open: openProp,
-    onOpenChange,
-    modal,
-    name,
-    disabled,
-    inline,
-    readOnly,
-    required,
-    ...rootProps
-  } = props;
-  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
-  const stateRef = useLazyRef(() => {
-    const colorString = valueProp ?? defaultValue;
-    const color = hexToRgb(colorString);
-    return {
-      color,
-      hsv: rgbToHsv(color),
-      open: openProp ?? defaultOpen ?? false,
-      format: formatProp ?? defaultFormat
-    };
-  });
-  const propsRef = useAsRef({ onValueChange, onOpenChange, onFormatChange });
-  const store = React16.useMemo(
-    () => createColorPickerStore(listenersRef, stateRef, propsRef),
-    [listenersRef, stateRef, propsRef]
-  );
-  return /* @__PURE__ */ jsx(ColorPickerStoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(
-    ColorPickerImpl,
-    {
-      ...rootProps,
-      value: valueProp,
-      defaultOpen,
-      open: openProp,
-      modal,
-      name,
-      disabled,
-      inline,
-      readOnly,
-      required
-    }
-  ) });
-}
-function ColorPickerImpl(props) {
-  const {
-    value: valueProp,
-    dir: dirProp,
-    defaultOpen,
-    open: openProp,
-    modal,
-    name,
-    ref,
-    asChild,
-    disabled,
-    inline,
-    readOnly,
-    required,
-    ...rootProps
-  } = props;
-  const store = useColorPickerStoreContext(COLOR_PICKER_IMPL_NAME);
-  const dir = Direction.useDirection(dirProp);
-  const [formTrigger, setFormTrigger] = React16.useState(null);
-  const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
-  const isFormControl = formTrigger ? !!formTrigger.closest("form") : true;
-  useIsomorphicLayoutEffect(() => {
-    if (valueProp !== void 0) {
-      const currentState = store.getState();
-      const color = hexToRgb(valueProp, currentState.color.a);
-      store.setColor(color);
-      store.setHsv(rgbToHsv(color));
-    }
-  }, [valueProp]);
-  useIsomorphicLayoutEffect(() => {
-    if (openProp !== void 0) {
-      store.setOpen(openProp);
-    }
-  }, [openProp]);
-  const contextValue = React16.useMemo(
-    () => ({ dir, disabled, inline, readOnly, required }),
-    [dir, disabled, inline, readOnly, required]
-  );
-  const value = useColorPickerStore((state) => rgbToHex(state.color));
-  const open = useColorPickerStore((state) => state.open);
-  const RootPrimitive = asChild ? Slot.Slot : "div";
-  if (inline) {
-    return /* @__PURE__ */ jsxs(ColorPickerContext.Provider, { value: contextValue, children: [
-      /* @__PURE__ */ jsx(RootPrimitive, { "data-slot": "color-picker", ...rootProps, ref: composedRef }),
-      isFormControl && /* @__PURE__ */ jsx(
-        VisuallyHiddenInput,
-        {
-          type: "hidden",
-          control: formTrigger,
-          name,
-          value,
-          disabled,
-          readOnly,
-          required
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsx(ColorPickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Popover, { defaultOpen, open, onOpenChange: store.setOpen, modal, children: [
-    /* @__PURE__ */ jsx(RootPrimitive, { "data-slot": "color-picker", ...rootProps, ref: composedRef }),
-    isFormControl && /* @__PURE__ */ jsx(
-      VisuallyHiddenInput,
-      {
-        type: "hidden",
-        control: formTrigger,
-        name,
-        value,
-        disabled,
-        readOnly,
-        required
-      }
-    )
-  ] }) });
-}
-function ColorPickerTrigger(props) {
-  const { asChild, disabled, ...triggerProps } = props;
-  const context = useColorPickerContext(COLOR_PICKER_TRIGGER_NAME);
-  const isDisabled = disabled || context.disabled;
-  const TriggerPrimitive = asChild ? Slot.Slot : Button;
-  return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled: isDisabled, children: /* @__PURE__ */ jsx(TriggerPrimitive, { "data-slot": "color-picker-trigger", ...triggerProps }) });
-}
-function ColorPickerContent(props) {
-  const { asChild, className, children, ...popoverContentProps } = props;
-  const context = useColorPickerContext(COLOR_PICKER_CONTENT_NAME);
-  if (context.inline) {
-    const ContentPrimitive = asChild ? Slot.Slot : "div";
-    return /* @__PURE__ */ jsx(
-      ContentPrimitive,
-      {
-        "data-slot": "color-picker-content",
-        ...popoverContentProps,
-        className: cn("flex w-[340px] flex-col gap-4 p-4", className),
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    PopoverContent,
-    {
-      "data-slot": "color-picker-content",
-      asChild,
-      ...popoverContentProps,
-      className: cn("flex w-[340px] flex-col gap-4 p-4", className),
-      children
-    }
-  );
-}
-function ColorPickerArea(props) {
-  const {
-    asChild,
-    onPointerDown: onPointerDownProp,
-    onPointerMove: onPointerMoveProp,
-    onPointerUp: onPointerUpProp,
-    className,
-    ref,
-    ...areaProps
-  } = props;
-  const propsRef = useAsRef({
-    onPointerDown: onPointerDownProp,
-    onPointerMove: onPointerMoveProp,
-    onPointerUp: onPointerUpProp
-  });
-  const context = useColorPickerContext(COLOR_PICKER_AREA_NAME);
-  const store = useColorPickerStoreContext(COLOR_PICKER_AREA_NAME);
-  const hsv = useColorPickerStore((state) => state.hsv);
-  const isDraggingRef = React16.useRef(false);
-  const areaRef = React16.useRef(null);
-  const composedRef = useComposedRefs(ref, areaRef);
-  const updateColorFromPosition = React16.useCallback(
-    (clientX, clientY) => {
-      if (!areaRef.current) return;
-      const rect = areaRef.current.getBoundingClientRect();
-      const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-      const y = Math.max(0, Math.min(1, 1 - (clientY - rect.top) / rect.height));
-      const newHsv = {
-        h: hsv?.h ?? 0,
-        s: Math.round(x * 100),
-        v: Math.round(y * 100),
-        a: hsv?.a ?? 1
-      };
-      store.setHsv(newHsv);
-      store.setColor(hsvToRgb(newHsv));
-    },
-    [hsv, store]
-  );
-  const onPointerDown = React16.useCallback(
-    (event) => {
-      if (context.disabled) return;
-      propsRef.current.onPointerDown?.(event);
-      if (event.defaultPrevented) return;
-      isDraggingRef.current = true;
-      areaRef.current?.setPointerCapture(event.pointerId);
-      updateColorFromPosition(event.clientX, event.clientY);
-    },
-    [context.disabled, updateColorFromPosition, propsRef]
-  );
-  const onPointerMove = React16.useCallback(
-    (event) => {
-      propsRef.current.onPointerMove?.(event);
-      if (event.defaultPrevented) return;
-      if (isDraggingRef.current) updateColorFromPosition(event.clientX, event.clientY);
-    },
-    [updateColorFromPosition, propsRef]
-  );
-  const onPointerUp = React16.useCallback(
-    (event) => {
-      propsRef.current.onPointerUp?.(event);
-      if (event.defaultPrevented) return;
-      isDraggingRef.current = false;
-      areaRef.current?.releasePointerCapture(event.pointerId);
-    },
-    [propsRef]
-  );
-  const hue = hsv?.h ?? 0;
-  const backgroundHue = hsvToRgb({ h: hue, s: 100, v: 100, a: 1 });
-  const AreaPrimitive = asChild ? Slot.Slot : "div";
-  return /* @__PURE__ */ jsxs(
-    AreaPrimitive,
-    {
-      "data-slot": "color-picker-area",
-      ...areaProps,
-      className: cn(
-        "relative h-40 w-full cursor-crosshair touch-none rounded-sm border",
-        context.disabled && "pointer-events-none opacity-50",
-        className
-      ),
-      ref: composedRef,
-      onPointerDown,
-      onPointerMove,
-      onPointerUp,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 overflow-hidden rounded-sm", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute inset-0",
-              style: { backgroundColor: `rgb(${backgroundHue.r}, ${backgroundHue.g}, ${backgroundHue.b})` }
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { background: "linear-gradient(to right, #fff, transparent)" } }),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { background: "linear-gradient(to bottom, transparent, #000)" } })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-sm",
-            style: { left: `${hsv?.s ?? 0}%`, top: `${100 - (hsv?.v ?? 0)}%` }
-          }
-        )
-      ]
-    }
-  );
-}
-function ColorPickerHueSlider(props) {
-  const { className, ...sliderProps } = props;
-  const context = useColorPickerContext(COLOR_PICKER_HUE_SLIDER_NAME);
-  const store = useColorPickerStoreContext(COLOR_PICKER_HUE_SLIDER_NAME);
-  const hsv = useColorPickerStore((state) => state.hsv);
-  const onValueChange = React16.useCallback(
-    (values) => {
-      const newHsv = { h: values[0] ?? 0, s: hsv?.s ?? 0, v: hsv?.v ?? 0, a: hsv?.a ?? 1 };
-      store.setHsv(newHsv);
-      store.setColor(hsvToRgb(newHsv));
-    },
-    [hsv, store]
-  );
-  return /* @__PURE__ */ jsxs(
-    Slider.Root,
-    {
-      "data-slot": "color-picker-hue-slider",
-      ...sliderProps,
-      max: 360,
-      step: 1,
-      className: cn("relative flex w-full touch-none items-center select-none", className),
-      value: [hsv?.h ?? 0],
-      onValueChange,
-      disabled: context.disabled,
-      children: [
-        /* @__PURE__ */ jsx(Slider.Track, { className: "relative h-3 w-full grow overflow-hidden rounded-full bg-[linear-gradient(to_right,#ff0000_0%,#ffff00_16.66%,#00ff00_33.33%,#00ffff_50%,#0000ff_66.66%,#ff00ff_83.33%,#ff0000_100%)]", children: /* @__PURE__ */ jsx(Slider.Range, { className: "absolute h-full" }) }),
-        /* @__PURE__ */ jsx(Slider.Thumb, { className: "border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" })
-      ]
-    }
-  );
-}
-function ColorPickerAlphaSlider(props) {
-  const { className, ...sliderProps } = props;
-  const context = useColorPickerContext(COLOR_PICKER_ALPHA_SLIDER_NAME);
-  const store = useColorPickerStoreContext(COLOR_PICKER_ALPHA_SLIDER_NAME);
-  const color = useColorPickerStore((state) => state.color);
-  const hsv = useColorPickerStore((state) => state.hsv);
-  const onValueChange = React16.useCallback(
-    (values) => {
-      const alpha = (values[0] ?? 0) / 100;
-      store.setColor({ ...color, a: alpha });
-      store.setHsv({ ...hsv, a: alpha });
-    },
-    [color, hsv, store]
-  );
-  const gradientColor = `rgb(${color?.r ?? 0}, ${color?.g ?? 0}, ${color?.b ?? 0})`;
-  return /* @__PURE__ */ jsxs(
-    Slider.Root,
-    {
-      "data-slot": "color-picker-alpha-slider",
-      ...sliderProps,
-      max: 100,
-      step: 1,
-      disabled: context.disabled,
-      className: cn("relative flex w-full touch-none items-center select-none", className),
-      value: [Math.round((color?.a ?? 1) * 100)],
-      onValueChange,
-      children: [
-        /* @__PURE__ */ jsxs(
-          Slider.Track,
-          {
-            className: "relative h-3 w-full grow overflow-hidden rounded-full",
-            style: {
-              background: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
-              backgroundSize: "8px 8px",
-              backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "absolute inset-0 rounded-full",
-                  style: { background: `linear-gradient(to right, transparent, ${gradientColor})` }
-                }
-              ),
-              /* @__PURE__ */ jsx(Slider.Range, { className: "absolute h-full" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(Slider.Thumb, { className: "border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" })
-      ]
-    }
-  );
-}
-function ColorPickerSwatch(props) {
-  const { asChild, className, ...swatchProps } = props;
-  const context = useColorPickerContext(COLOR_PICKER_SWATCH_NAME);
-  const color = useColorPickerStore((state) => state.color);
-  const format = useColorPickerStore((state) => state.format);
-  const backgroundStyle = React16.useMemo(() => {
-    if (!color) {
-      return {
-        background: "linear-gradient(to bottom right, transparent calc(50% - 1px), hsl(var(--destructive)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat"
-      };
-    }
-    const colorString = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
-    if (color.a < 1) {
-      return {
-        background: `linear-gradient(${colorString}, ${colorString}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0% 50% / 8px 8px`
-      };
-    }
-    return { backgroundColor: colorString };
-  }, [color]);
-  const ariaLabel = !color ? "No color selected" : `Current color: ${colorToString(color, format)}`;
-  const SwatchPrimitive = asChild ? Slot.Slot : "div";
-  return /* @__PURE__ */ jsx(
-    SwatchPrimitive,
-    {
-      role: "img",
-      "aria-label": ariaLabel,
-      "data-slot": "color-picker-swatch",
-      ...swatchProps,
-      className: cn("box-border size-8 rounded-sm border shadow-sm", context.disabled && "opacity-50", className),
-      style: { ...backgroundStyle, forcedColorAdjust: "none" }
-    }
-  );
-}
-function ColorPickerEyeDropper(props) {
-  const { size: sizeProp, children, disabled, ...buttonProps } = props;
-  const context = useColorPickerContext(COLOR_PICKER_EYE_DROPPER_NAME);
-  const store = useColorPickerStoreContext(COLOR_PICKER_EYE_DROPPER_NAME);
-  const color = useColorPickerStore((state) => state.color);
-  const isDisabled = disabled || context.disabled;
-  const onEyeDropper = React16.useCallback(async () => {
-    if (!window.EyeDropper) return;
-    try {
-      const eyeDropper = new window.EyeDropper();
-      const result = await eyeDropper.open();
-      if (result.sRGBHex) {
-        const newColor = hexToRgb(result.sRGBHex, color?.a ?? 1);
-        store.setColor(newColor);
-        store.setHsv(rgbToHsv(newColor));
-      }
-    } catch (error) {
-      console.warn("EyeDropper error:", error);
-    }
-  }, [color, store]);
-  const hasEyeDropper = typeof window !== "undefined" && !!window.EyeDropper;
-  if (!hasEyeDropper) return null;
-  const size = sizeProp ?? (children ? "default" : "icon");
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      "data-slot": "color-picker-eye-dropper",
-      ...buttonProps,
-      variant: "outline",
-      size,
-      onClick: onEyeDropper,
-      disabled: isDisabled,
-      children: children ?? /* @__PURE__ */ jsx(PipetteIcon, {})
-    }
-  );
-}
-function ColorPickerFormatSelect(props) {
-  const { size, disabled, className, ...selectProps } = props;
-  const context = useColorPickerContext(COLOR_PICKER_FORMAT_SELECT_NAME);
-  const store = useColorPickerStoreContext(COLOR_PICKER_FORMAT_SELECT_NAME);
-  const isDisabled = disabled || context.disabled;
-  const format = useColorPickerStore((state) => state.format);
-  const onFormatChange = React16.useCallback(
-    (value) => {
-      store.setFormat(value);
-    },
-    [store]
-  );
-  return /* @__PURE__ */ jsx(
-    Select,
-    {
-      "data-slot": "color-picker-format-select",
-      ...selectProps,
-      value: format,
-      onValueChange: onFormatChange,
-      disabled: isDisabled,
-      size: size ?? "sm",
-      className: cn(className),
-      children: /* @__PURE__ */ jsx(SelectContent, { children: COLOR_FORMATS.map((f) => /* @__PURE__ */ jsx(SelectItem, { value: f, children: f.toUpperCase() }, f)) })
-    }
-  );
-}
-var inputGroupItemVariants = cva(
-  "h-8 [-moz-appearance:textfield] focus-visible:z-10 focus-visible:ring-1 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none",
-  {
-    variants: {
-      position: {
-        first: "rounded-e-none",
-        middle: "-ms-px rounded-none border-l-0",
-        last: "-ms-px rounded-s-none border-l-0",
-        isolated: ""
-      }
-    },
-    defaultVariants: {
-      position: "isolated"
-    }
-  }
-);
-function ColorPickerInput(props) {
-  const store = useColorPickerStoreContext(COLOR_PICKER_INPUT_NAME);
-  const context = useColorPickerContext(COLOR_PICKER_INPUT_NAME);
-  const color = useColorPickerStore((state) => state.color);
-  const format = useColorPickerStore((state) => state.format);
-  const hsv = useColorPickerStore((state) => state.hsv);
-  const onColorChange = React16.useCallback(
-    (newColor) => {
-      const newHsv = rgbToHsv(newColor);
-      store.setColor(newColor);
-      store.setHsv(newHsv);
-    },
-    [store]
-  );
-  if (format === "hex") {
-    return /* @__PURE__ */ jsx(HexInput, { color, onColorChange, context, ...props });
-  }
-  if (format === "rgb") {
-    return /* @__PURE__ */ jsx(RgbInput, { color, onColorChange, context, ...props });
-  }
-  if (format === "hsl") {
-    return /* @__PURE__ */ jsx(HslInput, { color, onColorChange, context, ...props });
-  }
-  if (format === "hsb") {
-    return /* @__PURE__ */ jsx(HsbInput, { hsv, onColorChange, context, ...props });
-  }
-}
-function InputGroupItem({ className, position, ...props }) {
-  return /* @__PURE__ */ jsx(Input, { "data-slot": "color-picker-input", className: cn(inputGroupItemVariants({ position, className })), ...props });
-}
-function HexInput(props) {
-  const { color, onColorChange, context, withoutAlpha, className, ...inputProps } = props;
-  const hexValue = rgbToHex(color);
-  const alphaValue = Math.round((color?.a ?? 1) * 100);
-  const onHexChange = React16.useCallback(
-    (event) => {
-      const value = event.target.value;
-      const parsedColor = parseColorString(value);
-      if (parsedColor) {
-        onColorChange({ ...parsedColor, a: color?.a ?? 1 });
-      }
-    },
-    [color, onColorChange]
-  );
-  const onAlphaChange = React16.useCallback(
-    (event) => {
-      const value = Number.parseInt(event.target.value, 10);
-      if (!Number.isNaN(value) && value >= 0 && value <= 100) {
-        onColorChange({ ...color, a: value / 100 });
-      }
-    },
-    [color, onColorChange]
-  );
-  if (withoutAlpha) {
-    return /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Hex color value",
-        position: "isolated",
-        ...inputProps,
-        placeholder: "#000000",
-        className: cn("font-code", className),
-        value: hexValue,
-        onChange: onHexChange,
-        disabled: context.disabled
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "color-picker-input-wrapper", className: cn("flex flex-1 items-center", className), children: [
-    /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Hex color value",
-        position: "first",
-        ...inputProps,
-        placeholder: "#000000",
-        className: "font-code flex-1",
-        value: hexValue,
-        onChange: onHexChange,
-        disabled: context.disabled
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Alpha transparency percentage",
-        position: "last",
-        ...inputProps,
-        placeholder: "100",
-        inputMode: "numeric",
-        pattern: "[0-9]*",
-        min: "0",
-        max: "100",
-        className: "w-14",
-        value: alphaValue,
-        onChange: onAlphaChange,
-        disabled: context.disabled
-      }
-    )
-  ] });
-}
-function RgbInput(props) {
-  const { color, onColorChange, context, withoutAlpha, className, ...inputProps } = props;
-  const rValue = Math.round(color?.r ?? 0);
-  const gValue = Math.round(color?.g ?? 0);
-  const bValue = Math.round(color?.b ?? 0);
-  const alphaValue = Math.round((color?.a ?? 1) * 100);
-  const onChannelChange = React16.useCallback(
-    (channel, max, isAlpha = false) => (event) => {
-      const value = Number.parseInt(event.target.value, 10);
-      if (!Number.isNaN(value) && value >= 0 && value <= max) {
-        const newValue = isAlpha ? value / 100 : value;
-        onColorChange({ ...color, [channel]: newValue });
-      }
-    },
-    [color, onColorChange]
-  );
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "color-picker-input-wrapper", className: cn("flex flex-1 items-center", className), children: [
-    /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Red color component (0-255)",
-        position: "first",
-        ...inputProps,
-        placeholder: "0",
-        inputMode: "numeric",
-        pattern: "[0-9]*",
-        min: "0",
-        max: "255",
-        className: "w-14",
-        value: rValue,
-        onChange: onChannelChange("r", 255),
-        disabled: context.disabled
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Green color component (0-255)",
-        position: "middle",
-        ...inputProps,
-        placeholder: "0",
-        inputMode: "numeric",
-        pattern: "[0-9]*",
-        min: "0",
-        max: "255",
-        className: "w-14",
-        value: gValue,
-        onChange: onChannelChange("g", 255),
-        disabled: context.disabled
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Blue color component (0-255)",
-        position: withoutAlpha ? "last" : "middle",
-        ...inputProps,
-        placeholder: "0",
-        inputMode: "numeric",
-        pattern: "[0-9]*",
-        min: "0",
-        max: "255",
-        className: "w-14",
-        value: bValue,
-        onChange: onChannelChange("b", 255),
-        disabled: context.disabled
-      }
-    ),
-    !withoutAlpha && /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Alpha transparency percentage",
-        position: "last",
-        ...inputProps,
-        placeholder: "100",
-        inputMode: "numeric",
-        pattern: "[0-9]*",
-        min: "0",
-        max: "100",
-        className: "w-14",
-        value: alphaValue,
-        onChange: onChannelChange("a", 100, true),
-        disabled: context.disabled
-      }
-    )
-  ] });
-}
-function HslInput(props) {
-  const { color, onColorChange, context, withoutAlpha, className, ...inputProps } = props;
-  const hsl = React16.useMemo(() => rgbToHsl(color), [color]);
-  const alphaValue = Math.round((color?.a ?? 1) * 100);
-  const onHslChannelChange = React16.useCallback(
-    (channel, max) => (event) => {
-      const value = Number.parseInt(event.target.value, 10);
-      if (!Number.isNaN(value) && value >= 0 && value <= max) {
-        const newHsl = { ...hsl, [channel]: value };
-        const newColor = hslToRgb(newHsl, color?.a ?? 1);
-        onColorChange(newColor);
-      }
-    },
-    [hsl, color, onColorChange]
-  );
-  const onAlphaChange = React16.useCallback(
-    (event) => {
-      const value = Number.parseInt(event.target.value, 10);
-      if (!Number.isNaN(value) && value >= 0 && value <= 100) {
-        onColorChange({ ...color, a: value / 100 });
-      }
-    },
-    [color, onColorChange]
-  );
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "color-picker-input-wrapper", className: cn("flex items-center", className), children: [
-    /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Hue degree (0-360)",
-        position: "first",
-        ...inputProps,
-        placeholder: "0",
-        inputMode: "numeric",
-        pattern: "[0-9]*",
-        min: "0",
-        max: "360",
-        className: "w-14",
-        value: hsl.h,
-        onChange: onHslChannelChange("h", 360),
-        disabled: context.disabled
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Saturation percentage (0-100)",
-        position: "middle",
-        ...inputProps,
-        placeholder: "0",
-        inputMode: "numeric",
-        pattern: "[0-9]*",
-        min: "0",
-        max: "100",
-        className: "w-14",
-        value: hsl.s,
-        onChange: onHslChannelChange("s", 100),
-        disabled: context.disabled
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Lightness percentage (0-100)",
-        position: withoutAlpha ? "last" : "middle",
-        ...inputProps,
-        placeholder: "0",
-        inputMode: "numeric",
-        pattern: "[0-9]*",
-        min: "0",
-        max: "100",
-        className: "w-14",
-        value: hsl.l,
-        onChange: onHslChannelChange("l", 100),
-        disabled: context.disabled
-      }
-    ),
-    !withoutAlpha && /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Alpha transparency percentage",
-        position: "last",
-        ...inputProps,
-        placeholder: "100",
-        inputMode: "numeric",
-        pattern: "[0-9]*",
-        min: "0",
-        max: "100",
-        className: "w-14",
-        value: alphaValue,
-        onChange: onAlphaChange,
-        disabled: context.disabled
-      }
-    )
-  ] });
-}
-function HsbInput(props) {
-  const { hsv, onColorChange, context, withoutAlpha, className, ...inputProps } = props;
-  const alphaValue = Math.round((hsv?.a ?? 1) * 100);
-  const onHsvChannelChange = React16.useCallback(
-    (channel, max) => (event) => {
-      const value = Number.parseInt(event.target.value, 10);
-      if (!Number.isNaN(value) && value >= 0 && value <= max) {
-        const newHsv = { ...hsv, [channel]: value };
-        const newColor = hsvToRgb(newHsv);
-        onColorChange(newColor);
-      }
-    },
-    [hsv, onColorChange]
-  );
-  const onAlphaChange = React16.useCallback(
-    (event) => {
-      const value = Number.parseInt(event.target.value, 10);
-      if (!Number.isNaN(value) && value >= 0 && value <= 100) {
-        const currentColor = hsvToRgb(hsv);
-        onColorChange({ ...currentColor, a: value / 100 });
-      }
-    },
-    [hsv, onColorChange]
-  );
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "color-picker-input-wrapper", className: cn("flex items-center", className), children: [
-    /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Hue degree (0-360)",
-        position: "first",
-        ...inputProps,
-        placeholder: "0",
-        inputMode: "numeric",
-        pattern: "[0-9]*",
-        min: "0",
-        max: "360",
-        className: "w-14",
-        value: hsv?.h ?? 0,
-        onChange: onHsvChannelChange("h", 360),
-        disabled: context.disabled
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Saturation percentage (0-100)",
-        position: "middle",
-        ...inputProps,
-        placeholder: "0",
-        inputMode: "numeric",
-        pattern: "[0-9]*",
-        min: "0",
-        max: "100",
-        className: "w-14",
-        value: hsv?.s ?? 0,
-        onChange: onHsvChannelChange("s", 100),
-        disabled: context.disabled
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Brightness percentage (0-100)",
-        position: withoutAlpha ? "last" : "middle",
-        ...inputProps,
-        placeholder: "0",
-        inputMode: "numeric",
-        pattern: "[0-9]*",
-        min: "0",
-        max: "100",
-        className: "w-14",
-        value: hsv?.v ?? 0,
-        onChange: onHsvChannelChange("v", 100),
-        disabled: context.disabled
-      }
-    ),
-    !withoutAlpha && /* @__PURE__ */ jsx(
-      InputGroupItem,
-      {
-        "aria-label": "Alpha transparency percentage",
-        position: "last",
-        ...inputProps,
-        placeholder: "100",
-        inputMode: "numeric",
-        pattern: "[0-9]*",
-        min: "0",
-        max: "100",
-        className: "w-14",
-        value: alphaValue,
-        onChange: onAlphaChange,
-        disabled: context.disabled
-      }
-    )
-  ] });
-}
-
-// src/components/stepper/stepper.constants.ts
-var STEPPER_ROOT_NAME = "Stepper";
-var STEPPER_NAV_NAME = "StepperNav";
-var STEPPER_ITEM_NAME = "StepperItem";
-var STEPPER_TRIGGER_NAME = "StepperTrigger";
-var STEPPER_INDICATOR_NAME = "StepperIndicator";
-var STEPPER_TITLE_NAME = "StepperTitle";
-var STEPPER_DESCRIPTION_NAME = "StepperDescription";
-var STEPPER_CONTENT_NAME = "StepperContent";
-var STEPPER_PREV_TRIGGER_NAME = "StepperPrevTrigger";
-var STEPPER_NEXT_TRIGGER_NAME = "StepperNextTrigger";
-var STEPPER_ENTRY_FOCUS = "stepperFocusGroup.onEntryFocus";
-var STEPPER_EVENT_OPTIONS = { bubbles: false, cancelable: true };
-var STEPPER_ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
-var STEPPER_MAP_KEY_TO_FOCUS_INTENT = {
-  ArrowLeft: "prev",
-  ArrowUp: "prev",
-  ArrowRight: "next",
-  ArrowDown: "next",
-  PageUp: "first",
-  Home: "first",
-  PageDown: "last",
-  End: "last"
-};
-
-// src/components/stepper/stepper.context.tsx
-var StepperContext = React16.createContext(null);
-function useStepperContext(consumerName) {
-  const context = React16.useContext(StepperContext);
-  if (!context) {
-    throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
-  }
-  return context;
-}
-function createStepperStore(listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate) {
-  const store = {
-    subscribe: (cb) => {
-      if (listenersRef.current) {
-        listenersRef.current.add(cb);
-        return () => listenersRef.current?.delete(cb);
-      }
-      return () => {
-      };
-    },
-    getState: () => stateRef.current ?? {
-      steps: /* @__PURE__ */ new Map(),
-      value: void 0
-    },
-    setState: (key, value) => {
-      const state = stateRef.current;
-      if (!state || Object.is(state[key], value)) return;
-      if (key === "value" && typeof value === "string") {
-        state.value = value;
-        onValueChange?.(value);
-      } else {
-        state[key] = value;
-      }
-      store.notify();
-    },
-    setStateWithValidation: async (value, direction) => {
-      if (!onValidate) {
-        store.setState("value", value);
-        return true;
-      }
-      try {
-        const isValid = await onValidate(value, direction);
-        if (isValid) {
-          store.setState("value", value);
-        }
-        return isValid;
-      } catch {
-        return false;
-      }
-    },
-    hasValidation: () => !!onValidate,
-    addStep: (newStep) => {
-      const state = stateRef.current;
-      if (state) {
-        state.steps = new Map(state.steps);
-        state.steps.set(newStep.value, newStep);
-        onValueAdd?.(newStep.value);
-        store.notify();
-      }
-    },
-    removeStep: (value) => {
-      const state = stateRef.current;
-      if (state) {
-        state.steps = new Map(state.steps);
-        state.steps.delete(value);
-        onValueRemove?.(value);
-        store.notify();
-      }
-    },
-    setStep: ({ value, disabled, loading, completed }) => {
-      const state = stateRef.current;
-      if (state) {
-        const step = state.steps.get(value);
-        if (step) {
-          const updatedStep = { ...step, completed, disabled, loading };
-          state.steps = new Map(state.steps);
-          state.steps.set(value, updatedStep);
-          if (completed !== step.completed) {
-            onValueComplete?.(value, completed);
-          }
-          store.notify();
-        }
-      }
-    },
-    notify: () => {
-      if (listenersRef.current) {
-        for (const cb of listenersRef.current) {
-          cb();
-        }
-      }
-    }
-  };
-  return store;
-}
-var StepperStoreContext = React16.createContext(null);
-function useStepperStoreContext(consumerName) {
-  const context = React16.useContext(StepperStoreContext);
-  if (!context) {
-    throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
-  }
-  return context;
-}
-function useStepperStore(selector) {
-  const store = useStepperStoreContext("useStore");
-  const getSnapshot = React16.useCallback(() => selector(store.getState()), [selector, store]);
-  return React16.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
-}
-function Stepper({
-  value,
-  defaultValue,
-  onValueChange,
-  onValueComplete,
-  onValueAdd,
-  onValueRemove,
-  onValidate,
-  id: idProp,
-  dir: dirProp,
-  orientation = "horizontal",
-  activationMode = "automatic",
-  asChild,
-  disabled = false,
-  nonInteractive = false,
-  loop = false,
-  className,
-  indicators = {},
-  ...rootProps
-}) {
-  const id = React16.useId();
-  const rootId = idProp ?? id;
-  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
-  const stateRef = useLazyRef(() => ({
-    steps: /* @__PURE__ */ new Map(),
-    value: value ?? defaultValue
-  }));
-  const store = React16.useMemo(
-    () => createStepperStore(listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate),
-    [listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate]
-  );
-  useIsomorphicLayoutEffect(() => {
-    if (value !== void 0) {
-      store.setState("value", value);
-    }
-  }, [value]);
-  const dir = useDirection(dirProp);
-  const contextValue = React16.useMemo(
-    () => ({
-      id: rootId,
-      dir,
-      orientation,
-      activationMode,
-      disabled,
-      nonInteractive,
-      loop,
-      indicators
-    }),
-    [rootId, dir, orientation, activationMode, disabled, nonInteractive, loop, indicators]
-  );
-  const RootPrimitive = asChild ? Slot$1 : "div";
-  return /* @__PURE__ */ jsx(StepperStoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-    RootPrimitive,
-    {
-      id: rootId,
-      "data-disabled": disabled ? "" : void 0,
-      "data-orientation": orientation,
-      "data-slot": "stepper",
-      dir,
-      ...rootProps,
-      className: cn("flex w-full flex-col gap-4 data-[orientation=vertical]:flex-row", className)
-    }
-  ) }) });
-}
-
-// src/components/stepper/stepper.types.ts
-var StepperFocusIntent = {
-  FIRST: "first",
-  LAST: "last",
-  PREV: "prev",
-  NEXT: "next"
-};
-var StepperOrientation = {
-  HORIZONTAL: "horizontal",
-  VERTICAL: "vertical"
-};
-var StepperNavigationDirection = {
-  NEXT: "next",
-  PREV: "prev"
-};
-var StepperActivationMode = {
-  AUTOMATIC: "automatic",
-  MANUAL: "manual"
-};
-var StepperDataState = {
-  INACTIVE: "inactive",
-  ACTIVE: "active",
-  COMPLETED: "completed"
-};
-var StepperFocusContext = React16.createContext(null);
-function useStepperFocusContext(consumerName) {
-  const context = React16.useContext(StepperFocusContext);
-  if (!context) {
-    throw new Error(`\`${consumerName}\` must be used within \`FocusProvider\``);
-  }
-  return context;
-}
-
-// src/components/stepper/stepper.utils.tsx
-function focusFirst(candidates, preventScroll = false) {
-  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
-  for (const candidateRef of candidates) {
-    const candidate = candidateRef.current;
-    if (!candidate) continue;
-    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
-    candidate.focus({ preventScroll });
-    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
-  }
-}
-function getDataState(value, itemValue, stepState, steps, variant = "item") {
-  const stepKeys = Array.from(steps.keys());
-  const currentIndex = stepKeys.indexOf(itemValue);
-  if (stepState?.completed) {
-    return StepperDataState.COMPLETED;
-  }
-  if (value === itemValue) {
-    return variant === "separator" ? StepperDataState.INACTIVE : StepperDataState.ACTIVE;
-  }
-  if (value) {
-    const activeIndex = stepKeys.indexOf(value);
-    if (activeIndex > currentIndex) {
-      return StepperDataState.COMPLETED;
-    }
-  }
-  return StepperDataState.INACTIVE;
-}
-function getId(id, variant, value) {
-  return `${id}-${variant}-${value}`;
-}
-function wrapArray(array, startIndex) {
-  return array.map((_, index) => array[(startIndex + index) % array.length]);
-}
-function getDirectionAwareKey(key, dir) {
-  if (dir !== "rtl") return key;
-  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
-}
-function getFocusIntent(event, dir, orientation) {
-  const key = getDirectionAwareKey(event.key, dir);
-  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
-  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
-  return STEPPER_MAP_KEY_TO_FOCUS_INTENT[key];
-}
-function StepperNav({ className, children, asChild, ref, ...listProps }) {
-  const context = useStepperContext(STEPPER_NAV_NAME);
-  const orientation = context.orientation;
-  const currentValue = useStepperStore((state) => state.value);
-  const [tabStopId, setTabStopId] = React16.useState(null);
-  const [isTabbingBackOut, setIsTabbingBackOut] = React16.useState(false);
-  const [focusableItemCount, setFocusableItemCount] = React16.useState(0);
-  const isClickFocusRef = React16.useRef(false);
-  const itemsRef = React16.useRef(/* @__PURE__ */ new Map());
-  const listRef = React16.useRef(null);
-  const composedRef = useComposedRefs$1(ref, listRef);
-  const onItemFocus = React16.useCallback((tabStopId2) => {
-    setTabStopId(tabStopId2);
-  }, []);
-  const onItemShiftTab = React16.useCallback(() => {
-    setIsTabbingBackOut(true);
-  }, []);
-  const onFocusableItemAdd = React16.useCallback(() => {
-    setFocusableItemCount((prevCount) => prevCount + 1);
-  }, []);
-  const onFocusableItemRemove = React16.useCallback(() => {
-    setFocusableItemCount((prevCount) => prevCount - 1);
-  }, []);
-  const onItemRegister = React16.useCallback((item) => {
-    itemsRef.current.set(item.id, item);
-  }, []);
-  const onItemUnregister = React16.useCallback((id) => {
-    itemsRef.current.delete(id);
-  }, []);
-  const getItems = React16.useCallback(() => {
-    return Array.from(itemsRef.current.values()).filter((item) => item.ref.current).sort((a, b) => {
-      const elementA = a.ref.current;
-      const elementB = b.ref.current;
-      if (!elementA || !elementB) return 0;
-      const position = elementA.compareDocumentPosition(elementB);
-      if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
-        return -1;
-      }
-      if (position & Node.DOCUMENT_POSITION_PRECEDING) {
-        return 1;
-      }
-      return 0;
-    });
-  }, []);
-  const onBlur = React16.useCallback(
-    (event) => {
-      listProps.onBlur?.(event);
-      if (event.defaultPrevented) return;
-      setIsTabbingBackOut(false);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [listProps.onBlur]
-  );
-  const onFocus = React16.useCallback(
-    (event) => {
-      listProps.onFocus?.(event);
-      if (event.defaultPrevented) return;
-      const isKeyboardFocus = !isClickFocusRef.current;
-      if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
-        const entryFocusEvent = new CustomEvent(STEPPER_ENTRY_FOCUS, STEPPER_EVENT_OPTIONS);
-        event.currentTarget.dispatchEvent(entryFocusEvent);
-        if (!entryFocusEvent.defaultPrevented) {
-          const items = Array.from(itemsRef.current.values()).filter((item) => !item.disabled);
-          const selectedItem = currentValue ? items.find((item) => item.value === currentValue) : void 0;
-          const activeItem = items.find((item) => item.active);
-          const currentItem = items.find((item) => item.id === tabStopId);
-          const candidateItems = [selectedItem, activeItem, currentItem, ...items].filter(
-            Boolean
-          );
-          const candidateRefs = candidateItems.map((item) => item.ref);
-          focusFirst(candidateRefs, false);
-        }
-      }
-      isClickFocusRef.current = false;
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [listProps.onFocus, isTabbingBackOut, currentValue, tabStopId]
-  );
-  const onMouseDown = React16.useCallback(
-    (event) => {
-      listProps.onMouseDown?.(event);
-      if (event.defaultPrevented) return;
-      isClickFocusRef.current = true;
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [listProps.onMouseDown]
-  );
-  const focusContextValue = React16.useMemo(
-    () => ({
-      tabStopId,
-      onItemFocus,
-      onItemShiftTab,
-      onFocusableItemAdd,
-      onFocusableItemRemove,
-      onItemRegister,
-      onItemUnregister,
-      getItems
-    }),
-    [
-      tabStopId,
-      onItemFocus,
-      onItemShiftTab,
-      onFocusableItemAdd,
-      onFocusableItemRemove,
-      onItemRegister,
-      onItemUnregister,
-      getItems
-    ]
-  );
-  const StepperNavPrimitive = asChild ? Slot$1 : "nav";
-  return /* @__PURE__ */ jsx(StepperFocusContext.Provider, { value: focusContextValue, children: /* @__PURE__ */ jsx(
-    StepperNavPrimitive,
-    {
-      role: "tablist",
-      "data-slot": "stepper-nav",
-      "aria-orientation": orientation,
-      "data-orientation": orientation,
-      dir: context.dir,
-      tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
-      ref: composedRef,
-      onBlur,
-      onFocus,
-      onMouseDown,
-      className: cn(
-        "group/stepper-nav inline-flex gap-4",
-        "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
-        className
-      ),
-      ...listProps,
-      children
-    }
-  ) });
-}
-var StepperItemContext = React16.createContext(null);
-function useStepperItemContext(consumerName) {
-  const context = React16.useContext(StepperItemContext);
-  if (!context) {
-    throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ITEM_NAME}\``);
-  }
-  return context;
-}
-function StepperItem({
-  value: itemValue,
-  completed = false,
-  disabled = false,
-  loading = false,
-  asChild,
-  className,
-  children,
-  ...props
-}) {
-  const { orientation, dir } = useStepperContext(STEPPER_ITEM_NAME);
-  const store = useStepperStoreContext(STEPPER_ITEM_NAME);
-  const value = useStepperStore((state) => state.value);
-  useIsomorphicLayoutEffect(() => {
-    store.addStep({ value: itemValue, completed, disabled, loading });
-    return () => {
-      store.removeStep(itemValue);
-    };
-  }, [itemValue, completed, disabled, loading]);
-  useIsomorphicLayoutEffect(() => {
-    store.setStep({ value: itemValue, completed, disabled, loading });
-  }, [itemValue, completed, disabled, loading]);
-  const stepState = useStepperStore((state) => state.steps.get(itemValue));
-  const steps = useStepperStore((state) => state.steps);
-  const dataState = getDataState(value, itemValue, stepState, steps);
-  const itemContextValue = React16.useMemo(
-    () => ({
-      value: itemValue,
-      stepState
-    }),
-    [itemValue, stepState]
-  );
-  const StepperItemPrimitive = asChild ? Slot$1 : "div";
-  return /* @__PURE__ */ jsx(StepperItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsxs(
-    StepperItemPrimitive,
-    {
-      "data-disabled": stepState?.disabled ? "" : void 0,
-      "data-orientation": orientation,
-      "data-state": dataState,
-      "data-slot": "stepper-item",
-      dir,
-      className: cn(
-        "group/step flex flex-1 flex-col justify-end data-[disabled]:opacity-50",
-        "",
-        // "group-data-[orientation=horizontal]/stepper-nav:flex-row group-data-[orientation=vertical]/stepper-nav:flex-col",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-state": dataState,
-            className: cn(
-              "bg-border h-1 w-full transition-colors duration-500",
-              "data-[state=active]:bg-primary data-[state=completed]:bg-success"
-            )
-          }
-        )
-      ]
-    }
-  ) });
-}
-function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps }) {
-  const context = useStepperContext(STEPPER_TRIGGER_NAME);
-  const itemContext = useStepperItemContext(STEPPER_TRIGGER_NAME);
-  const store = useStepperStoreContext(STEPPER_TRIGGER_NAME);
-  const focusContext = useStepperFocusContext(STEPPER_TRIGGER_NAME);
-  const value = useStepperStore((state) => state.value);
-  const itemValue = itemContext.value;
-  const stepState = useStepperStore((state) => state.steps.get(itemValue));
-  const activationMode = context.activationMode;
-  const orientation = context.orientation;
-  const loop = context.loop;
-  const steps = useStepperStore((state) => state.steps);
-  const stepIndex = Array.from(steps.keys()).indexOf(itemValue);
-  const stepPosition = stepIndex + 1;
-  const stepCount = steps.size;
-  const triggerId = getId(context.id, "trigger", itemValue);
-  const contentId = getId(context.id, "content", itemValue);
-  const titleId = getId(context.id, "title", itemValue);
-  const descriptionId = getId(context.id, "description", itemValue);
-  const isDisabled = context.disabled || stepState?.disabled || disabled;
-  const isActive = value === itemValue;
-  const isTabStop = focusContext.tabStopId === triggerId;
-  const dataState = getDataState(value, itemValue, stepState, steps);
-  const triggerRef = React16.useRef(null);
-  const composedRef = useComposedRefs$1(ref, triggerRef);
-  const isArrowKeyPressedRef = React16.useRef(false);
-  const isMouseClickRef = React16.useRef(false);
-  React16.useEffect(() => {
-    function onKeyDown2(event) {
-      if (STEPPER_ARROW_KEYS.includes(event.key)) {
-        isArrowKeyPressedRef.current = true;
-      }
-    }
-    function onKeyUp() {
-      isArrowKeyPressedRef.current = false;
-    }
-    document.addEventListener("keydown", onKeyDown2);
-    document.addEventListener("keyup", onKeyUp);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown2);
-      document.removeEventListener("keyup", onKeyUp);
-    };
-  }, []);
-  useIsomorphicLayoutEffect(() => {
-    focusContext.onItemRegister({
-      id: triggerId,
-      ref: triggerRef,
-      value: itemValue,
-      active: isTabStop,
-      disabled: !!isDisabled
-    });
-    if (!isDisabled) {
-      focusContext.onFocusableItemAdd();
-    }
-    return () => {
-      focusContext.onItemUnregister(triggerId);
-      if (!isDisabled) {
-        focusContext.onFocusableItemRemove();
-      }
-    };
-  }, [focusContext, triggerId, itemValue, isTabStop, isDisabled]);
-  const onClick = React16.useCallback(
-    async (event) => {
-      triggerProps.onClick?.(event);
-      if (event.defaultPrevented) return;
-      if (!isDisabled && !context.nonInteractive) {
-        const currentStepIndex = Array.from(steps.keys()).indexOf(value ?? "");
-        const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
-        const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
-        await store.setStateWithValidation(itemValue, direction);
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isDisabled, context.nonInteractive, store, itemValue, value, steps, triggerProps.onClick]
-  );
-  const onFocus = React16.useCallback(
-    async (event) => {
-      triggerProps.onFocus?.(event);
-      if (event.defaultPrevented) return;
-      focusContext.onItemFocus(triggerId);
-      const isKeyboardFocus = !isMouseClickRef.current;
-      if (!isActive && !isDisabled && activationMode !== "manual" && !context.nonInteractive && isKeyboardFocus) {
-        const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
-        const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
-        const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
-        await store.setStateWithValidation(itemValue, direction);
-      }
-      isMouseClickRef.current = false;
-    },
-    [
-      triggerProps,
-      focusContext,
-      triggerId,
-      isActive,
-      isDisabled,
-      activationMode,
-      context.nonInteractive,
-      steps,
-      value,
-      itemValue,
-      store
-    ]
-  );
-  const onKeyDown = React16.useCallback(
-    async (event) => {
-      triggerProps.onKeyDown?.(event);
-      if (event.defaultPrevented) return;
-      if (event.key === "Enter" && context.nonInteractive) {
-        event.preventDefault();
-        return;
-      }
-      if ((event.key === "Enter" || event.key === " ") && activationMode === "manual" && !context.nonInteractive) {
-        event.preventDefault();
-        if (!isDisabled && triggerRef.current) {
-          triggerRef.current.click();
-        }
-        return;
-      }
-      if (event.key === "Tab" && event.shiftKey) {
-        focusContext.onItemShiftTab();
-        return;
-      }
-      if (event.target !== event.currentTarget) return;
-      const focusIntent = getFocusIntent(event, context.dir, orientation);
-      if (focusIntent !== void 0) {
-        if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
-        event.preventDefault();
-        const items = focusContext.getItems().filter((item) => !item.disabled);
-        let candidateRefs = items.map((item) => item.ref);
-        if (focusIntent === "last") {
-          candidateRefs.reverse();
-        } else if (focusIntent === "prev" || focusIntent === "next") {
-          if (focusIntent === "prev") candidateRefs.reverse();
-          const currentIndex = candidateRefs.findIndex((ref2) => ref2.current === event.currentTarget);
-          candidateRefs = loop ? wrapArray(candidateRefs, currentIndex + 1) : candidateRefs.slice(currentIndex + 1);
-        }
-        if (store.hasValidation() && candidateRefs.length > 0) {
-          const nextRef = candidateRefs[0];
-          const nextElement = nextRef?.current;
-          const nextItem = items.find((item) => item.ref.current === nextElement);
-          if (nextItem && nextItem.value !== itemValue) {
-            const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
-            const targetStepIndex = Array.from(steps.keys()).indexOf(nextItem.value);
-            const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
-            if (direction === "next") {
-              const isValid = await store.setStateWithValidation(nextItem.value, direction);
-              if (!isValid) return;
-            } else {
-              store.setState("value", nextItem.value);
-            }
-            queueMicrotask(() => nextElement?.focus());
-            return;
-          }
-        }
-        queueMicrotask(() => focusFirst(candidateRefs));
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      focusContext,
-      context.nonInteractive,
-      context.dir,
-      activationMode,
-      orientation,
-      loop,
-      isDisabled,
-      triggerProps.onKeyDown,
-      store,
-      itemValue,
-      value,
-      steps
-    ]
-  );
-  const onMouseDown = React16.useCallback(
-    (event) => {
-      triggerProps.onMouseDown?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      isMouseClickRef.current = true;
-      if (isDisabled) {
-        event.preventDefault();
-      } else {
-        focusContext.onItemFocus(triggerId);
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [focusContext, triggerId, isDisabled, triggerProps.onMouseDown]
-  );
-  const TriggerPrimitive = asChild ? Slot$1 : "button";
-  return /* @__PURE__ */ jsx(
-    TriggerPrimitive,
-    {
-      id: triggerId,
-      role: "tab",
-      type: "button",
-      disabled: isDisabled,
-      tabIndex: isTabStop ? 0 : -1,
-      ref: composedRef,
-      "data-slot": "stepper-trigger",
-      "data-disabled": isDisabled ? "" : void 0,
-      "data-state": dataState,
-      "aria-controls": contentId,
-      "aria-current": isActive ? "step" : void 0,
-      "aria-describedby": `${titleId} ${descriptionId}`,
-      "aria-posinset": stepPosition,
-      "aria-selected": isActive,
-      "aria-setsize": stepCount,
-      className: cn(
-        "inline-flex w-full cursor-pointer items-center gap-3 rounded text-left transition-colors duration-500 outline-none",
-        "disabled:pointer-events-none",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        className
-      ),
-      onClick,
-      onFocus,
-      onKeyDown,
-      onMouseDown,
-      ...triggerProps
-    }
-  );
-}
-function StepperIndicator({ className, children, asChild, ref, ...props }) {
-  const { indicators, dir } = useStepperContext(STEPPER_INDICATOR_NAME);
-  const itemContext = useStepperItemContext(STEPPER_INDICATOR_NAME);
-  const value = useStepperStore((state) => state.value);
-  const itemValue = itemContext.value;
-  const stepState = useStepperStore((state) => state.steps.get(itemValue));
-  const steps = useStepperStore((state) => state.steps);
-  const stepPosition = Array.from(steps.keys()).indexOf(itemValue) + 1;
-  const dataState = getDataState(value, itemValue, stepState, steps);
-  const StepperIndicatorPrimitive = asChild ? Slot$1 : "div";
-  return /* @__PURE__ */ jsx(
-    StepperIndicatorPrimitive,
-    {
-      "data-slot": "stepper-indicator",
-      "data-state": dataState,
-      dir,
-      ref,
-      className: cn(
-        "bg-muted border-border text-muted-foreground relative flex size-6 shrink-0 items-center justify-center self-end overflow-hidden rounded-t border-x border-t text-xs transition-colors duration-500",
-        "data-[state=completed]:bg-success/50 data-[state=completed]:border-success data-[state=completed]:text-success-foreground",
-        "data-[state=active]:bg-primary/50 data-[state=active]:border-primary data-[state=active]:text-primary-foreground",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "absolute", children: typeof children === "function" ? children(dataState) : indicators && (itemContext.stepState?.loading && indicators.loading || dataState === "completed" && indicators.completed || dataState === "active" && indicators.active || dataState === "inactive" && indicators.inactive) ? itemContext.stepState?.loading && indicators.loading || dataState === "completed" && indicators.completed || dataState === "active" && indicators.active || dataState === "inactive" && indicators.inactive : children ? children : stepPosition })
-    }
-  );
-}
-function StepperTitle({ className, asChild = false, ...props }) {
-  const context = useStepperContext(STEPPER_TITLE_NAME);
-  const itemContext = useStepperItemContext(STEPPER_TITLE_NAME);
-  const titleId = getId(context.id, "title", itemContext.value);
-  const TitlePrimitive = asChild ? Slot$1 : "h3";
-  return /* @__PURE__ */ jsx(
-    TitlePrimitive,
-    {
-      id: titleId,
-      "data-slot": "stepper-title",
-      dir: context.dir,
-      className: cn("text-sm leading-none font-medium", className),
-      ...props
-    }
-  );
-}
-function StepperDescription({ className, asChild, ...props }) {
-  const context = useStepperContext(STEPPER_DESCRIPTION_NAME);
-  const itemContext = useStepperItemContext(STEPPER_DESCRIPTION_NAME);
-  const descriptionId = getId(context.id, "description", itemContext.value);
-  const StepperDescriptionPrimitive = asChild ? Slot$1 : "span";
-  return /* @__PURE__ */ jsx(
-    StepperDescriptionPrimitive,
-    {
-      id: descriptionId,
-      "data-slot": "stepper-description",
-      dir: context.dir,
-      className: cn("text-muted-foreground text-sm", className),
-      ...props
-    }
-  );
-}
-function StepperPanel({ children, asChild = false, className, ...props }) {
-  const currentValue = useStepperStore((state) => state.value);
-  const StepperPanelPrimitive = asChild ? Slot$1 : "div";
-  return /* @__PURE__ */ jsx(
-    StepperPanelPrimitive,
-    {
-      "data-slot": "stepper-panel",
-      "data-state": currentValue,
-      className: cn("w-full", className),
-      ...props,
-      children
-    }
-  );
-}
-function StepperContent({
-  value: valueProp,
-  asChild = false,
-  forceMount = false,
-  className,
-  ...props
-}) {
-  const context = useStepperContext(STEPPER_CONTENT_NAME);
-  const value = useStepperStore((state) => state.value);
-  const contentId = getId(context.id, "content", valueProp);
-  const triggerId = getId(context.id, "trigger", valueProp);
-  const isActive = value === valueProp;
-  if (!isActive && !forceMount) {
-    return null;
-  }
-  const ContentPrimitive = asChild ? Slot$1 : "div";
-  return /* @__PURE__ */ jsx(
-    ContentPrimitive,
-    {
-      id: contentId,
-      role: "tabpanel",
-      "data-state": value,
-      "aria-labelledby": triggerId,
-      "data-slot": "stepper-content",
-      dir: context.dir,
-      className: cn("w-full", className, !isActive && forceMount && "hidden"),
-      hidden: !isActive && forceMount,
-      ...props
-    }
-  );
-}
-function StepperNextTrigger({ asChild = false, onClick, disabled, ...props }) {
-  const store = useStepperStoreContext(STEPPER_NEXT_TRIGGER_NAME);
-  const value = useStepperStore((state) => state.value);
-  const steps = useStepperStore((state) => state.steps);
-  const stepKeys = Array.from(steps.keys());
-  const currentIndex = value ? stepKeys.indexOf(value) : -1;
-  const isDisabled = disabled || currentIndex >= stepKeys.length - 1;
-  const handleClick = React16.useCallback(
-    async (event) => {
-      onClick?.(event);
-      if (event.defaultPrevented || isDisabled) {
-        return;
-      }
-      const nextIndex = Math.min(currentIndex + 1, stepKeys.length - 1);
-      const nextStepValue = stepKeys[nextIndex];
-      if (nextStepValue) {
-        await store.setStateWithValidation(nextStepValue, "next");
-      }
-    },
-    [onClick, isDisabled, currentIndex, stepKeys, store]
-  );
-  const StepperNextTriggerPrimitive = asChild ? Slot$1 : "button";
-  return /* @__PURE__ */ jsx(
-    StepperNextTriggerPrimitive,
-    {
-      type: "button",
-      "data-slot": "stepper-next-trigger",
-      disabled: isDisabled,
-      onClick: handleClick,
-      ...props
-    }
-  );
-}
-function StepperPrevTrigger({ asChild = false, disabled, onClick, ...props }) {
-  const store = useStepperStoreContext(STEPPER_PREV_TRIGGER_NAME);
-  const value = useStepperStore((state) => state.value);
-  const steps = useStepperStore((state) => state.steps);
-  const stepKeys = Array.from(steps.keys());
-  const currentIndex = value ? stepKeys.indexOf(value) : -1;
-  const isDisabled = disabled || currentIndex <= 0;
-  const handleClick = React16.useCallback(
-    async (event) => {
-      onClick?.(event);
-      if (event.defaultPrevented || isDisabled) {
-        return;
-      }
-      const prevIndex = Math.max(currentIndex - 1, 0);
-      const prevStepValue = stepKeys[prevIndex];
-      if (prevStepValue) {
-        store.setState("value", prevStepValue);
-      }
-    },
-    [currentIndex, isDisabled, onClick, stepKeys, store]
-  );
-  const StepperPrevTriggerPrimitive = asChild ? Slot$1 : "button";
-  return /* @__PURE__ */ jsx(
-    StepperPrevTriggerPrimitive,
-    {
-      type: "button",
-      "data-slot": "stepper-prev-trigger",
-      disabled: isDisabled,
-      onClick: handleClick,
-      ...props
-    }
-  );
-}
-var Toaster = ({ theme = "system", ...props }) => {
-  return /* @__PURE__ */ jsx(
-    Toaster$1,
-    {
-      className: "group",
-      icons: {
-        success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
-        info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
-        warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
-        error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
-        loading: /* @__PURE__ */ jsx(Spinner, {})
-      },
-      toastOptions: {
-        classNames: {
-          toast: "!bg-popover !text-popover-foreground !border !border-border !rounded",
-          description: "!text-muted-foreground"
-        }
-      },
-      theme,
-      ...props
-    }
-  );
-};
-
-// src/components/sidebar/sidebar.constants.ts
-var SIDEBAR_COOKIE_NAME = "sidebar_state";
-var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-var SIDEBAR_WIDTH = "16rem";
-var SIDEBAR_WIDTH_MOBILE = "18rem";
-var SIDEBAR_WIDTH_ICON = "3rem";
-var SIDEBAR_ROOT_NAME = "SidebarProvider";
-var SidebarContext = React16.createContext(null);
-function useSidebarContext(consumerName) {
-  const context = React16.useContext(SidebarContext);
-  if (!context) {
-    throw new Error(`\`${consumerName}\` must be used within \`${SIDEBAR_ROOT_NAME}\``);
-  }
-  return context;
-}
-function useSidebar() {
-  return useSidebarContext("useSidebar");
-}
-function SidebarProvider({
-  defaultOpen = true,
-  open: openProp,
-  onOpenChange: setOpenProp,
-  className,
-  style,
-  children,
-  ...props
-}) {
-  const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React16.useState(false);
-  const [_open, _setOpen] = React16.useState(defaultOpen);
-  const open = openProp ?? _open;
-  const setOpen = React16.useCallback(
-    (value) => {
-      const openState = typeof value === "function" ? value(open) : value;
-      if (setOpenProp) {
-        setOpenProp(openState);
-      } else {
-        _setOpen(openState);
-      }
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-    },
-    [setOpenProp, open]
-  );
-  const toggleSidebar = React16.useCallback(() => {
-    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
-  }, [isMobile, setOpen, setOpenMobile]);
-  React16.useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === "b" && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        toggleSidebar();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [toggleSidebar]);
-  const state = open ? "expanded" : "collapsed";
-  const contextValue = React16.useMemo(
-    () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  );
-  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sidebar-wrapper",
-      style: {
-        "--sidebar-width": SIDEBAR_WIDTH,
-        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-        ...style
-      },
-      className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
-      ...props,
-      children
-    }
-  ) });
-}
-function Sidebar({
-  side = "left",
-  variant = "sidebar",
-  collapsible = "offcanvas",
-  className,
-  children,
-  dir,
-  ...props
-}) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebarContext("Sidebar");
-  if (collapsible === "none") {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-slot": "sidebar",
-        className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
-        ...props,
-        children
-      }
-    );
-  }
-  if (isMobile) {
-    return /* @__PURE__ */ jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs(
-      SheetContent,
-      {
-        dir,
-        "data-sidebar": "sidebar",
-        "data-slot": "sidebar",
-        "data-mobile": "true",
-        className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0",
-        style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
-        side,
-        showCloseButton: false,
-        children: [
-          /* @__PURE__ */ jsxs(SheetHeader, { className: "sr-only", children: [
-            /* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }),
-            /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
-        ]
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "group peer text-sidebar-foreground hidden md:block",
-      "data-state": state,
-      "data-collapsible": state === "collapsed" ? collapsible : "",
-      "data-variant": variant,
-      "data-side": side,
-      "data-slot": "sidebar",
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-slot": "sidebar-gap",
-            className: cn(
-              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-              "group-data-[collapsible=offcanvas]:w-0",
-              "group-data-[side=right]:rotate-180",
-              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-slot": "sidebar-container",
-            "data-side": side,
-            className: cn(
-              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
-              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-              className
-            ),
-            ...props,
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                "data-sidebar": "sidebar",
-                "data-slot": "sidebar-inner",
-                className: "bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1",
-                children
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-function SidebarTrigger({ className, onClick, ...props }) {
-  const { toggleSidebar } = useSidebarContext("SidebarTrigger");
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      "data-sidebar": "trigger",
-      "data-slot": "sidebar-trigger",
-      variant: "ghost",
-      size: "icon-sm",
-      className: cn(className),
-      onClick: (event) => {
-        onClick?.(event);
-        toggleSidebar();
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(PanelLeftIcon, { className: "cn-rtl-flip" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
-      ]
-    }
-  );
-}
-function SidebarRail({ className, ...props }) {
-  const { toggleSidebar } = useSidebarContext("SidebarRail");
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      "data-sidebar": "rail",
-      "data-slot": "sidebar-rail",
-      "aria-label": "Toggle Sidebar",
-      tabIndex: -1,
-      onClick: toggleSidebar,
-      title: "Toggle Sidebar",
-      className: cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SidebarInset({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "main",
-    {
-      "data-slot": "sidebar-inset",
-      className: cn(
-        "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SidebarInput({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      "data-slot": "sidebar-input",
-      "data-sidebar": "input",
-      className: cn("bg-background h-8 w-full shadow-none", className),
-      ...props
-    }
-  );
-}
-function SidebarHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sidebar-header",
-      "data-sidebar": "header",
-      className: cn("flex flex-col gap-2 p-2", className),
-      ...props
-    }
-  );
-}
-function SidebarFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sidebar-footer",
-      "data-sidebar": "footer",
-      className: cn("flex flex-col gap-2 p-2", className),
-      ...props
-    }
-  );
-}
-function SidebarSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Separator,
-    {
-      "data-slot": "sidebar-separator",
-      "data-sidebar": "separator",
-      className: cn("bg-sidebar-border mx-2 w-auto", className),
-      ...props
-    }
-  );
-}
-function SidebarContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sidebar-content",
-      "data-sidebar": "content",
-      className: cn(
-        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SidebarGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sidebar-group",
-      "data-sidebar": "group",
-      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
-      ...props
-    }
-  );
-}
-function SidebarGroupLabel({ className, asChild = false, ...props }) {
-  const Comp = asChild ? Slot$1 : "div";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "sidebar-group-label",
-      "data-sidebar": "group-label",
-      className: cn(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SidebarGroupAction({ className, asChild = false, ...props }) {
-  const Comp = asChild ? Slot$1 : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "sidebar-group-action",
-      "data-sidebar": "group-action",
-      className: cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SidebarGroupContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sidebar-group-content",
-      "data-sidebar": "group-content",
-      className: cn("w-full text-sm", className),
-      ...props
-    }
-  );
-}
-function SidebarMenu({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "ul",
-    {
-      "data-slot": "sidebar-menu",
-      "data-sidebar": "menu",
-      className: cn("flex w-full min-w-0 flex-col gap-0", className),
-      ...props
-    }
-  );
-}
-function SidebarMenuItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      "data-slot": "sidebar-menu-item",
-      "data-sidebar": "menu-item",
-      className: cn("group/menu-item relative", className),
-      ...props
-    }
-  );
-}
-var sidebarMenuButtonVariants = cva(
-  [
-    "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>span:last-child]:truncate",
-    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
-    "active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground",
-    "data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground",
-    "[&_svg]:size-4 [&_svg]:shrink-0"
-  ],
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function SidebarMenuButton({
-  asChild = false,
-  isActive = false,
-  variant = "default",
-  size = "default",
-  tooltip,
-  className,
-  ...props
-}) {
-  const Comp = asChild ? Slot$1 : "button";
-  const { isMobile, state } = useSidebarContext("SidebarMenuButton");
-  const button = /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "sidebar-menu-button",
-      "data-sidebar": "menu-button",
-      "data-size": size,
-      "data-active": isActive,
-      className: cn(sidebarMenuButtonVariants({ variant, size }), className),
-      ...props
-    }
-  );
-  if (!tooltip) {
-    return button;
-  }
-  if (typeof tooltip === "string") {
-    tooltip = { children: tooltip };
-  }
-  return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", hidden: state !== "collapsed" || isMobile, ...tooltip })
-  ] });
-}
-function SidebarMenuAction({
-  className,
-  asChild = false,
-  showOnHover = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot$1 : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "sidebar-menu-action",
-      "data-sidebar": "menu-action",
-      className: cn(
-        "text-sidebar-foreground ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
-        showOnHover && "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SidebarMenuBadge({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sidebar-menu-badge",
-      "data-sidebar": "menu-badge",
-      className: cn(
-        "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
-  const [width] = React16.useState(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "sidebar-menu-skeleton",
-      "data-sidebar": "menu-skeleton",
-      className: cn("flex h-8 items-center gap-2 rounded px-2", className),
-      ...props,
-      children: [
-        showIcon && /* @__PURE__ */ jsx(Skeleton, { className: "size-4 rounded", "data-sidebar": "menu-skeleton-icon" }),
-        /* @__PURE__ */ jsx(
-          Skeleton,
-          {
-            className: "h-4 max-w-(--skeleton-width) flex-1",
-            "data-sidebar": "menu-skeleton-text",
-            style: {
-              "--skeleton-width": width
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-function SidebarMenuSub({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "ul",
-    {
-      "data-slot": "sidebar-menu-sub",
-      "data-sidebar": "menu-sub",
-      className: cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SidebarMenuSubItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      "data-slot": "sidebar-menu-sub-item",
-      "data-sidebar": "menu-sub-item",
-      className: cn("group/menu-sub-item relative", className),
-      ...props
-    }
-  );
-}
-function SidebarMenuSubButton({
-  asChild = false,
-  size = "md",
-  isActive = false,
-  className,
-  ...props
-}) {
-  const Comp = asChild ? Slot$1 : "a";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "sidebar-menu-sub-button",
-      "data-sidebar": "menu-sub-button",
-      "data-size": size,
-      "data-active": isActive,
-      className: cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[state=active]:bg-sidebar-accent data-[state=active]:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded px-2 outline-hidden group-data-[collapsible=icon]:hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var buttonVariants = cva(
-  [
-    "inline-flex shrink-0 items-center justify-center gap-2 rounded text-sm font-medium whitespace-nowrap transition-all outline-none",
-    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring",
-    "aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error"
-  ],
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        error: "bg-error hover:bg-error/90 focus-visible:ring-error/20 dark:focus-visible:ring-error/40 dark:bg-error/60 text-white",
-        outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 gap-1.5 rounded px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      },
-      fullWidth: {
-        true: "w-full"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      fullWidth: false
-    }
-  }
-);
-function Button({
-  asChild = false,
-  variant = "default",
-  disabled = false,
-  fullWidth = false,
-  loadingPosition: loadingPositionProp = "start",
-  children,
-  type = "button",
-  loading = false,
-  size = "default",
-  endIcon,
-  startIcon,
-  className,
-  ...props
-}) {
-  const Comp = asChild ? Slot$1 : "button";
-  const isDisabled = disabled || loading;
-  const loadingPosition = size?.startsWith("icon") ? "center" : loadingPositionProp;
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      "aria-disabled": isDisabled || void 0,
-      className: cn(buttonVariants({ fullWidth, size, variant }), className),
-      "data-state": loading ? "loading" : void 0,
-      disabled: isDisabled,
-      role: Comp !== "button" ? "button" : void 0,
-      tabIndex: isDisabled ? -1 : 0,
-      type: Comp === "button" ? type : void 0,
-      "data-size": size,
-      "data-variant": variant,
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        ButtonContent,
-        {
-          loading,
-          size,
-          loadingPosition,
-          startIcon,
-          endIcon,
-          asChild,
-          children
-        }
-      )
-    }
-  );
-}
-function ButtonContent({
-  children,
-  loading = false,
-  loadingPosition = "start",
-  startIcon,
-  asChild,
-  endIcon,
-  ...props
-}) {
-  const isStartLoading = loading && loadingPosition === "start";
-  const StartIcon = isStartLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : startIcon || null;
-  const isEndLoading = loading && loadingPosition === "end";
-  const EndIcon = isEndLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : endIcon || null;
-  const isCenterLoading = loading && loadingPosition === "center";
-  return asChild && React16.isValidElement(children) ? React16.cloneElement(
-    children,
-    props,
-    /* @__PURE__ */ jsxs(React16.Fragment, { children: [
-      StartIcon,
-      isCenterLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : React16.isValidElement(children) ? children.props?.children : null,
-      EndIcon
-    ] })
-  ) : /* @__PURE__ */ jsxs(React16.Fragment, { children: [
-    StartIcon,
-    isCenterLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : children,
-    EndIcon
-  ] });
-}
-
-export { Button, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerContent, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerHueSlider, ColorPickerInput, ColorPickerSwatch, ColorPickerTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Stepper, StepperActivationMode, StepperContent, StepperDataState, StepperDescription, StepperFocusIntent, StepperIndicator, StepperItem, StepperNav, StepperNavigationDirection, StepperNextTrigger, StepperOrientation, StepperPanel, StepperPrevTrigger, StepperTitle, StepperTrigger, Toaster, useColorPickerStore, useSidebar, useSidebarContext, useStepperContext, useStepperFocusContext, useStepperItemContext };