erp-pro-ui 0.2.6 → 0.2.7

package/dist/chunks/{stepper-B9NdZ6ZV.mjs.map → stepper-CVNcexxq.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"stepper-B9NdZ6ZV.mjs","names":[],"sources":["../../src/components/navigation/stepper/Stepper.tsx","../../src/components/navigation/stepper/Stepper1.tsx","../../src/components/navigation/stepper/Stepper2.tsx"],"sourcesContent":["import { Fragment } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nimport { CheckIcon, CloseIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type {\n  StepperProps,\n  StepIndicatorProps,\n  StepStatus,\n  StepperLabelPosition,\n  StepperSize,\n  StepperVariant,\n} from \"./types\";\n\n// Size configurations for indicators and icons\nconst sizeConfig: Record<\n  StepperSize,\n  {\n    indicator: string;\n    indicatorPx: number;\n    icon: string;\n    text: string;\n    connectorThickness: string;\n    connectorThicknessPx: number;\n  }\n> = {\n  sm: {\n    indicator: \"w-8 h-8\",\n    indicatorPx: 32,\n    icon: \"w-4 h-4\",\n    text: \"text-xs\",\n    connectorThickness: \"2px\",\n    connectorThicknessPx: 2,\n  },\n  md: {\n    indicator: \"w-10 h-10\",\n    indicatorPx: 40,\n    icon: \"w-5 h-5\",\n    text: \"text-sm\",\n    connectorThickness: \"2px\",\n    connectorThicknessPx: 2,\n  },\n  lg: {\n    indicator: \"w-12 h-12\",\n    indicatorPx: 48,\n    icon: \"w-6 h-6\",\n    text: \"text-base\",\n    connectorThickness: \"4px\",\n    connectorThicknessPx: 4,\n  },\n};\n\n// Variant styles for the indicator\nconst getVariantStyles = (variant: StepperVariant, status: StepStatus) => {\n  const baseStyles = {\n    default: {\n      completed: \"bg-ds-accent text-ds-on-accent shadow-md shadow-ds-accent/25\",\n      current:\n        \"bg-ds-accent text-ds-on-accent ring-4 ring-ds-focus/40 shadow-lg shadow-ds-accent/30\",\n      upcoming: \"bg-ds-surface-3 text-ds-2\",\n      error:\n        \"bg-ds-state-error-surface text-ds-state-error-text ring-4 ring-ds-state-error-border/35\",\n    },\n    glass: {\n      completed:\n        \"bg-ds-accent/85 text-ds-on-accent backdrop-blur-xl border border-ds-border-accent/30 shadow-lg shadow-ds-accent/20\",\n      current:\n        \"bg-ds-accent/90 text-ds-on-accent backdrop-blur-xl border-2 border-ds-border-accent ring-4 ring-ds-focus/30 shadow-xl shadow-ds-accent/30\",\n      upcoming:\n        \"bg-ds-surface-1 text-ds-2 backdrop-blur-xl border border-ds-border-2\",\n      error:\n        \"bg-ds-state-error-surface text-ds-state-error-text backdrop-blur-xl border border-ds-state-error-border ring-4 ring-ds-state-error-border/25\",\n    },\n    minimal: {\n      completed: \"bg-ds-accent-subtle text-ds-1\",\n      current: \"bg-ds-accent text-ds-on-accent shadow-sm\",\n      upcoming: \"bg-transparent text-ds-2 border-2 border-ds-border-2\",\n      error: \"bg-ds-state-error-surface text-ds-state-error-text\",\n    },\n    outlined: {\n      completed: \"bg-transparent text-ds-1 border-2 border-ds-border-accent\",\n      current:\n        \"bg-ds-accent text-ds-on-accent border-2 border-ds-border-accent shadow-lg\",\n      upcoming: \"bg-transparent text-ds-2 border-2 border-ds-border-2\",\n      error:\n        \"bg-transparent text-ds-state-error-text border-2 border-ds-state-error-border\",\n    },\n  };\n\n  return baseStyles[variant][status];\n};\n\nconst getConnectorTrackClassName = (variant: StepperVariant) =>\n  variant === \"glass\"\n    ? \"bg-ds-surface-2/70 backdrop-blur-sm\"\n    : \"bg-ds-surface-3\";\n\nconst getResolvedLabelPosition = (\n  orientation: StepperProps[\"orientation\"],\n  labelPosition: StepperLabelPosition,\n) => (orientation === \"vertical\" ? \"right\" : labelPosition);\n\n// Step Indicator Component\nconst StepIndicator = ({\n  step,\n  index,\n  status,\n  size,\n  variant,\n  showNumbers,\n  animated,\n  colors,\n}: StepIndicatorProps) => {\n  const config = sizeConfig[size];\n  const variantStyles = getVariantStyles(variant, status);\n\n  // Custom color overrides\n  const customColorStyle = colors?.[status]\n    ? { backgroundColor: colors[status], borderColor: colors[status] }\n    : undefined;\n\n  const renderContent = () => {\n    if (step.icon) {\n      return <span className={config.icon}>{step.icon}</span>;\n    }\n\n    if (status === \"completed\") {\n      return <CheckIcon className={config.icon} aria-hidden=\"true\" />;\n    }\n\n    if (status === \"error\") {\n      return <CloseIcon className={config.icon} aria-hidden=\"true\" />;\n    }\n\n    if (showNumbers) {\n      return <span className=\"font-semibold\">{index + 1}</span>;\n    }\n\n    return (\n      <span\n        className={mergeClassNames(\n          \"rounded-full bg-current\",\n          size === \"sm\" ? \"w-2 h-2\" : \"w-3 h-3\",\n        )}\n      />\n    );\n  };\n\n  return (\n    <motion.div\n      className={mergeClassNames(\n        \"rounded-full flex items-center justify-center transition-all duration-300\",\n        config.indicator,\n        variantStyles,\n      )}\n      style={customColorStyle}\n      initial={animated ? { scale: 0.8, opacity: 0 } : undefined}\n      animate={animated ? { scale: 1, opacity: 1 } : undefined}\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.95 }}\n      transition={{ type: \"spring\", stiffness: 400, damping: 17 }}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key={status}\n          initial={animated ? { scale: 0, rotate: -180 } : undefined}\n          animate={animated ? { scale: 1, rotate: 0 } : undefined}\n          exit={animated ? { scale: 0, rotate: 180 } : undefined}\n          transition={{ duration: 0.2 }}\n        >\n          {renderContent()}\n        </motion.span>\n      </AnimatePresence>\n    </motion.div>\n  );\n};\n\n// Main Stepper Component\nexport const Stepper = ({\n  steps,\n  currentStep,\n  onStepClick,\n  orientation = \"horizontal\",\n  size = \"md\",\n  variant = \"glass\",\n  labelPosition = \"bottom\",\n  direction = \"ltr\",\n  optionalLabel = \"Optional\",\n  showNumbers = true,\n  clickable = true,\n  showConnector = true,\n  className,\n  connectorClassName,\n  stepClassName,\n  showErrors = false,\n  errorSteps = [],\n  completedSteps,\n  animated = true,\n  colors,\n}: StepperProps) => {\n  const isRtl = direction === \"rtl\";\n  const isVertical = orientation === \"vertical\";\n  const resolvedLabelPosition = getResolvedLabelPosition(\n    orientation,\n    labelPosition,\n  );\n  const isHorizontalInline =\n    orientation === \"horizontal\" && resolvedLabelPosition === \"right\";\n  const config = sizeConfig[size];\n  const indicatorPaddingPx =\n    variant === \"glass\" || variant === \"outlined\" || variant === \"minimal\"\n      ? 4\n      : 2;\n  const indicatorShellSizePx = config.indicatorPx + indicatorPaddingPx * 2;\n  const connectorInsetPx = indicatorShellSizePx / 2;\n  const connectorCenterOffsetPx =\n    connectorInsetPx - config.connectorThicknessPx / 2;\n\n  const getStepStatus = (index: number): StepStatus => {\n    if (showErrors && errorSteps.includes(index)) return \"error\";\n    if (completedSteps) {\n      if (completedSteps.includes(index)) return \"completed\";\n      if (index === currentStep) return \"current\";\n      return \"upcoming\";\n    }\n    if (index < currentStep) return \"completed\";\n    if (index === currentStep) return \"current\";\n    return \"upcoming\";\n  };\n\n  const handleStepClick = (index: number) => {\n    if (!clickable || !onStepClick) return;\n    const step = steps[index];\n    if (step.disabled) return;\n\n    // Allow clicking on completed or current steps\n    const status = getStepStatus(index);\n    if (status === \"completed\" || status === \"current\") {\n      onStepClick(index);\n    }\n  };\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"w-full relative\",\n        isVertical\n          ? \"flex flex-col\"\n          : isHorizontalInline\n            ? mergeClassNames(\n                \"flex items-center\",\n                isRtl && \"flex-row-reverse\",\n              )\n            : mergeClassNames(\n                \"flex items-start justify-between\",\n                isRtl && \"flex-row-reverse\",\n              ),\n        className,\n      )}\n      dir={direction}\n    >\n      {/* Global Background Continuous Connector */}\n      {showConnector &&\n        isVertical &&\n        (() => {\n          return (\n            <div\n              className={mergeClassNames(\n                \"absolute rounded-full\",\n                getConnectorTrackClassName(variant),\n                connectorClassName,\n              )}\n              style={{\n                ...(isVertical\n                  ? {\n                      top: `${connectorInsetPx}px`,\n                      bottom: `${connectorInsetPx}px`,\n                      left: `${connectorCenterOffsetPx}px`,\n                      width: config.connectorThickness,\n                    }\n                  : {\n                      left: `${connectorInsetPx}px`,\n                      right: `${connectorInsetPx}px`,\n                      top: `${connectorCenterOffsetPx}px`,\n                      height: config.connectorThickness,\n                    }),\n              }}\n            >\n              {/* Animated fill connector */}\n              {animated ? (\n                <motion.div\n                  className=\"absolute top-0 left-0 bg-ds-accent rounded-full\"\n                  initial={{ [isVertical ? \"height\" : \"width\"]: 0 }}\n                  animate={{\n                    [isVertical ? \"height\" : \"width\"]:\n                      `${steps.length > 1 ? (Math.min(currentStep, steps.length - 1) / (steps.length - 1)) * 100 : 0}%`,\n                  }}\n                  transition={{ duration: 0.4, ease: \"easeOut\" }}\n                  style={{\n                    ...(isVertical ? { width: \"100%\" } : { height: \"100%\" }),\n                    backgroundColor: colors?.connector || colors?.completed,\n                  }}\n                />\n              ) : (\n                <div\n                  className=\"absolute top-0 left-0 bg-ds-accent rounded-full\"\n                  style={{\n                    ...(isVertical\n                      ? {\n                          width: \"100%\",\n                          height: `${steps.length > 1 ? (Math.min(currentStep, steps.length - 1) / (steps.length - 1)) * 100 : 0}%`,\n                        }\n                      : {\n                          height: \"100%\",\n                          width: `${steps.length > 1 ? (Math.min(currentStep, steps.length - 1) / (steps.length - 1)) * 100 : 0}%`,\n                        }),\n                    backgroundColor: colors?.connector || colors?.completed,\n                  }}\n                />\n              )}\n            </div>\n          );\n        })()}\n\n      {steps.map((step, index) => {\n        const status = getStepStatus(index);\n        const isLast = index === steps.length - 1;\n        const isClickable = clickable && !step.disabled;\n        const isConnectorCompleted = getStepStatus(index) === \"completed\";\n        const textBlock = (\n          <motion.div\n              className={mergeClassNames(\n                resolvedLabelPosition === \"right\"\n                  ? mergeClassNames(\n                      \"min-w-0\",\n                      isRtl ? \"text-right\" : \"text-left\",\n                    )\n                  : \"w-full px-2 text-center\",\n                isVertical && \"flex-1 pb-6\",\n                isVertical && isLast && \"pb-0\",\n            )}\n            style={isVertical ? { marginTop: \"-4px\" } : undefined}\n            initial={animated ? { opacity: 0, y: 10 } : undefined}\n            animate={animated ? { opacity: 1, y: 0 } : undefined}\n            transition={{ delay: index * 0.1 }}\n          >\n            <p\n              className={mergeClassNames(\n                \"font-medium transition-colors duration-200\",\n                config.text,\n                status === \"current\"\n                  ? \"text-ds-1\"\n                  : status === \"completed\"\n                    ? \"text-ds-1\"\n                    : status === \"error\"\n                      ? \"text-ds-state-error-text\"\n                      : \"text-ds-2\",\n              )}\n            >\n              {step.title}\n              {step.optional && (\n                <span\n                  className={mergeClassNames(\n                    \"font-normal text-ds-3\",\n                    isRtl ? \"mr-1\" : \"ml-1\",\n                  )}\n                >\n                  ({optionalLabel})\n                </span>\n              )}\n            </p>\n            {step.description && (\n              <p\n                className={mergeClassNames(\n                  \"mt-0.5 text-xs text-ds-2\",\n                  resolvedLabelPosition === \"right\" &&\n                    (isRtl ? \"text-right\" : \"text-left\"),\n                )}\n              >\n                {step.description}\n              </p>\n            )}\n          </motion.div>\n        );\n\n        return (\n          <Fragment key={step.id}>\n            <div\n              className={mergeClassNames(\n                \"relative z-10 min-w-0\",\n                isVertical\n                  ? \"flex gap-4 pb-8\"\n                  : isHorizontalInline\n                    ? \"flex items-center gap-3\"\n                    : \"flex flex-1 flex-col items-center text-center\",\n                !isLast && isVertical && \"mb-2\",\n                isVertical && isLast && \"pb-0\",\n                stepClassName,\n              )}\n              style={\n                !isVertical && !isHorizontalInline\n                  ? { flexBasis: 0, flexGrow: 1 }\n                  : undefined\n              }\n            >\n              {!isVertical && index > 0 ? (\n                <div\n                  className={mergeClassNames(\n                    \"pointer-events-none absolute z-0 rounded-full\",\n                    getConnectorTrackClassName(variant),\n                    connectorClassName,\n                  )}\n                  style={{\n                    top: `${connectorCenterOffsetPx}px`,\n                    left: isRtl ? \"50%\" : 0,\n                    right: isRtl ? 0 : \"50%\",\n                    height: config.connectorThickness,\n                  }}\n                  aria-hidden=\"true\"\n                >\n                  <div\n                    className={mergeClassNames(\n                      \"absolute inset-y-0 rounded-full bg-ds-accent\",\n                      isRtl ? \"left-0\" : \"right-0\",\n                    )}\n                    style={{\n                      left: 0,\n                      right: 0,\n                      backgroundColor: colors?.connector || colors?.completed,\n                      opacity:\n                        status === \"completed\" || status === \"current\" ? 1 : 0,\n                    }}\n                  />\n                </div>\n              ) : null}\n\n              {!isVertical && !isHorizontalInline && !isLast ? (\n                <div\n                  className={mergeClassNames(\n                    \"pointer-events-none absolute z-0 rounded-full\",\n                    getConnectorTrackClassName(variant),\n                    connectorClassName,\n                  )}\n                  style={{\n                    top: `${connectorCenterOffsetPx}px`,\n                    left: isRtl ? 0 : \"50%\",\n                    right: isRtl ? \"50%\" : 0,\n                    height: config.connectorThickness,\n                  }}\n                  aria-hidden=\"true\"\n                >\n                  {animated ? (\n                    <motion.div\n                      className={mergeClassNames(\n                        \"absolute inset-y-0 rounded-full bg-ds-accent\",\n                        isRtl ? \"right-0\" : \"left-0\",\n                      )}\n                      initial={{ width: 0 }}\n                      animate={{\n                        width:\n                          status === \"completed\" || status === \"current\"\n                            ? \"100%\"\n                            : \"0%\",\n                      }}\n                      transition={{ duration: 0.35, ease: \"easeOut\" }}\n                      style={{\n                        backgroundColor: colors?.connector || colors?.completed,\n                      }}\n                    />\n                  ) : (\n                    <div\n                      className={mergeClassNames(\n                        \"absolute inset-y-0 rounded-full bg-ds-accent\",\n                        isRtl ? \"right-0\" : \"left-0\",\n                      )}\n                      style={{\n                        width:\n                          status === \"completed\" || status === \"current\"\n                            ? \"100%\"\n                            : \"0%\",\n                        backgroundColor: colors?.connector || colors?.completed,\n                      }}\n                    />\n                  )}\n                </div>\n              ) : null}\n\n              <button\n                type=\"button\"\n                onClick={() => handleStepClick(index)}\n                disabled={!isClickable}\n                className={mergeClassNames(\n                  \"relative z-10 shrink-0 rounded-full bg-ds-surface-1\",\n                  isClickable ? \"cursor-pointer\" : \"cursor-default\",\n                  resolvedLabelPosition === \"right\"\n                    ? \"flex items-center justify-center\"\n                    : \"flex items-center justify-center\",\n                )}\n                style={{\n                  padding: `${indicatorPaddingPx}px`,\n                }}\n                aria-current={status === \"current\" ? \"step\" : undefined}\n              >\n                <StepIndicator\n                  step={step}\n                  index={index}\n                  status={status}\n                  size={size}\n                  variant={variant}\n                  showNumbers={showNumbers}\n                  animated={animated}\n                  colors={colors}\n                />\n              </button>\n\n              {textBlock}\n\n              {isVertical && step.content && status === \"current\" && (\n                <motion.div\n                  initial={{ opacity: 0, height: 0 }}\n                  animate={{ opacity: 1, height: \"auto\" }}\n                  exit={{ opacity: 0, height: 0 }}\n                  className=\"w-full pb-4 pl-14\"\n                >\n                  {step.content}\n                </motion.div>\n              )}\n            </div>\n\n            {isHorizontalInline && showConnector && !isLast ? (\n              <div\n                className={mergeClassNames(\n                  \"relative mx-4 min-w-8 flex-1 shrink-0 overflow-hidden rounded-full\",\n                  getConnectorTrackClassName(variant),\n                  connectorClassName,\n                )}\n                style={{ height: config.connectorThickness }}\n                aria-hidden=\"true\"\n              >\n                {animated ? (\n                  <motion.div\n                    className={mergeClassNames(\n                      \"absolute inset-y-0 rounded-full bg-ds-accent\",\n                      isRtl ? \"right-0\" : \"left-0\",\n                    )}\n                    initial={{ width: 0 }}\n                    animate={{\n                      width: isConnectorCompleted ? \"100%\" : \"0%\",\n                    }}\n                    transition={{ duration: 0.35, ease: \"easeOut\" }}\n                    style={{\n                      backgroundColor: colors?.connector || colors?.completed,\n                    }}\n                  />\n                ) : (\n                  <div\n                    className={mergeClassNames(\n                      \"absolute inset-y-0 rounded-full bg-ds-accent\",\n                      isRtl ? \"right-0\" : \"left-0\",\n                    )}\n                    style={{\n                      width: isConnectorCompleted ? \"100%\" : \"0%\",\n                      backgroundColor: colors?.connector || colors?.completed,\n                    }}\n                  />\n                )}\n              </div>\n            ) : null}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n};\n\nStepper.displayName = \"Stepper\";\n\nexport default Stepper;\n","import { useSyncExternalStore } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { AlertTriangleIcon, CheckIcon } from \"../../icons\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { StepperStepsProps, StepperStepsState } from \"./types\";\n\nconst DEFAULT_BREAKPOINT = 1080;\n\nfunction subscribeToMediaQuery(\n  query: string,\n  onStoreChange: () => void,\n): () => void {\n  if (typeof window === \"undefined\") {\n    return () => undefined;\n  }\n\n  const mediaQuery = window.matchMedia(query);\n  mediaQuery.addEventListener(\"change\", onStoreChange);\n\n  return () => mediaQuery.removeEventListener(\"change\", onStoreChange);\n}\n\nfunction getMediaQuerySnapshot(query: string): boolean {\n  if (typeof window === \"undefined\") {\n    return false;\n  }\n\n  return window.matchMedia(query).matches;\n}\n\nfunction getStepColors(\n  state: StepperStepsState,\n  isActive: boolean,\n): {\n  buttonClassName: string;\n  connectorClassName: string;\n  badgeClassName: string;\n} {\n  if (isActive) {\n    return {\n      buttonClassName:\n        \"border-ds-border-accent bg-ds-accent/12 text-ds-1 shadow-sm shadow-ds-accent/10\",\n      connectorClassName: \"bg-ds-accent\",\n      badgeClassName: \"border-ds-border-accent bg-ds-accent text-ds-on-accent\",\n    };\n  }\n\n  if (state === \"valid\") {\n    return {\n      buttonClassName:\n        \"border-ds-state-success-border bg-ds-state-success-surface text-ds-state-success-text shadow-sm\",\n      connectorClassName: \"bg-ds-state-success\",\n      badgeClassName:\n        \"border-ds-state-success-border bg-ds-state-success text-ds-on-accent\",\n    };\n  }\n\n  if (state === \"invalid\") {\n    return {\n      buttonClassName:\n        \"border-ds-state-error-border bg-ds-state-error-surface text-ds-state-error-text\",\n      connectorClassName: \"bg-ds-state-danger\",\n      badgeClassName:\n        \"border-ds-state-error-border bg-ds-state-danger text-ds-on-accent\",\n    };\n  }\n\n  return {\n    buttonClassName:\n      \"border-ds-border-2 bg-ds-surface-1 text-ds-2 hover:border-ds-border-1 hover:bg-ds-canvas\",\n    connectorClassName: \"bg-ds-border-3/70\",\n    badgeClassName: \"border-ds-border-2 bg-ds-canvas text-ds-2\",\n  };\n}\n\nfunction renderStepContent(\n  label: string,\n  icon: StepperStepsProps[\"steps\"][number][\"icon\"],\n  state: StepperStepsState,\n  stepNumber: number,\n  badgeClassName: string,\n) {\n  if (state === \"valid\") {\n    return (\n      <span className=\"flex min-w-0 items-center gap-2\">\n        <CheckIcon className=\"h-5 w-5\" aria-hidden=\"true\" />\n        <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n          {label}\n        </TruncatedText>\n      </span>\n    );\n  }\n\n  if (state === \"invalid\") {\n    return (\n      <span className=\"flex min-w-0 items-center gap-2\">\n        <AlertTriangleIcon className=\"h-5 w-5\" aria-hidden=\"true\" />\n        <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n          {label}\n        </TruncatedText>\n      </span>\n    );\n  }\n\n  if (icon) {\n    return (\n      <span className=\"flex min-w-0 items-center gap-2\">\n        <span className=\"shrink-0\">{icon}</span>\n        <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n          {label}\n        </TruncatedText>\n      </span>\n    );\n  }\n\n  return (\n    <span className=\"flex min-w-0 items-center gap-2\">\n      <span\n        className={mergeClassNames(\n          \"flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs font-semibold\",\n          badgeClassName,\n        )}\n        aria-hidden=\"true\"\n      >\n        {stepNumber}\n      </span>\n      <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n        {label}\n      </TruncatedText>\n    </span>\n  );\n}\n\nexport function StepperSteps({\n  steps,\n  currentStep,\n  onStepClick,\n  stepStates = [],\n  orientation = \"responsive\",\n  responsiveBreakpoint = DEFAULT_BREAKPOINT,\n  className,\n  stepClassName,\n  connectorClassName,\n}: StepperStepsProps) {\n  const responsiveQuery = `(max-width: ${responsiveBreakpoint}px)`;\n  const isCompact = useSyncExternalStore(\n    (onStoreChange) => {\n      if (orientation !== \"responsive\") {\n        return () => undefined;\n      }\n\n      return subscribeToMediaQuery(responsiveQuery, onStoreChange);\n    },\n    () =>\n      orientation === \"responsive\"\n        ? getMediaQuerySnapshot(responsiveQuery)\n        : false,\n    () => false,\n  );\n\n  const isVertical =\n    orientation === \"vertical\" || (orientation === \"responsive\" && isCompact);\n\n  return (\n    <div\n      className={mergeClassNames(\n        isVertical\n          ? \"flex w-full flex-col items-start\"\n          : \"flex w-full items-center\",\n        className,\n      )}\n    >\n      {steps.map((step, index) => {\n        const stepNumber = index + 1;\n        const state = stepStates[index] ?? \"untouched\";\n        const isActive = index === currentStep;\n        const isClickable = typeof onStepClick === \"function\" && !isActive;\n        const colors = getStepColors(state, isActive);\n\n        return (\n          <div\n            key={`${step.label}-${stepNumber}`}\n            className={mergeClassNames(\n              isVertical ? \"w-full\" : \"flex min-w-0 flex-1 items-center\",\n            )}\n          >\n            <Button\n              disabled={!isClickable}\n              onClick={() => onStepClick?.(index)}\n              className={mergeClassNames(\n                \"relative z-10 flex min-h-11 items-center justify-center rounded-md border px-4 py-3 text-sm font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/70 focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1 disabled:cursor-default disabled:opacity-100\",\n                isVertical ? \"w-full\" : \"w-full min-w-0\",\n                colors.buttonClassName,\n                stepClassName,\n              )}\n              aria-current={isActive ? \"step\" : undefined}\n              aria-invalid={state === \"invalid\" ? true : undefined}\n            >\n              {renderStepContent(\n                step.label,\n                step.icon,\n                state,\n                stepNumber,\n                colors.badgeClassName,\n              )}\n            </Button>\n\n            {index < steps.length - 1 ? (\n              isVertical ? (\n                <div\n                  className={mergeClassNames(\n                    \"mx-auto my-2 h-8 w-px rounded-full\",\n                    colors.connectorClassName,\n                    connectorClassName,\n                  )}\n                  aria-hidden=\"true\"\n                />\n              ) : (\n                <div\n                  className={mergeClassNames(\n                    \"mx-3 h-px min-w-6 flex-1 rounded-full\",\n                    colors.connectorClassName,\n                    connectorClassName,\n                  )}\n                  aria-hidden=\"true\"\n                />\n              )\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default StepperSteps;\n","import {\n  Children,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nimport { Button } from \"../../forms/button\";\nimport { CheckIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type {\n  StepperWizardIndicatorRenderProps,\n  StepperWizardIndicatorStatus,\n  StepperWizardProps,\n  StepperWizardStepProps,\n} from \"./types\";\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nfunction clampStep(step: number, totalSteps: number): number {\n  return Math.min(Math.max(step, 0), totalSteps);\n}\n\nfunction getIndicatorStatus(\n  stepIndex: number,\n  currentStep: number,\n): StepperWizardIndicatorStatus {\n  if (stepIndex === currentStep) {\n    return \"active\";\n  }\n\n  if (stepIndex < currentStep) {\n    return \"complete\";\n  }\n\n  return \"inactive\";\n}\n\nexport function StepperWizard({\n  children,\n  initialStep = 0,\n  currentStep: controlledStep,\n  onStepChange,\n  onFinalStepCompleted,\n  stepCircleContainerClassName,\n  stepContainerClassName,\n  contentClassName,\n  footerClassName,\n  backButtonProps,\n  nextButtonProps,\n  backButtonText = \"Back\",\n  nextButtonText = \"Continue\",\n  completeButtonText = \"Complete\",\n  disableStepIndicators = false,\n  renderStepIndicator,\n  className,\n}: StepperWizardProps) {\n  const stepsArray = Children.toArray(children);\n  const totalSteps = stepsArray.length;\n  const [internalStep, setInternalStep] = useState(() =>\n    clampStep(initialStep, totalSteps),\n  );\n  const [direction, setDirection] = useState(0);\n\n  const currentStep = clampStep(controlledStep ?? internalStep, totalSteps);\n  const isCompleted = currentStep >= totalSteps;\n  const isLastStep = totalSteps > 0 && currentStep === totalSteps - 1;\n\n  const commitStep = useCallback(\n    (nextStep: number) => {\n      const clampedStep = clampStep(nextStep, totalSteps);\n\n      if (controlledStep === undefined) {\n        setInternalStep(clampedStep);\n      }\n\n      if (clampedStep >= totalSteps) {\n        onFinalStepCompleted?.();\n        return;\n      }\n\n      onStepChange?.(clampedStep);\n    },\n    [controlledStep, onFinalStepCompleted, onStepChange, totalSteps],\n  );\n\n  if (totalSteps === 0) {\n    return null;\n  }\n\n  const handleBack = () => {\n    if (currentStep > 0) {\n      setDirection(-1);\n      commitStep(currentStep - 1);\n    }\n  };\n\n  const handleNext = () => {\n    if (!isLastStep) {\n      setDirection(1);\n      commitStep(currentStep + 1);\n    }\n  };\n\n  const handleComplete = () => {\n    setDirection(1);\n    commitStep(totalSteps);\n  };\n\n  const navigateToStep = (stepIndex: number) => {\n    if (stepIndex === currentStep || disableStepIndicators) {\n      return;\n    }\n\n    setDirection(stepIndex > currentStep ? 1 : -1);\n    commitStep(stepIndex);\n  };\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex min-h-full w-full flex-1 items-center justify-center p-4\",\n        className,\n      )}\n    >\n      <div\n        className={mergeClassNames(\n          \"mx-auto w-full max-w-3xl rounded-3xl border border-ds-border-2 bg-ds-canvas shadow-2\",\n          stepCircleContainerClassName,\n        )}\n      >\n        <div\n          className={mergeClassNames(\n            \"flex w-full items-center gap-3 border-b border-ds-border-2 px-6 py-6 sm:px-8\",\n            stepContainerClassName,\n          )}\n        >\n          {stepsArray.map((_, index) => {\n            const status = getIndicatorStatus(index, currentStep);\n            const isClickable = !disableStepIndicators && index !== currentStep;\n            const indicatorProps: StepperWizardIndicatorRenderProps = {\n              stepIndex: index,\n              stepNumber: index + 1,\n              currentStep,\n              status,\n              isClickable,\n              onStepClick: navigateToStep,\n            };\n\n            return (\n              <div\n                key={`wizard-step-${index + 1}`}\n                className=\"flex flex-1 items-center\"\n              >\n                {renderStepIndicator ? (\n                  renderStepIndicator(indicatorProps)\n                ) : (\n                  <WizardStepIndicator {...indicatorProps} />\n                )}\n                {index < totalSteps - 1 ? (\n                  <WizardStepConnector isComplete={currentStep > index} />\n                ) : null}\n              </div>\n            );\n          })}\n        </div>\n\n        <WizardStepContentWrapper\n          isCompleted={isCompleted}\n          currentStep={currentStep}\n          direction={direction}\n          className={mergeClassNames(\"px-6 py-6 sm:px-8\", contentClassName)}\n        >\n          {stepsArray[currentStep]}\n        </WizardStepContentWrapper>\n\n        {!isCompleted ? (\n          <div\n            className={mergeClassNames(\n              \"px-6 pb-6 sm:px-8 sm:pb-8\",\n              footerClassName,\n            )}\n          >\n            <div\n              className={mergeClassNames(\n                \"mt-6 flex gap-3\",\n                currentStep > 0 ? \"justify-between\" : \"justify-end\",\n              )}\n            >\n              {currentStep > 0 ? (\n                <Button\n                  onClick={handleBack}\n                  className=\"rounded-md border-transparent bg-transparent px-3 py-2 text-sm font-medium text-ds-2 shadow-none hover:bg-ds-surface-1 hover:text-ds-1\"\n                  {...backButtonProps}\n                >\n                  {backButtonText}\n                </Button>\n              ) : null}\n              <Button\n                onClick={isLastStep ? handleComplete : handleNext}\n                primary\n                className=\"rounded-full px-4 py-2 text-sm font-semibold shadow-2\"\n                {...nextButtonProps}\n              >\n                {isLastStep ? completeButtonText : nextButtonText}\n              </Button>\n            </div>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\ninterface WizardStepContentWrapperProps {\n  isCompleted: boolean;\n  currentStep: number;\n  direction: number;\n  children: React.ReactNode;\n  className?: string;\n}\n\nfunction WizardStepContentWrapper({\n  isCompleted,\n  currentStep,\n  direction,\n  children,\n  className,\n}: WizardStepContentWrapperProps) {\n  const [parentHeight, setParentHeight] = useState(0);\n  const handleHeightReady = useCallback((height: number) => {\n    setParentHeight(height);\n  }, []);\n\n  return (\n    <motion.div\n      style={{ position: \"relative\", overflow: \"hidden\" }}\n      animate={{ height: isCompleted ? 0 : parentHeight }}\n      transition={{ type: \"spring\", duration: 0.4 }}\n      className={className}\n    >\n      <AnimatePresence initial={false} mode=\"wait\" custom={direction}>\n        {!isCompleted ? (\n          <WizardSlideTransition\n            key={currentStep}\n            direction={direction}\n            onHeightReady={handleHeightReady}\n          >\n            {children}\n          </WizardSlideTransition>\n        ) : null}\n      </AnimatePresence>\n    </motion.div>\n  );\n}\n\ninterface WizardSlideTransitionProps {\n  children: React.ReactNode;\n  direction: number;\n  onHeightReady: (height: number) => void;\n}\n\nfunction WizardSlideTransition({\n  children,\n  direction,\n  onHeightReady,\n}: WizardSlideTransitionProps) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    if (containerRef.current) {\n      onHeightReady(containerRef.current.offsetHeight);\n    }\n  }, [children, onHeightReady]);\n\n  return (\n    <motion.div\n      ref={containerRef}\n      custom={direction}\n      variants={wizardStepVariants}\n      initial=\"enter\"\n      animate=\"center\"\n      exit=\"exit\"\n      transition={{ duration: 0.35, ease: \"easeOut\" }}\n      style={{ position: \"absolute\", inset: 0 }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\nconst wizardStepVariants = {\n  enter: (direction: number) => ({\n    x: direction >= 0 ? \"-100%\" : \"100%\",\n    opacity: 0,\n  }),\n  center: {\n    x: \"0%\",\n    opacity: 1,\n  },\n  exit: (direction: number) => ({\n    x: direction >= 0 ? \"40%\" : \"-40%\",\n    opacity: 0,\n  }),\n};\n\nexport function StepperWizardStep({\n  children,\n  className,\n}: StepperWizardStepProps) {\n  return (\n    <div className={mergeClassNames(\"space-y-4\", className)}>{children}</div>\n  );\n}\n\nfunction WizardStepIndicator({\n  stepIndex,\n  stepNumber,\n  status,\n  isClickable,\n  onStepClick,\n}: StepperWizardIndicatorRenderProps) {\n  return (\n    <motion.button\n      type=\"button\"\n      onClick={() => onStepClick(stepIndex)}\n      className={mergeClassNames(\n        \"relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/70 focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\",\n        isClickable ? \"cursor-pointer\" : \"cursor-default\",\n      )}\n      animate={status}\n      initial={false}\n      disabled={!isClickable}\n      aria-current={status === \"active\" ? \"step\" : undefined}\n    >\n      <motion.span\n        variants={{\n          inactive: {\n            scale: 1,\n            backgroundColor: \"var(--ds-color-bg-surface)\",\n            borderColor: \"var(--ds-color-border)\",\n            color: \"var(--ds-color-fg-muted)\",\n          },\n          active: {\n            scale: 1,\n            backgroundColor: \"var(--ds-color-accent)\",\n            borderColor: \"var(--ds-color-accent)\",\n            color: \"var(--ds-color-fg-on-accent)\",\n          },\n          complete: {\n            scale: 1,\n            backgroundColor: \"var(--ds-color-accent)\",\n            borderColor: \"var(--ds-color-accent)\",\n            color: \"var(--ds-color-fg-on-accent)\",\n          },\n        }}\n        transition={{ duration: 0.25 }}\n        className=\"flex h-full w-full items-center justify-center rounded-full\"\n      >\n        {status === \"complete\" ? (\n          <AnimatedWizardCheckIcon className=\"h-4 w-4\" />\n        ) : status === \"active\" ? (\n          <span className=\"h-2.5 w-2.5 rounded-full bg-current\" />\n        ) : (\n          <span>{stepNumber}</span>\n        )}\n      </motion.span>\n    </motion.button>\n  );\n}\n\nfunction WizardStepConnector({ isComplete }: { isComplete: boolean }) {\n  return (\n    <div className=\"relative mx-2 h-0.5 flex-1 overflow-hidden rounded-full bg-border\">\n      <motion.div\n        className=\"absolute inset-y-0 left-0 rounded-full bg-ds-accent\"\n        initial={false}\n        animate={isComplete ? \"complete\" : \"incomplete\"}\n        variants={{\n          incomplete: { width: 0 },\n          complete: { width: \"100%\" },\n        }}\n        transition={{ duration: 0.35, ease: \"easeOut\" }}\n      />\n    </div>\n  );\n}\n\nfunction AnimatedWizardCheckIcon({ className }: { className?: string }) {\n  return (\n    <span\n      className={mergeClassNames(\"flex items-center justify-center\", className)}\n    >\n      <CheckIcon className=\"h-full w-full\" aria-hidden=\"true\" />\n    </span>\n  );\n}\n\nexport default StepperWizard;\n"],"mappings":"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"}
+{"version":3,"file":"stepper-CVNcexxq.mjs","names":[],"sources":["../../src/components/navigation/stepper/Stepper.tsx","../../src/components/navigation/stepper/Stepper1.tsx","../../src/components/navigation/stepper/Stepper2.tsx"],"sourcesContent":["import { Fragment } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nimport { CheckIcon, CloseIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type {\n  StepperProps,\n  StepIndicatorProps,\n  StepStatus,\n  StepperLabelPosition,\n  StepperSize,\n  StepperVariant,\n} from \"./types\";\n\n// Size configurations for indicators and icons\nconst sizeConfig: Record<\n  StepperSize,\n  {\n    indicator: string;\n    indicatorPx: number;\n    icon: string;\n    text: string;\n    connectorThickness: string;\n    connectorThicknessPx: number;\n  }\n> = {\n  sm: {\n    indicator: \"w-8 h-8\",\n    indicatorPx: 32,\n    icon: \"w-4 h-4\",\n    text: \"text-xs\",\n    connectorThickness: \"2px\",\n    connectorThicknessPx: 2,\n  },\n  md: {\n    indicator: \"w-10 h-10\",\n    indicatorPx: 40,\n    icon: \"w-5 h-5\",\n    text: \"text-sm\",\n    connectorThickness: \"2px\",\n    connectorThicknessPx: 2,\n  },\n  lg: {\n    indicator: \"w-12 h-12\",\n    indicatorPx: 48,\n    icon: \"w-6 h-6\",\n    text: \"text-base\",\n    connectorThickness: \"4px\",\n    connectorThicknessPx: 4,\n  },\n};\n\n// Variant styles for the indicator\nconst getVariantStyles = (variant: StepperVariant, status: StepStatus) => {\n  const baseStyles = {\n    default: {\n      completed: \"bg-ds-accent text-ds-on-accent shadow-md shadow-ds-accent/25\",\n      current:\n        \"bg-ds-accent text-ds-on-accent ring-4 ring-ds-focus/40 shadow-lg shadow-ds-accent/30\",\n      upcoming: \"bg-ds-surface-3 text-ds-2\",\n      error:\n        \"bg-ds-state-error-surface text-ds-state-error-text ring-4 ring-ds-state-error-border/35\",\n    },\n    glass: {\n      completed:\n        \"bg-ds-accent/85 text-ds-on-accent backdrop-blur-xl border border-ds-border-accent/30 shadow-lg shadow-ds-accent/20\",\n      current:\n        \"bg-ds-accent/90 text-ds-on-accent backdrop-blur-xl border-2 border-ds-border-accent ring-4 ring-ds-focus/30 shadow-xl shadow-ds-accent/30\",\n      upcoming:\n        \"bg-ds-surface-1 text-ds-2 backdrop-blur-xl border border-ds-border-2\",\n      error:\n        \"bg-ds-state-error-surface text-ds-state-error-text backdrop-blur-xl border border-ds-state-error-border ring-4 ring-ds-state-error-border/25\",\n    },\n    minimal: {\n      completed: \"bg-ds-accent-subtle text-ds-1\",\n      current: \"bg-ds-accent text-ds-on-accent shadow-sm\",\n      upcoming: \"bg-transparent text-ds-2 border-2 border-ds-border-2\",\n      error: \"bg-ds-state-error-surface text-ds-state-error-text\",\n    },\n    outlined: {\n      completed: \"bg-transparent text-ds-1 border-2 border-ds-border-accent\",\n      current:\n        \"bg-ds-accent text-ds-on-accent border-2 border-ds-border-accent shadow-lg\",\n      upcoming: \"bg-transparent text-ds-2 border-2 border-ds-border-2\",\n      error:\n        \"bg-transparent text-ds-state-error-text border-2 border-ds-state-error-border\",\n    },\n  };\n\n  return baseStyles[variant][status];\n};\n\nconst getConnectorTrackClassName = (variant: StepperVariant) =>\n  variant === \"glass\"\n    ? \"bg-ds-surface-2/70 backdrop-blur-sm\"\n    : \"bg-ds-surface-3\";\n\nconst getResolvedLabelPosition = (\n  orientation: StepperProps[\"orientation\"],\n  labelPosition: StepperLabelPosition,\n) => (orientation === \"vertical\" ? \"right\" : labelPosition);\n\n// Step Indicator Component\nconst StepIndicator = ({\n  step,\n  index,\n  status,\n  size,\n  variant,\n  showNumbers,\n  animated,\n  colors,\n}: StepIndicatorProps) => {\n  const config = sizeConfig[size];\n  const variantStyles = getVariantStyles(variant, status);\n\n  // Custom color overrides\n  const customColorStyle = colors?.[status]\n    ? { backgroundColor: colors[status], borderColor: colors[status] }\n    : undefined;\n\n  const renderContent = () => {\n    if (step.icon) {\n      return <span className={config.icon}>{step.icon}</span>;\n    }\n\n    if (status === \"completed\") {\n      return <CheckIcon className={config.icon} aria-hidden=\"true\" />;\n    }\n\n    if (status === \"error\") {\n      return <CloseIcon className={config.icon} aria-hidden=\"true\" />;\n    }\n\n    if (showNumbers) {\n      return <span className=\"font-semibold\">{index + 1}</span>;\n    }\n\n    return (\n      <span\n        className={mergeClassNames(\n          \"rounded-full bg-current\",\n          size === \"sm\" ? \"w-2 h-2\" : \"w-3 h-3\",\n        )}\n      />\n    );\n  };\n\n  return (\n    <motion.div\n      className={mergeClassNames(\n        \"rounded-full flex items-center justify-center transition-all duration-300\",\n        config.indicator,\n        variantStyles,\n      )}\n      style={customColorStyle}\n      initial={animated ? { scale: 0.8, opacity: 0 } : undefined}\n      animate={animated ? { scale: 1, opacity: 1 } : undefined}\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.95 }}\n      transition={{ type: \"spring\", stiffness: 400, damping: 17 }}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key={status}\n          initial={animated ? { scale: 0, rotate: -180 } : undefined}\n          animate={animated ? { scale: 1, rotate: 0 } : undefined}\n          exit={animated ? { scale: 0, rotate: 180 } : undefined}\n          transition={{ duration: 0.2 }}\n        >\n          {renderContent()}\n        </motion.span>\n      </AnimatePresence>\n    </motion.div>\n  );\n};\n\n// Main Stepper Component\nexport const Stepper = ({\n  steps,\n  currentStep,\n  onStepClick,\n  orientation = \"horizontal\",\n  size = \"md\",\n  variant = \"glass\",\n  labelPosition = \"bottom\",\n  direction = \"ltr\",\n  optionalLabel = \"Optional\",\n  showNumbers = true,\n  clickable = true,\n  showConnector = true,\n  className,\n  connectorClassName,\n  stepClassName,\n  showErrors = false,\n  errorSteps = [],\n  completedSteps,\n  animated = true,\n  colors,\n}: StepperProps) => {\n  const isRtl = direction === \"rtl\";\n  const isVertical = orientation === \"vertical\";\n  const resolvedLabelPosition = getResolvedLabelPosition(\n    orientation,\n    labelPosition,\n  );\n  const isHorizontalInline =\n    orientation === \"horizontal\" && resolvedLabelPosition === \"right\";\n  const config = sizeConfig[size];\n  const indicatorPaddingPx =\n    variant === \"glass\" || variant === \"outlined\" || variant === \"minimal\"\n      ? 4\n      : 2;\n  const indicatorShellSizePx = config.indicatorPx + indicatorPaddingPx * 2;\n  const connectorInsetPx = indicatorShellSizePx / 2;\n  const connectorCenterOffsetPx =\n    connectorInsetPx - config.connectorThicknessPx / 2;\n\n  const getStepStatus = (index: number): StepStatus => {\n    if (showErrors && errorSteps.includes(index)) return \"error\";\n    if (completedSteps) {\n      if (completedSteps.includes(index)) return \"completed\";\n      if (index === currentStep) return \"current\";\n      return \"upcoming\";\n    }\n    if (index < currentStep) return \"completed\";\n    if (index === currentStep) return \"current\";\n    return \"upcoming\";\n  };\n\n  const handleStepClick = (index: number) => {\n    if (!clickable || !onStepClick) return;\n    const step = steps[index];\n    if (step.disabled) return;\n\n    // Allow clicking on completed or current steps\n    const status = getStepStatus(index);\n    if (status === \"completed\" || status === \"current\") {\n      onStepClick(index);\n    }\n  };\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"w-full relative\",\n        isVertical\n          ? \"flex flex-col\"\n          : isHorizontalInline\n            ? mergeClassNames(\n                \"flex items-center\",\n                isRtl && \"flex-row-reverse\",\n              )\n            : mergeClassNames(\n                \"flex items-start justify-between\",\n                isRtl && \"flex-row-reverse\",\n              ),\n        className,\n      )}\n      dir={direction}\n    >\n      {/* Global Background Continuous Connector */}\n      {showConnector &&\n        isVertical &&\n        (() => {\n          return (\n            <div\n              className={mergeClassNames(\n                \"absolute rounded-full\",\n                getConnectorTrackClassName(variant),\n                connectorClassName,\n              )}\n              style={{\n                ...(isVertical\n                  ? {\n                      top: `${connectorInsetPx}px`,\n                      bottom: `${connectorInsetPx}px`,\n                      left: `${connectorCenterOffsetPx}px`,\n                      width: config.connectorThickness,\n                    }\n                  : {\n                      left: `${connectorInsetPx}px`,\n                      right: `${connectorInsetPx}px`,\n                      top: `${connectorCenterOffsetPx}px`,\n                      height: config.connectorThickness,\n                    }),\n              }}\n            >\n              {/* Animated fill connector */}\n              {animated ? (\n                <motion.div\n                  className=\"absolute top-0 left-0 bg-ds-accent rounded-full\"\n                  initial={{ [isVertical ? \"height\" : \"width\"]: 0 }}\n                  animate={{\n                    [isVertical ? \"height\" : \"width\"]:\n                      `${steps.length > 1 ? (Math.min(currentStep, steps.length - 1) / (steps.length - 1)) * 100 : 0}%`,\n                  }}\n                  transition={{ duration: 0.4, ease: \"easeOut\" }}\n                  style={{\n                    ...(isVertical ? { width: \"100%\" } : { height: \"100%\" }),\n                    backgroundColor: colors?.connector || colors?.completed,\n                  }}\n                />\n              ) : (\n                <div\n                  className=\"absolute top-0 left-0 bg-ds-accent rounded-full\"\n                  style={{\n                    ...(isVertical\n                      ? {\n                          width: \"100%\",\n                          height: `${steps.length > 1 ? (Math.min(currentStep, steps.length - 1) / (steps.length - 1)) * 100 : 0}%`,\n                        }\n                      : {\n                          height: \"100%\",\n                          width: `${steps.length > 1 ? (Math.min(currentStep, steps.length - 1) / (steps.length - 1)) * 100 : 0}%`,\n                        }),\n                    backgroundColor: colors?.connector || colors?.completed,\n                  }}\n                />\n              )}\n            </div>\n          );\n        })()}\n\n      {steps.map((step, index) => {\n        const status = getStepStatus(index);\n        const isLast = index === steps.length - 1;\n        const isClickable = clickable && !step.disabled;\n        const isConnectorCompleted = getStepStatus(index) === \"completed\";\n        const textBlock = (\n          <motion.div\n              className={mergeClassNames(\n                resolvedLabelPosition === \"right\"\n                  ? mergeClassNames(\n                      \"min-w-0\",\n                      isRtl ? \"text-right\" : \"text-left\",\n                    )\n                  : \"w-full px-2 text-center\",\n                isVertical && \"flex-1 pb-6\",\n                isVertical && isLast && \"pb-0\",\n            )}\n            style={isVertical ? { marginTop: \"-4px\" } : undefined}\n            initial={animated ? { opacity: 0, y: 10 } : undefined}\n            animate={animated ? { opacity: 1, y: 0 } : undefined}\n            transition={{ delay: index * 0.1 }}\n          >\n            <p\n              className={mergeClassNames(\n                \"font-medium transition-colors duration-200\",\n                config.text,\n                status === \"current\"\n                  ? \"text-ds-1\"\n                  : status === \"completed\"\n                    ? \"text-ds-1\"\n                    : status === \"error\"\n                      ? \"text-ds-state-error-text\"\n                      : \"text-ds-2\",\n              )}\n            >\n              {step.title}\n              {step.optional && (\n                <span\n                  className={mergeClassNames(\n                    \"font-normal text-ds-3\",\n                    isRtl ? \"mr-1\" : \"ml-1\",\n                  )}\n                >\n                  ({optionalLabel})\n                </span>\n              )}\n            </p>\n            {step.description && (\n              <p\n                className={mergeClassNames(\n                  \"mt-0.5 text-xs text-ds-2\",\n                  resolvedLabelPosition === \"right\" &&\n                    (isRtl ? \"text-right\" : \"text-left\"),\n                )}\n              >\n                {step.description}\n              </p>\n            )}\n          </motion.div>\n        );\n\n        return (\n          <Fragment key={step.id}>\n            <div\n              className={mergeClassNames(\n                \"relative z-10 min-w-0\",\n                isVertical\n                  ? \"flex gap-4 pb-8\"\n                  : isHorizontalInline\n                    ? \"flex items-center gap-3\"\n                    : \"flex flex-1 flex-col items-center text-center\",\n                !isLast && isVertical && \"mb-2\",\n                isVertical && isLast && \"pb-0\",\n                stepClassName,\n              )}\n              style={\n                !isVertical && !isHorizontalInline\n                  ? { flexBasis: 0, flexGrow: 1 }\n                  : undefined\n              }\n            >\n              {!isVertical && index > 0 ? (\n                <div\n                  className={mergeClassNames(\n                    \"pointer-events-none absolute z-0 rounded-full\",\n                    getConnectorTrackClassName(variant),\n                    connectorClassName,\n                  )}\n                  style={{\n                    top: `${connectorCenterOffsetPx}px`,\n                    left: isRtl ? \"50%\" : 0,\n                    right: isRtl ? 0 : \"50%\",\n                    height: config.connectorThickness,\n                  }}\n                  aria-hidden=\"true\"\n                >\n                  <div\n                    className={mergeClassNames(\n                      \"absolute inset-y-0 rounded-full bg-ds-accent\",\n                      isRtl ? \"left-0\" : \"right-0\",\n                    )}\n                    style={{\n                      left: 0,\n                      right: 0,\n                      backgroundColor: colors?.connector || colors?.completed,\n                      opacity:\n                        status === \"completed\" || status === \"current\" ? 1 : 0,\n                    }}\n                  />\n                </div>\n              ) : null}\n\n              {!isVertical && !isHorizontalInline && !isLast ? (\n                <div\n                  className={mergeClassNames(\n                    \"pointer-events-none absolute z-0 rounded-full\",\n                    getConnectorTrackClassName(variant),\n                    connectorClassName,\n                  )}\n                  style={{\n                    top: `${connectorCenterOffsetPx}px`,\n                    left: isRtl ? 0 : \"50%\",\n                    right: isRtl ? \"50%\" : 0,\n                    height: config.connectorThickness,\n                  }}\n                  aria-hidden=\"true\"\n                >\n                  {animated ? (\n                    <motion.div\n                      className={mergeClassNames(\n                        \"absolute inset-y-0 rounded-full bg-ds-accent\",\n                        isRtl ? \"right-0\" : \"left-0\",\n                      )}\n                      initial={{ width: 0 }}\n                      animate={{\n                        width:\n                          status === \"completed\" || status === \"current\"\n                            ? \"100%\"\n                            : \"0%\",\n                      }}\n                      transition={{ duration: 0.35, ease: \"easeOut\" }}\n                      style={{\n                        backgroundColor: colors?.connector || colors?.completed,\n                      }}\n                    />\n                  ) : (\n                    <div\n                      className={mergeClassNames(\n                        \"absolute inset-y-0 rounded-full bg-ds-accent\",\n                        isRtl ? \"right-0\" : \"left-0\",\n                      )}\n                      style={{\n                        width:\n                          status === \"completed\" || status === \"current\"\n                            ? \"100%\"\n                            : \"0%\",\n                        backgroundColor: colors?.connector || colors?.completed,\n                      }}\n                    />\n                  )}\n                </div>\n              ) : null}\n\n              <button\n                type=\"button\"\n                onClick={() => handleStepClick(index)}\n                disabled={!isClickable}\n                className={mergeClassNames(\n                  \"relative z-10 shrink-0 rounded-full bg-ds-surface-1\",\n                  isClickable ? \"cursor-pointer\" : \"cursor-default\",\n                  resolvedLabelPosition === \"right\"\n                    ? \"flex items-center justify-center\"\n                    : \"flex items-center justify-center\",\n                )}\n                style={{\n                  padding: `${indicatorPaddingPx}px`,\n                }}\n                aria-current={status === \"current\" ? \"step\" : undefined}\n              >\n                <StepIndicator\n                  step={step}\n                  index={index}\n                  status={status}\n                  size={size}\n                  variant={variant}\n                  showNumbers={showNumbers}\n                  animated={animated}\n                  colors={colors}\n                />\n              </button>\n\n              {textBlock}\n\n              {isVertical && step.content && status === \"current\" && (\n                <motion.div\n                  initial={{ opacity: 0, height: 0 }}\n                  animate={{ opacity: 1, height: \"auto\" }}\n                  exit={{ opacity: 0, height: 0 }}\n                  className=\"w-full pb-4 pl-14\"\n                >\n                  {step.content}\n                </motion.div>\n              )}\n            </div>\n\n            {isHorizontalInline && showConnector && !isLast ? (\n              <div\n                className={mergeClassNames(\n                  \"relative mx-4 min-w-8 flex-1 shrink-0 overflow-hidden rounded-full\",\n                  getConnectorTrackClassName(variant),\n                  connectorClassName,\n                )}\n                style={{ height: config.connectorThickness }}\n                aria-hidden=\"true\"\n              >\n                {animated ? (\n                  <motion.div\n                    className={mergeClassNames(\n                      \"absolute inset-y-0 rounded-full bg-ds-accent\",\n                      isRtl ? \"right-0\" : \"left-0\",\n                    )}\n                    initial={{ width: 0 }}\n                    animate={{\n                      width: isConnectorCompleted ? \"100%\" : \"0%\",\n                    }}\n                    transition={{ duration: 0.35, ease: \"easeOut\" }}\n                    style={{\n                      backgroundColor: colors?.connector || colors?.completed,\n                    }}\n                  />\n                ) : (\n                  <div\n                    className={mergeClassNames(\n                      \"absolute inset-y-0 rounded-full bg-ds-accent\",\n                      isRtl ? \"right-0\" : \"left-0\",\n                    )}\n                    style={{\n                      width: isConnectorCompleted ? \"100%\" : \"0%\",\n                      backgroundColor: colors?.connector || colors?.completed,\n                    }}\n                  />\n                )}\n              </div>\n            ) : null}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n};\n\nStepper.displayName = \"Stepper\";\n\nexport default Stepper;\n","import { useSyncExternalStore } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { AlertTriangleIcon, CheckIcon } from \"../../icons\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { StepperStepsProps, StepperStepsState } from \"./types\";\n\nconst DEFAULT_BREAKPOINT = 1080;\n\nfunction subscribeToMediaQuery(\n  query: string,\n  onStoreChange: () => void,\n): () => void {\n  if (typeof window === \"undefined\") {\n    return () => undefined;\n  }\n\n  const mediaQuery = window.matchMedia(query);\n  mediaQuery.addEventListener(\"change\", onStoreChange);\n\n  return () => mediaQuery.removeEventListener(\"change\", onStoreChange);\n}\n\nfunction getMediaQuerySnapshot(query: string): boolean {\n  if (typeof window === \"undefined\") {\n    return false;\n  }\n\n  return window.matchMedia(query).matches;\n}\n\nfunction getStepColors(\n  state: StepperStepsState,\n  isActive: boolean,\n): {\n  buttonClassName: string;\n  connectorClassName: string;\n  badgeClassName: string;\n} {\n  if (isActive) {\n    return {\n      buttonClassName:\n        \"border-ds-border-accent bg-ds-accent/12 text-ds-1 shadow-sm shadow-ds-accent/10\",\n      connectorClassName: \"bg-ds-accent\",\n      badgeClassName: \"border-ds-border-accent bg-ds-accent text-ds-on-accent\",\n    };\n  }\n\n  if (state === \"valid\") {\n    return {\n      buttonClassName:\n        \"border-ds-state-success-border bg-ds-state-success-surface text-ds-state-success-text shadow-sm\",\n      connectorClassName: \"bg-ds-state-success\",\n      badgeClassName:\n        \"border-ds-state-success-border bg-ds-state-success text-ds-on-accent\",\n    };\n  }\n\n  if (state === \"invalid\") {\n    return {\n      buttonClassName:\n        \"border-ds-state-error-border bg-ds-state-error-surface text-ds-state-error-text\",\n      connectorClassName: \"bg-ds-state-danger\",\n      badgeClassName:\n        \"border-ds-state-error-border bg-ds-state-danger text-ds-on-accent\",\n    };\n  }\n\n  return {\n    buttonClassName:\n      \"border-ds-border-2 bg-ds-surface-1 text-ds-2 hover:border-ds-border-1 hover:bg-ds-canvas\",\n    connectorClassName: \"bg-ds-border-3/70\",\n    badgeClassName: \"border-ds-border-2 bg-ds-canvas text-ds-2\",\n  };\n}\n\nfunction renderStepContent(\n  label: string,\n  icon: StepperStepsProps[\"steps\"][number][\"icon\"],\n  state: StepperStepsState,\n  stepNumber: number,\n  badgeClassName: string,\n) {\n  if (state === \"valid\") {\n    return (\n      <span className=\"flex min-w-0 items-center gap-2\">\n        <CheckIcon className=\"h-5 w-5\" aria-hidden=\"true\" />\n        <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n          {label}\n        </TruncatedText>\n      </span>\n    );\n  }\n\n  if (state === \"invalid\") {\n    return (\n      <span className=\"flex min-w-0 items-center gap-2\">\n        <AlertTriangleIcon className=\"h-5 w-5\" aria-hidden=\"true\" />\n        <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n          {label}\n        </TruncatedText>\n      </span>\n    );\n  }\n\n  if (icon) {\n    return (\n      <span className=\"flex min-w-0 items-center gap-2\">\n        <span className=\"shrink-0\">{icon}</span>\n        <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n          {label}\n        </TruncatedText>\n      </span>\n    );\n  }\n\n  return (\n    <span className=\"flex min-w-0 items-center gap-2\">\n      <span\n        className={mergeClassNames(\n          \"flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs font-semibold\",\n          badgeClassName,\n        )}\n        aria-hidden=\"true\"\n      >\n        {stepNumber}\n      </span>\n      <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n        {label}\n      </TruncatedText>\n    </span>\n  );\n}\n\nexport function StepperSteps({\n  steps,\n  currentStep,\n  onStepClick,\n  stepStates = [],\n  orientation = \"responsive\",\n  responsiveBreakpoint = DEFAULT_BREAKPOINT,\n  className,\n  stepClassName,\n  connectorClassName,\n}: StepperStepsProps) {\n  const responsiveQuery = `(max-width: ${responsiveBreakpoint}px)`;\n  const isCompact = useSyncExternalStore(\n    (onStoreChange) => {\n      if (orientation !== \"responsive\") {\n        return () => undefined;\n      }\n\n      return subscribeToMediaQuery(responsiveQuery, onStoreChange);\n    },\n    () =>\n      orientation === \"responsive\"\n        ? getMediaQuerySnapshot(responsiveQuery)\n        : false,\n    () => false,\n  );\n\n  const isVertical =\n    orientation === \"vertical\" || (orientation === \"responsive\" && isCompact);\n\n  return (\n    <div\n      className={mergeClassNames(\n        isVertical\n          ? \"flex w-full flex-col items-start\"\n          : \"flex w-full items-center\",\n        className,\n      )}\n    >\n      {steps.map((step, index) => {\n        const stepNumber = index + 1;\n        const state = stepStates[index] ?? \"untouched\";\n        const isActive = index === currentStep;\n        const isClickable = typeof onStepClick === \"function\" && !isActive;\n        const colors = getStepColors(state, isActive);\n\n        return (\n          <div\n            key={`${step.label}-${stepNumber}`}\n            className={mergeClassNames(\n              isVertical ? \"w-full\" : \"flex min-w-0 flex-1 items-center\",\n            )}\n          >\n            <Button\n              disabled={!isClickable}\n              onClick={() => onStepClick?.(index)}\n              className={mergeClassNames(\n                \"relative z-10 flex min-h-11 items-center justify-center rounded-md border px-4 py-3 text-sm font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/70 focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1 disabled:cursor-default disabled:opacity-100\",\n                isVertical ? \"w-full\" : \"w-full min-w-0\",\n                colors.buttonClassName,\n                stepClassName,\n              )}\n              aria-current={isActive ? \"step\" : undefined}\n              aria-invalid={state === \"invalid\" ? true : undefined}\n            >\n              {renderStepContent(\n                step.label,\n                step.icon,\n                state,\n                stepNumber,\n                colors.badgeClassName,\n              )}\n            </Button>\n\n            {index < steps.length - 1 ? (\n              isVertical ? (\n                <div\n                  className={mergeClassNames(\n                    \"mx-auto my-2 h-8 w-px rounded-full\",\n                    colors.connectorClassName,\n                    connectorClassName,\n                  )}\n                  aria-hidden=\"true\"\n                />\n              ) : (\n                <div\n                  className={mergeClassNames(\n                    \"mx-3 h-px min-w-6 flex-1 rounded-full\",\n                    colors.connectorClassName,\n                    connectorClassName,\n                  )}\n                  aria-hidden=\"true\"\n                />\n              )\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default StepperSteps;\n","import {\n  Children,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nimport { Button } from \"../../forms/button\";\nimport { CheckIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type {\n  StepperWizardIndicatorRenderProps,\n  StepperWizardIndicatorStatus,\n  StepperWizardProps,\n  StepperWizardStepProps,\n} from \"./types\";\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nfunction clampStep(step: number, totalSteps: number): number {\n  return Math.min(Math.max(step, 0), totalSteps);\n}\n\nfunction getIndicatorStatus(\n  stepIndex: number,\n  currentStep: number,\n): StepperWizardIndicatorStatus {\n  if (stepIndex === currentStep) {\n    return \"active\";\n  }\n\n  if (stepIndex < currentStep) {\n    return \"complete\";\n  }\n\n  return \"inactive\";\n}\n\nexport function StepperWizard({\n  children,\n  initialStep = 0,\n  currentStep: controlledStep,\n  onStepChange,\n  onFinalStepCompleted,\n  stepCircleContainerClassName,\n  stepContainerClassName,\n  contentClassName,\n  footerClassName,\n  backButtonProps,\n  nextButtonProps,\n  backButtonText = \"Back\",\n  nextButtonText = \"Continue\",\n  completeButtonText = \"Complete\",\n  disableStepIndicators = false,\n  renderStepIndicator,\n  className,\n}: StepperWizardProps) {\n  const stepsArray = Children.toArray(children);\n  const totalSteps = stepsArray.length;\n  const [internalStep, setInternalStep] = useState(() =>\n    clampStep(initialStep, totalSteps),\n  );\n  const [direction, setDirection] = useState(0);\n\n  const currentStep = clampStep(controlledStep ?? internalStep, totalSteps);\n  const isCompleted = currentStep >= totalSteps;\n  const isLastStep = totalSteps > 0 && currentStep === totalSteps - 1;\n\n  const commitStep = useCallback(\n    (nextStep: number) => {\n      const clampedStep = clampStep(nextStep, totalSteps);\n\n      if (controlledStep === undefined) {\n        setInternalStep(clampedStep);\n      }\n\n      if (clampedStep >= totalSteps) {\n        onFinalStepCompleted?.();\n        return;\n      }\n\n      onStepChange?.(clampedStep);\n    },\n    [controlledStep, onFinalStepCompleted, onStepChange, totalSteps],\n  );\n\n  if (totalSteps === 0) {\n    return null;\n  }\n\n  const handleBack = () => {\n    if (currentStep > 0) {\n      setDirection(-1);\n      commitStep(currentStep - 1);\n    }\n  };\n\n  const handleNext = () => {\n    if (!isLastStep) {\n      setDirection(1);\n      commitStep(currentStep + 1);\n    }\n  };\n\n  const handleComplete = () => {\n    setDirection(1);\n    commitStep(totalSteps);\n  };\n\n  const navigateToStep = (stepIndex: number) => {\n    if (stepIndex === currentStep || disableStepIndicators) {\n      return;\n    }\n\n    setDirection(stepIndex > currentStep ? 1 : -1);\n    commitStep(stepIndex);\n  };\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex min-h-full w-full flex-1 items-center justify-center p-4\",\n        className,\n      )}\n    >\n      <div\n        className={mergeClassNames(\n          \"mx-auto w-full max-w-3xl rounded-3xl border border-ds-border-2 bg-ds-canvas shadow-2\",\n          stepCircleContainerClassName,\n        )}\n      >\n        <div\n          className={mergeClassNames(\n            \"flex w-full items-center gap-3 border-b border-ds-border-2 px-6 py-6 sm:px-8\",\n            stepContainerClassName,\n          )}\n        >\n          {stepsArray.map((_, index) => {\n            const status = getIndicatorStatus(index, currentStep);\n            const isClickable = !disableStepIndicators && index !== currentStep;\n            const indicatorProps: StepperWizardIndicatorRenderProps = {\n              stepIndex: index,\n              stepNumber: index + 1,\n              currentStep,\n              status,\n              isClickable,\n              onStepClick: navigateToStep,\n            };\n\n            return (\n              <div\n                key={`wizard-step-${index + 1}`}\n                className=\"flex flex-1 items-center\"\n              >\n                {renderStepIndicator ? (\n                  renderStepIndicator(indicatorProps)\n                ) : (\n                  <WizardStepIndicator {...indicatorProps} />\n                )}\n                {index < totalSteps - 1 ? (\n                  <WizardStepConnector isComplete={currentStep > index} />\n                ) : null}\n              </div>\n            );\n          })}\n        </div>\n\n        <WizardStepContentWrapper\n          isCompleted={isCompleted}\n          currentStep={currentStep}\n          direction={direction}\n          className={mergeClassNames(\"px-6 py-6 sm:px-8\", contentClassName)}\n        >\n          {stepsArray[currentStep]}\n        </WizardStepContentWrapper>\n\n        {!isCompleted ? (\n          <div\n            className={mergeClassNames(\n              \"px-6 pb-6 sm:px-8 sm:pb-8\",\n              footerClassName,\n            )}\n          >\n            <div\n              className={mergeClassNames(\n                \"mt-6 flex gap-3\",\n                currentStep > 0 ? \"justify-between\" : \"justify-end\",\n              )}\n            >\n              {currentStep > 0 ? (\n                <Button\n                  onClick={handleBack}\n                  className=\"rounded-md border-transparent bg-transparent px-3 py-2 text-sm font-medium text-ds-2 shadow-none hover:bg-ds-surface-1 hover:text-ds-1\"\n                  {...backButtonProps}\n                >\n                  {backButtonText}\n                </Button>\n              ) : null}\n              <Button\n                onClick={isLastStep ? handleComplete : handleNext}\n                primary\n                className=\"rounded-full px-4 py-2 text-sm font-semibold shadow-2\"\n                {...nextButtonProps}\n              >\n                {isLastStep ? completeButtonText : nextButtonText}\n              </Button>\n            </div>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\ninterface WizardStepContentWrapperProps {\n  isCompleted: boolean;\n  currentStep: number;\n  direction: number;\n  children: React.ReactNode;\n  className?: string;\n}\n\nfunction WizardStepContentWrapper({\n  isCompleted,\n  currentStep,\n  direction,\n  children,\n  className,\n}: WizardStepContentWrapperProps) {\n  const [parentHeight, setParentHeight] = useState(0);\n  const handleHeightReady = useCallback((height: number) => {\n    setParentHeight(height);\n  }, []);\n\n  return (\n    <motion.div\n      style={{ position: \"relative\", overflow: \"hidden\" }}\n      animate={{ height: isCompleted ? 0 : parentHeight }}\n      transition={{ type: \"spring\", duration: 0.4 }}\n      className={className}\n    >\n      <AnimatePresence initial={false} mode=\"wait\" custom={direction}>\n        {!isCompleted ? (\n          <WizardSlideTransition\n            key={currentStep}\n            direction={direction}\n            onHeightReady={handleHeightReady}\n          >\n            {children}\n          </WizardSlideTransition>\n        ) : null}\n      </AnimatePresence>\n    </motion.div>\n  );\n}\n\ninterface WizardSlideTransitionProps {\n  children: React.ReactNode;\n  direction: number;\n  onHeightReady: (height: number) => void;\n}\n\nfunction WizardSlideTransition({\n  children,\n  direction,\n  onHeightReady,\n}: WizardSlideTransitionProps) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    if (containerRef.current) {\n      onHeightReady(containerRef.current.offsetHeight);\n    }\n  }, [children, onHeightReady]);\n\n  return (\n    <motion.div\n      ref={containerRef}\n      custom={direction}\n      variants={wizardStepVariants}\n      initial=\"enter\"\n      animate=\"center\"\n      exit=\"exit\"\n      transition={{ duration: 0.35, ease: \"easeOut\" }}\n      style={{ position: \"absolute\", inset: 0 }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\nconst wizardStepVariants = {\n  enter: (direction: number) => ({\n    x: direction >= 0 ? \"-100%\" : \"100%\",\n    opacity: 0,\n  }),\n  center: {\n    x: \"0%\",\n    opacity: 1,\n  },\n  exit: (direction: number) => ({\n    x: direction >= 0 ? \"40%\" : \"-40%\",\n    opacity: 0,\n  }),\n};\n\nexport function StepperWizardStep({\n  children,\n  className,\n}: StepperWizardStepProps) {\n  return (\n    <div className={mergeClassNames(\"space-y-4\", className)}>{children}</div>\n  );\n}\n\nfunction WizardStepIndicator({\n  stepIndex,\n  stepNumber,\n  status,\n  isClickable,\n  onStepClick,\n}: StepperWizardIndicatorRenderProps) {\n  return (\n    <motion.button\n      type=\"button\"\n      onClick={() => onStepClick(stepIndex)}\n      className={mergeClassNames(\n        \"relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/70 focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\",\n        isClickable ? \"cursor-pointer\" : \"cursor-default\",\n      )}\n      animate={status}\n      initial={false}\n      disabled={!isClickable}\n      aria-current={status === \"active\" ? \"step\" : undefined}\n    >\n      <motion.span\n        variants={{\n          inactive: {\n            scale: 1,\n            backgroundColor: \"var(--ds-color-bg-surface)\",\n            borderColor: \"var(--ds-color-border)\",\n            color: \"var(--ds-color-fg-muted)\",\n          },\n          active: {\n            scale: 1,\n            backgroundColor: \"var(--ds-color-accent)\",\n            borderColor: \"var(--ds-color-accent)\",\n            color: \"var(--ds-color-fg-on-accent)\",\n          },\n          complete: {\n            scale: 1,\n            backgroundColor: \"var(--ds-color-accent)\",\n            borderColor: \"var(--ds-color-accent)\",\n            color: \"var(--ds-color-fg-on-accent)\",\n          },\n        }}\n        transition={{ duration: 0.25 }}\n        className=\"flex h-full w-full items-center justify-center rounded-full\"\n      >\n        {status === \"complete\" ? (\n          <AnimatedWizardCheckIcon className=\"h-4 w-4\" />\n        ) : status === \"active\" ? (\n          <span className=\"h-2.5 w-2.5 rounded-full bg-current\" />\n        ) : (\n          <span>{stepNumber}</span>\n        )}\n      </motion.span>\n    </motion.button>\n  );\n}\n\nfunction WizardStepConnector({ isComplete }: { isComplete: boolean }) {\n  return (\n    <div className=\"relative mx-2 h-0.5 flex-1 overflow-hidden rounded-full bg-border\">\n      <motion.div\n        className=\"absolute inset-y-0 left-0 rounded-full bg-ds-accent\"\n        initial={false}\n        animate={isComplete ? \"complete\" : \"incomplete\"}\n        variants={{\n          incomplete: { width: 0 },\n          complete: { width: \"100%\" },\n        }}\n        transition={{ duration: 0.35, ease: \"easeOut\" }}\n      />\n    </div>\n  );\n}\n\nfunction AnimatedWizardCheckIcon({ className }: { className?: string }) {\n  return (\n    <span\n      className={mergeClassNames(\"flex items-center justify-center\", className)}\n    >\n      <CheckIcon className=\"h-full w-full\" aria-hidden=\"true\" />\n    </span>\n  );\n}\n\nexport default StepperWizard;\n"],"mappings":"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"}

package/dist/chunks/{sun-to-moon-button-lt-1vmWm.cjs → sun-to-moon-button-BzYGFhrg.cjs}

@@ -1,7 +1,6 @@
-require("./chunk-B_GkZjkl.cjs");
-const require_theme = require("./theme-D6B-FaoE.cjs");
-const require_utils = require("./utils-LRbEQHYs.cjs");
-const require_button = require("./button-uD87K76W.cjs");
+const require_theme = require("./theme-BzTaXYZ8.cjs");
+const require_utils = require("./utils-CoA0q63n.cjs");
+const require_button = require("./button-D2ZYmVda.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx
 var BRAND_SWATCHES = {
@@ -140,4 +139,4 @@ Object.defineProperty(exports, "ThemeSwitcherButtons", {
 	}
 });
 
-//# sourceMappingURL=sun-to-moon-button-lt-1vmWm.cjs.map
+//# sourceMappingURL=sun-to-moon-button-BzYGFhrg.cjs.map

package/dist/chunks/{sun-to-moon-button-lt-1vmWm.cjs.map → sun-to-moon-button-BzYGFhrg.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"sun-to-moon-button-lt-1vmWm.cjs","names":[],"sources":["../../src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx"],"sourcesContent":["import type {\n  ThemeColorType,\n  ThemeModeType,\n  ThemeVariantType,\n} from \"../../../foundations/theme\";\nimport { useThemeContext } from \"../../../foundations/theme\";\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CSSProperties } from \"react\";\n\nexport interface ThemeSwitcherLabels {\n  mode?: string;\n  light?: string;\n  dark?: string;\n  brand?: string;\n  variant?: string;\n  variantDefault?: string;\n  variantAlt?: string;\n  purple?: string;\n  teal?: string;\n  yellow?: string;\n  green?: string;\n}\n\nexport interface ThemeSwitcherButtonsProps {\n  className?: string;\n  /** Override any label for localisation / translation. */\n  labels?: ThemeSwitcherLabels;\n}\n\nconst BRAND_SWATCHES: Record<ThemeColorType, string> = {\n  purple: \"var(--ds-brand-purple)\",\n  teal:   \"var(--ds-brand-teal)\",\n  yellow: \"var(--ds-brand-yellow)\",\n  green:  \"var(--ds-brand-green)\",\n};\n\nfunction ToggleButton({\n  label,\n  active,\n  onClick,\n  swatch,\n  showBrandState = false,\n  mode,\n}: {\n  label: string;\n  active: boolean;\n  onClick: () => void;\n  swatch?: string;\n  showBrandState?: boolean;\n  mode?: ThemeModeType;\n}) {\n  const isLightMode = mode === \"light\";\n  const toneStyle: CSSProperties | undefined = (() => {\n    if (!showBrandState || !swatch) {\n      return undefined;\n    }\n\n    if (isLightMode) {\n      return {\n        borderColor: active ? swatch : \"var(--ds-border-2)\",\n        backgroundColor: active\n          ? `color-mix(in srgb, ${swatch} 12%, #ffffff)`\n          : \"#ffffff\",\n        color: active\n          ? `color-mix(in srgb, ${swatch} 76%, var(--ds-text-1))`\n          : \"var(--ds-text-2)\",\n        boxShadow: active\n          ? `0 0 0 1px color-mix(in srgb, ${swatch} 24%, transparent)`\n          : \"none\",\n      };\n    }\n\n    return {\n      borderColor: active\n        ? swatch\n        : `color-mix(in srgb, ${swatch} 42%, var(--ds-border-3))`,\n      backgroundColor: active\n        ? `color-mix(in srgb, ${swatch} 16%, var(--ds-surface-1))`\n        : `color-mix(in srgb, ${swatch} 6%, var(--ds-surface-1))`,\n    };\n  })();\n\n  return (\n    <Button\n      variant=\"secondary\"\n      size=\"small\"\n      onClick={onClick}\n      className={mergeClassNames(\n        \"group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200\",\n        active\n          ? \"border-ds-border-accent bg-ds-surface-2 text-ds-1 shadow-sm ring-1 ring-ds-border-accent/40\"\n          : \"border-ds-border-2 bg-ds-surface-1 text-ds-2 hover:border-ds-border-accent/50 hover:bg-ds-surface-2 hover:text-ds-1\",\n        showBrandState && isLightMode\n          ? \"bg-ds-surface-1! hover:bg-ds-surface-1!\"\n          : null,\n        showBrandState && active ? \"text-ds-1\" : null,\n      )}\n      style={toneStyle}\n      aria-pressed={active}\n    >\n      {swatch ? (\n        <span\n          className={mergeClassNames(\n            \"h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition-transform duration-200 group-hover:scale-110\",\n            active\n              ? isLightMode\n                ? \"scale-110 ring-2 ring-black/15\"\n                : \"scale-110 ring-2 ring-white/35\"\n              : \"scale-100 opacity-90\",\n          )}\n          style={{ backgroundColor: swatch }}\n          aria-hidden=\"true\"\n        />\n      ) : null}\n      <span>{label}</span>\n    </Button>\n  );\n}\n\nexport default function ThemeSwitcherButtons({\n  className,\n  labels = {},\n}: ThemeSwitcherButtonsProps) {\n  const { mode, theme, variant, setMode, setTheme, setVariant } =\n    useThemeContext();\n\n  const l: Required<ThemeSwitcherLabels> = {\n    mode:           labels.mode           ?? \"Mode\",\n    light:          labels.light          ?? \"Light\",\n    dark:           labels.dark           ?? \"Dark\",\n    brand:          labels.brand          ?? \"Brand\",\n    variant:        labels.variant        ?? \"Variant\",\n    variantDefault: labels.variantDefault ?? \"Default\",\n    variantAlt:     labels.variantAlt     ?? \"Alt\",\n    purple:         labels.purple         ?? \"Purple\",\n    teal:           labels.teal           ?? \"Teal\",\n    yellow:         labels.yellow         ?? \"Yellow\",\n    green:          labels.green          ?? \"Green\",\n  };\n\n  const brandOptions: Array<{ value: ThemeColorType; label: string; swatch: string }> = [\n    { value: \"purple\", label: l.purple, swatch: BRAND_SWATCHES.purple },\n    { value: \"teal\",   label: l.teal,   swatch: BRAND_SWATCHES.teal   },\n    { value: \"yellow\", label: l.yellow, swatch: BRAND_SWATCHES.yellow },\n    { value: \"green\",  label: l.green,  swatch: BRAND_SWATCHES.green  },\n  ];\n\n  const variantOptions: Array<{ value: ThemeVariantType; label: string }> = [\n    { value: \"default\", label: l.variantDefault },\n    { value: \"alt\",     label: l.variantAlt     },\n  ];\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"w-full rounded-2xl border border-ds-border-2 bg-ds-canvas p-4 shadow-sm\",\n        className,\n      )}\n    >\n      <div className=\"space-y-3\">\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.mode}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            <ToggleButton label={l.light} active={mode === \"light\"} onClick={() => setMode(\"light\")} />\n            <ToggleButton label={l.dark}  active={mode === \"dark\"}  onClick={() => setMode(\"dark\")}  />\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.brand}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {brandOptions.map((opt) => (\n              <ToggleButton\n                key={opt.value}\n                label={opt.label}\n                active={theme === opt.value}\n                onClick={() => setTheme(opt.value)}\n                swatch={opt.swatch}\n                showBrandState\n                mode={mode}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.variant}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {variantOptions.map((opt) => (\n              <ToggleButton\n                key={opt.value}\n                label={opt.label}\n                active={variant === opt.value}\n                onClick={() => setVariant(opt.value)}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"sun-to-moon-button-BzYGFhrg.cjs","names":[],"sources":["../../src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx"],"sourcesContent":["import type {\n  ThemeColorType,\n  ThemeModeType,\n  ThemeVariantType,\n} from \"../../../foundations/theme\";\nimport { useThemeContext } from \"../../../foundations/theme\";\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CSSProperties } from \"react\";\n\nexport interface ThemeSwitcherLabels {\n  mode?: string;\n  light?: string;\n  dark?: string;\n  brand?: string;\n  variant?: string;\n  variantDefault?: string;\n  variantAlt?: string;\n  purple?: string;\n  teal?: string;\n  yellow?: string;\n  green?: string;\n}\n\nexport interface ThemeSwitcherButtonsProps {\n  className?: string;\n  /** Override any label for localisation / translation. */\n  labels?: ThemeSwitcherLabels;\n}\n\nconst BRAND_SWATCHES: Record<ThemeColorType, string> = {\n  purple: \"var(--ds-brand-purple)\",\n  teal:   \"var(--ds-brand-teal)\",\n  yellow: \"var(--ds-brand-yellow)\",\n  green:  \"var(--ds-brand-green)\",\n};\n\nfunction ToggleButton({\n  label,\n  active,\n  onClick,\n  swatch,\n  showBrandState = false,\n  mode,\n}: {\n  label: string;\n  active: boolean;\n  onClick: () => void;\n  swatch?: string;\n  showBrandState?: boolean;\n  mode?: ThemeModeType;\n}) {\n  const isLightMode = mode === \"light\";\n  const toneStyle: CSSProperties | undefined = (() => {\n    if (!showBrandState || !swatch) {\n      return undefined;\n    }\n\n    if (isLightMode) {\n      return {\n        borderColor: active ? swatch : \"var(--ds-border-2)\",\n        backgroundColor: active\n          ? `color-mix(in srgb, ${swatch} 12%, #ffffff)`\n          : \"#ffffff\",\n        color: active\n          ? `color-mix(in srgb, ${swatch} 76%, var(--ds-text-1))`\n          : \"var(--ds-text-2)\",\n        boxShadow: active\n          ? `0 0 0 1px color-mix(in srgb, ${swatch} 24%, transparent)`\n          : \"none\",\n      };\n    }\n\n    return {\n      borderColor: active\n        ? swatch\n        : `color-mix(in srgb, ${swatch} 42%, var(--ds-border-3))`,\n      backgroundColor: active\n        ? `color-mix(in srgb, ${swatch} 16%, var(--ds-surface-1))`\n        : `color-mix(in srgb, ${swatch} 6%, var(--ds-surface-1))`,\n    };\n  })();\n\n  return (\n    <Button\n      variant=\"secondary\"\n      size=\"small\"\n      onClick={onClick}\n      className={mergeClassNames(\n        \"group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200\",\n        active\n          ? \"border-ds-border-accent bg-ds-surface-2 text-ds-1 shadow-sm ring-1 ring-ds-border-accent/40\"\n          : \"border-ds-border-2 bg-ds-surface-1 text-ds-2 hover:border-ds-border-accent/50 hover:bg-ds-surface-2 hover:text-ds-1\",\n        showBrandState && isLightMode\n          ? \"bg-ds-surface-1! hover:bg-ds-surface-1!\"\n          : null,\n        showBrandState && active ? \"text-ds-1\" : null,\n      )}\n      style={toneStyle}\n      aria-pressed={active}\n    >\n      {swatch ? (\n        <span\n          className={mergeClassNames(\n            \"h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition-transform duration-200 group-hover:scale-110\",\n            active\n              ? isLightMode\n                ? \"scale-110 ring-2 ring-black/15\"\n                : \"scale-110 ring-2 ring-white/35\"\n              : \"scale-100 opacity-90\",\n          )}\n          style={{ backgroundColor: swatch }}\n          aria-hidden=\"true\"\n        />\n      ) : null}\n      <span>{label}</span>\n    </Button>\n  );\n}\n\nexport default function ThemeSwitcherButtons({\n  className,\n  labels = {},\n}: ThemeSwitcherButtonsProps) {\n  const { mode, theme, variant, setMode, setTheme, setVariant } =\n    useThemeContext();\n\n  const l: Required<ThemeSwitcherLabels> = {\n    mode:           labels.mode           ?? \"Mode\",\n    light:          labels.light          ?? \"Light\",\n    dark:           labels.dark           ?? \"Dark\",\n    brand:          labels.brand          ?? \"Brand\",\n    variant:        labels.variant        ?? \"Variant\",\n    variantDefault: labels.variantDefault ?? \"Default\",\n    variantAlt:     labels.variantAlt     ?? \"Alt\",\n    purple:         labels.purple         ?? \"Purple\",\n    teal:           labels.teal           ?? \"Teal\",\n    yellow:         labels.yellow         ?? \"Yellow\",\n    green:          labels.green          ?? \"Green\",\n  };\n\n  const brandOptions: Array<{ value: ThemeColorType; label: string; swatch: string }> = [\n    { value: \"purple\", label: l.purple, swatch: BRAND_SWATCHES.purple },\n    { value: \"teal\",   label: l.teal,   swatch: BRAND_SWATCHES.teal   },\n    { value: \"yellow\", label: l.yellow, swatch: BRAND_SWATCHES.yellow },\n    { value: \"green\",  label: l.green,  swatch: BRAND_SWATCHES.green  },\n  ];\n\n  const variantOptions: Array<{ value: ThemeVariantType; label: string }> = [\n    { value: \"default\", label: l.variantDefault },\n    { value: \"alt\",     label: l.variantAlt     },\n  ];\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"w-full rounded-2xl border border-ds-border-2 bg-ds-canvas p-4 shadow-sm\",\n        className,\n      )}\n    >\n      <div className=\"space-y-3\">\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.mode}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            <ToggleButton label={l.light} active={mode === \"light\"} onClick={() => setMode(\"light\")} />\n            <ToggleButton label={l.dark}  active={mode === \"dark\"}  onClick={() => setMode(\"dark\")}  />\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.brand}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {brandOptions.map((opt) => (\n              <ToggleButton\n                key={opt.value}\n                label={opt.label}\n                active={theme === opt.value}\n                onClick={() => setTheme(opt.value)}\n                swatch={opt.swatch}\n                showBrandState\n                mode={mode}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.variant}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {variantOptions.map((opt) => (\n              <ToggleButton\n                key={opt.value}\n                label={opt.label}\n                active={variant === opt.value}\n                onClick={() => setVariant(opt.value)}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{sun-to-moon-button-DWHDpP5B.mjs → sun-to-moon-button-CRXBMFZb.mjs}

@@ -1,6 +1,6 @@
-import { n as useThemeContext } from "./theme-koPrLKQv.mjs";
-import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
-import { t as Button } from "./button-IDShmQqA.mjs";
+import { n as useThemeContext } from "./theme-BXML6jHE.mjs";
+import { n as mergeClassNames } from "./utils-Dc7j29ec.mjs";
+import { t as Button } from "./button-CAU9ej3h.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx
 var BRAND_SWATCHES = {
@@ -134,4 +134,4 @@ function ThemeSwitcherButtons({ className, labels = {} }) {
 //#endregion
 export { ThemeSwitcherButtons as t };
 
-//# sourceMappingURL=sun-to-moon-button-DWHDpP5B.mjs.map
+//# sourceMappingURL=sun-to-moon-button-CRXBMFZb.mjs.map

package/dist/chunks/{sun-to-moon-button-DWHDpP5B.mjs.map → sun-to-moon-button-CRXBMFZb.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"sun-to-moon-button-DWHDpP5B.mjs","names":[],"sources":["../../src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx"],"sourcesContent":["import type {\n  ThemeColorType,\n  ThemeModeType,\n  ThemeVariantType,\n} from \"../../../foundations/theme\";\nimport { useThemeContext } from \"../../../foundations/theme\";\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CSSProperties } from \"react\";\n\nexport interface ThemeSwitcherLabels {\n  mode?: string;\n  light?: string;\n  dark?: string;\n  brand?: string;\n  variant?: string;\n  variantDefault?: string;\n  variantAlt?: string;\n  purple?: string;\n  teal?: string;\n  yellow?: string;\n  green?: string;\n}\n\nexport interface ThemeSwitcherButtonsProps {\n  className?: string;\n  /** Override any label for localisation / translation. */\n  labels?: ThemeSwitcherLabels;\n}\n\nconst BRAND_SWATCHES: Record<ThemeColorType, string> = {\n  purple: \"var(--ds-brand-purple)\",\n  teal:   \"var(--ds-brand-teal)\",\n  yellow: \"var(--ds-brand-yellow)\",\n  green:  \"var(--ds-brand-green)\",\n};\n\nfunction ToggleButton({\n  label,\n  active,\n  onClick,\n  swatch,\n  showBrandState = false,\n  mode,\n}: {\n  label: string;\n  active: boolean;\n  onClick: () => void;\n  swatch?: string;\n  showBrandState?: boolean;\n  mode?: ThemeModeType;\n}) {\n  const isLightMode = mode === \"light\";\n  const toneStyle: CSSProperties | undefined = (() => {\n    if (!showBrandState || !swatch) {\n      return undefined;\n    }\n\n    if (isLightMode) {\n      return {\n        borderColor: active ? swatch : \"var(--ds-border-2)\",\n        backgroundColor: active\n          ? `color-mix(in srgb, ${swatch} 12%, #ffffff)`\n          : \"#ffffff\",\n        color: active\n          ? `color-mix(in srgb, ${swatch} 76%, var(--ds-text-1))`\n          : \"var(--ds-text-2)\",\n        boxShadow: active\n          ? `0 0 0 1px color-mix(in srgb, ${swatch} 24%, transparent)`\n          : \"none\",\n      };\n    }\n\n    return {\n      borderColor: active\n        ? swatch\n        : `color-mix(in srgb, ${swatch} 42%, var(--ds-border-3))`,\n      backgroundColor: active\n        ? `color-mix(in srgb, ${swatch} 16%, var(--ds-surface-1))`\n        : `color-mix(in srgb, ${swatch} 6%, var(--ds-surface-1))`,\n    };\n  })();\n\n  return (\n    <Button\n      variant=\"secondary\"\n      size=\"small\"\n      onClick={onClick}\n      className={mergeClassNames(\n        \"group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200\",\n        active\n          ? \"border-ds-border-accent bg-ds-surface-2 text-ds-1 shadow-sm ring-1 ring-ds-border-accent/40\"\n          : \"border-ds-border-2 bg-ds-surface-1 text-ds-2 hover:border-ds-border-accent/50 hover:bg-ds-surface-2 hover:text-ds-1\",\n        showBrandState && isLightMode\n          ? \"bg-ds-surface-1! hover:bg-ds-surface-1!\"\n          : null,\n        showBrandState && active ? \"text-ds-1\" : null,\n      )}\n      style={toneStyle}\n      aria-pressed={active}\n    >\n      {swatch ? (\n        <span\n          className={mergeClassNames(\n            \"h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition-transform duration-200 group-hover:scale-110\",\n            active\n              ? isLightMode\n                ? \"scale-110 ring-2 ring-black/15\"\n                : \"scale-110 ring-2 ring-white/35\"\n              : \"scale-100 opacity-90\",\n          )}\n          style={{ backgroundColor: swatch }}\n          aria-hidden=\"true\"\n        />\n      ) : null}\n      <span>{label}</span>\n    </Button>\n  );\n}\n\nexport default function ThemeSwitcherButtons({\n  className,\n  labels = {},\n}: ThemeSwitcherButtonsProps) {\n  const { mode, theme, variant, setMode, setTheme, setVariant } =\n    useThemeContext();\n\n  const l: Required<ThemeSwitcherLabels> = {\n    mode:           labels.mode           ?? \"Mode\",\n    light:          labels.light          ?? \"Light\",\n    dark:           labels.dark           ?? \"Dark\",\n    brand:          labels.brand          ?? \"Brand\",\n    variant:        labels.variant        ?? \"Variant\",\n    variantDefault: labels.variantDefault ?? \"Default\",\n    variantAlt:     labels.variantAlt     ?? \"Alt\",\n    purple:         labels.purple         ?? \"Purple\",\n    teal:           labels.teal           ?? \"Teal\",\n    yellow:         labels.yellow         ?? \"Yellow\",\n    green:          labels.green          ?? \"Green\",\n  };\n\n  const brandOptions: Array<{ value: ThemeColorType; label: string; swatch: string }> = [\n    { value: \"purple\", label: l.purple, swatch: BRAND_SWATCHES.purple },\n    { value: \"teal\",   label: l.teal,   swatch: BRAND_SWATCHES.teal   },\n    { value: \"yellow\", label: l.yellow, swatch: BRAND_SWATCHES.yellow },\n    { value: \"green\",  label: l.green,  swatch: BRAND_SWATCHES.green  },\n  ];\n\n  const variantOptions: Array<{ value: ThemeVariantType; label: string }> = [\n    { value: \"default\", label: l.variantDefault },\n    { value: \"alt\",     label: l.variantAlt     },\n  ];\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"w-full rounded-2xl border border-ds-border-2 bg-ds-canvas p-4 shadow-sm\",\n        className,\n      )}\n    >\n      <div className=\"space-y-3\">\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.mode}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            <ToggleButton label={l.light} active={mode === \"light\"} onClick={() => setMode(\"light\")} />\n            <ToggleButton label={l.dark}  active={mode === \"dark\"}  onClick={() => setMode(\"dark\")}  />\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.brand}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {brandOptions.map((opt) => (\n              <ToggleButton\n                key={opt.value}\n                label={opt.label}\n                active={theme === opt.value}\n                onClick={() => setTheme(opt.value)}\n                swatch={opt.swatch}\n                showBrandState\n                mode={mode}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.variant}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {variantOptions.map((opt) => (\n              <ToggleButton\n                key={opt.value}\n                label={opt.label}\n                active={variant === opt.value}\n                onClick={() => setVariant(opt.value)}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"sun-to-moon-button-CRXBMFZb.mjs","names":[],"sources":["../../src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx"],"sourcesContent":["import type {\n  ThemeColorType,\n  ThemeModeType,\n  ThemeVariantType,\n} from \"../../../foundations/theme\";\nimport { useThemeContext } from \"../../../foundations/theme\";\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CSSProperties } from \"react\";\n\nexport interface ThemeSwitcherLabels {\n  mode?: string;\n  light?: string;\n  dark?: string;\n  brand?: string;\n  variant?: string;\n  variantDefault?: string;\n  variantAlt?: string;\n  purple?: string;\n  teal?: string;\n  yellow?: string;\n  green?: string;\n}\n\nexport interface ThemeSwitcherButtonsProps {\n  className?: string;\n  /** Override any label for localisation / translation. */\n  labels?: ThemeSwitcherLabels;\n}\n\nconst BRAND_SWATCHES: Record<ThemeColorType, string> = {\n  purple: \"var(--ds-brand-purple)\",\n  teal:   \"var(--ds-brand-teal)\",\n  yellow: \"var(--ds-brand-yellow)\",\n  green:  \"var(--ds-brand-green)\",\n};\n\nfunction ToggleButton({\n  label,\n  active,\n  onClick,\n  swatch,\n  showBrandState = false,\n  mode,\n}: {\n  label: string;\n  active: boolean;\n  onClick: () => void;\n  swatch?: string;\n  showBrandState?: boolean;\n  mode?: ThemeModeType;\n}) {\n  const isLightMode = mode === \"light\";\n  const toneStyle: CSSProperties | undefined = (() => {\n    if (!showBrandState || !swatch) {\n      return undefined;\n    }\n\n    if (isLightMode) {\n      return {\n        borderColor: active ? swatch : \"var(--ds-border-2)\",\n        backgroundColor: active\n          ? `color-mix(in srgb, ${swatch} 12%, #ffffff)`\n          : \"#ffffff\",\n        color: active\n          ? `color-mix(in srgb, ${swatch} 76%, var(--ds-text-1))`\n          : \"var(--ds-text-2)\",\n        boxShadow: active\n          ? `0 0 0 1px color-mix(in srgb, ${swatch} 24%, transparent)`\n          : \"none\",\n      };\n    }\n\n    return {\n      borderColor: active\n        ? swatch\n        : `color-mix(in srgb, ${swatch} 42%, var(--ds-border-3))`,\n      backgroundColor: active\n        ? `color-mix(in srgb, ${swatch} 16%, var(--ds-surface-1))`\n        : `color-mix(in srgb, ${swatch} 6%, var(--ds-surface-1))`,\n    };\n  })();\n\n  return (\n    <Button\n      variant=\"secondary\"\n      size=\"small\"\n      onClick={onClick}\n      className={mergeClassNames(\n        \"group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200\",\n        active\n          ? \"border-ds-border-accent bg-ds-surface-2 text-ds-1 shadow-sm ring-1 ring-ds-border-accent/40\"\n          : \"border-ds-border-2 bg-ds-surface-1 text-ds-2 hover:border-ds-border-accent/50 hover:bg-ds-surface-2 hover:text-ds-1\",\n        showBrandState && isLightMode\n          ? \"bg-ds-surface-1! hover:bg-ds-surface-1!\"\n          : null,\n        showBrandState && active ? \"text-ds-1\" : null,\n      )}\n      style={toneStyle}\n      aria-pressed={active}\n    >\n      {swatch ? (\n        <span\n          className={mergeClassNames(\n            \"h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition-transform duration-200 group-hover:scale-110\",\n            active\n              ? isLightMode\n                ? \"scale-110 ring-2 ring-black/15\"\n                : \"scale-110 ring-2 ring-white/35\"\n              : \"scale-100 opacity-90\",\n          )}\n          style={{ backgroundColor: swatch }}\n          aria-hidden=\"true\"\n        />\n      ) : null}\n      <span>{label}</span>\n    </Button>\n  );\n}\n\nexport default function ThemeSwitcherButtons({\n  className,\n  labels = {},\n}: ThemeSwitcherButtonsProps) {\n  const { mode, theme, variant, setMode, setTheme, setVariant } =\n    useThemeContext();\n\n  const l: Required<ThemeSwitcherLabels> = {\n    mode:           labels.mode           ?? \"Mode\",\n    light:          labels.light          ?? \"Light\",\n    dark:           labels.dark           ?? \"Dark\",\n    brand:          labels.brand          ?? \"Brand\",\n    variant:        labels.variant        ?? \"Variant\",\n    variantDefault: labels.variantDefault ?? \"Default\",\n    variantAlt:     labels.variantAlt     ?? \"Alt\",\n    purple:         labels.purple         ?? \"Purple\",\n    teal:           labels.teal           ?? \"Teal\",\n    yellow:         labels.yellow         ?? \"Yellow\",\n    green:          labels.green          ?? \"Green\",\n  };\n\n  const brandOptions: Array<{ value: ThemeColorType; label: string; swatch: string }> = [\n    { value: \"purple\", label: l.purple, swatch: BRAND_SWATCHES.purple },\n    { value: \"teal\",   label: l.teal,   swatch: BRAND_SWATCHES.teal   },\n    { value: \"yellow\", label: l.yellow, swatch: BRAND_SWATCHES.yellow },\n    { value: \"green\",  label: l.green,  swatch: BRAND_SWATCHES.green  },\n  ];\n\n  const variantOptions: Array<{ value: ThemeVariantType; label: string }> = [\n    { value: \"default\", label: l.variantDefault },\n    { value: \"alt\",     label: l.variantAlt     },\n  ];\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"w-full rounded-2xl border border-ds-border-2 bg-ds-canvas p-4 shadow-sm\",\n        className,\n      )}\n    >\n      <div className=\"space-y-3\">\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.mode}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            <ToggleButton label={l.light} active={mode === \"light\"} onClick={() => setMode(\"light\")} />\n            <ToggleButton label={l.dark}  active={mode === \"dark\"}  onClick={() => setMode(\"dark\")}  />\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.brand}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {brandOptions.map((opt) => (\n              <ToggleButton\n                key={opt.value}\n                label={opt.label}\n                active={theme === opt.value}\n                onClick={() => setTheme(opt.value)}\n                swatch={opt.swatch}\n                showBrandState\n                mode={mode}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.variant}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {variantOptions.map((opt) => (\n              <ToggleButton\n                key={opt.value}\n                label={opt.label}\n                active={variant === opt.value}\n                onClick={() => setVariant(opt.value)}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{switch-BbFl5b4t.cjs → switch-CEoT3MgX.cjs}

@@ -1,4 +1,3 @@
-require("./chunk-B_GkZjkl.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/forms/switch/Switch.tsx
@@ -58,4 +57,4 @@ Object.defineProperty(exports, "Switch", {
 	}
 });
 
-//# sourceMappingURL=switch-BbFl5b4t.cjs.map
+//# sourceMappingURL=switch-CEoT3MgX.cjs.map

package/dist/chunks/{switch-BbFl5b4t.cjs.map → switch-CEoT3MgX.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"switch-BbFl5b4t.cjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nfunction getEffectiveDir(dir: string | undefined): \"ltr\" | \"rtl\" {\n  if (dir === \"rtl\" || dir === \"ltr\") return dir;\n  if (typeof document !== \"undefined\") {\n    if (document.documentElement.getAttribute(\"dir\") === \"rtl\") return \"rtl\";\n  }\n  return \"ltr\";\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className = \"\", label, error, id, checked, dir, ...props }, ref) => {\n    const generatedId = useId();\n    const switchId = id || `switch-${sanitizeId(generatedId)}`;\n    const isRtl = getEffectiveDir(dir) === \"rtl\";\n\n    const thumbClass = checked\n      ? isRtl\n        ? \"translate-x-1\"\n        : \"translate-x-6\"\n      : isRtl\n        ? \"translate-x-6\"\n        : \"translate-x-1\";\n\n    return (\n      <div\n        className={`flex items-center gap-2 ${className}`.trim().replace(/\\s+/g, \" \")}\n        dir={dir}\n      >\n        <label\n          htmlFor={switchId}\n          dir=\"ltr\"\n          className={`\n            relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\n            disabled:cursor-not-allowed disabled:opacity-50\n            ${checked ? \"bg-ds-accent\" : \"bg-ds-surface-5 ring-1 ring-ds-border-field\"}\n          `\n            .trim()\n            .replace(/\\s+/g, \" \")}\n        >\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={switchId}\n            className=\"sr-only\"\n            checked={checked}\n            {...props}\n          />\n          <span\n            className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-md ring-1 ring-ds-border-field transition-all duration-300 ease-in-out ${thumbClass}`}\n          />\n        </label>\n        {label && (\n          <label\n            htmlFor={switchId}\n            className=\"cursor-pointer text-sm font-medium leading-none text-ds-1 text-start peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n          >\n            {label}\n          </label>\n        )}\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,SAAS,gBAAgB,KAAwC;AAC/D,KAAI,QAAQ,SAAS,QAAQ,MAAO,QAAO;AAC3C,KAAI,OAAO,aAAa;MAClB,SAAS,gBAAgB,aAAa,MAAM,KAAK,MAAO,QAAO;;AAErE,QAAO;;AAGT,IAAa,UAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,KAAK,GAAG,SAAS,QAAQ;CACrE,MAAM,eAAA,GAAA,MAAA,QAAqB;CAC3B,MAAM,WAAW,MAAM,UAAU,WAAW,YAAY;CACxD,MAAM,QAAQ,gBAAgB,IAAI,KAAK;CAEvC,MAAM,aAAa,UACf,QACE,kBACA,kBACF,QACE,kBACA;AAEN,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAW,2BAA2B,YAAY,MAAM,CAAC,QAAQ,QAAQ,IAAI;EACxE;YAFP;GAIE,iBAAA,GAAA,kBAAA,MAAC,SAAD;IACE,SAAS;IACT,KAAI;IACJ,WAAW;;;;cAIP,UAAU,iBAAiB,8CAA8C;YAE1E,MAAM,CACN,QAAQ,QAAQ,IAAI;cAVzB,CAYE,iBAAA,GAAA,kBAAA,KAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;KACJ,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,QAAD,EACE,WAAW,gJAAgJ,cAC3J,CAAA,CACI;;GACP,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA;GAET,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,OAAO,cAAc"}
+{"version":3,"file":"switch-CEoT3MgX.cjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nfunction getEffectiveDir(dir: string | undefined): \"ltr\" | \"rtl\" {\n  if (dir === \"rtl\" || dir === \"ltr\") return dir;\n  if (typeof document !== \"undefined\") {\n    if (document.documentElement.getAttribute(\"dir\") === \"rtl\") return \"rtl\";\n  }\n  return \"ltr\";\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className = \"\", label, error, id, checked, dir, ...props }, ref) => {\n    const generatedId = useId();\n    const switchId = id || `switch-${sanitizeId(generatedId)}`;\n    const isRtl = getEffectiveDir(dir) === \"rtl\";\n\n    const thumbClass = checked\n      ? isRtl\n        ? \"translate-x-1\"\n        : \"translate-x-6\"\n      : isRtl\n        ? \"translate-x-6\"\n        : \"translate-x-1\";\n\n    return (\n      <div\n        className={`flex items-center gap-2 ${className}`.trim().replace(/\\s+/g, \" \")}\n        dir={dir}\n      >\n        <label\n          htmlFor={switchId}\n          dir=\"ltr\"\n          className={`\n            relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\n            disabled:cursor-not-allowed disabled:opacity-50\n            ${checked ? \"bg-ds-accent\" : \"bg-ds-surface-5 ring-1 ring-ds-border-field\"}\n          `\n            .trim()\n            .replace(/\\s+/g, \" \")}\n        >\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={switchId}\n            className=\"sr-only\"\n            checked={checked}\n            {...props}\n          />\n          <span\n            className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-md ring-1 ring-ds-border-field transition-all duration-300 ease-in-out ${thumbClass}`}\n          />\n        </label>\n        {label && (\n          <label\n            htmlFor={switchId}\n            className=\"cursor-pointer text-sm font-medium leading-none text-ds-1 text-start peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n          >\n            {label}\n          </label>\n        )}\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,GAAG;AAE1E,SAAS,gBAAgB,KAAwC;CAC/D,IAAI,QAAQ,SAAS,QAAQ,OAAO,OAAO;CAC3C,IAAI,OAAO,aAAa;MAClB,SAAS,gBAAgB,aAAa,KAAK,MAAM,OAAO,OAAO;CAAA;CAErE,OAAO;AACT;AAEA,IAAa,UAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,KAAK,GAAG,SAAS,QAAQ;CACrE,MAAM,eAAA,GAAA,MAAA,OAAoB;CAC1B,MAAM,WAAW,MAAM,UAAU,WAAW,WAAW;CACvD,MAAM,QAAQ,gBAAgB,GAAG,MAAM;CAEvC,MAAM,aAAa,UACf,QACE,kBACA,kBACF,QACE,kBACA;CAEN,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAW,2BAA2B,YAAY,KAAK,EAAE,QAAQ,QAAQ,GAAG;EACvE;YAFP;GAIE,iBAAA,GAAA,kBAAA,MAAC,SAAD;IACE,SAAS;IACT,KAAI;IACJ,WAAW;;;;cAIP,UAAU,iBAAiB,8CAA8C;YAE1E,KAAK,EACL,QAAQ,QAAQ,GAAG;cAVxB,CAYE,iBAAA,GAAA,kBAAA,KAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;IACL,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD,EACE,WAAW,gJAAgJ,aAC5J,CAAA,CACI;;GACN,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;GACI,CAAA;GAER,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;GAAS,CAAA;EAElE;;AAET,CACF;AAEA,OAAO,cAAc"}

package/dist/chunks/{switch--68scepb.mjs → switch-DUnNe4xP.mjs}

@@ -52,4 +52,4 @@ Switch.displayName = "Switch";
 //#endregion
 export { Switch as t };
 
-//# sourceMappingURL=switch--68scepb.mjs.map
+//# sourceMappingURL=switch-DUnNe4xP.mjs.map

package/dist/chunks/{switch--68scepb.mjs.map → switch-DUnNe4xP.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"switch--68scepb.mjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nfunction getEffectiveDir(dir: string | undefined): \"ltr\" | \"rtl\" {\n  if (dir === \"rtl\" || dir === \"ltr\") return dir;\n  if (typeof document !== \"undefined\") {\n    if (document.documentElement.getAttribute(\"dir\") === \"rtl\") return \"rtl\";\n  }\n  return \"ltr\";\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className = \"\", label, error, id, checked, dir, ...props }, ref) => {\n    const generatedId = useId();\n    const switchId = id || `switch-${sanitizeId(generatedId)}`;\n    const isRtl = getEffectiveDir(dir) === \"rtl\";\n\n    const thumbClass = checked\n      ? isRtl\n        ? \"translate-x-1\"\n        : \"translate-x-6\"\n      : isRtl\n        ? \"translate-x-6\"\n        : \"translate-x-1\";\n\n    return (\n      <div\n        className={`flex items-center gap-2 ${className}`.trim().replace(/\\s+/g, \" \")}\n        dir={dir}\n      >\n        <label\n          htmlFor={switchId}\n          dir=\"ltr\"\n          className={`\n            relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\n            disabled:cursor-not-allowed disabled:opacity-50\n            ${checked ? \"bg-ds-accent\" : \"bg-ds-surface-5 ring-1 ring-ds-border-field\"}\n          `\n            .trim()\n            .replace(/\\s+/g, \" \")}\n        >\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={switchId}\n            className=\"sr-only\"\n            checked={checked}\n            {...props}\n          />\n          <span\n            className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-md ring-1 ring-ds-border-field transition-all duration-300 ease-in-out ${thumbClass}`}\n          />\n        </label>\n        {label && (\n          <label\n            htmlFor={switchId}\n            className=\"cursor-pointer text-sm font-medium leading-none text-ds-1 text-start peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n          >\n            {label}\n          </label>\n        )}\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,SAAS,gBAAgB,KAAwC;AAC/D,KAAI,QAAQ,SAAS,QAAQ,MAAO,QAAO;AAC3C,KAAI,OAAO,aAAa;MAClB,SAAS,gBAAgB,aAAa,MAAM,KAAK,MAAO,QAAO;;AAErE,QAAO;;AAGT,IAAa,SAAS,YACnB,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,KAAK,GAAG,SAAS,QAAQ;CACrE,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,MAAM,UAAU,WAAW,YAAY;CACxD,MAAM,QAAQ,gBAAgB,IAAI,KAAK;CAEvC,MAAM,aAAa,UACf,QACE,kBACA,kBACF,QACE,kBACA;AAEN,QACE,qBAAC,OAAD;EACE,WAAW,2BAA2B,YAAY,MAAM,CAAC,QAAQ,QAAQ,IAAI;EACxE;YAFP;GAIE,qBAAC,SAAD;IACE,SAAS;IACT,KAAI;IACJ,WAAW;;;;cAIP,UAAU,iBAAiB,8CAA8C;YAE1E,MAAM,CACN,QAAQ,QAAQ,IAAI;cAVzB,CAYE,oBAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;KACJ,CAAA,EACF,oBAAC,QAAD,EACE,WAAW,gJAAgJ,cAC3J,CAAA,CACI;;GACP,SACC,oBAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA;GAET,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,OAAO,cAAc"}
+{"version":3,"file":"switch-DUnNe4xP.mjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nfunction getEffectiveDir(dir: string | undefined): \"ltr\" | \"rtl\" {\n  if (dir === \"rtl\" || dir === \"ltr\") return dir;\n  if (typeof document !== \"undefined\") {\n    if (document.documentElement.getAttribute(\"dir\") === \"rtl\") return \"rtl\";\n  }\n  return \"ltr\";\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className = \"\", label, error, id, checked, dir, ...props }, ref) => {\n    const generatedId = useId();\n    const switchId = id || `switch-${sanitizeId(generatedId)}`;\n    const isRtl = getEffectiveDir(dir) === \"rtl\";\n\n    const thumbClass = checked\n      ? isRtl\n        ? \"translate-x-1\"\n        : \"translate-x-6\"\n      : isRtl\n        ? \"translate-x-6\"\n        : \"translate-x-1\";\n\n    return (\n      <div\n        className={`flex items-center gap-2 ${className}`.trim().replace(/\\s+/g, \" \")}\n        dir={dir}\n      >\n        <label\n          htmlFor={switchId}\n          dir=\"ltr\"\n          className={`\n            relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\n            disabled:cursor-not-allowed disabled:opacity-50\n            ${checked ? \"bg-ds-accent\" : \"bg-ds-surface-5 ring-1 ring-ds-border-field\"}\n          `\n            .trim()\n            .replace(/\\s+/g, \" \")}\n        >\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={switchId}\n            className=\"sr-only\"\n            checked={checked}\n            {...props}\n          />\n          <span\n            className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-md ring-1 ring-ds-border-field transition-all duration-300 ease-in-out ${thumbClass}`}\n          />\n        </label>\n        {label && (\n          <label\n            htmlFor={switchId}\n            className=\"cursor-pointer text-sm font-medium leading-none text-ds-1 text-start peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n          >\n            {label}\n          </label>\n        )}\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,GAAG;AAE1E,SAAS,gBAAgB,KAAwC;CAC/D,IAAI,QAAQ,SAAS,QAAQ,OAAO,OAAO;CAC3C,IAAI,OAAO,aAAa;MAClB,SAAS,gBAAgB,aAAa,KAAK,MAAM,OAAO,OAAO;CAAA;CAErE,OAAO;AACT;AAEA,IAAa,SAAS,YACnB,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,KAAK,GAAG,SAAS,QAAQ;CACrE,MAAM,cAAc,MAAM;CAC1B,MAAM,WAAW,MAAM,UAAU,WAAW,WAAW;CACvD,MAAM,QAAQ,gBAAgB,GAAG,MAAM;CAEvC,MAAM,aAAa,UACf,QACE,kBACA,kBACF,QACE,kBACA;CAEN,OACE,qBAAC,OAAD;EACE,WAAW,2BAA2B,YAAY,KAAK,EAAE,QAAQ,QAAQ,GAAG;EACvE;YAFP;GAIE,qBAAC,SAAD;IACE,SAAS;IACT,KAAI;IACJ,WAAW;;;;cAIP,UAAU,iBAAiB,8CAA8C;YAE1E,KAAK,EACL,QAAQ,QAAQ,GAAG;cAVxB,CAYE,oBAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;IACL,CAAA,GACD,oBAAC,QAAD,EACE,WAAW,gJAAgJ,aAC5J,CAAA,CACI;;GACN,SACC,oBAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;GACI,CAAA;GAER,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;GAAS,CAAA;EAElE;;AAET,CACF;AAEA,OAAO,cAAc"}

package/dist/chunks/{textarea-U_JeSWI3.cjs → textarea-Bschfj24.cjs}

@@ -1,5 +1,4 @@
-require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-LRbEQHYs.cjs");
+const require_utils = require("./utils-CoA0q63n.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -60,4 +59,4 @@ Object.defineProperty(exports, "Textarea", {
 	}
 });
 
-//# sourceMappingURL=textarea-U_JeSWI3.cjs.map
+//# sourceMappingURL=textarea-Bschfj24.cjs.map

package/dist/chunks/{textarea-U_JeSWI3.cjs.map → textarea-Bschfj24.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea-U_JeSWI3.cjs","names":[],"sources":["../../src/components/forms/textarea/Textarea.tsx"],"sourcesContent":["import type { TextareaProps } from \"./types\";\nimport { forwardRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className = \"\", label, error, helperText, disabled, ...props }, ref) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n\n    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n      const { left, top } = event.currentTarget.getBoundingClientRect();\n      mouseX.set(event.clientX - left);\n      mouseY.set(event.clientY - top);\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {label}\n          </label>\n        )}\n\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/textarea rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n            error ? \"border-destructive\" : \"border-ds-border-2\",\n          )}\n        >\n          <textarea\n            ref={ref}\n            disabled={disabled}\n            className={mergeClassNames(\n              \"flex min-h-[80px] w-full rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out placeholder:text-ds-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus disabled:cursor-not-allowed disabled:opacity-50 resize-none\",\n              error &&\n                \"border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive\",\n              className,\n            )}\n            {...props}\n          />\n        </motion.div>\n\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n        {helperText && !error && (\n          <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;;AAMA,IAAa,YAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,YAAY,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAChC,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAEhC,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;AAGjC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,WAAU;cACd;IACK,CAAA;GAGV,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,WACb,SACA,cAAA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;IACD,aAAa,CAAC,WAAW,kBAAkB,KAAA;IAC3C,cAAc,CAAC,iBAAiB,WAAW,KAAK,GAAG,KAAA;IACnD,cAAc,CAAC,iBAAiB,WAAW,MAAM,GAAG,KAAA;IACpD,WAAW,cAAA,gBACT,2FACA,QAAQ,uBAAuB,qBAChC;cAED,iBAAA,GAAA,kBAAA,KAAC,YAAD;KACO;KACK;KACV,WAAW,cAAA,gBACT,mTACA,SACE,mGACF,UACD;KACD,GAAI;KACJ,CAAA;IACS,CAAA;GAEZ,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAErE,cAAc,CAAC,SACd,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA0B;IAAe,CAAA;GAEpD;;EAGX;AAED,SAAS,cAAc"}
+{"version":3,"file":"textarea-Bschfj24.cjs","names":[],"sources":["../../src/components/forms/textarea/Textarea.tsx"],"sourcesContent":["import type { TextareaProps } from \"./types\";\nimport { forwardRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className = \"\", label, error, helperText, disabled, ...props }, ref) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n\n    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n      const { left, top } = event.currentTarget.getBoundingClientRect();\n      mouseX.set(event.clientX - left);\n      mouseY.set(event.clientY - top);\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {label}\n          </label>\n        )}\n\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/textarea rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n            error ? \"border-destructive\" : \"border-ds-border-2\",\n          )}\n        >\n          <textarea\n            ref={ref}\n            disabled={disabled}\n            className={mergeClassNames(\n              \"flex min-h-[80px] w-full rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out placeholder:text-ds-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus disabled:cursor-not-allowed disabled:opacity-50 resize-none\",\n              error &&\n                \"border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive\",\n              className,\n            )}\n            {...props}\n          />\n        </motion.div>\n\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n        {helperText && !error && (\n          <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;AAMA,IAAa,YAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,YAAY,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,KAAK;CAC5C,MAAM,UAAA,GAAA,cAAA,gBAAwB,CAAC;CAC/B,MAAM,UAAA,GAAA,cAAA,gBAAwB,CAAC;CAE/B,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,sBAAsB;EAChE,OAAO,IAAI,MAAM,UAAU,IAAI;EAC/B,OAAO,IAAI,MAAM,UAAU,GAAG;CAChC;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,WAAU;cACd;GACI,CAAA;GAGT,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,WACb,SACA,cAAA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;kBAK3C;IACA,aAAa,CAAC,WAAW,kBAAkB,KAAA;IAC3C,cAAc,CAAC,iBAAiB,WAAW,IAAI,IAAI,KAAA;IACnD,cAAc,CAAC,iBAAiB,WAAW,KAAK,IAAI,KAAA;IACpD,WAAW,cAAA,gBACT,2FACA,QAAQ,uBAAuB,oBACjC;cAEA,iBAAA,GAAA,kBAAA,KAAC,YAAD;KACO;KACK;KACV,WAAW,cAAA,gBACT,mTACA,SACE,mGACF,SACF;KACA,GAAI;IACL,CAAA;GACS,CAAA;GAEX,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;GAAS,CAAA;GAEpE,cAAc,CAAC,SACd,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA0B;GAAc,CAAA;EAEpD;;AAET,CACF;AAEA,SAAS,cAAc"}

package/dist/chunks/{textarea-CEj9voUJ.mjs → textarea-CfeKo5HA.mjs}

@@ -1,4 +1,4 @@
-import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
+import { n as mergeClassNames } from "./utils-Dc7j29ec.mjs";
 import { forwardRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
@@ -54,4 +54,4 @@ Textarea.displayName = "Textarea";
 //#endregion
 export { Textarea as t };
 
-//# sourceMappingURL=textarea-CEj9voUJ.mjs.map
+//# sourceMappingURL=textarea-CfeKo5HA.mjs.map

package/dist/chunks/{textarea-CEj9voUJ.mjs.map → textarea-CfeKo5HA.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea-CEj9voUJ.mjs","names":[],"sources":["../../src/components/forms/textarea/Textarea.tsx"],"sourcesContent":["import type { TextareaProps } from \"./types\";\nimport { forwardRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className = \"\", label, error, helperText, disabled, ...props }, ref) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n\n    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n      const { left, top } = event.currentTarget.getBoundingClientRect();\n      mouseX.set(event.clientX - left);\n      mouseY.set(event.clientY - top);\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {label}\n          </label>\n        )}\n\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/textarea rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n            error ? \"border-destructive\" : \"border-ds-border-2\",\n          )}\n        >\n          <textarea\n            ref={ref}\n            disabled={disabled}\n            className={mergeClassNames(\n              \"flex min-h-[80px] w-full rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out placeholder:text-ds-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus disabled:cursor-not-allowed disabled:opacity-50 resize-none\",\n              error &&\n                \"border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive\",\n              className,\n            )}\n            {...props}\n          />\n        </motion.div>\n\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n        {helperText && !error && (\n          <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;AAMA,IAAa,WAAW,YACrB,EAAE,YAAY,IAAI,OAAO,OAAO,YAAY,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,SAAS,eAAe,EAAE;CAChC,MAAM,SAAS,eAAe,EAAE;CAEhC,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;AAGjC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,oBAAC,SAAD;IAAO,WAAU;cACd;IACK,CAAA;GAGV,oBAAC,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,WACb,SACA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;IACD,aAAa,CAAC,WAAW,kBAAkB,KAAA;IAC3C,cAAc,CAAC,iBAAiB,WAAW,KAAK,GAAG,KAAA;IACnD,cAAc,CAAC,iBAAiB,WAAW,MAAM,GAAG,KAAA;IACpD,WAAW,gBACT,2FACA,QAAQ,uBAAuB,qBAChC;cAED,oBAAC,YAAD;KACO;KACK;KACV,WAAW,gBACT,mTACA,SACE,mGACF,UACD;KACD,GAAI;KACJ,CAAA;IACS,CAAA;GAEZ,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAErE,cAAc,CAAC,SACd,oBAAC,KAAD;IAAG,WAAU;cAA0B;IAAe,CAAA;GAEpD;;EAGX;AAED,SAAS,cAAc"}
+{"version":3,"file":"textarea-CfeKo5HA.mjs","names":[],"sources":["../../src/components/forms/textarea/Textarea.tsx"],"sourcesContent":["import type { TextareaProps } from \"./types\";\nimport { forwardRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className = \"\", label, error, helperText, disabled, ...props }, ref) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n\n    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n      const { left, top } = event.currentTarget.getBoundingClientRect();\n      mouseX.set(event.clientX - left);\n      mouseY.set(event.clientY - top);\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {label}\n          </label>\n        )}\n\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/textarea rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n            error ? \"border-destructive\" : \"border-ds-border-2\",\n          )}\n        >\n          <textarea\n            ref={ref}\n            disabled={disabled}\n            className={mergeClassNames(\n              \"flex min-h-[80px] w-full rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out placeholder:text-ds-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus disabled:cursor-not-allowed disabled:opacity-50 resize-none\",\n              error &&\n                \"border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive\",\n              className,\n            )}\n            {...props}\n          />\n        </motion.div>\n\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n        {helperText && !error && (\n          <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;AAMA,IAAa,WAAW,YACrB,EAAE,YAAY,IAAI,OAAO,OAAO,YAAY,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,SAAS,eAAe,CAAC;CAC/B,MAAM,SAAS,eAAe,CAAC;CAE/B,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,sBAAsB;EAChE,OAAO,IAAI,MAAM,UAAU,IAAI;EAC/B,OAAO,IAAI,MAAM,UAAU,GAAG;CAChC;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,oBAAC,SAAD;IAAO,WAAU;cACd;GACI,CAAA;GAGT,oBAAC,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,WACb,SACA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;kBAK3C;IACA,aAAa,CAAC,WAAW,kBAAkB,KAAA;IAC3C,cAAc,CAAC,iBAAiB,WAAW,IAAI,IAAI,KAAA;IACnD,cAAc,CAAC,iBAAiB,WAAW,KAAK,IAAI,KAAA;IACpD,WAAW,gBACT,2FACA,QAAQ,uBAAuB,oBACjC;cAEA,oBAAC,YAAD;KACO;KACK;KACV,WAAW,gBACT,mTACA,SACE,mGACF,SACF;KACA,GAAI;IACL,CAAA;GACS,CAAA;GAEX,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;GAAS,CAAA;GAEpE,cAAc,CAAC,SACd,oBAAC,KAAD;IAAG,WAAU;cAA0B;GAAc,CAAA;EAEpD;;AAET,CACF;AAEA,SAAS,cAAc"}

package/dist/chunks/{theme-koPrLKQv.mjs → theme-BXML6jHE.mjs}

@@ -76,4 +76,4 @@ function useThemeContext() {
 //#endregion
 export { useThemeContext as n, ThemeProvider as t };
 
-//# sourceMappingURL=theme-koPrLKQv.mjs.map
+//# sourceMappingURL=theme-BXML6jHE.mjs.map