analytica-frontend-lib 1.2.2 → 1.2.4

package/dist/Stepper/index.js

@@ -251,7 +251,6 @@ var Step = ({
             ${sizeClasses.indicator} ${stateClasses.indicator}
             rounded-full flex items-center justify-center relative
             flex-none transition-all duration-300 ease-out
-            w-4 h-4 sm:w-5 sm:h-5 md:w-5 md:h-5 lg:w-6 lg:h-6
           `,
                   "aria-label": getAriaLabel(),
                   children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -269,10 +268,7 @@ var Step = ({
                       size: sizeClasses.indicatorTextSize,
                       weight: "medium",
                       color: "",
-                      className: cn(
-                        stateClasses.indicatorText,
-                        "leading-none text-2xs sm:text-xs"
-                      ),
+                      className: cn(stateClasses.indicatorText, "leading-none"),
                       children: stepNumber
                     }
                   )
@@ -286,7 +282,7 @@ var Step = ({
                   color: "",
                   className: cn(
                     stateClasses.label,
-                    "leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full text-2xs sm:text-xs md:text-xs lg:text-sm whitespace-normal"
+                    "leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full whitespace-normal"
                   ),
                   children: step.label
                 }

package/dist/Stepper/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Stepper/Stepper.tsx","../../src/utils/utils.ts","../../src/components/Text/Text.tsx"],"sourcesContent":["import Text from '../Text/Text';\nimport { Check } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Stepper size variants\n */\ntype StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Step state variants\n */\ntype StepState = 'pending' | 'current' | 'completed';\n\n/**\n * Individual step data interface\n */\nexport interface StepData {\n  /** Unique identifier for the step */\n  id: string;\n  /** Label text for the step */\n  label: string;\n  /** Current state of the step */\n  state: StepState;\n}\n\n/**\n * Size configurations - Following design system pattern from CSS specifications\n * Small size based on exact CSS: width 58px, height 38px, gap 8px\n */\nconst SIZE_CLASSES = {\n  small: {\n    container: 'gap-2', // 8px gap as specified in CSS\n    stepWidth: 'w-[58px]', // exact 58px from CSS\n    stepHeight: 'h-[38px]', // exact 38px from CSS\n    indicator: 'w-5 h-5', // 20px as specified\n    progressBar: 'h-0.5', // 2px as specified\n    indicatorTextSize: '2xs', // 10px as specified\n    labelTextSize: 'xs', // 12px as specified\n    iconSize: 'w-3 h-3', // 12px\n  },\n  medium: {\n    container: 'gap-3', // 12px (8px + 4px progression)\n    stepWidth: 'w-[110px]', // 110px (increased from 90px to fit \"Endereço Residencial\")\n    stepHeight: 'h-[48px]', // 48px (increased from 46px for better proportion)\n    indicator: 'w-6 h-6', // 24px (20px + 4px progression)\n    progressBar: 'h-0.5', // 2px maintained for consistency\n    indicatorTextSize: '2xs', // 10px maintained for readability\n    labelTextSize: 'xs', // 12px maintained\n    iconSize: 'w-3.5 h-3.5', // 14px\n  },\n  large: {\n    container: 'gap-4', // 16px (12px + 4px progression)\n    stepWidth: 'w-[160px]', // 160px (increased from 140px to fit \"Endereço Residencial\")\n    stepHeight: 'h-[58px]', // 58px (increased from 54px for better proportion)\n    indicator: 'w-7 h-7', // 28px (24px + 4px progression)\n    progressBar: 'h-1', // 4px (increased for better visibility)\n    indicatorTextSize: 'xs', // 12px (increased for larger size)\n    labelTextSize: 'sm', // 14px (increased for larger size)\n    iconSize: 'w-4 h-4', // 16px\n  },\n  extraLarge: {\n    container: 'gap-5', // 20px (16px + 4px progression)\n    stepWidth: 'w-[200px]', // 200px (increased from 180px to ensure \"Endereço Residencial\" fits)\n    stepHeight: 'h-[68px]', // 68px (increased from 62px for better proportion)\n    indicator: 'w-8 h-8', // 32px (28px + 4px progression)\n    progressBar: 'h-1', // 4px maintained\n    indicatorTextSize: 'xs', // 12px maintained for readability\n    labelTextSize: 'sm', // 14px maintained\n    iconSize: 'w-[18px] h-[18px]', // 18px\n  },\n} as const;\n\n/**\n * State configurations using exact colors from CSS specs\n * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)\n * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido\n * completed: #1C61B2 = primary-800 (etapa concluída)\n * text color: #FEFEFF = text\n */\nconst STATE_CLASSES = {\n  pending: {\n    progressBar: 'bg-text-400', // #A3A3A3\n    indicator: 'bg-text-400', // #A3A3A3\n    indicatorText: 'text-white', // Branco para contraste com background cinza\n    label: 'text-text-400', // #A3A3A3\n  },\n  current: {\n    progressBar: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n    indicator: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n    indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n    label: 'text-primary-800', // #1C61B2 usando classe Tailwind padrão\n  },\n  completed: {\n    progressBar: 'bg-primary-400', // #48A0E8 para barra quando checked (completed)\n    indicator: 'bg-primary-400', // #48A0E8 para corresponder à barra de progresso\n    indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n    label: 'text-primary-400', // #48A0E8 para corresponder à barra de progresso\n  },\n} as const;\n\n/**\n * Type for size classes\n */\ntype SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];\n\n/**\n * Type for state classes\n */\ntype StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];\n\n/**\n * Props for individual step component\n */\ninterface StepProps {\n  step: StepData;\n  index: number;\n  size: StepperSize;\n  sizeClasses: SizeClassType;\n  stateClasses: StateClassType;\n  isLast: boolean;\n  className?: string;\n}\n\n/**\n * Individual Step component - Based on exact design specifications\n * Layout: flex-column with progress bar at top, then icon+label row\n * Fully responsive for mobile, tablets, and laptops\n */\nexport const Step = ({\n  step,\n  index,\n  size: _size,\n  sizeClasses,\n  stateClasses,\n  isLast: _isLast,\n  className = '',\n}: StepProps) => {\n  const stepNumber = index + 1;\n  const isCompleted = step.state === 'completed';\n\n  // Generate accessible aria-label based on step state\n  const getAriaLabel = () => {\n    let suffix = '';\n    if (step.state === 'completed') {\n      suffix = ' (concluído)';\n    } else if (step.state === 'current') {\n      suffix = ' (atual)';\n    }\n    return `${step.label}${suffix}`;\n  };\n\n  return (\n    <div\n      className={`\n        flex flex-col justify-center items-center pb-2 gap-2\n        ${sizeClasses.stepWidth} ${sizeClasses.stepHeight}\n        flex-none flex-grow\n        ${className}\n        sm:max-w-[100px] md:max-w-[120px] lg:max-w-none xl:max-w-none\n        sm:min-h-[40px] md:min-h-[45px] lg:min-h-none\n        overflow-visible\n      `}\n    >\n      {/* Progress Bar - Full width at top with responsive scaling */}\n      <div\n        className={`\n          w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}\n          rounded-sm flex-none\n        `}\n      />\n\n      {/* Step Content Container - Responsive layout for all devices, no vertical scroll */}\n      <div\n        className={`\n          flex flex-col sm:flex-row items-center\n          gap-1 sm:gap-2 w-full sm:w-auto\n          h-auto sm:h-5 flex-none\n          overflow-visible\n        `}\n      >\n        {/* Step Indicator Circle with responsive sizing */}\n        <div\n          className={`\n            ${sizeClasses.indicator} ${stateClasses.indicator}\n            rounded-full flex items-center justify-center relative\n            flex-none transition-all duration-300 ease-out\n            w-4 h-4 sm:w-5 sm:h-5 md:w-5 md:h-5 lg:w-6 lg:h-6\n          `}\n          aria-label={getAriaLabel()}\n        >\n          {isCompleted ? (\n            <Check\n              weight=\"bold\"\n              className={`\n                ${stateClasses.indicatorText}\n                w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3 md:h-3 lg:w-3.5 lg:h-3.5\n              `}\n            />\n          ) : (\n            <Text\n              size={sizeClasses.indicatorTextSize as '2xs' | 'xs' | 'sm'}\n              weight=\"medium\"\n              color=\"\"\n              className={cn(\n                stateClasses.indicatorText,\n                'leading-none text-2xs sm:text-xs'\n              )}\n            >\n              {stepNumber}\n            </Text>\n          )}\n        </div>\n\n        {/* Step Label with full responsive text sizing, no vertical overflow */}\n        <Text\n          size={sizeClasses.labelTextSize as '2xs' | 'xs' | 'sm' | 'md'}\n          weight=\"medium\"\n          color=\"\"\n          className={cn(\n            stateClasses.label,\n            'leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full text-2xs sm:text-xs md:text-xs lg:text-sm whitespace-normal'\n          )}\n        >\n          {step.label}\n        </Text>\n      </div>\n    </div>\n  );\n};\n\n/**\n * Stepper component props interface\n */\nexport type StepperProps = {\n  /** Array of step data */\n  steps: StepData[];\n  /** Size variant of the stepper */\n  size?: StepperSize;\n  /** Current active step index */\n  currentStep?: number;\n  /** Additional CSS classes */\n  className?: string;\n  /** Step container CSS classes */\n  stepClassName?: string;\n  /** Progress indicator (e.g., \"Etapa 2 de 4\") */\n  showProgress?: boolean;\n  /** Custom progress text */\n  progressText?: string;\n  /** Make stepper responsive (vertical on mobile) */\n  responsive?: boolean;\n};\n\n/**\n * Helper function to calculate step states based on current step\n */\nconst calculateStepStates = (\n  steps: StepData[],\n  currentStep: number\n): StepData[] => {\n  return steps.map((step, index) => {\n    let stepState: StepState;\n\n    if (index < currentStep) {\n      stepState = 'completed';\n    } else if (index === currentStep) {\n      stepState = 'current';\n    } else {\n      stepState = 'pending';\n    }\n\n    return {\n      ...step,\n      state: stepState,\n    };\n  });\n};\n\n/**\n * Helper function to get progress text\n */\nconst getProgressText = (\n  currentStep: number,\n  totalSteps: number,\n  customText?: string\n): string => {\n  if (customText) return customText;\n  return `Etapa ${currentStep + 1} de ${totalSteps}`;\n};\n\n/**\n * Stepper component for Analytica Ensino platforms\n *\n * A progress stepper component that displays a sequence of steps with different states.\n * Follows the exact design specifications with proper spacing, colors, and layout.\n * Fully responsive for mobile, tablets, and laptops.\n *\n * Design specifications:\n * - Based on exact CSS specifications from Figma design\n * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)\n * - Progressive sizing with responsive breakpoints that adapt to device type\n * - Consistent gaps that scale with screen size and device capabilities\n * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)\n * - Responsive design with overflow scroll on smaller devices\n * - Optimized text sizing and layout for each device category\n *\n * @example\n * ```tsx\n * // Basic stepper - automatically responsive for all devices\n * <Stepper steps={steps} currentStep={1} />\n *\n * // Custom styling with full responsive behavior\n * <Stepper steps={steps} size=\"medium\" showProgress responsive />\n * ```\n */\nconst Stepper = ({\n  steps: initialSteps,\n  size = 'medium',\n  currentStep,\n  className = '',\n  stepClassName = '',\n  showProgress = false,\n  progressText,\n  responsive = true,\n}: StepperProps) => {\n  const sizeClasses = SIZE_CLASSES[size];\n\n  // Calculate steps with states if currentStep is provided\n  const steps =\n    currentStep !== undefined\n      ? calculateStepStates(initialSteps, currentStep)\n      : initialSteps;\n\n  return (\n    <fieldset\n      className={cn(\n        'flex flex-col gap-4 sm:gap-5 md:gap-6',\n        className,\n        'border-0 p-0 m-0'\n      )}\n    >\n      <legend className=\"absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0\">\n        Stepper de formulário\n      </legend>\n      {/* Progress indicator with responsive text */}\n      {showProgress && currentStep !== undefined && (\n        <Text\n          size=\"sm\"\n          weight=\"medium\"\n          className=\"text-text-600 text-center sm:text-left text-xs sm:text-sm\"\n        >\n          {getProgressText(currentStep, steps.length, progressText)}\n        </Text>\n      )}\n\n      {/* Stepper container - Fully responsive for all devices with horizontal scroll only */}\n      <div\n        className={cn(\n          'flex items-center',\n          sizeClasses.container,\n          responsive\n            ? 'flex-row overflow-x-auto overflow-y-hidden scrollbar-hide justify-start sm:justify-center md:justify-center lg:justify-center'\n            : 'flex-row justify-center',\n          'px-2 sm:px-4 md:px-6 lg:px-0 max-w-full min-w-0 gap-2 sm:gap-3 md:gap-4 lg:gap-4'\n        )}\n        role=\"tablist\"\n        aria-label=\"Progress steps\"\n      >\n        {steps.map((step, index) => {\n          const stateClasses = STATE_CLASSES[step.state];\n\n          return (\n            <Step\n              key={step.id}\n              step={step}\n              index={index}\n              size={size}\n              sizeClasses={sizeClasses}\n              stateClasses={stateClasses}\n              isLast={index === steps.length - 1}\n              className={stepClassName}\n            />\n          );\n        })}\n      </div>\n    </fieldset>\n  );\n};\n\nexport default Stepper;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n  hexColor: string | undefined,\n  isDark: boolean\n): string | undefined {\n  if (!hexColor) return undefined;\n  // Remove o '#' se existir\n  let color = hexColor.replace(/^#/, '').toLowerCase();\n\n  if (isDark) {\n    // Se está em dark mode, sempre remove opacidade se existir\n    if (color.length === 8) {\n      color = color.slice(0, 6);\n    }\n    return `#${color}`;\n  } else {\n    // Se não está em dark mode (light mode)\n    let resultColor: string;\n    if (color.length === 6) {\n      // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n      resultColor = `#${color}4d`;\n    } else if (color.length === 8) {\n      // Já tem opacidade, retorna como está\n      resultColor = `#${color}`;\n    } else {\n      // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n      resultColor = `#${color}`;\n    }\n    return resultColor;\n  }\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":"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","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../src/components/Stepper/Stepper.tsx","../../src/utils/utils.ts","../../src/components/Text/Text.tsx"],"sourcesContent":["import Text from '../Text/Text';\nimport { Check } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Stepper size variants\n */\ntype StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Step state variants\n */\ntype StepState = 'pending' | 'current' | 'completed';\n\n/**\n * Individual step data interface\n */\nexport interface StepData {\n  /** Unique identifier for the step */\n  id: string;\n  /** Label text for the step */\n  label: string;\n  /** Current state of the step */\n  state: StepState;\n}\n\n/**\n * Size configurations - Following design system pattern from CSS specifications\n * Small size based on exact CSS: width 58px, height 38px, gap 8px\n */\nconst SIZE_CLASSES = {\n  small: {\n    container: 'gap-2', // 8px gap as specified in CSS\n    stepWidth: 'w-[58px]', // exact 58px from CSS\n    stepHeight: 'h-[38px]', // exact 38px from CSS\n    indicator: 'w-5 h-5', // 20px as specified\n    progressBar: 'h-0.5', // 2px as specified\n    indicatorTextSize: '2xs', // 10px as specified\n    labelTextSize: 'xs', // 12px as specified\n    iconSize: 'w-3 h-3', // 12px\n  },\n  medium: {\n    container: 'gap-3', // 12px (8px + 4px progression)\n    stepWidth: 'w-[110px]', // 110px (increased from 90px to fit \"Endereço Residencial\")\n    stepHeight: 'h-[48px]', // 48px (increased from 46px for better proportion)\n    indicator: 'w-6 h-6', // 24px (20px + 4px progression)\n    progressBar: 'h-0.5', // 2px maintained for consistency\n    indicatorTextSize: '2xs', // 10px maintained for readability\n    labelTextSize: 'xs', // 12px maintained\n    iconSize: 'w-3.5 h-3.5', // 14px\n  },\n  large: {\n    container: 'gap-4', // 16px (12px + 4px progression)\n    stepWidth: 'w-[160px]', // 160px (increased from 140px to fit \"Endereço Residencial\")\n    stepHeight: 'h-[58px]', // 58px (increased from 54px for better proportion)\n    indicator: 'w-7 h-7', // 28px (24px + 4px progression)\n    progressBar: 'h-1', // 4px (increased for better visibility)\n    indicatorTextSize: 'xs', // 12px (increased for larger size)\n    labelTextSize: 'sm', // 14px (increased for larger size)\n    iconSize: 'w-4 h-4', // 16px\n  },\n  extraLarge: {\n    container: 'gap-5', // 20px (16px + 4px progression)\n    stepWidth: 'w-[200px]', // 200px (increased from 180px to ensure \"Endereço Residencial\" fits)\n    stepHeight: 'h-[68px]', // 68px (increased from 62px for better proportion)\n    indicator: 'w-8 h-8', // 32px (28px + 4px progression)\n    progressBar: 'h-1', // 4px maintained\n    indicatorTextSize: 'xs', // 12px maintained for readability\n    labelTextSize: 'sm', // 14px maintained\n    iconSize: 'w-[18px] h-[18px]', // 18px\n  },\n} as const;\n\n/**\n * State configurations using exact colors from CSS specs\n * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)\n * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido\n * completed: #1C61B2 = primary-800 (etapa concluída)\n * text color: #FEFEFF = text\n */\nconst STATE_CLASSES = {\n  pending: {\n    progressBar: 'bg-text-400', // #A3A3A3\n    indicator: 'bg-text-400', // #A3A3A3\n    indicatorText: 'text-white', // Branco para contraste com background cinza\n    label: 'text-text-400', // #A3A3A3\n  },\n  current: {\n    progressBar: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n    indicator: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n    indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n    label: 'text-primary-800', // #1C61B2 usando classe Tailwind padrão\n  },\n  completed: {\n    progressBar: 'bg-primary-400', // #48A0E8 para barra quando checked (completed)\n    indicator: 'bg-primary-400', // #48A0E8 para corresponder à barra de progresso\n    indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n    label: 'text-primary-400', // #48A0E8 para corresponder à barra de progresso\n  },\n} as const;\n\n/**\n * Type for size classes\n */\ntype SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];\n\n/**\n * Type for state classes\n */\ntype StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];\n\n/**\n * Props for individual step component\n */\ninterface StepProps {\n  step: StepData;\n  index: number;\n  size: StepperSize;\n  sizeClasses: SizeClassType;\n  stateClasses: StateClassType;\n  isLast: boolean;\n  className?: string;\n}\n\n/**\n * Individual Step component - Based on exact design specifications\n * Layout: flex-column with progress bar at top, then icon+label row\n * Fully responsive for mobile, tablets, and laptops\n */\nexport const Step = ({\n  step,\n  index,\n  size: _size,\n  sizeClasses,\n  stateClasses,\n  isLast: _isLast,\n  className = '',\n}: StepProps) => {\n  const stepNumber = index + 1;\n  const isCompleted = step.state === 'completed';\n\n  // Generate accessible aria-label based on step state\n  const getAriaLabel = () => {\n    let suffix = '';\n    if (step.state === 'completed') {\n      suffix = ' (concluído)';\n    } else if (step.state === 'current') {\n      suffix = ' (atual)';\n    }\n    return `${step.label}${suffix}`;\n  };\n\n  return (\n    <div\n      className={`\n        flex flex-col justify-center items-center pb-2 gap-2\n        ${sizeClasses.stepWidth} ${sizeClasses.stepHeight}\n        flex-none flex-grow\n        ${className}\n        sm:max-w-[100px] md:max-w-[120px] lg:max-w-none xl:max-w-none\n        sm:min-h-[40px] md:min-h-[45px] lg:min-h-none\n        overflow-visible\n      `}\n    >\n      {/* Progress Bar - Full width at top with responsive scaling */}\n      <div\n        className={`\n          w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}\n          rounded-sm flex-none\n        `}\n      />\n\n      {/* Step Content Container - Responsive layout for all devices, no vertical scroll */}\n      <div\n        className={`\n          flex flex-col sm:flex-row items-center\n          gap-1 sm:gap-2 w-full sm:w-auto\n          h-auto sm:h-5 flex-none\n          overflow-visible\n        `}\n      >\n        {/* Step Indicator Circle with responsive sizing */}\n        <div\n          className={`\n            ${sizeClasses.indicator} ${stateClasses.indicator}\n            rounded-full flex items-center justify-center relative\n            flex-none transition-all duration-300 ease-out\n          `}\n          aria-label={getAriaLabel()}\n        >\n          {isCompleted ? (\n            <Check\n              weight=\"bold\"\n              className={`\n                ${stateClasses.indicatorText}\n                w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3 md:h-3 lg:w-3.5 lg:h-3.5\n              `}\n            />\n          ) : (\n            <Text\n              size={sizeClasses.indicatorTextSize as '2xs' | 'xs' | 'sm'}\n              weight=\"medium\"\n              color=\"\"\n              className={cn(stateClasses.indicatorText, 'leading-none')}\n            >\n              {stepNumber}\n            </Text>\n          )}\n        </div>\n\n        {/* Step Label with full responsive text sizing, no vertical overflow */}\n        <Text\n          size={sizeClasses.labelTextSize as '2xs' | 'xs' | 'sm' | 'md'}\n          weight=\"medium\"\n          color=\"\"\n          className={cn(\n            stateClasses.label,\n            'leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full whitespace-normal'\n          )}\n        >\n          {step.label}\n        </Text>\n      </div>\n    </div>\n  );\n};\n\n/**\n * Stepper component props interface\n */\nexport type StepperProps = {\n  /** Array of step data */\n  steps: StepData[];\n  /** Size variant of the stepper */\n  size?: StepperSize;\n  /** Current active step index */\n  currentStep?: number;\n  /** Additional CSS classes */\n  className?: string;\n  /** Step container CSS classes */\n  stepClassName?: string;\n  /** Progress indicator (e.g., \"Etapa 2 de 4\") */\n  showProgress?: boolean;\n  /** Custom progress text */\n  progressText?: string;\n  /** Make stepper responsive (vertical on mobile) */\n  responsive?: boolean;\n};\n\n/**\n * Helper function to calculate step states based on current step\n */\nconst calculateStepStates = (\n  steps: StepData[],\n  currentStep: number\n): StepData[] => {\n  return steps.map((step, index) => {\n    let stepState: StepState;\n\n    if (index < currentStep) {\n      stepState = 'completed';\n    } else if (index === currentStep) {\n      stepState = 'current';\n    } else {\n      stepState = 'pending';\n    }\n\n    return {\n      ...step,\n      state: stepState,\n    };\n  });\n};\n\n/**\n * Helper function to get progress text\n */\nconst getProgressText = (\n  currentStep: number,\n  totalSteps: number,\n  customText?: string\n): string => {\n  if (customText) return customText;\n  return `Etapa ${currentStep + 1} de ${totalSteps}`;\n};\n\n/**\n * Stepper component for Analytica Ensino platforms\n *\n * A progress stepper component that displays a sequence of steps with different states.\n * Follows the exact design specifications with proper spacing, colors, and layout.\n * Fully responsive for mobile, tablets, and laptops.\n *\n * Design specifications:\n * - Based on exact CSS specifications from Figma design\n * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)\n * - Progressive sizing with responsive breakpoints that adapt to device type\n * - Consistent gaps that scale with screen size and device capabilities\n * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)\n * - Responsive design with overflow scroll on smaller devices\n * - Optimized text sizing and layout for each device category\n *\n * @example\n * ```tsx\n * // Basic stepper - automatically responsive for all devices\n * <Stepper steps={steps} currentStep={1} />\n *\n * // Custom styling with full responsive behavior\n * <Stepper steps={steps} size=\"medium\" showProgress responsive />\n * ```\n */\nconst Stepper = ({\n  steps: initialSteps,\n  size = 'medium',\n  currentStep,\n  className = '',\n  stepClassName = '',\n  showProgress = false,\n  progressText,\n  responsive = true,\n}: StepperProps) => {\n  const sizeClasses = SIZE_CLASSES[size];\n\n  // Calculate steps with states if currentStep is provided\n  const steps =\n    currentStep !== undefined\n      ? calculateStepStates(initialSteps, currentStep)\n      : initialSteps;\n\n  return (\n    <fieldset\n      className={cn(\n        'flex flex-col gap-4 sm:gap-5 md:gap-6',\n        className,\n        'border-0 p-0 m-0'\n      )}\n    >\n      <legend className=\"absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0\">\n        Stepper de formulário\n      </legend>\n      {/* Progress indicator with responsive text */}\n      {showProgress && currentStep !== undefined && (\n        <Text\n          size=\"sm\"\n          weight=\"medium\"\n          className=\"text-text-600 text-center sm:text-left text-xs sm:text-sm\"\n        >\n          {getProgressText(currentStep, steps.length, progressText)}\n        </Text>\n      )}\n\n      {/* Stepper container - Fully responsive for all devices with horizontal scroll only */}\n      <div\n        className={cn(\n          'flex items-center',\n          sizeClasses.container,\n          responsive\n            ? 'flex-row overflow-x-auto overflow-y-hidden scrollbar-hide justify-start sm:justify-center md:justify-center lg:justify-center'\n            : 'flex-row justify-center',\n          'px-2 sm:px-4 md:px-6 lg:px-0 max-w-full min-w-0 gap-2 sm:gap-3 md:gap-4 lg:gap-4'\n        )}\n        role=\"tablist\"\n        aria-label=\"Progress steps\"\n      >\n        {steps.map((step, index) => {\n          const stateClasses = STATE_CLASSES[step.state];\n\n          return (\n            <Step\n              key={step.id}\n              step={step}\n              index={index}\n              size={size}\n              sizeClasses={sizeClasses}\n              stateClasses={stateClasses}\n              isLast={index === steps.length - 1}\n              className={stepClassName}\n            />\n          );\n        })}\n      </div>\n    </fieldset>\n  );\n};\n\nexport default Stepper;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n  hexColor: string | undefined,\n  isDark: boolean\n): string | undefined {\n  if (!hexColor) return undefined;\n  // Remove o '#' se existir\n  let color = hexColor.replace(/^#/, '').toLowerCase();\n\n  if (isDark) {\n    // Se está em dark mode, sempre remove opacidade se existir\n    if (color.length === 8) {\n      color = color.slice(0, 6);\n    }\n    return `#${color}`;\n  } else {\n    // Se não está em dark mode (light mode)\n    let resultColor: string;\n    if (color.length === 6) {\n      // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n      resultColor = `#${color}4d`;\n    } else if (color.length === 8) {\n      // Já tem opacidade, retorna como está\n      resultColor = `#${color}`;\n    } else {\n      // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n      resultColor = `#${color}`;\n    }\n    return resultColor;\n  }\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":"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","names":["import_jsx_runtime"]}

package/dist/Stepper/index.mjs

@@ -224,7 +224,6 @@ var Step = ({
             ${sizeClasses.indicator} ${stateClasses.indicator}
             rounded-full flex items-center justify-center relative
             flex-none transition-all duration-300 ease-out
-            w-4 h-4 sm:w-5 sm:h-5 md:w-5 md:h-5 lg:w-6 lg:h-6
           `,
                   "aria-label": getAriaLabel(),
                   children: isCompleted ? /* @__PURE__ */ jsx2(
@@ -242,10 +241,7 @@ var Step = ({
                       size: sizeClasses.indicatorTextSize,
                       weight: "medium",
                       color: "",
-                      className: cn(
-                        stateClasses.indicatorText,
-                        "leading-none text-2xs sm:text-xs"
-                      ),
+                      className: cn(stateClasses.indicatorText, "leading-none"),
                       children: stepNumber
                     }
                   )
@@ -259,7 +255,7 @@ var Step = ({
                   color: "",
                   className: cn(
                     stateClasses.label,
-                    "leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full text-2xs sm:text-xs md:text-xs lg:text-sm whitespace-normal"
+                    "leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full whitespace-normal"
                   ),
                   children: step.label
                 }

package/dist/Stepper/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/utils.ts","../../src/components/Text/Text.tsx","../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n  hexColor: string | undefined,\n  isDark: boolean\n): string | undefined {\n  if (!hexColor) return undefined;\n  // Remove o '#' se existir\n  let color = hexColor.replace(/^#/, '').toLowerCase();\n\n  if (isDark) {\n    // Se está em dark mode, sempre remove opacidade se existir\n    if (color.length === 8) {\n      color = color.slice(0, 6);\n    }\n    return `#${color}`;\n  } else {\n    // Se não está em dark mode (light mode)\n    let resultColor: string;\n    if (color.length === 6) {\n      // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n      resultColor = `#${color}4d`;\n    } else if (color.length === 8) {\n      // Já tem opacidade, retorna como está\n      resultColor = `#${color}`;\n    } else {\n      // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n      resultColor = `#${color}`;\n    }\n    return resultColor;\n  }\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n","import Text from '../Text/Text';\nimport { Check } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Stepper size variants\n */\ntype StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Step state variants\n */\ntype StepState = 'pending' | 'current' | 'completed';\n\n/**\n * Individual step data interface\n */\nexport interface StepData {\n  /** Unique identifier for the step */\n  id: string;\n  /** Label text for the step */\n  label: string;\n  /** Current state of the step */\n  state: StepState;\n}\n\n/**\n * Size configurations - Following design system pattern from CSS specifications\n * Small size based on exact CSS: width 58px, height 38px, gap 8px\n */\nconst SIZE_CLASSES = {\n  small: {\n    container: 'gap-2', // 8px gap as specified in CSS\n    stepWidth: 'w-[58px]', // exact 58px from CSS\n    stepHeight: 'h-[38px]', // exact 38px from CSS\n    indicator: 'w-5 h-5', // 20px as specified\n    progressBar: 'h-0.5', // 2px as specified\n    indicatorTextSize: '2xs', // 10px as specified\n    labelTextSize: 'xs', // 12px as specified\n    iconSize: 'w-3 h-3', // 12px\n  },\n  medium: {\n    container: 'gap-3', // 12px (8px + 4px progression)\n    stepWidth: 'w-[110px]', // 110px (increased from 90px to fit \"Endereço Residencial\")\n    stepHeight: 'h-[48px]', // 48px (increased from 46px for better proportion)\n    indicator: 'w-6 h-6', // 24px (20px + 4px progression)\n    progressBar: 'h-0.5', // 2px maintained for consistency\n    indicatorTextSize: '2xs', // 10px maintained for readability\n    labelTextSize: 'xs', // 12px maintained\n    iconSize: 'w-3.5 h-3.5', // 14px\n  },\n  large: {\n    container: 'gap-4', // 16px (12px + 4px progression)\n    stepWidth: 'w-[160px]', // 160px (increased from 140px to fit \"Endereço Residencial\")\n    stepHeight: 'h-[58px]', // 58px (increased from 54px for better proportion)\n    indicator: 'w-7 h-7', // 28px (24px + 4px progression)\n    progressBar: 'h-1', // 4px (increased for better visibility)\n    indicatorTextSize: 'xs', // 12px (increased for larger size)\n    labelTextSize: 'sm', // 14px (increased for larger size)\n    iconSize: 'w-4 h-4', // 16px\n  },\n  extraLarge: {\n    container: 'gap-5', // 20px (16px + 4px progression)\n    stepWidth: 'w-[200px]', // 200px (increased from 180px to ensure \"Endereço Residencial\" fits)\n    stepHeight: 'h-[68px]', // 68px (increased from 62px for better proportion)\n    indicator: 'w-8 h-8', // 32px (28px + 4px progression)\n    progressBar: 'h-1', // 4px maintained\n    indicatorTextSize: 'xs', // 12px maintained for readability\n    labelTextSize: 'sm', // 14px maintained\n    iconSize: 'w-[18px] h-[18px]', // 18px\n  },\n} as const;\n\n/**\n * State configurations using exact colors from CSS specs\n * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)\n * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido\n * completed: #1C61B2 = primary-800 (etapa concluída)\n * text color: #FEFEFF = text\n */\nconst STATE_CLASSES = {\n  pending: {\n    progressBar: 'bg-text-400', // #A3A3A3\n    indicator: 'bg-text-400', // #A3A3A3\n    indicatorText: 'text-white', // Branco para contraste com background cinza\n    label: 'text-text-400', // #A3A3A3\n  },\n  current: {\n    progressBar: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n    indicator: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n    indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n    label: 'text-primary-800', // #1C61B2 usando classe Tailwind padrão\n  },\n  completed: {\n    progressBar: 'bg-primary-400', // #48A0E8 para barra quando checked (completed)\n    indicator: 'bg-primary-400', // #48A0E8 para corresponder à barra de progresso\n    indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n    label: 'text-primary-400', // #48A0E8 para corresponder à barra de progresso\n  },\n} as const;\n\n/**\n * Type for size classes\n */\ntype SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];\n\n/**\n * Type for state classes\n */\ntype StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];\n\n/**\n * Props for individual step component\n */\ninterface StepProps {\n  step: StepData;\n  index: number;\n  size: StepperSize;\n  sizeClasses: SizeClassType;\n  stateClasses: StateClassType;\n  isLast: boolean;\n  className?: string;\n}\n\n/**\n * Individual Step component - Based on exact design specifications\n * Layout: flex-column with progress bar at top, then icon+label row\n * Fully responsive for mobile, tablets, and laptops\n */\nexport const Step = ({\n  step,\n  index,\n  size: _size,\n  sizeClasses,\n  stateClasses,\n  isLast: _isLast,\n  className = '',\n}: StepProps) => {\n  const stepNumber = index + 1;\n  const isCompleted = step.state === 'completed';\n\n  // Generate accessible aria-label based on step state\n  const getAriaLabel = () => {\n    let suffix = '';\n    if (step.state === 'completed') {\n      suffix = ' (concluído)';\n    } else if (step.state === 'current') {\n      suffix = ' (atual)';\n    }\n    return `${step.label}${suffix}`;\n  };\n\n  return (\n    <div\n      className={`\n        flex flex-col justify-center items-center pb-2 gap-2\n        ${sizeClasses.stepWidth} ${sizeClasses.stepHeight}\n        flex-none flex-grow\n        ${className}\n        sm:max-w-[100px] md:max-w-[120px] lg:max-w-none xl:max-w-none\n        sm:min-h-[40px] md:min-h-[45px] lg:min-h-none\n        overflow-visible\n      `}\n    >\n      {/* Progress Bar - Full width at top with responsive scaling */}\n      <div\n        className={`\n          w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}\n          rounded-sm flex-none\n        `}\n      />\n\n      {/* Step Content Container - Responsive layout for all devices, no vertical scroll */}\n      <div\n        className={`\n          flex flex-col sm:flex-row items-center\n          gap-1 sm:gap-2 w-full sm:w-auto\n          h-auto sm:h-5 flex-none\n          overflow-visible\n        `}\n      >\n        {/* Step Indicator Circle with responsive sizing */}\n        <div\n          className={`\n            ${sizeClasses.indicator} ${stateClasses.indicator}\n            rounded-full flex items-center justify-center relative\n            flex-none transition-all duration-300 ease-out\n            w-4 h-4 sm:w-5 sm:h-5 md:w-5 md:h-5 lg:w-6 lg:h-6\n          `}\n          aria-label={getAriaLabel()}\n        >\n          {isCompleted ? (\n            <Check\n              weight=\"bold\"\n              className={`\n                ${stateClasses.indicatorText}\n                w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3 md:h-3 lg:w-3.5 lg:h-3.5\n              `}\n            />\n          ) : (\n            <Text\n              size={sizeClasses.indicatorTextSize as '2xs' | 'xs' | 'sm'}\n              weight=\"medium\"\n              color=\"\"\n              className={cn(\n                stateClasses.indicatorText,\n                'leading-none text-2xs sm:text-xs'\n              )}\n            >\n              {stepNumber}\n            </Text>\n          )}\n        </div>\n\n        {/* Step Label with full responsive text sizing, no vertical overflow */}\n        <Text\n          size={sizeClasses.labelTextSize as '2xs' | 'xs' | 'sm' | 'md'}\n          weight=\"medium\"\n          color=\"\"\n          className={cn(\n            stateClasses.label,\n            'leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full text-2xs sm:text-xs md:text-xs lg:text-sm whitespace-normal'\n          )}\n        >\n          {step.label}\n        </Text>\n      </div>\n    </div>\n  );\n};\n\n/**\n * Stepper component props interface\n */\nexport type StepperProps = {\n  /** Array of step data */\n  steps: StepData[];\n  /** Size variant of the stepper */\n  size?: StepperSize;\n  /** Current active step index */\n  currentStep?: number;\n  /** Additional CSS classes */\n  className?: string;\n  /** Step container CSS classes */\n  stepClassName?: string;\n  /** Progress indicator (e.g., \"Etapa 2 de 4\") */\n  showProgress?: boolean;\n  /** Custom progress text */\n  progressText?: string;\n  /** Make stepper responsive (vertical on mobile) */\n  responsive?: boolean;\n};\n\n/**\n * Helper function to calculate step states based on current step\n */\nconst calculateStepStates = (\n  steps: StepData[],\n  currentStep: number\n): StepData[] => {\n  return steps.map((step, index) => {\n    let stepState: StepState;\n\n    if (index < currentStep) {\n      stepState = 'completed';\n    } else if (index === currentStep) {\n      stepState = 'current';\n    } else {\n      stepState = 'pending';\n    }\n\n    return {\n      ...step,\n      state: stepState,\n    };\n  });\n};\n\n/**\n * Helper function to get progress text\n */\nconst getProgressText = (\n  currentStep: number,\n  totalSteps: number,\n  customText?: string\n): string => {\n  if (customText) return customText;\n  return `Etapa ${currentStep + 1} de ${totalSteps}`;\n};\n\n/**\n * Stepper component for Analytica Ensino platforms\n *\n * A progress stepper component that displays a sequence of steps with different states.\n * Follows the exact design specifications with proper spacing, colors, and layout.\n * Fully responsive for mobile, tablets, and laptops.\n *\n * Design specifications:\n * - Based on exact CSS specifications from Figma design\n * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)\n * - Progressive sizing with responsive breakpoints that adapt to device type\n * - Consistent gaps that scale with screen size and device capabilities\n * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)\n * - Responsive design with overflow scroll on smaller devices\n * - Optimized text sizing and layout for each device category\n *\n * @example\n * ```tsx\n * // Basic stepper - automatically responsive for all devices\n * <Stepper steps={steps} currentStep={1} />\n *\n * // Custom styling with full responsive behavior\n * <Stepper steps={steps} size=\"medium\" showProgress responsive />\n * ```\n */\nconst Stepper = ({\n  steps: initialSteps,\n  size = 'medium',\n  currentStep,\n  className = '',\n  stepClassName = '',\n  showProgress = false,\n  progressText,\n  responsive = true,\n}: StepperProps) => {\n  const sizeClasses = SIZE_CLASSES[size];\n\n  // Calculate steps with states if currentStep is provided\n  const steps =\n    currentStep !== undefined\n      ? calculateStepStates(initialSteps, currentStep)\n      : initialSteps;\n\n  return (\n    <fieldset\n      className={cn(\n        'flex flex-col gap-4 sm:gap-5 md:gap-6',\n        className,\n        'border-0 p-0 m-0'\n      )}\n    >\n      <legend className=\"absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0\">\n        Stepper de formulário\n      </legend>\n      {/* Progress indicator with responsive text */}\n      {showProgress && currentStep !== undefined && (\n        <Text\n          size=\"sm\"\n          weight=\"medium\"\n          className=\"text-text-600 text-center sm:text-left text-xs sm:text-sm\"\n        >\n          {getProgressText(currentStep, steps.length, progressText)}\n        </Text>\n      )}\n\n      {/* Stepper container - Fully responsive for all devices with horizontal scroll only */}\n      <div\n        className={cn(\n          'flex items-center',\n          sizeClasses.container,\n          responsive\n            ? 'flex-row overflow-x-auto overflow-y-hidden scrollbar-hide justify-start sm:justify-center md:justify-center lg:justify-center'\n            : 'flex-row justify-center',\n          'px-2 sm:px-4 md:px-6 lg:px-0 max-w-full min-w-0 gap-2 sm:gap-3 md:gap-4 lg:gap-4'\n        )}\n        role=\"tablist\"\n        aria-label=\"Progress steps\"\n      >\n        {steps.map((step, index) => {\n          const stateClasses = STATE_CLASSES[step.state];\n\n          return (\n            <Step\n              key={step.id}\n              step={step}\n              index={index}\n              size={size}\n              sizeClasses={sizeClasses}\n              stateClasses={stateClasses}\n              isLast={index === steps.length - 1}\n              className={stepClassName}\n            />\n          );\n        })}\n      </div>\n    </fieldset>\n  );\n};\n\nexport default Stepper;\n"],"mappings":";AAAA,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACsHI;AA/CJ,IAAM,OAAO,CAA8B;AAAA,EACzC;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MAAoB;AAClB,MAAI,cAAc;AAClB,MAAI,gBAAgB;AAGpB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAEA,gBAAc,aAAa,IAAI,KAAK,aAAa;AAGjD,QAAM,iBAAiB;AAAA,IACrB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AAEA,kBAAgB,eAAe,MAAM,KAAK,eAAe;AAEzD,QAAM,cAAc;AACpB,QAAM,YAAY,MAAO;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,aAAa,aAAa,eAAe,OAAO,SAAS;AAAA,MACtE,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;ACnIf,SAAS,aAAa;AAoKhB,gBAAAA,MAQA,YARA;AAvIN,IAAM,eAAe;AAAA,EACnB,OAAO;AAAA,IACL,WAAW;AAAA;AAAA,IACX,WAAW;AAAA;AAAA,IACX,YAAY;AAAA;AAAA,IACZ,WAAW;AAAA;AAAA,IACX,aAAa;AAAA;AAAA,IACb,mBAAmB;AAAA;AAAA,IACnB,eAAe;AAAA;AAAA,IACf,UAAU;AAAA;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,WAAW;AAAA;AAAA,IACX,WAAW;AAAA;AAAA,IACX,YAAY;AAAA;AAAA,IACZ,WAAW;AAAA;AAAA,IACX,aAAa;AAAA;AAAA,IACb,mBAAmB;AAAA;AAAA,IACnB,eAAe;AAAA;AAAA,IACf,UAAU;AAAA;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA;AAAA,IACX,WAAW;AAAA;AAAA,IACX,YAAY;AAAA;AAAA,IACZ,WAAW;AAAA;AAAA,IACX,aAAa;AAAA;AAAA,IACb,mBAAmB;AAAA;AAAA,IACnB,eAAe;AAAA;AAAA,IACf,UAAU;AAAA;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,WAAW;AAAA;AAAA,IACX,WAAW;AAAA;AAAA,IACX,YAAY;AAAA;AAAA,IACZ,WAAW;AAAA;AAAA,IACX,aAAa;AAAA;AAAA,IACb,mBAAmB;AAAA;AAAA,IACnB,eAAe;AAAA;AAAA,IACf,UAAU;AAAA;AAAA,EACZ;AACF;AASA,IAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,IACP,aAAa;AAAA;AAAA,IACb,WAAW;AAAA;AAAA,IACX,eAAe;AAAA;AAAA,IACf,OAAO;AAAA;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,aAAa;AAAA;AAAA,IACb,WAAW;AAAA;AAAA,IACX,eAAe;AAAA;AAAA,IACf,OAAO;AAAA;AAAA,EACT;AAAA,EACA,WAAW;AAAA,IACT,aAAa;AAAA;AAAA,IACb,WAAW;AAAA;AAAA,IACX,eAAe;AAAA;AAAA,IACf,OAAO;AAAA;AAAA,EACT;AACF;AA8BO,IAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AACd,MAAiB;AACf,QAAM,aAAa,QAAQ;AAC3B,QAAM,cAAc,KAAK,UAAU;AAGnC,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS;AACb,QAAI,KAAK,UAAU,aAAa;AAC9B,eAAS;AAAA,IACX,WAAW,KAAK,UAAU,WAAW;AACnC,eAAS;AAAA,IACX;AACA,WAAO,GAAG,KAAK,KAAK,GAAG,MAAM;AAAA,EAC/B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA;AAAA,UAEP,YAAY,SAAS,IAAI,YAAY,UAAU;AAAA;AAAA,UAE/C,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,MAOb;AAAA,wBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,mBACA,YAAY,WAAW,IAAI,aAAa,WAAW;AAAA;AAAA;AAAA;AAAA,QAGhE;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQX;AAAA,8BAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,cACP,YAAY,SAAS,IAAI,aAAa,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKnD,cAAY,aAAa;AAAA,kBAExB,wBACC,gBAAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,QAAO;AAAA,sBACP,WAAW;AAAA,kBACP,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA,kBAGhC,IAEA,gBAAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAM,YAAY;AAAA,sBAClB,QAAO;AAAA,sBACP,OAAM;AAAA,sBACN,WAAW;AAAA,wBACT,aAAa;AAAA,wBACb;AAAA,sBACF;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA,cAEJ;AAAA,cAGA,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,YAAY;AAAA,kBAClB,QAAO;AAAA,kBACP,OAAM;AAAA,kBACN,WAAW;AAAA,oBACT,aAAa;AAAA,oBACb;AAAA,kBACF;AAAA,kBAEC,eAAK;AAAA;AAAA,cACR;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AA2BA,IAAM,sBAAsB,CAC1B,OACA,gBACe;AACf,SAAO,MAAM,IAAI,CAAC,MAAM,UAAU;AAChC,QAAI;AAEJ,QAAI,QAAQ,aAAa;AACvB,kBAAY;AAAA,IACd,WAAW,UAAU,aAAa;AAChC,kBAAY;AAAA,IACd,OAAO;AACL,kBAAY;AAAA,IACd;AAEA,WAAO;AAAA,MACL,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAAA,EACF,CAAC;AACH;AAKA,IAAM,kBAAkB,CACtB,aACA,YACA,eACW;AACX,MAAI,WAAY,QAAO;AACvB,SAAO,SAAS,cAAc,CAAC,OAAO,UAAU;AAClD;AA2BA,IAAM,UAAU,CAAC;AAAA,EACf,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf;AAAA,EACA,aAAa;AACf,MAAoB;AAClB,QAAM,cAAc,aAAa,IAAI;AAGrC,QAAM,QACJ,gBAAgB,SACZ,oBAAoB,cAAc,WAAW,IAC7C;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,wBAAAA,KAAC,YAAO,WAAU,2EAA0E,sCAE5F;AAAA,QAEC,gBAAgB,gBAAgB,UAC/B,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,QAAO;AAAA,YACP,WAAU;AAAA,YAET,0BAAgB,aAAa,MAAM,QAAQ,YAAY;AAAA;AAAA,QAC1D;AAAA,QAIF,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,YAAY;AAAA,cACZ,aACI,kIACA;AAAA,cACJ;AAAA,YACF;AAAA,YACA,MAAK;AAAA,YACL,cAAW;AAAA,YAEV,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,oBAAM,eAAe,cAAc,KAAK,KAAK;AAE7C,qBACE,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBAEC;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,QAAQ,UAAU,MAAM,SAAS;AAAA,kBACjC,WAAW;AAAA;AAAA,gBAPN,KAAK;AAAA,cAQZ;AAAA,YAEJ,CAAC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,kBAAQ;","names":["jsx"]}
+{"version":3,"sources":["../../src/utils/utils.ts","../../src/components/Text/Text.tsx","../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n  hexColor: string | undefined,\n  isDark: boolean\n): string | undefined {\n  if (!hexColor) return undefined;\n  // Remove o '#' se existir\n  let color = hexColor.replace(/^#/, '').toLowerCase();\n\n  if (isDark) {\n    // Se está em dark mode, sempre remove opacidade se existir\n    if (color.length === 8) {\n      color = color.slice(0, 6);\n    }\n    return `#${color}`;\n  } else {\n    // Se não está em dark mode (light mode)\n    let resultColor: string;\n    if (color.length === 6) {\n      // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n      resultColor = `#${color}4d`;\n    } else if (color.length === 8) {\n      // Já tem opacidade, retorna como está\n      resultColor = `#${color}`;\n    } else {\n      // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n      resultColor = `#${color}`;\n    }\n    return resultColor;\n  }\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n","import Text from '../Text/Text';\nimport { Check } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Stepper size variants\n */\ntype StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Step state variants\n */\ntype StepState = 'pending' | 'current' | 'completed';\n\n/**\n * Individual step data interface\n */\nexport interface StepData {\n  /** Unique identifier for the step */\n  id: string;\n  /** Label text for the step */\n  label: string;\n  /** Current state of the step */\n  state: StepState;\n}\n\n/**\n * Size configurations - Following design system pattern from CSS specifications\n * Small size based on exact CSS: width 58px, height 38px, gap 8px\n */\nconst SIZE_CLASSES = {\n  small: {\n    container: 'gap-2', // 8px gap as specified in CSS\n    stepWidth: 'w-[58px]', // exact 58px from CSS\n    stepHeight: 'h-[38px]', // exact 38px from CSS\n    indicator: 'w-5 h-5', // 20px as specified\n    progressBar: 'h-0.5', // 2px as specified\n    indicatorTextSize: '2xs', // 10px as specified\n    labelTextSize: 'xs', // 12px as specified\n    iconSize: 'w-3 h-3', // 12px\n  },\n  medium: {\n    container: 'gap-3', // 12px (8px + 4px progression)\n    stepWidth: 'w-[110px]', // 110px (increased from 90px to fit \"Endereço Residencial\")\n    stepHeight: 'h-[48px]', // 48px (increased from 46px for better proportion)\n    indicator: 'w-6 h-6', // 24px (20px + 4px progression)\n    progressBar: 'h-0.5', // 2px maintained for consistency\n    indicatorTextSize: '2xs', // 10px maintained for readability\n    labelTextSize: 'xs', // 12px maintained\n    iconSize: 'w-3.5 h-3.5', // 14px\n  },\n  large: {\n    container: 'gap-4', // 16px (12px + 4px progression)\n    stepWidth: 'w-[160px]', // 160px (increased from 140px to fit \"Endereço Residencial\")\n    stepHeight: 'h-[58px]', // 58px (increased from 54px for better proportion)\n    indicator: 'w-7 h-7', // 28px (24px + 4px progression)\n    progressBar: 'h-1', // 4px (increased for better visibility)\n    indicatorTextSize: 'xs', // 12px (increased for larger size)\n    labelTextSize: 'sm', // 14px (increased for larger size)\n    iconSize: 'w-4 h-4', // 16px\n  },\n  extraLarge: {\n    container: 'gap-5', // 20px (16px + 4px progression)\n    stepWidth: 'w-[200px]', // 200px (increased from 180px to ensure \"Endereço Residencial\" fits)\n    stepHeight: 'h-[68px]', // 68px (increased from 62px for better proportion)\n    indicator: 'w-8 h-8', // 32px (28px + 4px progression)\n    progressBar: 'h-1', // 4px maintained\n    indicatorTextSize: 'xs', // 12px maintained for readability\n    labelTextSize: 'sm', // 14px maintained\n    iconSize: 'w-[18px] h-[18px]', // 18px\n  },\n} as const;\n\n/**\n * State configurations using exact colors from CSS specs\n * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)\n * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido\n * completed: #1C61B2 = primary-800 (etapa concluída)\n * text color: #FEFEFF = text\n */\nconst STATE_CLASSES = {\n  pending: {\n    progressBar: 'bg-text-400', // #A3A3A3\n    indicator: 'bg-text-400', // #A3A3A3\n    indicatorText: 'text-white', // Branco para contraste com background cinza\n    label: 'text-text-400', // #A3A3A3\n  },\n  current: {\n    progressBar: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n    indicator: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n    indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n    label: 'text-primary-800', // #1C61B2 usando classe Tailwind padrão\n  },\n  completed: {\n    progressBar: 'bg-primary-400', // #48A0E8 para barra quando checked (completed)\n    indicator: 'bg-primary-400', // #48A0E8 para corresponder à barra de progresso\n    indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n    label: 'text-primary-400', // #48A0E8 para corresponder à barra de progresso\n  },\n} as const;\n\n/**\n * Type for size classes\n */\ntype SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];\n\n/**\n * Type for state classes\n */\ntype StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];\n\n/**\n * Props for individual step component\n */\ninterface StepProps {\n  step: StepData;\n  index: number;\n  size: StepperSize;\n  sizeClasses: SizeClassType;\n  stateClasses: StateClassType;\n  isLast: boolean;\n  className?: string;\n}\n\n/**\n * Individual Step component - Based on exact design specifications\n * Layout: flex-column with progress bar at top, then icon+label row\n * Fully responsive for mobile, tablets, and laptops\n */\nexport const Step = ({\n  step,\n  index,\n  size: _size,\n  sizeClasses,\n  stateClasses,\n  isLast: _isLast,\n  className = '',\n}: StepProps) => {\n  const stepNumber = index + 1;\n  const isCompleted = step.state === 'completed';\n\n  // Generate accessible aria-label based on step state\n  const getAriaLabel = () => {\n    let suffix = '';\n    if (step.state === 'completed') {\n      suffix = ' (concluído)';\n    } else if (step.state === 'current') {\n      suffix = ' (atual)';\n    }\n    return `${step.label}${suffix}`;\n  };\n\n  return (\n    <div\n      className={`\n        flex flex-col justify-center items-center pb-2 gap-2\n        ${sizeClasses.stepWidth} ${sizeClasses.stepHeight}\n        flex-none flex-grow\n        ${className}\n        sm:max-w-[100px] md:max-w-[120px] lg:max-w-none xl:max-w-none\n        sm:min-h-[40px] md:min-h-[45px] lg:min-h-none\n        overflow-visible\n      `}\n    >\n      {/* Progress Bar - Full width at top with responsive scaling */}\n      <div\n        className={`\n          w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}\n          rounded-sm flex-none\n        `}\n      />\n\n      {/* Step Content Container - Responsive layout for all devices, no vertical scroll */}\n      <div\n        className={`\n          flex flex-col sm:flex-row items-center\n          gap-1 sm:gap-2 w-full sm:w-auto\n          h-auto sm:h-5 flex-none\n          overflow-visible\n        `}\n      >\n        {/* Step Indicator Circle with responsive sizing */}\n        <div\n          className={`\n            ${sizeClasses.indicator} ${stateClasses.indicator}\n            rounded-full flex items-center justify-center relative\n            flex-none transition-all duration-300 ease-out\n          `}\n          aria-label={getAriaLabel()}\n        >\n          {isCompleted ? (\n            <Check\n              weight=\"bold\"\n              className={`\n                ${stateClasses.indicatorText}\n                w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3 md:h-3 lg:w-3.5 lg:h-3.5\n              `}\n            />\n          ) : (\n            <Text\n              size={sizeClasses.indicatorTextSize as '2xs' | 'xs' | 'sm'}\n              weight=\"medium\"\n              color=\"\"\n              className={cn(stateClasses.indicatorText, 'leading-none')}\n            >\n              {stepNumber}\n            </Text>\n          )}\n        </div>\n\n        {/* Step Label with full responsive text sizing, no vertical overflow */}\n        <Text\n          size={sizeClasses.labelTextSize as '2xs' | 'xs' | 'sm' | 'md'}\n          weight=\"medium\"\n          color=\"\"\n          className={cn(\n            stateClasses.label,\n            'leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full whitespace-normal'\n          )}\n        >\n          {step.label}\n        </Text>\n      </div>\n    </div>\n  );\n};\n\n/**\n * Stepper component props interface\n */\nexport type StepperProps = {\n  /** Array of step data */\n  steps: StepData[];\n  /** Size variant of the stepper */\n  size?: StepperSize;\n  /** Current active step index */\n  currentStep?: number;\n  /** Additional CSS classes */\n  className?: string;\n  /** Step container CSS classes */\n  stepClassName?: string;\n  /** Progress indicator (e.g., \"Etapa 2 de 4\") */\n  showProgress?: boolean;\n  /** Custom progress text */\n  progressText?: string;\n  /** Make stepper responsive (vertical on mobile) */\n  responsive?: boolean;\n};\n\n/**\n * Helper function to calculate step states based on current step\n */\nconst calculateStepStates = (\n  steps: StepData[],\n  currentStep: number\n): StepData[] => {\n  return steps.map((step, index) => {\n    let stepState: StepState;\n\n    if (index < currentStep) {\n      stepState = 'completed';\n    } else if (index === currentStep) {\n      stepState = 'current';\n    } else {\n      stepState = 'pending';\n    }\n\n    return {\n      ...step,\n      state: stepState,\n    };\n  });\n};\n\n/**\n * Helper function to get progress text\n */\nconst getProgressText = (\n  currentStep: number,\n  totalSteps: number,\n  customText?: string\n): string => {\n  if (customText) return customText;\n  return `Etapa ${currentStep + 1} de ${totalSteps}`;\n};\n\n/**\n * Stepper component for Analytica Ensino platforms\n *\n * A progress stepper component that displays a sequence of steps with different states.\n * Follows the exact design specifications with proper spacing, colors, and layout.\n * Fully responsive for mobile, tablets, and laptops.\n *\n * Design specifications:\n * - Based on exact CSS specifications from Figma design\n * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)\n * - Progressive sizing with responsive breakpoints that adapt to device type\n * - Consistent gaps that scale with screen size and device capabilities\n * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)\n * - Responsive design with overflow scroll on smaller devices\n * - Optimized text sizing and layout for each device category\n *\n * @example\n * ```tsx\n * // Basic stepper - automatically responsive for all devices\n * <Stepper steps={steps} currentStep={1} />\n *\n * // Custom styling with full responsive behavior\n * <Stepper steps={steps} size=\"medium\" showProgress responsive />\n * ```\n */\nconst Stepper = ({\n  steps: initialSteps,\n  size = 'medium',\n  currentStep,\n  className = '',\n  stepClassName = '',\n  showProgress = false,\n  progressText,\n  responsive = true,\n}: StepperProps) => {\n  const sizeClasses = SIZE_CLASSES[size];\n\n  // Calculate steps with states if currentStep is provided\n  const steps =\n    currentStep !== undefined\n      ? calculateStepStates(initialSteps, currentStep)\n      : initialSteps;\n\n  return (\n    <fieldset\n      className={cn(\n        'flex flex-col gap-4 sm:gap-5 md:gap-6',\n        className,\n        'border-0 p-0 m-0'\n      )}\n    >\n      <legend className=\"absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0\">\n        Stepper de formulário\n      </legend>\n      {/* Progress indicator with responsive text */}\n      {showProgress && currentStep !== undefined && (\n        <Text\n          size=\"sm\"\n          weight=\"medium\"\n          className=\"text-text-600 text-center sm:text-left text-xs sm:text-sm\"\n        >\n          {getProgressText(currentStep, steps.length, progressText)}\n        </Text>\n      )}\n\n      {/* Stepper container - Fully responsive for all devices with horizontal scroll only */}\n      <div\n        className={cn(\n          'flex items-center',\n          sizeClasses.container,\n          responsive\n            ? 'flex-row overflow-x-auto overflow-y-hidden scrollbar-hide justify-start sm:justify-center md:justify-center lg:justify-center'\n            : 'flex-row justify-center',\n          'px-2 sm:px-4 md:px-6 lg:px-0 max-w-full min-w-0 gap-2 sm:gap-3 md:gap-4 lg:gap-4'\n        )}\n        role=\"tablist\"\n        aria-label=\"Progress steps\"\n      >\n        {steps.map((step, index) => {\n          const stateClasses = STATE_CLASSES[step.state];\n\n          return (\n            <Step\n              key={step.id}\n              step={step}\n              index={index}\n              size={size}\n              sizeClasses={sizeClasses}\n              stateClasses={stateClasses}\n              isLast={index === steps.length - 1}\n              className={stepClassName}\n            />\n          );\n        })}\n      </div>\n    </fieldset>\n  );\n};\n\nexport default Stepper;\n"],"mappings":";AAAA,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACsHI;AA/CJ,IAAM,OAAO,CAA8B;AAAA,EACzC;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MAAoB;AAClB,MAAI,cAAc;AAClB,MAAI,gBAAgB;AAGpB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAEA,gBAAc,aAAa,IAAI,KAAK,aAAa;AAGjD,QAAM,iBAAiB;AAAA,IACrB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AAEA,kBAAgB,eAAe,MAAM,KAAK,eAAe;AAEzD,QAAM,cAAc;AACpB,QAAM,YAAY,MAAO;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,aAAa,aAAa,eAAe,OAAO,SAAS;AAAA,MACtE,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;ACnIf,SAAS,aAAa;AAoKhB,gBAAAA,MAQA,YARA;AAvIN,IAAM,eAAe;AAAA,EACnB,OAAO;AAAA,IACL,WAAW;AAAA;AAAA,IACX,WAAW;AAAA;AAAA,IACX,YAAY;AAAA;AAAA,IACZ,WAAW;AAAA;AAAA,IACX,aAAa;AAAA;AAAA,IACb,mBAAmB;AAAA;AAAA,IACnB,eAAe;AAAA;AAAA,IACf,UAAU;AAAA;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,WAAW;AAAA;AAAA,IACX,WAAW;AAAA;AAAA,IACX,YAAY;AAAA;AAAA,IACZ,WAAW;AAAA;AAAA,IACX,aAAa;AAAA;AAAA,IACb,mBAAmB;AAAA;AAAA,IACnB,eAAe;AAAA;AAAA,IACf,UAAU;AAAA;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA;AAAA,IACX,WAAW;AAAA;AAAA,IACX,YAAY;AAAA;AAAA,IACZ,WAAW;AAAA;AAAA,IACX,aAAa;AAAA;AAAA,IACb,mBAAmB;AAAA;AAAA,IACnB,eAAe;AAAA;AAAA,IACf,UAAU;AAAA;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,WAAW;AAAA;AAAA,IACX,WAAW;AAAA;AAAA,IACX,YAAY;AAAA;AAAA,IACZ,WAAW;AAAA;AAAA,IACX,aAAa;AAAA;AAAA,IACb,mBAAmB;AAAA;AAAA,IACnB,eAAe;AAAA;AAAA,IACf,UAAU;AAAA;AAAA,EACZ;AACF;AASA,IAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,IACP,aAAa;AAAA;AAAA,IACb,WAAW;AAAA;AAAA,IACX,eAAe;AAAA;AAAA,IACf,OAAO;AAAA;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,aAAa;AAAA;AAAA,IACb,WAAW;AAAA;AAAA,IACX,eAAe;AAAA;AAAA,IACf,OAAO;AAAA;AAAA,EACT;AAAA,EACA,WAAW;AAAA,IACT,aAAa;AAAA;AAAA,IACb,WAAW;AAAA;AAAA,IACX,eAAe;AAAA;AAAA,IACf,OAAO;AAAA;AAAA,EACT;AACF;AA8BO,IAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AACd,MAAiB;AACf,QAAM,aAAa,QAAQ;AAC3B,QAAM,cAAc,KAAK,UAAU;AAGnC,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS;AACb,QAAI,KAAK,UAAU,aAAa;AAC9B,eAAS;AAAA,IACX,WAAW,KAAK,UAAU,WAAW;AACnC,eAAS;AAAA,IACX;AACA,WAAO,GAAG,KAAK,KAAK,GAAG,MAAM;AAAA,EAC/B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA;AAAA,UAEP,YAAY,SAAS,IAAI,YAAY,UAAU;AAAA;AAAA,UAE/C,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,MAOb;AAAA,wBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,mBACA,YAAY,WAAW,IAAI,aAAa,WAAW;AAAA;AAAA;AAAA;AAAA,QAGhE;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQX;AAAA,8BAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,cACP,YAAY,SAAS,IAAI,aAAa,SAAS;AAAA;AAAA;AAAA;AAAA,kBAInD,cAAY,aAAa;AAAA,kBAExB,wBACC,gBAAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,QAAO;AAAA,sBACP,WAAW;AAAA,kBACP,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA,kBAGhC,IAEA,gBAAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAM,YAAY;AAAA,sBAClB,QAAO;AAAA,sBACP,OAAM;AAAA,sBACN,WAAW,GAAG,aAAa,eAAe,cAAc;AAAA,sBAEvD;AAAA;AAAA,kBACH;AAAA;AAAA,cAEJ;AAAA,cAGA,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,YAAY;AAAA,kBAClB,QAAO;AAAA,kBACP,OAAM;AAAA,kBACN,WAAW;AAAA,oBACT,aAAa;AAAA,oBACb;AAAA,kBACF;AAAA,kBAEC,eAAK;AAAA;AAAA,cACR;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AA2BA,IAAM,sBAAsB,CAC1B,OACA,gBACe;AACf,SAAO,MAAM,IAAI,CAAC,MAAM,UAAU;AAChC,QAAI;AAEJ,QAAI,QAAQ,aAAa;AACvB,kBAAY;AAAA,IACd,WAAW,UAAU,aAAa;AAChC,kBAAY;AAAA,IACd,OAAO;AACL,kBAAY;AAAA,IACd;AAEA,WAAO;AAAA,MACL,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAAA,EACF,CAAC;AACH;AAKA,IAAM,kBAAkB,CACtB,aACA,YACA,eACW;AACX,MAAI,WAAY,QAAO;AACvB,SAAO,SAAS,cAAc,CAAC,OAAO,UAAU;AAClD;AA2BA,IAAM,UAAU,CAAC;AAAA,EACf,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf;AAAA,EACA,aAAa;AACf,MAAoB;AAClB,QAAM,cAAc,aAAa,IAAI;AAGrC,QAAM,QACJ,gBAAgB,SACZ,oBAAoB,cAAc,WAAW,IAC7C;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,wBAAAA,KAAC,YAAO,WAAU,2EAA0E,sCAE5F;AAAA,QAEC,gBAAgB,gBAAgB,UAC/B,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,QAAO;AAAA,YACP,WAAU;AAAA,YAET,0BAAgB,aAAa,MAAM,QAAQ,YAAY;AAAA;AAAA,QAC1D;AAAA,QAIF,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,YAAY;AAAA,cACZ,aACI,kIACA;AAAA,cACJ;AAAA,YACF;AAAA,YACA,MAAK;AAAA,YACL,cAAW;AAAA,YAEV,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,oBAAM,eAAe,cAAc,KAAK,KAAK;AAE7C,qBACE,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBAEC;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,QAAQ,UAAU,MAAM,SAAS;AAAA,kBACjC,WAAW;AAAA;AAAA,gBAPN,KAAK;AAAA,cAQZ;AAAA,YAEJ,CAAC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,kBAAQ;","names":["jsx"]}

package/dist/index.css

@@ -2905,6 +2905,9 @@
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -6448,6 +6451,13 @@
       }
     }
   }
+  .hover\:opacity-70 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 70%;
+      }
+    }
+  }
   .hover\:shadow-hard-shadow-1 {
     &:hover {
       @media (hover: hover) {
@@ -9678,11 +9688,6 @@
       width: calc(var(--spacing) * 3);
     }
   }
-  .sm\:w-5 {
-    @media (width >= 40rem) {
-      width: calc(var(--spacing) * 5);
-    }
-  }
   .sm\:w-auto {
     @media (width >= 40rem) {
       width: auto;
@@ -11781,12 +11786,6 @@
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
-  .sm\:text-xs {
-    @media (width >= 40rem) {
-      font-size: var(--text-xs);
-      line-height: var(--tw-leading, var(--text-xs--line-height));
-    }
-  }
   .md\:m-0 {
     @media (width >= 48rem) {
       margin: calc(var(--spacing) * 0);
@@ -12992,11 +12991,6 @@
       height: calc(var(--spacing) * 3);
     }
   }
-  .md\:h-5 {
-    @media (width >= 48rem) {
-      height: calc(var(--spacing) * 5);
-    }
-  }
   .md\:min-h-\[45px\] {
     @media (width >= 48rem) {
       min-height: 45px;
@@ -13007,11 +13001,6 @@
       width: calc(var(--spacing) * 3);
     }
   }
-  .md\:w-5 {
-    @media (width >= 48rem) {
-      width: calc(var(--spacing) * 5);
-    }
-  }
   .md\:w-\[488px\] {
     @media (width >= 48rem) {
       width: 488px;
@@ -15099,12 +15088,6 @@
       padding-left: calc(var(--spacing) * 96);
     }
   }
-  .md\:text-xs {
-    @media (width >= 48rem) {
-      font-size: var(--text-xs);
-      line-height: var(--tw-leading, var(--text-xs--line-height));
-    }
-  }
   .lg\:m-0 {
     @media (width >= 64rem) {
       margin: calc(var(--spacing) * 0);
@@ -16310,11 +16293,6 @@
       height: calc(var(--spacing) * 3.5);
     }
   }
-  .lg\:h-6 {
-    @media (width >= 64rem) {
-      height: calc(var(--spacing) * 6);
-    }
-  }
   .lg\:h-\[185px\] {
     @media (width >= 64rem) {
       height: 185px;
@@ -16335,11 +16313,6 @@
       width: calc(var(--spacing) * 3.5);
     }
   }
-  .lg\:w-6 {
-    @media (width >= 64rem) {
-      width: calc(var(--spacing) * 6);
-    }
-  }
   .lg\:max-w-\[1000px\] {
     @media (width >= 64rem) {
       max-width: 1000px;
@@ -18437,12 +18410,6 @@
       padding-left: calc(var(--spacing) * 96);
     }
   }
-  .lg\:text-sm {
-    @media (width >= 64rem) {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-    }
-  }
   .xl\:max-w-none {
     @media (width >= 80rem) {
       max-width: none;
@@ -18465,6 +18432,21 @@
       border-width: 0px;
     }
   }
+  .\[\&\:\:-webkit-calendar-picker-indicator\]\:hidden {
+    &::-webkit-calendar-picker-indicator {
+      display: none;
+    }
+  }
+  .\[\&\:\:-webkit-clear-button\]\:hidden {
+    &::-webkit-clear-button {
+      display: none;
+    }
+  }
+  .\[\&\:\:-webkit-inner-spin-button\]\:hidden {
+    &::-webkit-inner-spin-button {
+      display: none;
+    }
+  }
   .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
     &:has([role=checkbox]) {
       padding-right: calc(var(--spacing) * 0);