@alto-avios/alto-ui 5.2.0 → 5.4.0

package/dist/components/Carousel/CarouselControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselControls.js","sources":["../../../src/components/Carousel/CarouselControls.ts"],"sourcesContent":["// CarouselControls.ts - Shared controls configuration for all Carousel stories\n\nimport type { ArgTypes } from '@storybook/react-vite';\nimport type { CarouselProps } from './Carousel';\n\n/**\n * Shared argTypes configuration for all Carousel stories\n * This ensures consistent controls across all story files\n */\nexport const carouselArgTypes: ArgTypes<CarouselProps> = {\n  // Accessibility Controls\n  'aria-label': {\n    control: 'text',\n    description:\n      'Accessible name for the carousel - describes the purpose or content for screen readers',\n    table: {\n      category: 'Accessibility',\n      type: { summary: 'string' },\n    },\n  },\n  'aria-describedby': {\n    control: 'text',\n    description: 'ID of element that describes the carousel',\n    table: {\n      category: 'Accessibility',\n      type: { summary: 'string' },\n    },\n  },\n\n  // Core Configuration\n  looping: {\n    control: { type: 'radio' },\n    options: ['off', 'infinite', 'backToStart'],\n    description:\n      'Looping behavior: \"infinite\" for continuous cycling, \"backToStart\" for jumping back to start, \"off\" to disable looping',\n    defaultValue: 'off',\n    table: {\n      category: 'Core Configuration',\n      type: { summary: '\"infinite\" | \"backToStart\" | \"off\"' },\n      defaultValue: { summary: '\"off\"' },\n    },\n  },\n  itemsPerPage: {\n    control: { type: 'number', min: 1, max: 10, step: 0.25 },\n    description:\n      'Number of items to display per page (minimum: 1). Decimal values (e.g., 2.25) can be used to show partial items for peek effects',\n    defaultValue: 1,\n    table: {\n      category: 'Core Configuration',\n      type: { summary: 'number | ResponsiveValue<number>' },\n      defaultValue: { summary: '1' },\n    },\n  },\n  spaceBetweenItems: {\n    control: { type: 'number', min: 0, max: 100 },\n    description:\n      'Space between carousel items in pixels. Works with both scroll padding and fractional items',\n    defaultValue: 0,\n    table: {\n      category: 'Core Configuration',\n      type: { summary: 'number | ResponsiveValue<number>' },\n      defaultValue: { summary: '0' },\n    },\n  },\n  scrollPadding: {\n    control: 'text',\n    description:\n      'Amount of padding to add to create a \"peek\" effect. Accepts any valid CSS dimension (px, rem, em, %) - e.g., \"15%\", \"20px\", \"2rem\"',\n    table: {\n      category: 'Core Configuration',\n      type: { summary: 'string | ResponsiveValue<string>' },\n      defaultValue: { summary: 'undefined' },\n    },\n  },\n  mouseDragging: {\n    control: 'boolean',\n    description: 'Whether to enable mouse dragging for the carousel',\n    defaultValue: true,\n    table: {\n      category: 'Core Configuration',\n      type: { summary: 'boolean' },\n      defaultValue: { summary: 'true' },\n    },\n  },\n\n  // Button and Controls\n  iconType: {\n    table: {\n      disable: true,\n    },\n  },\n  arrowStyleVariant: {\n    control: { type: 'select' },\n    options: ['neutral', 'white', 'shapeFlat', 'shapeElevated', 'gradient'],\n    description: 'Style variant for navigation arrow buttons',\n    defaultValue: 'neutral',\n    table: {\n      category: 'Button and Controls',\n      type: {\n        summary:\n          '\"neutral\" | \"white\" | \"shapeFlat\" | \"shapeElevated\" | \"gradient\"',\n      },\n      defaultValue: { summary: '\"neutral\"' },\n    },\n  },\n  arrowSize: {\n    control: { type: 'select' },\n    options: ['sm', 'md', 'lg'],\n    description: 'Size of navigation buttons',\n    defaultValue: 'md',\n    table: {\n      category: 'Button and Controls',\n      type: {\n        summary: '\"sm\" | \"md\" | \"lg\" | ResponsiveValue<\"sm\" | \"md\" | \"lg\">',\n      },\n      defaultValue: { summary: '\"md\"' },\n    },\n  },\n  hideDisabledArrow: {\n    control: 'boolean',\n    description:\n      'Whether to hide navigation buttons when they are disabled (e.g., at first/last slide when looping is off)',\n    defaultValue: false,\n    table: {\n      category: 'Button and Controls',\n      type: { summary: 'boolean' },\n      defaultValue: { summary: 'false' },\n    },\n  },\n  showArrowsOnHover: {\n    control: 'boolean',\n    description:\n      'Whether to show arrows only when hovering over the carousel or when it has focus',\n    defaultValue: false,\n    table: {\n      category: 'Button and Controls',\n      type: { summary: 'boolean | ResponsiveValue<boolean>' },\n      defaultValue: { summary: 'false' },\n    },\n  },\n  focusStyle: {\n    control: { type: 'radio' },\n    options: ['default', 'white'],\n    description:\n      'Focus style for interactive elements - use \"white\" for dark backgrounds',\n    defaultValue: 'default',\n    table: {\n      category: 'Button and Controls',\n      type: { summary: '\"default\" | \"white\"' },\n      defaultValue: { summary: '\"default\"' },\n    },\n  },\n\n  // Dots/Pagination\n  hideDots: {\n    control: 'boolean',\n    description:\n      'Whether to hide pagination dots. Can be set responsively to show/hide dots at different breakpoints',\n    defaultValue: false,\n    table: {\n      category: 'Dots/Pagination',\n      type: { summary: 'boolean | ResponsiveValue<boolean>' },\n      defaultValue: { summary: 'false' },\n    },\n  },\n  dotsSize: {\n    control: { type: 'radio' },\n    options: ['md', 'lg'],\n    description: 'Size of pagination dots when visible',\n    defaultValue: 'md',\n    table: {\n      category: 'Dots/Pagination',\n      type: { summary: '\"md\" | \"lg\"' },\n      defaultValue: { summary: '\"md\"' },\n    },\n  },\n  dotsVariant: {\n    control: { type: 'radio' },\n    options: ['standard', 'transparent'],\n    description: 'Visual style of pagination dots',\n    defaultValue: 'standard',\n    table: {\n      category: 'Dots/Pagination',\n      type: { summary: '\"standard\" | \"transparent\"' },\n      defaultValue: { summary: '\"standard\"' },\n    },\n  },\n\n  // Autoplay\n  autoPlay: {\n    control: 'boolean',\n    description: 'Whether the autoplay is enabled',\n    defaultValue: false,\n    table: {\n      category: 'Autoplay',\n      type: { summary: 'boolean' },\n      defaultValue: { summary: 'false' },\n    },\n  },\n  autoPlayInterval: {\n    control: { type: 'number', min: 1000, max: 10000, step: 500 },\n    description: 'Interval in milliseconds between slides during autoplay',\n    defaultValue: 2000,\n    table: {\n      category: 'Autoplay',\n      type: { summary: 'number' },\n      defaultValue: { summary: '2000' },\n    },\n  },\n  autoPlayStyleVariant: {\n    control: { type: 'select' },\n    options: ['neutralVibrant', 'neutralSubtle', 'whiteVibrant', 'whiteSubtle'],\n    description: 'Style variant for autoplay control button',\n    defaultValue: 'neutralVibrant',\n    table: {\n      category: 'Autoplay',\n      type: {\n        summary:\n          '\"neutralVibrant\" | \"neutralSubtle\" | \"whiteVibrant\" | \"whiteSubtle\"',\n      },\n      defaultValue: { summary: '\"neutralVibrant\"' },\n    },\n  },\n  autoPlayControlSize: {\n    control: { type: 'radio' },\n    options: ['sm', 'md'],\n    description: 'Size of autoplay control button',\n    defaultValue: 'md',\n    table: {\n      category: 'Autoplay',\n      type: { summary: '\"sm\" | \"md\"' },\n      defaultValue: { summary: '\"md\"' },\n    },\n  },\n\n  // Custom Styling & Positioning\n  carouselWrapperClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the outermost wrapper to allow custom styles - use your preferred naming convention (helper: \"defaultCarouselWrapper\")',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  prevArrowClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the previous button to allow custom styles - use your preferred naming convention (helper: \"defaultPrevButton\")',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  nextArrowClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the next button to allow custom styles - use your preferred naming convention (helper: \"defaultNextButton\")',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  autoplayControlClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the autoplay control to allow custom styles - use your preferred naming convention (helper: \"autoplayControl\")',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  dotsContainerClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the dots container to allow custom styles - use your preferred naming convention (helper: \"defaultDotsContainer\")',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  dotsWrapperClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the dots wrapper to allow custom styles - use your preferred naming convention',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  dotClassName: {\n    control: 'text',\n    description:\n      'Custom class name for individual dots to allow custom styles - use your preferred naming convention',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  activeDotClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the active dot to allow custom styles - use your preferred naming convention',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  itemWrapperClassName: {\n    control: 'text',\n    description:\n      'Custom class name for individual carousel item wrappers to allow custom styles - use your preferred naming convention',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  activeItemClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the currently active/visible carousel item to allow custom styles - use your preferred naming convention',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n\n  // Event Callbacks\n  onArrowPress: {\n    control: false,\n    description:\n      'Callback fired when a navigation arrow button (prev/next) is pressed. Receives the direction (\"prev\" or \"next\") as a parameter',\n    table: {\n      category: 'Event Callbacks',\n      type: { summary: '(direction: \"prev\" | \"next\") => void' },\n    },\n  },\n  onDotPress: {\n    control: false,\n    description:\n      'Callback fired when a pagination dot is pressed. Receives the dot index (0-based) as a parameter',\n    table: {\n      category: 'Event Callbacks',\n      type: { summary: '(index: number) => void' },\n    },\n  },\n  onAutoplayPress: {\n    control: false,\n    description:\n      'Callback fired when the autoplay play/pause button is pressed. Receives the state (\"play\" or \"pause\") as a parameter',\n    table: {\n      category: 'Event Callbacks',\n      type: { summary: '(state: \"play\" | \"pause\") => void' },\n    },\n  },\n\n  // Content (disable control)\n  children: {\n    control: { type: 'object' },\n    description: 'Content to be displayed in the carousel',\n    table: {\n      category: 'Content',\n      disable: true,\n    },\n  },\n};\n"],"names":["carouselArgTypes","control","description","table","category","type","summary","looping","options","defaultValue","itemsPerPage","min","max","step","spaceBetweenItems","scrollPadding","mouseDragging","iconType","disable","arrowStyleVariant","arrowSize","hideDisabledArrow","showArrowsOnHover","focusStyle","hideDots","dotsSize","dotsVariant","autoPlay","autoPlayInterval","autoPlayStyleVariant","autoPlayControlSize","carouselWrapperClassName","prevArrowClassName","nextArrowClassName","autoplayControlClassName","dotsContainerClassName","dotsWrapperClassName","dotClassName","activeDotClassName","itemWrapperClassName","activeItemClassName","onArrowPress","onDotPress","onAutoplayPress","children"],"mappings":"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"}
+{"version":3,"file":"CarouselControls.js","sources":["../../../src/components/Carousel/CarouselControls.ts"],"sourcesContent":["// CarouselControls.ts - Shared controls configuration for all Carousel stories\n\nimport type { ArgTypes } from '@storybook/react-vite';\nimport type { CarouselProps } from './Carousel';\n\n/**\n * Shared argTypes configuration for all Carousel stories\n * This ensures consistent controls across all story files\n */\nexport const carouselArgTypes: ArgTypes<CarouselProps> = {\n  // Accessibility Controls\n  'aria-label': {\n    control: 'text',\n    description:\n      'Accessible name for the carousel - describes the purpose or content for screen readers',\n    table: {\n      category: 'Accessibility',\n      type: { summary: 'string' },\n    },\n  },\n  'aria-describedby': {\n    control: 'text',\n    description: 'ID of element that describes the carousel',\n    table: {\n      category: 'Accessibility',\n      type: { summary: 'string' },\n    },\n  },\n\n  // Core Configuration\n  looping: {\n    control: { type: 'radio' },\n    options: ['off', 'infinite', 'backToStart'],\n    description:\n      'Looping behavior: \"infinite\" for continuous cycling, \"backToStart\" for jumping back to start, \"off\" to disable looping',\n    defaultValue: 'off',\n    table: {\n      category: 'Core Configuration',\n      type: { summary: '\"infinite\" | \"backToStart\" | \"off\"' },\n      defaultValue: { summary: '\"off\"' },\n    },\n  },\n  itemsPerPage: {\n    control: { type: 'number', min: 1, max: 10, step: 0.25 },\n    description:\n      'Number of items to display per page (minimum: 1). Decimal values (e.g., 2.25) can be used to show partial items for peek effects',\n    defaultValue: 1,\n    table: {\n      category: 'Core Configuration',\n      type: { summary: 'number | ResponsiveValue<number>' },\n      defaultValue: { summary: '1' },\n    },\n  },\n  spaceBetweenItems: {\n    control: { type: 'number', min: 0, max: 100 },\n    description:\n      'Space between carousel items in pixels. Works with both scroll padding and fractional items',\n    defaultValue: 0,\n    table: {\n      category: 'Core Configuration',\n      type: { summary: 'number | ResponsiveValue<number>' },\n      defaultValue: { summary: '0' },\n    },\n  },\n  scrollPadding: {\n    control: 'text',\n    description:\n      'Amount of padding to add to create a \"peek\" effect. Accepts any valid CSS dimension (px, rem, em, %) - e.g., \"15%\", \"20px\", \"2rem\"',\n    table: {\n      category: 'Core Configuration',\n      type: { summary: 'string | ResponsiveValue<string>' },\n      defaultValue: { summary: 'undefined' },\n    },\n  },\n  mouseDragging: {\n    control: 'boolean',\n    description: 'Whether to enable mouse dragging for the carousel',\n    defaultValue: true,\n    table: {\n      category: 'Core Configuration',\n      type: { summary: 'boolean' },\n      defaultValue: { summary: 'true' },\n    },\n  },\n\n  // Button and Controls\n  iconType: {\n    table: {\n      disable: true,\n    },\n  },\n  arrowStyleVariant: {\n    control: { type: 'select' },\n    options: ['neutral', 'white', 'shapeFlat', 'shapeElevated', 'gradient'],\n    description: 'Style variant for navigation arrow buttons',\n    defaultValue: 'neutral',\n    table: {\n      category: 'Button and Controls',\n      type: {\n        summary:\n          '\"neutral\" | \"white\" | \"shapeFlat\" | \"shapeElevated\" | \"gradient\"',\n      },\n      defaultValue: { summary: '\"neutral\"' },\n    },\n  },\n  arrowSize: {\n    control: { type: 'select' },\n    options: ['sm', 'md', 'lg'],\n    description: 'Size of navigation buttons',\n    defaultValue: 'md',\n    table: {\n      category: 'Button and Controls',\n      type: {\n        summary: '\"sm\" | \"md\" | \"lg\" | ResponsiveValue<\"sm\" | \"md\" | \"lg\">',\n      },\n      defaultValue: { summary: '\"md\"' },\n    },\n  },\n  hideDisabledArrow: {\n    control: 'boolean',\n    description:\n      'Whether to hide navigation buttons when they are disabled (e.g., at first/last slide when looping is off)',\n    defaultValue: false,\n    table: {\n      category: 'Button and Controls',\n      type: { summary: 'boolean' },\n      defaultValue: { summary: 'false' },\n    },\n  },\n  showArrowsOnHover: {\n    control: 'boolean',\n    description:\n      'Whether to show arrows only when hovering over the carousel or when it has focus',\n    defaultValue: false,\n    table: {\n      category: 'Button and Controls',\n      type: { summary: 'boolean | ResponsiveValue<boolean>' },\n      defaultValue: { summary: 'false' },\n    },\n  },\n  focusStyle: {\n    control: { type: 'radio' },\n    options: ['default', 'white'],\n    description:\n      'Focus style for interactive elements - use \"white\" for dark backgrounds',\n    defaultValue: 'default',\n    table: {\n      category: 'Button and Controls',\n      type: { summary: '\"default\" | \"white\"' },\n      defaultValue: { summary: '\"default\"' },\n    },\n  },\n\n  // Dots/Pagination\n  hideDots: {\n    control: 'boolean',\n    description:\n      'Whether to hide pagination dots. Can be set responsively to show/hide dots at different breakpoints',\n    defaultValue: false,\n    table: {\n      category: 'Dots/Pagination',\n      type: { summary: 'boolean | ResponsiveValue<boolean>' },\n      defaultValue: { summary: 'false' },\n    },\n  },\n  dotsSize: {\n    control: { type: 'radio' },\n    options: ['md', 'lg'],\n    description: 'Size of pagination dots when visible',\n    defaultValue: 'md',\n    table: {\n      category: 'Dots/Pagination',\n      type: { summary: '\"md\" | \"lg\"' },\n      defaultValue: { summary: '\"md\"' },\n    },\n  },\n  dotsVariant: {\n    control: { type: 'radio' },\n    options: ['standard', 'transparent'],\n    description: 'Visual style of pagination dots',\n    defaultValue: 'standard',\n    table: {\n      category: 'Dots/Pagination',\n      type: { summary: '\"standard\" | \"transparent\"' },\n      defaultValue: { summary: '\"standard\"' },\n    },\n  },\n\n  // Autoplay\n  autoPlay: {\n    control: 'boolean',\n    description: 'Whether the autoplay is enabled',\n    defaultValue: false,\n    table: {\n      category: 'Autoplay',\n      type: { summary: 'boolean' },\n      defaultValue: { summary: 'false' },\n    },\n  },\n  autoPlayInterval: {\n    control: { type: 'number', min: 1000, max: 10000, step: 500 },\n    description: 'Interval in milliseconds between slides during autoplay',\n    defaultValue: 2000,\n    table: {\n      category: 'Autoplay',\n      type: { summary: 'number' },\n      defaultValue: { summary: '2000' },\n    },\n  },\n  autoPlayStyleVariant: {\n    control: { type: 'select' },\n    options: ['neutralVibrant', 'neutralSubtle', 'whiteVibrant', 'whiteSubtle'],\n    description: 'Style variant for autoplay control button',\n    defaultValue: 'neutralVibrant',\n    table: {\n      category: 'Autoplay',\n      type: {\n        summary:\n          '\"neutralVibrant\" | \"neutralSubtle\" | \"whiteVibrant\" | \"whiteSubtle\"',\n      },\n      defaultValue: { summary: '\"neutralVibrant\"' },\n    },\n  },\n  autoPlayControlSize: {\n    control: { type: 'radio' },\n    options: ['sm', 'md'],\n    description: 'Size of autoplay control button',\n    defaultValue: 'md',\n    table: {\n      category: 'Autoplay',\n      type: { summary: '\"sm\" | \"md\"' },\n      defaultValue: { summary: '\"md\"' },\n    },\n  },\n\n  // Custom Styling & Positioning\n  carouselWrapperClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the outermost wrapper to allow custom styles - use your preferred naming convention (helper: \"defaultCarouselWrapper\")',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  prevArrowClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the previous button to allow custom styles - use your preferred naming convention (helper: \"defaultPrevButton\")',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  nextArrowClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the next button to allow custom styles - use your preferred naming convention (helper: \"defaultNextButton\")',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  autoplayControlClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the autoplay control to allow custom styles - use your preferred naming convention (helper: \"autoplayControl\")',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  dotsContainerClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the dots container to allow custom styles - use your preferred naming convention (helper: \"defaultDotsContainer\")',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  dotsWrapperClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the dots wrapper to allow custom styles - use your preferred naming convention',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  dotClassName: {\n    control: 'text',\n    description:\n      'Custom class name for individual dots to allow custom styles - use your preferred naming convention',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  activeDotClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the active dot to allow custom styles - use your preferred naming convention',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  itemWrapperClassName: {\n    control: 'text',\n    description:\n      'Custom class name for individual carousel item wrappers to allow custom styles - use your preferred naming convention',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  scrollerClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the carousel scroll container to allow custom grid and scrolling styles',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n  activeItemClassName: {\n    control: 'text',\n    description:\n      'Custom class name for the currently active/visible carousel item to allow custom styles - use your preferred naming convention',\n    table: {\n      category: 'Custom Styling & Positioning',\n      type: { summary: 'string' },\n    },\n  },\n\n  // Event Callbacks\n  onArrowPress: {\n    control: false,\n    description:\n      'Callback fired when a navigation arrow button (prev/next) is pressed. Receives the direction (\"prev\" or \"next\") as a parameter',\n    table: {\n      category: 'Event Callbacks',\n      type: { summary: '(direction: \"prev\" | \"next\") => void' },\n    },\n  },\n  onDotPress: {\n    control: false,\n    description:\n      'Callback fired when a pagination dot is pressed. Receives the dot index (0-based) as a parameter',\n    table: {\n      category: 'Event Callbacks',\n      type: { summary: '(index: number) => void' },\n    },\n  },\n  onAutoplayPress: {\n    control: false,\n    description:\n      'Callback fired when the autoplay play/pause button is pressed. Receives the state (\"play\" or \"pause\") as a parameter',\n    table: {\n      category: 'Event Callbacks',\n      type: { summary: '(state: \"play\" | \"pause\") => void' },\n    },\n  },\n\n  // Content (disable control)\n  children: {\n    control: { type: 'object' },\n    description: 'Content to be displayed in the carousel',\n    table: {\n      category: 'Content',\n      disable: true,\n    },\n  },\n};\n"],"names":["carouselArgTypes","control","description","table","category","type","summary","looping","options","defaultValue","itemsPerPage","min","max","step","spaceBetweenItems","scrollPadding","mouseDragging","iconType","disable","arrowStyleVariant","arrowSize","hideDisabledArrow","showArrowsOnHover","focusStyle","hideDots","dotsSize","dotsVariant","autoPlay","autoPlayInterval","autoPlayStyleVariant","autoPlayControlSize","carouselWrapperClassName","prevArrowClassName","nextArrowClassName","autoplayControlClassName","dotsContainerClassName","dotsWrapperClassName","dotClassName","activeDotClassName","itemWrapperClassName","scrollerClassName","activeItemClassName","onArrowPress","onDotPress","onAutoplayPress","children"],"mappings":"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"}

package/dist/components/Carousel/index.d.ts

@@ -1 +1,3 @@
 export { default } from './Carousel';
+export { CarouselButton } from './CarouselButton/CarouselButton';
+export type { CarouselButtonProps } from './CarouselButton/CarouselButton';

package/dist/components/Carousel/index.js

@@ -1,2 +1,2 @@
-import{Carousel as o}from"./Carousel.js";export{o as default};
+import{Carousel as o}from"./Carousel.js";import{CarouselButton as r}from"./CarouselButton/CarouselButton.js";export{r as CarouselButton,o as default};
 //# sourceMappingURL=index.js.map

package/dist/components/CategoryTileGroup/CategoryTileGroup.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+import { BoxLinkProps } from '../BoxLink';
+export interface CategoryTileGroupProps {
+    /**
+     * Category tile items rendered in the group.
+     */
+    children: React.ReactNode;
+    /**
+     * Accessible label for the carousel when tiles overflow into carousel layout.
+     */
+    'aria-label'?: string;
+}
+export interface CategoryTileGroupTileProps {
+    /**
+     * Destination URL for the tile.
+     */
+    href: NonNullable<BoxLinkProps['href']>;
+    /**
+     * Whether the tile is disabled.
+     * Prevents navigation and reflects aria-disabled.
+     * @default false
+     */
+    isDisabled?: BoxLinkProps['isDisabled'];
+    /**
+     * The target attribute for the link.
+     * @default '_self'
+     */
+    target?: BoxLinkProps['target'];
+    /**
+     * Custom screen reader text for external links.
+     * @default 'opens in a new tab'
+     */
+    externalLinkScreenReaderText?: BoxLinkProps['externalLinkScreenReaderText'];
+    /**
+     * Leading media content.
+     */
+    media: React.ReactNode;
+    /**
+     * Main title content.
+     */
+    title: string;
+    /**
+     * @internal
+     */
+    renderAs?: 'list' | 'carousel';
+}
+interface CategoryTileGroupComponent extends React.ForwardRefExoticComponent<CategoryTileGroupProps & React.RefAttributes<HTMLUListElement>> {
+    Tile: React.ForwardRefExoticComponent<CategoryTileGroupTileProps & React.RefAttributes<HTMLAnchorElement>>;
+}
+export declare const CategoryTileGroup: CategoryTileGroupComponent;
+export declare const CategoryTileGroupTile: React.ForwardRefExoticComponent<CategoryTileGroupTileProps & React.RefAttributes<HTMLAnchorElement>>;
+export default CategoryTileGroup;

package/dist/components/CategoryTileGroup/CategoryTileGroup.js

@@ -0,0 +1,8 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import t,{forwardRef as a,useRef as o,useState as l,useEffect as i,useImperativeHandle as c,useCallback as n}from"react";import{Box as s}from"../Box/Box.js";import{BoxLink as u}from"../BoxLink/BoxLink.js";import"../BoxLink/BoxLinkContext.js";import{Label as d}from"../Label/Label.js";import{Carousel as _}from"../Carousel/Carousel.js";import{CarouselButton as g}from"../Carousel/CarouselButton/CarouselButton.js";import{useBreakpoint as m}from"../../utils/breakpoint/hooks/useBreakpoint.js";import{useFitCount as y}from"../../utils/layout/hooks/useFitCount.js";import '../../assets/CategoryTileGroup.css';const p={"category-tile-group__container":"_category-tile-group__container_1137c_1","category-tile-group":"_category-tile-group_1137c_1","category-tile":"_category-tile_1137c_1","category-tile--list":"_category-tile--list_1137c_19","category-tile--carousel":"_category-tile--carousel_1137c_23","category-tile__title":"_category-tile__title_1137c_34","category-tile-carousel__shell":"_category-tile-carousel__shell_1137c_58","category-tile-carousel__wrapper":"_category-tile-carousel__wrapper_1137c_62","category-tile-carousel__scroller":"_category-tile-carousel__scroller_1137c_68","category-tile-carousel__item-wrapper":"_category-tile-carousel__item-wrapper_1137c_73","category-tile-carousel__internal-arrow--prev":"_category-tile-carousel__internal-arrow--prev_1137c_81","category-tile-carousel__internal-arrow--next":"_category-tile-carousel__internal-arrow--next_1137c_82","category-tile-carousel__arrow--prev":"_category-tile-carousel__arrow--prev_1137c_87","category-tile-carousel__arrow--next":"_category-tile-carousel__arrow--next_1137c_88"},v={canGoPrev:!1,canGoNext:!1},f=a(function({href:t,isDisabled:a=!1,target:o,externalLinkScreenReaderText:l,media:i,title:c,renderAs:n="list"},_){/* @__PURE__ */
+return e("carousel"===n?"div":"li",{className:"carousel"===n?`${p["category-tile"]} ${p["category-tile--carousel"]}`:`${p["category-tile"]} ${p["category-tile--list"]}`,"data-category-tile-item":"true",children:/* @__PURE__ */e(u,{href:t,isDisabled:a,target:o,externalLinkScreenReaderText:l,styleVariant:"default",allowDragGestures:"carousel"===n,ref:_,children:/* @__PURE__ */r(s,{backgroundColor:"layer1",borderRadius:"card",display:"flex",flexDirection:"column",gap:"2xs",alignItems:"center",justifyContent:"flexStart",padding:"xs",minHeight:"124px",height:"-webkit-fill-available",children:[
+/* @__PURE__ */e("div",{className:p["category-tile__media"],children:i}),
+/* @__PURE__ */e("div",{className:p["category-tile__title"],children:/* @__PURE__ */e(d,{as:"p",size:"sm",foregroundColor:"accentSecondary",children:c})})]})})})}),w=a(function({children:a,"aria-label":s},u){const d=o(null),f=o(null),w=o(null),h=o(null),x=o(null),[C,b]=l(v),N=m();i(()=>(x.current||"undefined"==typeof document||(x.current=document.createElement("ul")),()=>{x.current=null}),[]);const k=t.Children.toArray(a),B=[`.${p["category-tile-carousel__wrapper"]} > div`,'[data-category-tile-measure-container="true"]',`.${p["category-tile-carousel__wrapper"]}`].join(", "),{fitCount:S,itemsPerPage:L,isOverflowing:j,isReady:E}=y({containerRef:d,measureContainerSelector:'[data-category-tile-measure-container="true"]',measureItemSelector:'[data-category-tile-item="true"]',availableWidthSelector:B,itemCount:k.length,fallbackGap:12});c(u,()=>h.current?h.current:(x.current||"undefined"==typeof document||(x.current=document.createElement("ul")),x.current));const R=E&&j&&S>0,A=["base","sm","md",""].includes(N??""),D=A,G=A?L:S,P=A?"15%":void 0,T=n(e=>{const r=f.current;if(!r)return!0;const t=r.querySelector('[data-carousel-scroller="true"]');if(!t)return!0;const a=t.querySelector(`[data-item-index="${e}"]`);if(!a)return!0;const o=t.getBoundingClientRect(),l=a.getBoundingClientRect();return l.left>=o.left-1&&l.right<=o.right+1},[]),$=n(()=>{if(!R||0===k.length)return void b(v);const e=T(0),r=T(k.length-1);b({canGoPrev:!e,canGoNext:!r})},[T,k.length,R]);i(()=>{if(!R||!f.current)return void b(v);const e=f.current,r=e.querySelector('[data-carousel-scroller="true"]');if(!r)return void b(v);const t=()=>{requestAnimationFrame(()=>{$()})},a=window.setTimeout(()=>{$()},100);r.addEventListener("scroll",t,{passive:!0});const o=new ResizeObserver(()=>{t()});return o.observe(e),o.observe(r),window.addEventListener("resize",t,{passive:!0}),()=>{window.clearTimeout(a),r.removeEventListener("scroll",t),o.disconnect(),window.removeEventListener("resize",t)}},[k.length,R,$]);const q=e=>{if(A){const r=f.current,t=r?.querySelector('[data-carousel-scroller="true"]');if(t){const r=t.querySelector('[data-item-index="0"]'),a=t.querySelector('[data-item-index="1"]');if(r){const o=r.getBoundingClientRect(),l=a?.getBoundingClientRect(),i=l?Math.abs(l.left-o.left):o.width;return void t.scrollBy({left:"prev"===e?-i:i,behavior:"smooth"})}}}"prev"===e?w.current?.prev():w.current?.next()};let z;return z=R?/* @__PURE__ */r("div",{className:p["category-tile-carousel__shell"],ref:f,"data-show-arrows-on-hover":D?"true":void 0,children:[
+/* @__PURE__ */e(_,{"aria-label":s??"Category tile group",itemsPerPage:G,scrollPadding:P,hideDots:!0,showArrowsOnHover:D,arrowSize:"md",arrowStyleVariant:"shapeElevated",spaceBetweenItems:8,hideDisabledArrow:!0,controlsRef:w,carouselWrapperClassName:p["category-tile-carousel__wrapper"],itemWrapperClassName:p["category-tile-carousel__item-wrapper"],scrollerClassName:p["category-tile-carousel__scroller"],prevArrowClassName:p["category-tile-carousel__internal-arrow--prev"],nextArrowClassName:p["category-tile-carousel__internal-arrow--next"],children:k.map((e,r)=>t.isValidElement(e)?t.cloneElement(e,{renderAs:"carousel",key:e.key??`category-tile-${r}`}):e)}),
+/* @__PURE__ */e(g,{dir:"prev",standalone:!0,isDisabled:!C.canGoPrev,size:"md",variant:"shapeElevated",className:p["category-tile-carousel__arrow--prev"],hideDisabledArrow:!0,onPress:()=>q("prev")}),
+/* @__PURE__ */e(g,{dir:"next",standalone:!0,isDisabled:!C.canGoNext,size:"md",variant:"shapeElevated",className:p["category-tile-carousel__arrow--next"],hideDisabledArrow:!0,onPress:()=>q("next")})]}):/* @__PURE__ */e("ul",{className:p["category-tile-group"],ref:h,"data-category-tile-measure-container":"true",children:a}),/* @__PURE__ */e("div",{className:p["category-tile-group__container"],ref:d,children:z})});w.displayName="CategoryTileGroup",w.Tile=f,f.displayName="CategoryTileGroup.Tile";const h=f;export{w as CategoryTileGroup,h as CategoryTileGroupTile,w as default};
+//# sourceMappingURL=CategoryTileGroup.js.map

package/dist/components/CategoryTileGroup/CategoryTileGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryTileGroup.js","sources":["../../../src/components/CategoryTileGroup/CategoryTileGroup.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport styles from './CategoryTileGroup.module.css';\nimport Box from '../Box';\nimport BoxLink from '../BoxLink';\nimport type { BoxLinkProps } from '../BoxLink';\nimport Label from '../Label';\nimport Carousel from '../Carousel';\nimport { CarouselButton } from '../Carousel';\nimport type { CarouselControls } from '../Carousel/Carousel';\nimport { useFitCount } from '../../utils';\nimport { useBreakpoint } from '../../utils/breakpoint/hooks/useBreakpoint';\n\nconst DEFAULT_CAROUSEL_ARROW_STATE = {\n  canGoPrev: false,\n  canGoNext: false,\n};\n\nexport interface CategoryTileGroupProps {\n  /**\n   * Category tile items rendered in the group.\n   */\n  children: React.ReactNode;\n  /**\n   * Accessible label for the carousel when tiles overflow into carousel layout.\n   */\n  'aria-label'?: string;\n}\n\nexport interface CategoryTileGroupTileProps {\n  /**\n   * Destination URL for the tile.\n   */\n  href: NonNullable<BoxLinkProps['href']>;\n  /**\n   * Whether the tile is disabled.\n   * Prevents navigation and reflects aria-disabled.\n   * @default false\n   */\n  isDisabled?: BoxLinkProps['isDisabled'];\n  /**\n   * The target attribute for the link.\n   * @default '_self'\n   */\n  target?: BoxLinkProps['target'];\n  /**\n   * Custom screen reader text for external links.\n   * @default 'opens in a new tab'\n   */\n  externalLinkScreenReaderText?: BoxLinkProps['externalLinkScreenReaderText'];\n  /**\n   * Leading media content.\n   */\n  media: React.ReactNode;\n  /**\n   * Main title content.\n   */\n  title: string;\n  /**\n   * @internal\n   */\n  renderAs?: 'list' | 'carousel';\n}\n\ninterface CategoryTileGroupComponent\n  extends React.ForwardRefExoticComponent<\n    CategoryTileGroupProps & React.RefAttributes<HTMLUListElement>\n  > {\n  Tile: React.ForwardRefExoticComponent<\n    CategoryTileGroupTileProps & React.RefAttributes<HTMLAnchorElement>\n  >;\n}\n\nconst Tile = forwardRef<HTMLAnchorElement, CategoryTileGroupTileProps>(\n  function CategoryTileGroupTile(\n    {\n      href,\n      isDisabled = false,\n      target,\n      externalLinkScreenReaderText,\n      media,\n      title,\n      renderAs = 'list',\n    },\n    ref,\n  ) {\n    const WrapperElement = renderAs === 'carousel' ? 'div' : 'li';\n    const wrapperClassName =\n      renderAs === 'carousel'\n        ? `${styles['category-tile']} ${styles['category-tile--carousel']}`\n        : `${styles['category-tile']} ${styles['category-tile--list']}`;\n\n    return (\n      <WrapperElement\n        className={wrapperClassName}\n        data-category-tile-item=\"true\"\n      >\n        <BoxLink\n          href={href}\n          isDisabled={isDisabled}\n          target={target}\n          externalLinkScreenReaderText={externalLinkScreenReaderText}\n          styleVariant=\"default\"\n          allowDragGestures={renderAs === 'carousel'}\n          ref={ref}\n        >\n          <Box\n            backgroundColor=\"layer1\"\n            borderRadius=\"card\"\n            display=\"flex\"\n            flexDirection=\"column\"\n            gap=\"2xs\"\n            alignItems=\"center\"\n            justifyContent=\"flexStart\"\n            padding=\"xs\"\n            minHeight=\"124px\"\n            height=\"-webkit-fill-available\"\n          >\n            <div className={styles['category-tile__media']}>{media}</div>\n            <div className={styles['category-tile__title']}>\n              <Label as=\"p\" size=\"sm\" foregroundColor=\"accentSecondary\">\n                {title}\n              </Label>\n            </div>\n          </Box>\n        </BoxLink>\n      </WrapperElement>\n    );\n  },\n);\n\nexport const CategoryTileGroup = forwardRef<\n  HTMLUListElement,\n  CategoryTileGroupProps\n>(function CategoryTileGroup({ children, 'aria-label': ariaLabel }, ref) {\n  const CATEGORY_TILE_GAP_FALLBACK = 12;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const carouselShellRef = useRef<HTMLDivElement>(null);\n  const carouselControlsRef = useRef<CarouselControls | null>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n  const detachedListRef = useRef<HTMLUListElement | null>(null);\n  const [carouselArrowState, setCarouselArrowState] = useState(\n    DEFAULT_CAROUSEL_ARROW_STATE,\n  );\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    if (!detachedListRef.current && typeof document !== 'undefined') {\n      detachedListRef.current = document.createElement('ul');\n    }\n\n    return () => {\n      detachedListRef.current = null;\n    };\n  }, []);\n\n  const items = React.Children.toArray(children);\n  const availableWidthSelector = [\n    `.${styles['category-tile-carousel__wrapper']} > div`,\n    `[data-category-tile-measure-container=\"true\"]`,\n    `.${styles['category-tile-carousel__wrapper']}`,\n  ].join(', ');\n\n  const { fitCount, itemsPerPage, isOverflowing, isReady } = useFitCount({\n    containerRef,\n    measureContainerSelector: '[data-category-tile-measure-container=\"true\"]',\n    measureItemSelector: '[data-category-tile-item=\"true\"]',\n    availableWidthSelector,\n    itemCount: items.length,\n    fallbackGap: CATEGORY_TILE_GAP_FALLBACK,\n  });\n\n  useImperativeHandle(ref, () => {\n    if (listRef.current) {\n      return listRef.current;\n    }\n\n    if (!detachedListRef.current && typeof document !== 'undefined') {\n      detachedListRef.current = document.createElement('ul');\n    }\n\n    return detachedListRef.current as HTMLUListElement;\n  });\n\n  const shouldRenderCarousel = isReady && isOverflowing && fitCount > 0;\n  const isMobileBreakpoint = ['base', 'sm', 'md', ''].includes(\n    breakpoint ?? '',\n  );\n  const shouldShowArrowsOnHover = isMobileBreakpoint;\n  const carouselItemsPerPage = isMobileBreakpoint ? itemsPerPage : fitCount;\n  const carouselScrollPadding = isMobileBreakpoint ? '15%' : undefined;\n\n  const isCarouselItemFullyVisible = useCallback((itemIndex: number) => {\n    const carouselShell = carouselShellRef.current;\n\n    if (!carouselShell) {\n      return true;\n    }\n\n    const scroller = carouselShell.querySelector(\n      '[data-carousel-scroller=\"true\"]',\n    ) as HTMLElement | null;\n\n    if (!scroller) {\n      return true;\n    }\n\n    const item = scroller.querySelector(\n      `[data-item-index=\"${itemIndex}\"]`,\n    ) as HTMLElement | null;\n\n    if (!item) {\n      return true;\n    }\n\n    const scrollerRect = scroller.getBoundingClientRect();\n    const itemRect = item.getBoundingClientRect();\n    const tolerance = 1;\n\n    return (\n      itemRect.left >= scrollerRect.left - tolerance &&\n      itemRect.right <= scrollerRect.right + tolerance\n    );\n  }, []);\n\n  const updateStandaloneArrowState = useCallback(() => {\n    if (!shouldRenderCarousel || items.length === 0) {\n      setCarouselArrowState(DEFAULT_CAROUSEL_ARROW_STATE);\n      return;\n    }\n\n    const firstItemVisible = isCarouselItemFullyVisible(0);\n    const lastItemVisible = isCarouselItemFullyVisible(items.length - 1);\n\n    setCarouselArrowState({\n      canGoPrev: !firstItemVisible,\n      canGoNext: !lastItemVisible,\n    });\n  }, [isCarouselItemFullyVisible, items.length, shouldRenderCarousel]);\n\n  useEffect(() => {\n    if (!shouldRenderCarousel || !carouselShellRef.current) {\n      setCarouselArrowState(DEFAULT_CAROUSEL_ARROW_STATE);\n      return;\n    }\n\n    const carouselShell = carouselShellRef.current;\n    const scroller = carouselShell.querySelector(\n      '[data-carousel-scroller=\"true\"]',\n    ) as HTMLElement | null;\n\n    if (!scroller) {\n      setCarouselArrowState(DEFAULT_CAROUSEL_ARROW_STATE);\n      return;\n    }\n\n    const scheduleUpdate = () => {\n      requestAnimationFrame(() => {\n        updateStandaloneArrowState();\n      });\n    };\n\n    const initialTimer = window.setTimeout(() => {\n      updateStandaloneArrowState();\n    }, 100);\n\n    scroller.addEventListener('scroll', scheduleUpdate, { passive: true });\n\n    const resizeObserver = new ResizeObserver(() => {\n      scheduleUpdate();\n    });\n\n    resizeObserver.observe(carouselShell);\n    resizeObserver.observe(scroller);\n\n    window.addEventListener('resize', scheduleUpdate, { passive: true });\n\n    return () => {\n      window.clearTimeout(initialTimer);\n      scroller.removeEventListener('scroll', scheduleUpdate);\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', scheduleUpdate);\n    };\n  }, [items.length, shouldRenderCarousel, updateStandaloneArrowState]);\n\n  const handleStandaloneArrowPress = (direction: 'prev' | 'next') => {\n    if (isMobileBreakpoint) {\n      const carouselShell = carouselShellRef.current;\n      const scroller = carouselShell?.querySelector(\n        '[data-carousel-scroller=\"true\"]',\n      ) as HTMLElement | null;\n\n      if (scroller) {\n        const currentFirstItem = scroller.querySelector(\n          '[data-item-index=\"0\"]',\n        ) as HTMLElement | null;\n        const nextItem = scroller.querySelector(\n          '[data-item-index=\"1\"]',\n        ) as HTMLElement | null;\n\n        if (currentFirstItem) {\n          const currentRect = currentFirstItem.getBoundingClientRect();\n          const nextRect = nextItem?.getBoundingClientRect();\n          const scrollAmount = nextRect\n            ? Math.abs(nextRect.left - currentRect.left)\n            : currentRect.width;\n\n          scroller.scrollBy({\n            left: direction === 'prev' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n          });\n          return;\n        }\n      }\n    }\n\n    if (direction === 'prev') {\n      carouselControlsRef.current?.prev();\n    } else {\n      carouselControlsRef.current?.next();\n    }\n  };\n\n  let content: React.ReactNode;\n\n  if (shouldRenderCarousel) {\n    content = (\n      <div\n        className={styles['category-tile-carousel__shell']}\n        ref={carouselShellRef}\n        data-show-arrows-on-hover={shouldShowArrowsOnHover ? 'true' : undefined}\n      >\n        <Carousel\n          aria-label={ariaLabel ?? 'Category tile group'}\n          itemsPerPage={carouselItemsPerPage}\n          scrollPadding={carouselScrollPadding}\n          hideDots={true}\n          showArrowsOnHover={shouldShowArrowsOnHover}\n          arrowSize=\"md\"\n          arrowStyleVariant=\"shapeElevated\"\n          spaceBetweenItems={8}\n          hideDisabledArrow={true}\n          controlsRef={carouselControlsRef}\n          carouselWrapperClassName={styles['category-tile-carousel__wrapper']}\n          itemWrapperClassName={styles['category-tile-carousel__item-wrapper']}\n          scrollerClassName={styles['category-tile-carousel__scroller']}\n          prevArrowClassName={\n            styles['category-tile-carousel__internal-arrow--prev']\n          }\n          nextArrowClassName={\n            styles['category-tile-carousel__internal-arrow--next']\n          }\n        >\n          {items.map((child, index) => {\n            if (!React.isValidElement<CategoryTileGroupTileProps>(child)) {\n              return child;\n            }\n\n            return React.cloneElement(child, {\n              renderAs: 'carousel',\n              key: child.key ?? `category-tile-${index}`,\n            });\n          })}\n        </Carousel>\n\n        <CarouselButton\n          dir=\"prev\"\n          standalone={true}\n          isDisabled={!carouselArrowState.canGoPrev}\n          size=\"md\"\n          variant=\"shapeElevated\"\n          className={styles['category-tile-carousel__arrow--prev']}\n          hideDisabledArrow={true}\n          onPress={() => handleStandaloneArrowPress('prev')}\n        />\n        <CarouselButton\n          dir=\"next\"\n          standalone={true}\n          isDisabled={!carouselArrowState.canGoNext}\n          size=\"md\"\n          variant=\"shapeElevated\"\n          className={styles['category-tile-carousel__arrow--next']}\n          hideDisabledArrow={true}\n          onPress={() => handleStandaloneArrowPress('next')}\n        />\n      </div>\n    );\n  } else {\n    content = (\n      <ul\n        className={styles['category-tile-group']}\n        ref={listRef}\n        data-category-tile-measure-container=\"true\"\n      >\n        {children}\n      </ul>\n    );\n  }\n\n  return (\n    <div\n      className={styles['category-tile-group__container']}\n      ref={containerRef}\n    >\n      {content}\n    </div>\n  );\n}) as CategoryTileGroupComponent;\n\nCategoryTileGroup.displayName = 'CategoryTileGroup';\nCategoryTileGroup.Tile = Tile;\nTile.displayName = 'CategoryTileGroup.Tile';\n\nexport const CategoryTileGroupTile = Tile;\n\nexport default CategoryTileGroup;\n"],"names":["DEFAULT_CAROUSEL_ARROW_STATE","canGoPrev","canGoNext","Tile","forwardRef","href","isDisabled","target","externalLinkScreenReaderText","media","title","renderAs","ref","jsx","className","styles","children","BoxLink","styleVariant","allowDragGestures","jsxs","Box","backgroundColor","borderRadius","display","flexDirection","gap","alignItems","justifyContent","padding","minHeight","height","Label","as","size","foregroundColor","CategoryTileGroup","ariaLabel","containerRef","useRef","carouselShellRef","carouselControlsRef","listRef","detachedListRef","carouselArrowState","setCarouselArrowState","useState","breakpoint","useBreakpoint","useEffect","current","document","createElement","items","React","Children","toArray","availableWidthSelector","join","fitCount","itemsPerPage","isOverflowing","isReady","useFitCount","measureContainerSelector","measureItemSelector","itemCount","length","fallbackGap","useImperativeHandle","shouldRenderCarousel","isMobileBreakpoint","includes","shouldShowArrowsOnHover","carouselItemsPerPage","carouselScrollPadding","isCarouselItemFullyVisible","useCallback","itemIndex","carouselShell","scroller","querySelector","item","scrollerRect","getBoundingClientRect","itemRect","left","right","updateStandaloneArrowState","firstItemVisible","lastItemVisible","scheduleUpdate","requestAnimationFrame","initialTimer","window","setTimeout","addEventListener","passive","resizeObserver","ResizeObserver","observe","clearTimeout","removeEventListener","disconnect","handleStandaloneArrowPress","direction","currentFirstItem","nextItem","currentRect","nextRect","scrollAmount","Math","abs","width","scrollBy","behavior","prev","next","content","Carousel","scrollPadding","hideDots","showArrowsOnHover","arrowSize","arrowStyleVariant","spaceBetweenItems","hideDisabledArrow","controlsRef","carouselWrapperClassName","itemWrapperClassName","scrollerClassName","prevArrowClassName","nextArrowClassName","map","child","index","isValidElement","cloneElement","key","CarouselButton","dir","standalone","variant","onPress","displayName","CategoryTileGroupTile"],"mappings":"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"}

package/dist/components/CategoryTileGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CategoryTileGroup';
+export type * from './CategoryTileGroup';

package/dist/components/CategoryTileGroup/index.js

@@ -0,0 +1,2 @@
+import{CategoryTileGroup as o}from"./CategoryTileGroup.js";export{o as default};
+//# sourceMappingURL=index.js.map

package/dist/components/CategoryTileGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -56,5 +56,5 @@ export interface CheckboxProps extends AriaCheckboxProps {
      */
     testId?: string;
 }
-export declare const Checkbox: ({ label, isIndeterminate, defaultSelected, isSelected, value, isDisabled, isReadOnly, isRequired, isInvalid, validate, autoFocus, name, validationBehavior, description, children, errorMessage, errorPrefix, testId, focusStyle, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLLabelElement>>;
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
-import{jsxs as e,jsx as i,Fragment as a}from"react/jsx-runtime";import{useId as r,useMemo as l}from"react";import{Checkbox as t}from"react-aria-components";import{c as s}from"../../index-CCUt_dAN.js";import d from"../FieldDescription/FieldDescription.js";import{FieldError as o}from"../FieldError/FieldError.js";import '../../assets/Checkbox.css';const c="_checkboxContainer_195a9_24",n="_checkboxLabel_195a9_29",u="_checkboxDescription_195a9_33",_="_checkboxSvgWrapper_195a9_38",m="_svg_195a9_52",h="_checkboxLabelWrapper_195a9_179",v={isInvalid:!0,validationErrors:["Invalid"],validationDetails:{valid:!1}},f=s("_checkbox_195a9_2",{variants:{focusStyle:{default:"_defaultFocus_195a9_80",white:"_whiteFocus_195a9_84"}},defaultVariants:{focusStyle:"default"}}),p=({label:s,isIndeterminate:p,defaultSelected:b,isSelected:x,value:y,isDisabled:I,isReadOnly:S,isRequired:F,isInvalid:k,validate:N,autoFocus:D,name:g,validationBehavior:j,description:w,children:B,errorMessage:E,errorPrefix:R="Error:",testId:q,focusStyle:C="default",...L})=>{const O=r(),P=r(),W=l(()=>k?"function"==typeof E?E(v):E:null,[E,k]),M=[w?P:null,k&&W?O:null].filter(Boolean).join(" "),V=s||B;/* @__PURE__ */
-return e("div",{className:c,"data-testid":q,children:[k&&W&&/* @__PURE__ */i(o,{id:O,errorPrefix:R,isInvalid:k,children:W}),
-/* @__PURE__ */e("div",{className:h,children:[
-/* @__PURE__ */i(t,{className:f({focusStyle:C}),isIndeterminate:p,defaultSelected:b,isSelected:x,value:y,isDisabled:I,isReadOnly:S,isRequired:F,isInvalid:k,validate:N,autoFocus:D,name:g,validationBehavior:j,"aria-describedby":M||void 0,...L,children:({isIndeterminate:r})=>/* @__PURE__ */e(a,{children:[
-/* @__PURE__ */i("div",{className:`${_}`,"data-disabled":I,children:/* @__PURE__ */i("svg",{className:m,viewBox:"0 0 18 18","aria-hidden":"true",children:r?/* @__PURE__ */i("rect",{x:1,y:7.5,width:15,height:3}):/* @__PURE__ */i("polyline",{points:"1 9 7 14 15 4"})})}),V?/* @__PURE__ */i("span",{className:n,children:V}):null]})}),w&&/* @__PURE__ */i(d,{id:P,className:u,children:w})]})]})};export{p as Checkbox,p as default};
+import{jsxs as e,jsx as i,Fragment as a}from"react/jsx-runtime";import{forwardRef as r,useId as l,useMemo as t}from"react";import{Checkbox as s}from"react-aria-components";import{c as d}from"../../index-CCUt_dAN.js";import o from"../FieldDescription/FieldDescription.js";import{FieldError as c}from"../FieldError/FieldError.js";import '../../assets/Checkbox.css';const n="_checkboxContainer_195a9_24",u="_checkboxLabel_195a9_29",m="_checkboxDescription_195a9_33",_="_checkboxSvgWrapper_195a9_38",h="_svg_195a9_52",v="_checkboxLabelWrapper_195a9_179",f={isInvalid:!0,validationErrors:["Invalid"],validationDetails:{valid:!1}},p=d("_checkbox_195a9_2",{variants:{focusStyle:{default:"_defaultFocus_195a9_80",white:"_whiteFocus_195a9_84"}},defaultVariants:{focusStyle:"default"}}),b=r(({label:r,isIndeterminate:d,defaultSelected:b,isSelected:x,value:y,isDisabled:I,isReadOnly:S,isRequired:k,isInvalid:F,validate:N,autoFocus:D,name:g,validationBehavior:j,description:w,children:B,errorMessage:E,errorPrefix:R="Error:",testId:C,focusStyle:q="default",...L},O)=>{const P=l(),W=l(),M=t(()=>F?"function"==typeof E?E(f):E:null,[E,F]),V=[w?W:null,F&&M?P:null].filter(Boolean).join(" "),$=r||B;/* @__PURE__ */
+return e("div",{className:n,"data-testid":C,children:[F&&M&&/* @__PURE__ */i(c,{id:P,errorPrefix:R,isInvalid:F,children:M}),
+/* @__PURE__ */e("div",{className:v,children:[
+/* @__PURE__ */i(s,{ref:O,className:p({focusStyle:q}),isIndeterminate:d,defaultSelected:b,isSelected:x,value:y,isDisabled:I,isReadOnly:S,isRequired:k,isInvalid:F,validate:N,autoFocus:D,name:g,validationBehavior:j,"aria-describedby":V||void 0,...L,children:({isIndeterminate:r})=>/* @__PURE__ */e(a,{children:[
+/* @__PURE__ */i("div",{className:`${_}`,"data-disabled":I,children:/* @__PURE__ */i("svg",{className:h,viewBox:"0 0 18 18","aria-hidden":"true",children:r?/* @__PURE__ */i("rect",{x:1,y:7.5,width:15,height:3}):/* @__PURE__ */i("polyline",{points:"1 9 7 14 15 4"})})}),$?/* @__PURE__ */i("span",{className:u,children:$}):null]})}),w&&/* @__PURE__ */i(o,{id:W,className:m,children:w})]})]})});b.displayName="Checkbox";export{b as Checkbox,b as default};
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useMemo, useId } from 'react';\nimport { ValidationError } from '@react-types/shared';\nimport {\n  ValidationResult,\n  Checkbox as AriaCheckbox,\n  CheckboxProps as AriaCheckboxProps,\n} from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\n\nimport FieldDescription from '../FieldDescription';\nimport FieldError from '../FieldError';\nimport styles from './Checkbox.module.css';\n\n// Extracted constant to avoid recreation on every render\nconst DEFAULT_VALIDATION_RESULT: ValidationResult = {\n  isInvalid: true,\n  validationErrors: ['Invalid'],\n  validationDetails: { valid: false } as unknown as ValidityState,\n};\n\nexport interface CheckboxProps extends AriaCheckboxProps {\n  /** The label of the checkbox, can be a string or a React node. */\n  label?: string | React.ReactNode;\n  /** Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. */\n  isIndeterminate?: boolean;\n  /** Whether the element should be selected (uncontrolled). */\n  defaultSelected?: boolean;\n  /** Whether the element should be selected (controlled). */\n  isSelected?: boolean;\n  /** The value of the input element, used when submitting an HTML form. See MDN. */\n  value?: string;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input can be selected but not changed by the user. */\n  isReadOnly?: boolean;\n  /** Whether user input is required on the input before form submission. */\n  isRequired?: boolean;\n  /** Whether the input value is invalid. */\n  isInvalid?: boolean;\n  /** A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior=\"native\". For realtime validation, use the isInvalid prop instead. */\n  validate?: (value: unknown) => ValidationError | true | null | undefined;\n  /** Whether the element should receive focus on render. */\n  autoFocus?: boolean;\n  /** The name of the input element, used when submitting an HTML form. See MDN. */\n  name?: string;\n  /**\n   * Whether to use native HTML form validation to prevent form submission\n   * when the value is missing or invalid, or mark the field as required\n   * or invalid via ARIA.\n   * @default 'aria'\n   */\n  validationBehavior?: 'native' | 'aria';\n  /** Description text for the checkbox */\n  description?: React.ReactNode;\n  /** Alternate way to provide label content */\n  children?: React.ReactNode;\n  /** Focus style variant */\n  focusStyle?: 'default' | 'white';\n  /**\n   * Error message to display when the checkbox is invalid\n   * Can be a static string or a function that returns an error message\n   * @default undefined\n   */\n  errorMessage?: string | ((validation: ValidationResult) => string);\n  /**\n   * Prefix text for screen readers only in error messages\n   * @default 'Error:'\n   */\n  errorPrefix?: string;\n  /**\n   * Custom test ID for testing purposes\n   * @default undefined\n   */\n  testId?: string;\n}\n\nconst checkbox = cva(styles.checkbox, {\n  variants: {\n    focusStyle: {\n      default: styles.defaultFocus,\n      white: styles.whiteFocus,\n    },\n  },\n  defaultVariants: {\n    focusStyle: 'default',\n  },\n});\n\nexport const Checkbox = ({\n  label,\n  isIndeterminate,\n  defaultSelected,\n  isSelected,\n  value,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  validate,\n  autoFocus,\n  name,\n  validationBehavior,\n  description,\n  children,\n  errorMessage,\n  errorPrefix = 'Error:',\n  testId,\n  focusStyle = 'default',\n  ...props\n}: CheckboxProps) => {\n  // Generate unique IDs for accessibility\n  const errorId = useId();\n  const descriptionId = useId();\n\n  // Resolve error message with memoization\n  const resolvedErrorMessage = useMemo(() => {\n    if (!isInvalid) return null;\n\n    if (typeof errorMessage === 'function') {\n      return errorMessage(DEFAULT_VALIDATION_RESULT);\n    }\n\n    return errorMessage;\n  }, [errorMessage, isInvalid]);\n\n  // Determine aria-describedby based on description, error, or both\n  const describedById = [\n    description ? descriptionId : null,\n    isInvalid && resolvedErrorMessage ? errorId : null,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Determine the final label content\n  const labelContent = label || children;\n\n  return (\n    <div className={styles.checkboxContainer} data-testid={testId}>\n      {isInvalid && resolvedErrorMessage && (\n        <FieldError\n          id={errorId}\n          errorPrefix={errorPrefix}\n          isInvalid={isInvalid}\n        >\n          {resolvedErrorMessage}\n        </FieldError>\n      )}\n      <div className={styles.checkboxLabelWrapper}>\n        <AriaCheckbox\n          className={checkbox({ focusStyle })}\n          isIndeterminate={isIndeterminate}\n          defaultSelected={defaultSelected}\n          isSelected={isSelected}\n          value={value}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n          isInvalid={isInvalid}\n          validate={validate}\n          autoFocus={autoFocus}\n          name={name}\n          validationBehavior={validationBehavior}\n          aria-describedby={describedById || undefined}\n          {...props}\n        >\n          {({ isIndeterminate }: { isIndeterminate: boolean }) => (\n            <>\n              <div\n                className={`${styles.checkboxSvgWrapper}`}\n                data-disabled={isDisabled}\n              >\n                <svg\n                  className={styles.svg}\n                  viewBox=\"0 0 18 18\"\n                  aria-hidden=\"true\"\n                >\n                  {isIndeterminate ? (\n                    <rect x={1} y={7.5} width={15} height={3} />\n                  ) : (\n                    <polyline points=\"1 9 7 14 15 4\" />\n                  )}\n                </svg>\n              </div>\n              {labelContent ? (\n                <span className={styles.checkboxLabel}>{labelContent}</span>\n              ) : null}\n            </>\n          )}\n        </AriaCheckbox>\n        {description && (\n          <FieldDescription\n            id={descriptionId}\n            className={styles.checkboxDescription}\n          >\n            {description}\n          </FieldDescription>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Checkbox;\n"],"names":["DEFAULT_VALIDATION_RESULT","isInvalid","validationErrors","validationDetails","valid","checkbox","cva","variants","focusStyle","default","white","defaultVariants","Checkbox","label","isIndeterminate","defaultSelected","isSelected","value","isDisabled","isReadOnly","isRequired","validate","autoFocus","name","validationBehavior","description","children","errorMessage","errorPrefix","testId","props","errorId","useId","descriptionId","resolvedErrorMessage","useMemo","describedById","filter","Boolean","join","labelContent","className","styles","jsx","FieldError","id","AriaCheckbox","jsxs","Fragment","viewBox","x","y","width","height","points","FieldDescription"],"mappings":"mfAcMA,EAA8C,CAClDC,WAAW,EACXC,iBAAkB,CAAC,WACnBC,kBAAmB,CAAEC,OAAO,IA2DxBC,EAAWC,sBAAqB,CACpCC,SAAU,CACRC,WAAY,CACVC,iCACAC,+BAGJC,gBAAiB,CACfH,WAAY,aAIHI,EAAW,EACtBC,QACAC,kBACAC,kBACAC,aACAC,QACAC,aACAC,aACAC,aACAnB,YACAoB,WACAC,YACAC,OACAC,qBACAC,cACAC,WACAC,eACAC,cAAc,SACdC,SACArB,aAAa,aACVsB,MAGH,MAAMC,EAAUC,IACVC,EAAgBD,IAGhBE,EAAuBC,EAAQ,IAC9BlC,EAEuB,mBAAjB0B,EACFA,EAAa3B,GAGf2B,EANgB,KAOtB,CAACA,EAAc1B,IAGZmC,EAAgB,CACpBX,EAAcQ,EAAgB,KAC9BhC,GAAaiC,EAAuBH,EAAU,MAE7CM,OAAOC,SACPC,KAAK,KAGFC,EAAe3B,GAASa;AAE9B,SACG,MAAA,CAAIe,UAAWC,EAA0B,cAAab,EACpDH,SAAA,CAAAzB,GAAaiC,kBACZS,EAACC,EAAA,CACCC,GAAId,EACJH,cACA3B,YAECyB,SAAAQ;iBAGJ,MAAA,CAAIO,UAAWC,EACdhB,SAAA;eAAAiB,EAACG,EAAA,CACCL,UAAWpC,EAAS,CAAEG,eACtBM,kBACAC,kBACAC,aACAC,QACAC,aACAC,aACAC,aACAnB,YACAoB,WACAC,YACAC,OACAC,qBACA,mBAAkBY,QAAiB,KAC/BN,EAEHJ,SAAA,EAAGZ,gBAAAA,oBACFiC,EAAAC,EAAA,CACEtB,SAAA;eAAAiB,EAAC,MAAA,CACCF,UAAW,GAAGC,IACd,gBAAexB,EAEfQ,wBAAAiB,EAAC,MAAA,CACCF,UAAWC,EACXO,QAAQ,YACR,cAAY,OAEXvB,SAAAZ,iBACC6B,EAAC,OAAA,CAAKO,EAAG,EAAGC,EAAG,IAAKC,MAAO,GAAIC,OAAQ,mBAEvCV,EAAC,WAAA,CAASW,OAAO,sBAItBd,iBACCG,EAAC,OAAA,CAAKF,UAAWC,EAAuBhB,aACtC,UAITD,kBACCkB,EAACY,EAAA,CACCV,GAAIZ,EACJQ,UAAWC,EAEVhB,SAAAD"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useMemo, useId, forwardRef } from 'react';\nimport { ValidationError } from '@react-types/shared';\nimport {\n  ValidationResult,\n  Checkbox as AriaCheckbox,\n  CheckboxProps as AriaCheckboxProps,\n} from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\n\nimport FieldDescription from '../FieldDescription';\nimport FieldError from '../FieldError';\nimport styles from './Checkbox.module.css';\n\n// Extracted constant to avoid recreation on every render\nconst DEFAULT_VALIDATION_RESULT: ValidationResult = {\n  isInvalid: true,\n  validationErrors: ['Invalid'],\n  validationDetails: { valid: false } as unknown as ValidityState,\n};\n\nexport interface CheckboxProps extends AriaCheckboxProps {\n  /** The label of the checkbox, can be a string or a React node. */\n  label?: string | React.ReactNode;\n  /** Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. */\n  isIndeterminate?: boolean;\n  /** Whether the element should be selected (uncontrolled). */\n  defaultSelected?: boolean;\n  /** Whether the element should be selected (controlled). */\n  isSelected?: boolean;\n  /** The value of the input element, used when submitting an HTML form. See MDN. */\n  value?: string;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input can be selected but not changed by the user. */\n  isReadOnly?: boolean;\n  /** Whether user input is required on the input before form submission. */\n  isRequired?: boolean;\n  /** Whether the input value is invalid. */\n  isInvalid?: boolean;\n  /** A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior=\"native\". For realtime validation, use the isInvalid prop instead. */\n  validate?: (value: unknown) => ValidationError | true | null | undefined;\n  /** Whether the element should receive focus on render. */\n  autoFocus?: boolean;\n  /** The name of the input element, used when submitting an HTML form. See MDN. */\n  name?: string;\n  /**\n   * Whether to use native HTML form validation to prevent form submission\n   * when the value is missing or invalid, or mark the field as required\n   * or invalid via ARIA.\n   * @default 'aria'\n   */\n  validationBehavior?: 'native' | 'aria';\n  /** Description text for the checkbox */\n  description?: React.ReactNode;\n  /** Alternate way to provide label content */\n  children?: React.ReactNode;\n  /** Focus style variant */\n  focusStyle?: 'default' | 'white';\n  /**\n   * Error message to display when the checkbox is invalid\n   * Can be a static string or a function that returns an error message\n   * @default undefined\n   */\n  errorMessage?: string | ((validation: ValidationResult) => string);\n  /**\n   * Prefix text for screen readers only in error messages\n   * @default 'Error:'\n   */\n  errorPrefix?: string;\n  /**\n   * Custom test ID for testing purposes\n   * @default undefined\n   */\n  testId?: string;\n}\n\nconst checkbox = cva(styles.checkbox, {\n  variants: {\n    focusStyle: {\n      default: styles.defaultFocus,\n      white: styles.whiteFocus,\n    },\n  },\n  defaultVariants: {\n    focusStyle: 'default',\n  },\n});\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  (\n    {\n      label,\n      isIndeterminate,\n      defaultSelected,\n      isSelected,\n      value,\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      isInvalid,\n      validate,\n      autoFocus,\n      name,\n      validationBehavior,\n      description,\n      children,\n      errorMessage,\n      errorPrefix = 'Error:',\n      testId,\n      focusStyle = 'default',\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    // Generate unique IDs for accessibility\n    const errorId = useId();\n    const descriptionId = useId();\n\n    // Resolve error message with memoization\n    const resolvedErrorMessage = useMemo(() => {\n      if (!isInvalid) return null;\n\n      if (typeof errorMessage === 'function') {\n        return errorMessage(DEFAULT_VALIDATION_RESULT);\n      }\n\n      return errorMessage;\n    }, [errorMessage, isInvalid]);\n\n    // Determine aria-describedby based on description, error, or both\n    const describedById = [\n      description ? descriptionId : null,\n      isInvalid && resolvedErrorMessage ? errorId : null,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    // Determine the final label content\n    const labelContent = label || children;\n\n    return (\n      <div className={styles.checkboxContainer} data-testid={testId}>\n        {isInvalid && resolvedErrorMessage && (\n          <FieldError\n            id={errorId}\n            errorPrefix={errorPrefix}\n            isInvalid={isInvalid}\n          >\n            {resolvedErrorMessage}\n          </FieldError>\n        )}\n        <div className={styles.checkboxLabelWrapper}>\n          <AriaCheckbox\n            ref={forwardedRef}\n            className={checkbox({ focusStyle })}\n            isIndeterminate={isIndeterminate}\n            defaultSelected={defaultSelected}\n            isSelected={isSelected}\n            value={value}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isRequired={isRequired}\n            isInvalid={isInvalid}\n            validate={validate}\n            autoFocus={autoFocus}\n            name={name}\n            validationBehavior={validationBehavior}\n            aria-describedby={describedById || undefined}\n            {...props}\n          >\n            {({ isIndeterminate }: { isIndeterminate: boolean }) => (\n              <>\n                <div\n                  className={`${styles.checkboxSvgWrapper}`}\n                  data-disabled={isDisabled}\n                >\n                  <svg\n                    className={styles.svg}\n                    viewBox=\"0 0 18 18\"\n                    aria-hidden=\"true\"\n                  >\n                    {isIndeterminate ? (\n                      <rect x={1} y={7.5} width={15} height={3} />\n                    ) : (\n                      <polyline points=\"1 9 7 14 15 4\" />\n                    )}\n                  </svg>\n                </div>\n                {labelContent ? (\n                  <span className={styles.checkboxLabel}>{labelContent}</span>\n                ) : null}\n              </>\n            )}\n          </AriaCheckbox>\n          {description && (\n            <FieldDescription\n              id={descriptionId}\n              className={styles.checkboxDescription}\n            >\n              {description}\n            </FieldDescription>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["DEFAULT_VALIDATION_RESULT","isInvalid","validationErrors","validationDetails","valid","checkbox","cva","variants","focusStyle","default","white","defaultVariants","Checkbox","forwardRef","label","isIndeterminate","defaultSelected","isSelected","value","isDisabled","isReadOnly","isRequired","validate","autoFocus","name","validationBehavior","description","children","errorMessage","errorPrefix","testId","props","forwardedRef","errorId","useId","descriptionId","resolvedErrorMessage","useMemo","describedById","filter","Boolean","join","labelContent","className","styles","jsx","FieldError","id","AriaCheckbox","ref","jsxs","Fragment","viewBox","x","y","width","height","points","FieldDescription","displayName"],"mappings":"mgBAcMA,EAA8C,CAClDC,WAAW,EACXC,iBAAkB,CAAC,WACnBC,kBAAmB,CAAEC,OAAO,IA2DxBC,EAAWC,sBAAqB,CACpCC,SAAU,CACRC,WAAY,CACVC,iCACAC,+BAGJC,gBAAiB,CACfH,WAAY,aAIHI,EAAWC,EACtB,EAEIC,QACAC,kBACAC,kBACAC,aACAC,QACAC,aACAC,aACAC,aACApB,YACAqB,WACAC,YACAC,OACAC,qBACAC,cACAC,WACAC,eACAC,cAAc,SACdC,SACAtB,aAAa,aACVuB,GAELC,KAGA,MAAMC,EAAUC,IACVC,EAAgBD,IAGhBE,EAAuBC,EAAQ,IAC9BpC,EAEuB,mBAAjB2B,EACFA,EAAa5B,GAGf4B,EANgB,KAOtB,CAACA,EAAc3B,IAGZqC,EAAgB,CACpBZ,EAAcS,EAAgB,KAC9BlC,GAAamC,EAAuBH,EAAU,MAE7CM,OAAOC,SACPC,KAAK,KAGFC,EAAe5B,GAASa;AAE9B,SACG,MAAA,CAAIgB,UAAWC,EAA0B,cAAad,EACpDH,SAAA,CAAA1B,GAAamC,kBACZS,EAACC,EAAA,CACCC,GAAId,EACJJ,cACA5B,YAEC0B,SAAAS;iBAGJ,MAAA,CAAIO,UAAWC,EACdjB,SAAA;eAAAkB,EAACG,EAAA,CACCC,IAAKjB,EACLW,UAAWtC,EAAS,CAAEG,eACtBO,kBACAC,kBACAC,aACAC,QACAC,aACAC,aACAC,aACApB,YACAqB,WACAC,YACAC,OACAC,qBACA,mBAAkBa,QAAiB,KAC/BP,EAEHJ,SAAA,EAAGZ,gBAAAA,oBACFmC,EAAAC,EAAA,CACExB,SAAA;eAAAkB,EAAC,MAAA,CACCF,UAAW,GAAGC,IACd,gBAAezB,EAEfQ,wBAAAkB,EAAC,MAAA,CACCF,UAAWC,EACXQ,QAAQ,YACR,cAAY,OAEXzB,SAAAZ,iBACC8B,EAAC,OAAA,CAAKQ,EAAG,EAAGC,EAAG,IAAKC,MAAO,GAAIC,OAAQ,mBAEvCX,EAAC,WAAA,CAASY,OAAO,sBAItBf,iBACCG,EAAC,OAAA,CAAKF,UAAWC,EAAuBjB,aACtC,UAITD,kBACCmB,EAACa,EAAA,CACCX,GAAIZ,EACJQ,UAAWC,EAEVjB,SAAAD,YAQfd,EAAS+C,YAAc"}

package/dist/components/CreditCardNumberField/CreditCardNumberField.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
 import { FieldProps } from '../_base/Field';
 type CreditCardNumberValue = string | number | null | undefined;
@@ -25,5 +26,5 @@ export interface CreditCardNumberFieldBaseProps {
 export interface CreditCardNumberFieldProps extends Omit<FieldProps<Omit<AriaTextFieldProps, 'defaultValue' | 'value' | 'onChange'>>, 'isRequired' | 'maxWidthByChars'>, CreditCardNumberFieldBaseProps {
     placeholder?: string;
 }
-export declare const CreditCardNumberField: ({ cardIcon: cardIconProp, defaultValue, value: valueControlled, onChange: onChangeControlled, label, ...props }: CreditCardNumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CreditCardNumberField: React.ForwardRefExoticComponent<CreditCardNumberFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default CreditCardNumberField;

package/dist/components/CreditCardNumberField/CreditCardNumberField.js

@@ -1,5 +1,5 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import a from"react";import{TextField as t,Input as o}from"react-aria-components";import{P as c}from"../../react-number-format.es-kdABQClE.js";import{Field as i}from"../_base/Field/Field.js";import{Icon as n}from"../Icon/Icon.js";import{getCardIcon as l}from"../../utils/creditCard/creditCard.js";import '../../assets/CreditCardNumberField.css';const m="_creditCardNumberField_12w3r_1",d="_inputWrapper_12w3r_51",s="_iconEnd_12w3r_57",u=({cardIcon:u=l,defaultValue:p,value:f,onChange:_,label:b="Credit card number",...h})=>{const[C,j]=a.useState(p),v=f??C,x=a.useMemo(()=>"function"==typeof u?u(C)||"credit-card":u||"credit-card",[C,u]);/* @__PURE__ */
-return e(i,{...h,as:t,isRequired:!0,hasEndIcon:!0,label:b,className:m,children:/* @__PURE__ */r("div",{className:d,children:[
-/* @__PURE__ */e(c,{type:"text",format:"#### #### #### ####",customInput:o,placeholder:h?.placeholder,allowEmptyFormatting:!1,defaultValue:p,value:v,onValueChange:e=>{"function"==typeof _&&_(e.value),j(e.value)},autoComplete:"cc-number","aria-label":b}),
-/* @__PURE__ */e(n,{iconName:x,iconPrefix:"credit-card"===x?"fas":"fab",className:s,iconSize:"1.25x",padding:"roomy"})]})})};export{u as CreditCardNumberField,u as default};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import a,{forwardRef as t}from"react";import{TextField as o,Input as i}from"react-aria-components";import{P as c}from"../../react-number-format.es-kdABQClE.js";import{Field as d}from"../_base/Field/Field.js";import{Icon as l}from"../Icon/Icon.js";import{getCardIcon as m}from"../../utils/creditCard/creditCard.js";import '../../assets/CreditCardNumberField.css';const n="_creditCardNumberField_12w3r_1",u="_inputWrapper_12w3r_51",s="_iconEnd_12w3r_57",p=t(({cardIcon:t=m,defaultValue:p,value:f,onChange:b,label:_="Credit card number",...C},h)=>{const[N,y]=a.useState(p),I=f??N,g=a.useMemo(()=>"function"==typeof t?t(N)||"credit-card":t||"credit-card",[N,t]);/* @__PURE__ */
+return e(d,{...C,as:o,isRequired:!0,hasEndIcon:!0,label:_,className:n,children:/* @__PURE__ */r("div",{className:u,children:[
+/* @__PURE__ */e(c,{getInputRef:h,type:"text",format:"#### #### #### ####",customInput:i,placeholder:C?.placeholder,allowEmptyFormatting:!1,defaultValue:p,value:I,onValueChange:e=>{"function"==typeof b&&b(e.value),y(e.value)},autoComplete:"cc-number","aria-label":_}),
+/* @__PURE__ */e(l,{iconName:g,iconPrefix:"credit-card"===g?"fas":"fab",className:s,iconSize:"1.25x",padding:"roomy"})]})})});p.displayName="CreditCardNumberField";export{p as CreditCardNumberField,p as default};
 //# sourceMappingURL=CreditCardNumberField.js.map

package/dist/components/CreditCardNumberField/CreditCardNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreditCardNumberField.js","sources":["../../../src/components/CreditCardNumberField/CreditCardNumberField.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  Input,\n} from 'react-aria-components';\nimport { PatternFormat } from 'react-number-format';\n\nimport styles from './CreditCardNumberField.module.css';\nimport { Field, FieldProps } from '../_base/Field';\nimport Icon from '../Icon/Icon';\nimport { getCardIcon } from '../../utils/creditCard/creditCard';\n\ntype CreditCardNumberValue = string | number | null | undefined;\n\nexport interface CreditCardNumberFieldBaseProps {\n  /**\n   * The icon to display.\n   * If a function is provided, it will be called with the current value of the input.\n   * Expects an icon name from the font-awesome `brands` icon pack.\n   * https://fontawesome.com/search?q=credit%20card&o=r&ip=brands\n   */\n  cardIcon?: string | ((value?: CreditCardNumberValue) => string);\n  /**\n   * The controlled value of the credit card number.\n   */\n  value?: CreditCardNumberValue;\n  /**\n   * The controlled onChange handler for the credit card number.\n   */\n  onChange?: (value?: CreditCardNumberValue) => void;\n  /**\n   * The default value of the credit card number.\n   */\n  defaultValue?: CreditCardNumberValue;\n}\n\nexport interface CreditCardNumberFieldProps\n  extends Omit<\n      FieldProps<\n        Omit<AriaTextFieldProps, 'defaultValue' | 'value' | 'onChange'>\n      >,\n      'isRequired' | 'maxWidthByChars'\n    >,\n    CreditCardNumberFieldBaseProps {\n  placeholder?: string;\n}\n\nexport const CreditCardNumberField = ({\n  cardIcon: cardIconProp = getCardIcon,\n  defaultValue,\n  value: valueControlled,\n  onChange: onChangeControlled,\n  label = 'Credit card number',\n  ...props\n}: CreditCardNumberFieldProps) => {\n  const [value, setValue] = React.useState<CreditCardNumberValue>(defaultValue);\n  const valueDefinitive = valueControlled ?? value;\n\n  const cardIcon = React.useMemo(() => {\n    if (typeof cardIconProp === 'function') {\n      return cardIconProp(value) || 'credit-card';\n    }\n    return cardIconProp || 'credit-card';\n  }, [value, cardIconProp]);\n\n  return (\n    <Field<CreditCardNumberFieldBaseProps>\n      {...props}\n      as={AriaTextField}\n      isRequired\n      hasEndIcon\n      label={label}\n      className={styles.creditCardNumberField}\n    >\n      <div className={styles.inputWrapper}>\n        <PatternFormat\n          type=\"text\"\n          format={'#### #### #### ####'}\n          customInput={Input}\n          placeholder={props?.placeholder}\n          allowEmptyFormatting={false}\n          defaultValue={defaultValue}\n          value={valueDefinitive}\n          onValueChange={(values) => {\n            if (typeof onChangeControlled === 'function') {\n              onChangeControlled(values.value);\n            }\n            setValue(values.value);\n          }}\n          autoComplete=\"cc-number\"\n          aria-label={label}\n        />\n        <Icon\n          iconName={cardIcon}\n          iconPrefix={cardIcon === 'credit-card' ? 'fas' : 'fab'}\n          className={styles.iconEnd}\n          iconSize=\"1.25x\"\n          padding=\"roomy\"\n        />\n      </div>\n    </Field>\n  );\n};\n\nexport default CreditCardNumberField;\n"],"names":["CreditCardNumberField","cardIcon","cardIconProp","getCardIcon","defaultValue","value","valueControlled","onChange","onChangeControlled","label","props","setValue","React","useState","valueDefinitive","useMemo","jsx","Field","as","AriaTextField","isRequired","hasEndIcon","className","styles","children","jsxs","PatternFormat","type","format","customInput","Input","placeholder","allowEmptyFormatting","onValueChange","values","autoComplete","Icon","iconName","iconPrefix","iconSize","padding"],"mappings":"qbAgDaA,EAAwB,EACnCC,SAAUC,EAAeC,EACzBC,eACAC,MAAOC,EACPC,SAAUC,EACVC,QAAQ,wBACLC,MAEH,MAAOL,EAAOM,GAAYC,EAAMC,SAAgCT,GAC1DU,EAAkBR,GAAmBD,EAErCJ,EAAWW,EAAMG,QAAQ,IACD,mBAAjBb,EACFA,EAAaG,IAAU,cAEzBH,GAAgB,cACtB,CAACG,EAAOH;AAEX,OACEc,EAACC,EAAA,IACKP,EACJQ,GAAIC,EACJC,YAAU,EACVC,YAAU,EACVZ,QACAa,UAAWC,EAEXC,wBAAAC,EAAC,MAAA,CAAIH,UAAWC,EACdC,SAAA;eAAAR,EAACU,EAAA,CACCC,KAAK,OACLC,OAAQ,sBACRC,YAAaC,EACbC,YAAarB,GAAOqB,YACpBC,sBAAsB,EACtB5B,eACAC,MAAOS,EACPmB,cAAgBC,IACoB,mBAAvB1B,GACTA,EAAmB0B,EAAO7B,OAE5BM,EAASuB,EAAO7B,QAElB8B,aAAa,YACb,aAAY1B;eAEdO,EAACoB,EAAA,CACCC,SAAUpC,EACVqC,WAAyB,gBAAbrC,EAA6B,MAAQ,MACjDqB,UAAWC,EACXgB,SAAS,QACTC,QAAQ"}
+{"version":3,"file":"CreditCardNumberField.js","sources":["../../../src/components/CreditCardNumberField/CreditCardNumberField.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  Input,\n} from 'react-aria-components';\nimport { PatternFormat } from 'react-number-format';\n\nimport styles from './CreditCardNumberField.module.css';\nimport { Field, FieldProps } from '../_base/Field';\nimport Icon from '../Icon/Icon';\nimport { getCardIcon } from '../../utils/creditCard/creditCard';\n\ntype CreditCardNumberValue = string | number | null | undefined;\n\nexport interface CreditCardNumberFieldBaseProps {\n  /**\n   * The icon to display.\n   * If a function is provided, it will be called with the current value of the input.\n   * Expects an icon name from the font-awesome `brands` icon pack.\n   * https://fontawesome.com/search?q=credit%20card&o=r&ip=brands\n   */\n  cardIcon?: string | ((value?: CreditCardNumberValue) => string);\n  /**\n   * The controlled value of the credit card number.\n   */\n  value?: CreditCardNumberValue;\n  /**\n   * The controlled onChange handler for the credit card number.\n   */\n  onChange?: (value?: CreditCardNumberValue) => void;\n  /**\n   * The default value of the credit card number.\n   */\n  defaultValue?: CreditCardNumberValue;\n}\n\nexport interface CreditCardNumberFieldProps\n  extends Omit<\n      FieldProps<\n        Omit<AriaTextFieldProps, 'defaultValue' | 'value' | 'onChange'>\n      >,\n      'isRequired' | 'maxWidthByChars'\n    >,\n    CreditCardNumberFieldBaseProps {\n  placeholder?: string;\n}\n\nexport const CreditCardNumberField = forwardRef<\n  HTMLInputElement,\n  CreditCardNumberFieldProps\n>(\n  (\n    {\n      cardIcon: cardIconProp = getCardIcon,\n      defaultValue,\n      value: valueControlled,\n      onChange: onChangeControlled,\n      label = 'Credit card number',\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const [value, setValue] =\n      React.useState<CreditCardNumberValue>(defaultValue);\n    const valueDefinitive = valueControlled ?? value;\n\n    const cardIcon = React.useMemo(() => {\n      if (typeof cardIconProp === 'function') {\n        return cardIconProp(value) || 'credit-card';\n      }\n      return cardIconProp || 'credit-card';\n    }, [value, cardIconProp]);\n\n    return (\n      <Field<CreditCardNumberFieldBaseProps>\n        {...props}\n        as={AriaTextField}\n        isRequired\n        hasEndIcon\n        label={label}\n        className={styles.creditCardNumberField}\n      >\n        <div className={styles.inputWrapper}>\n          <PatternFormat\n            getInputRef={forwardedRef}\n            type=\"text\"\n            format={'#### #### #### ####'}\n            customInput={Input}\n            placeholder={props?.placeholder}\n            allowEmptyFormatting={false}\n            defaultValue={defaultValue}\n            value={valueDefinitive}\n            onValueChange={(values) => {\n              if (typeof onChangeControlled === 'function') {\n                onChangeControlled(values.value);\n              }\n              setValue(values.value);\n            }}\n            autoComplete=\"cc-number\"\n            aria-label={label}\n          />\n          <Icon\n            iconName={cardIcon}\n            iconPrefix={cardIcon === 'credit-card' ? 'fas' : 'fab'}\n            className={styles.iconEnd}\n            iconSize=\"1.25x\"\n            padding=\"roomy\"\n          />\n        </div>\n      </Field>\n    );\n  },\n);\nCreditCardNumberField.displayName = 'CreditCardNumberField';\n\nexport default CreditCardNumberField;\n"],"names":["CreditCardNumberField","forwardRef","cardIcon","cardIconProp","getCardIcon","defaultValue","value","valueControlled","onChange","onChangeControlled","label","props","forwardedRef","setValue","React","useState","valueDefinitive","useMemo","jsx","Field","as","AriaTextField","isRequired","hasEndIcon","className","styles","children","jsxs","PatternFormat","getInputRef","type","format","customInput","Input","placeholder","allowEmptyFormatting","onValueChange","values","autoComplete","Icon","iconName","iconPrefix","iconSize","padding","displayName"],"mappings":"scAgDaA,EAAwBC,EAInC,EAEIC,SAAUC,EAAeC,EACzBC,eACAC,MAAOC,EACPC,SAAUC,EACVC,QAAQ,wBACLC,GAELC,KAEA,MAAON,EAAOO,GACZC,EAAMC,SAAgCV,GAClCW,EAAkBT,GAAmBD,EAErCJ,EAAWY,EAAMG,QAAQ,IACD,mBAAjBd,EACFA,EAAaG,IAAU,cAEzBH,GAAgB,cACtB,CAACG,EAAOH;AAEX,OACEe,EAACC,EAAA,IACKR,EACJS,GAAIC,EACJC,YAAU,EACVC,YAAU,EACVb,QACAc,UAAWC,EAEXC,wBAAAC,EAAC,MAAA,CAAIH,UAAWC,EACdC,SAAA;eAAAR,EAACU,EAAA,CACCC,YAAajB,EACbkB,KAAK,OACLC,OAAQ,sBACRC,YAAaC,EACbC,YAAavB,GAAOuB,YACpBC,sBAAsB,EACtB9B,eACAC,MAAOU,EACPoB,cAAgBC,IACoB,mBAAvB5B,GACTA,EAAmB4B,EAAO/B,OAE5BO,EAASwB,EAAO/B,QAElBgC,aAAa,YACb,aAAY5B;eAEdQ,EAACqB,EAAA,CACCC,SAAUtC,EACVuC,WAAyB,gBAAbvC,EAA6B,MAAQ,MACjDsB,UAAWC,EACXiB,SAAS,QACTC,QAAQ,iBAOpB3C,EAAsB4C,YAAc"}

package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.d.ts

@@ -36,5 +36,5 @@ export interface CreditCardSecurityCodeFieldProps extends Omit<FieldProps<Omit<A
      */
     digits?: number;
 }
-export declare const CreditCardSecurityCodeField: ({ defaultValue, value: valueControlled, onChange: onChangeControlled, label, cardIcon, digits, ...props }: CreditCardSecurityCodeFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CreditCardSecurityCodeField: React.ForwardRefExoticComponent<CreditCardSecurityCodeFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default CreditCardSecurityCodeField;

package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js

@@ -1,8 +1,8 @@
-import{jsxs as l,jsx as a}from"react/jsx-runtime";import e from"react";import{TextField as h,Input as v}from"react-aria-components";import{P as d}from"../../react-number-format.es-kdABQClE.js";import{Field as i}from"../_base/Field/Field.js";import '../../assets/CreditCardSecurityCodeField.css';const t="_creditCardSecurityCodeField_14mb2_1",c="_inputWrapper_14mb2_11",o="_inputChildren_14mb2_54",n=({defaultValue:n,value:m,onChange:p,label:r="Card security code",cardIcon:u="back",digits:f=3,...s})=>{const[z,M]=e.useState(n),R=m??z;/* @__PURE__ */
-return l(i,{className:t,as:h,isRequired:!0,label:r,...s,children:[
-/* @__PURE__ */l("div",{className:c,children:[
-/* @__PURE__ */a(d,{type:"text",format:`${"#".repeat(f)}`,customInput:v,placeholder:s?.placeholder,defaultValue:n,value:R,onValueChange:l=>{"function"==typeof p&&p(l.value),M(l.value)},autoComplete:"cc-csc"}),
-/* @__PURE__ */a(q,{cardIcon:u})]}),s?.children&&/* @__PURE__ */a("div",{className:o,children:s.children})]})};function q({cardIcon:e="back"}){/* @__PURE__ */
+import{jsxs as l,jsx as a}from"react/jsx-runtime";import e,{forwardRef as h}from"react";import{TextField as v,Input as d}from"react-aria-components";import{P as i}from"../../react-number-format.es-kdABQClE.js";import{Field as t}from"../_base/Field/Field.js";import '../../assets/CreditCardSecurityCodeField.css';const c="_creditCardSecurityCodeField_14mb2_1",o="_inputWrapper_14mb2_11",n="_inputChildren_14mb2_54",q=h(({defaultValue:h,value:q,onChange:r,label:p="Card security code",cardIcon:u="back",digits:f=3,...s},R)=>{const[z,M]=e.useState(h),V=q??z;/* @__PURE__ */
+return l(t,{className:c,as:v,isRequired:!0,label:p,...s,children:[
+/* @__PURE__ */l("div",{className:o,children:[
+/* @__PURE__ */a(i,{getInputRef:R,type:"text",format:`${"#".repeat(f)}`,customInput:d,placeholder:s?.placeholder,defaultValue:h,value:V,onValueChange:l=>{"function"==typeof r&&r(l.value),M(l.value)},autoComplete:"cc-csc"}),
+/* @__PURE__ */a(m,{cardIcon:u})]}),s?.children&&/* @__PURE__ */a("div",{className:n,children:s.children})]})});function m({cardIcon:e="back"}){/* @__PURE__ */
 return l("svg","back"===e?{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",fill:"none",viewBox:"0 0 48 48",children:[
 /* @__PURE__ */a("path",{fill:"#4B4855",d:"M30.528 29.287v-.514l1.202-1.113a5 5 0 0 0 .258-.267q.105-.12.16-.233a.6.6 0 0 0 .054-.249.44.44 0 0 0-.252-.422.6.6 0 0 0-.266-.06.56.56 0 0 0-.27.063.43.43 0 0 0-.178.18.6.6 0 0 0-.063.279h-.678q0-.331.15-.576t.42-.377a1.4 1.4 0 0 1 .624-.134q.363 0 .632.129.27.126.42.353.15.225.15.517a1 1 0 0 1-.076.378q-.075.186-.265.414a6 6 0 0 1-.54.542l-.492.483v.023h1.418v.584zm-.802-3.377v3.377h-.714v-2.7h-.02l-.773.486v-.634l.836-.529zm4.317 3.296q.29.127.658.127.38 0 .673-.128a1.1 1.1 0 0 0 .46-.353.82.82 0 0 0 .166-.513.73.73 0 0 0-.194-.524q-.195-.211-.567-.26v-.026a.8.8 0 0 0 .46-.24.66.66 0 0 0 .176-.474.82.82 0 0 0-.145-.481 1 1 0 0 0-.407-.343 1.4 1.4 0 0 0-.612-.127q-.346 0-.621.127-.274.126-.436.348a.9.9 0 0 0-.166.514h.684a.4.4 0 0 1 .077-.224.47.47 0 0 1 .193-.147.65.65 0 0 1 .516.002.4.4 0 0 1 .23.374q0 .134-.07.235a.46.46 0 0 1-.194.154.7.7 0 0 1-.285.056h-.315v.525h.315q.19 0 .33.06a.5.5 0 0 1 .214.164.4.4 0 0 1 .075.24.4.4 0 0 1-.07.235.5.5 0 0 1-.197.16.7.7 0 0 1-.288.058.7.7 0 0 1-.282-.052.5.5 0 0 1-.201-.143.38.38 0 0 1-.081-.218h-.719q.005.295.17.521.166.225.453.353"}),
 /* @__PURE__ */a("path",{fill:"#4B4855",fillRule:"evenodd",d:"M7.2 24v7.2h31.2V24zm30 1.2H8.4V30h28.8z",clipRule:"evenodd"}),
@@ -20,5 +20,5 @@ return l("svg","back"===e?{xmlns:"http://www.w3.org/2000/svg",width:"48",height:
 /* @__PURE__ */a("path",{fill:"#4B4855",fillRule:"evenodd",d:"M9.6 9.6a4.8 4.8 0 0 0-4.8 4.8v19.2a4.8 4.8 0 0 0 4.8 4.8h28.8a4.8 4.8 0 0 0 4.8-4.8V14.4a4.8 4.8 0 0 0-4.8-4.8zm28.8 1.2H9.6A3.6 3.6 0 0 0 6 14.4v19.2a3.6 3.6 0 0 0 3.6 3.6h28.8a3.6 3.6 0 0 0 3.6-3.6V14.4a3.6 3.6 0 0 0-3.6-3.6",clipRule:"evenodd"}),
 /* @__PURE__ */a("path",{fill:"#FEFEFE",fillRule:"evenodd",d:"M9.6 10.8h28.8a3.6 3.6 0 0 1 3.6 3.6v19.2a3.6 3.6 0 0 1-3.6 3.6H9.6A3.6 3.6 0 0 1 6 33.6V14.4a3.6 3.6 0 0 1 3.6-3.6m17.696 18.67v-.57l1.332-1.233q.17-.165.286-.296.117-.132.177-.258a.64.64 0 0 0 .06-.276.49.49 0 0 0-.28-.468.64.64 0 0 0-.294-.066.6.6 0 0 0-.3.07.5.5 0 0 0-.197.2.65.65 0 0 0-.07.308h-.75q0-.368.166-.638a1.1 1.1 0 0 1 .466-.418q.3-.149.69-.148.403 0 .7.142.3.14.467.391.166.25.166.574 0 .211-.084.419a1.8 1.8 0 0 1-.294.458 7 7 0 0 1-.598.602l-.546.535v.026h1.572v.647h-2.669Zm-.89-3.742v3.743h-.79v-2.992h-.023l-.857.537v-.702l.927-.586h.744Zm4.786 3.653q.32.14.73.14.42 0 .745-.142.326-.143.51-.39a.9.9 0 0 0 .184-.57.8.8 0 0 0-.215-.58q-.216-.234-.629-.287v-.03a.9.9 0 0 0 .51-.266.73.73 0 0 0 .196-.525.9.9 0 0 0-.161-.534 1.1 1.1 0 0 0-.452-.38 1.54 1.54 0 0 0-.678-.14q-.383 0-.689.14a1.2 1.2 0 0 0-.482.386.97.97 0 0 0-.185.57h.759a.43.43 0 0 1 .086-.248.5.5 0 0 1 .213-.163.73.73 0 0 1 .572.002.45.45 0 0 1 .255.415.45.45 0 0 1-.077.26.5.5 0 0 1-.216.17.8.8 0 0 1-.316.063h-.35v.581h.35q.212 0 .365.066a.54.54 0 0 1 .238.183.44.44 0 0 1 .084.265.45.45 0 0 1-.078.261.5.5 0 0 1-.218.177.8.8 0 0 1-.32.064.8.8 0 0 1-.312-.056.55.55 0 0 1-.223-.16.4.4 0 0 1-.09-.24h-.797q.006.327.189.577.184.249.502.391m2.682-.568v-.623l1.562-2.462h.99v2.45h.465v.635h-.464v.658h-.757v-.658zM17.687 15.988q.227-.42.227-1.022 0-.6-.227-1.021a1.57 1.57 0 0 0-.617-.642 1.73 1.73 0 0 0-.875-.222q-.49 0-.878.222a1.57 1.57 0 0 0-.615.641q-.226.422-.226 1.022c0 .6.076.74.226 1.02q.226.42.615.644.39.222.878.222.486 0 .875-.22a1.6 1.6 0 0 0 .617-.644m-9.41.814V13.13h2.43v.64H9.052v.874h1.493v.64H9.052v1.517zm2.952 0V13.13h1.448q.416 0 .71.149.295.147.45.417t.156.633q0 .366-.158.629a1.02 1.02 0 0 1-.457.402l-.033.014.778 1.427h-.856L12.57 15.5h-.566v1.302zm10.33 0h-.67l-1.597-2.31h-.027v2.31h-.776V13.13h.681l1.585 2.308h.032V13.13h.773v3.67Zm.502-3.671v.64h1.124v3.03h.767v-3.03h1.124v-.64z",clipRule:"evenodd"}),
 /* @__PURE__ */a("path",{fill:"#FEFEFE",d:"M17.128 14.966q0-.39-.117-.656a.9.9 0 0 0-.324-.405.87.87 0 0 0-.492-.138.87.87 0 0 0-.49.138.9.9 0 0 0-.327.405 1.7 1.7 0 0 0-.115.656q0 .39.115.656a.9.9 0 0 0 .326.405q.21.138.491.138a.87.87 0 0 0 .492-.138.9.9 0 0 0 .324-.405 1.6 1.6 0 0 0 .117-.656m-5.123-.089h.527a1 1 0 0 0 .369-.061.44.44 0 0 0 .219-.183.6.6 0 0 0 .073-.303.6.6 0 0 0-.073-.308.45.45 0 0 0-.22-.19.9.9 0 0 0-.372-.067h-.523zm23.68 11.713h-.03l-.985 1.56v.029h1.015z"}),
-/* @__PURE__ */a("path",{fill:"#D32B1E",fillRule:"evenodd",d:"M36.062 30.866c1.297-.926 1.959-2.098 1.959-3.266s-.662-2.34-1.96-3.266c-1.295-.924-3.147-1.534-5.247-1.534s-3.952.61-5.248 1.534c-1.298.927-1.96 2.098-1.96 3.266s.662 2.34 1.96 3.266c1.296.925 3.147 1.534 5.248 1.534 2.1 0 3.952-.61 5.248-1.534M30.814 33.6c4.643 0 8.407-2.686 8.407-6s-3.764-6-8.407-6-8.407 2.686-8.407 6 3.764 6 8.407 6",clipRule:"evenodd"})]})}export{n as CreditCardSecurityCodeField,n as default};
+/* @__PURE__ */a("path",{fill:"#D32B1E",fillRule:"evenodd",d:"M36.062 30.866c1.297-.926 1.959-2.098 1.959-3.266s-.662-2.34-1.96-3.266c-1.295-.924-3.147-1.534-5.247-1.534s-3.952.61-5.248 1.534c-1.298.927-1.96 2.098-1.96 3.266s.662 2.34 1.96 3.266c1.296.925 3.147 1.534 5.248 1.534 2.1 0 3.952-.61 5.248-1.534M30.814 33.6c4.643 0 8.407-2.686 8.407-6s-3.764-6-8.407-6-8.407 2.686-8.407 6 3.764 6 8.407 6",clipRule:"evenodd"})]})}q.displayName="CreditCardSecurityCodeField";export{q as CreditCardSecurityCodeField,q as default};
 //# sourceMappingURL=CreditCardSecurityCodeField.js.map

package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreditCardSecurityCodeField.js","sources":["../../../src/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  Input,\n} from 'react-aria-components';\nimport { PatternFormat } from 'react-number-format';\nimport styles from './CreditCardSecurityCodeField.module.css';\nimport { Field, FieldProps } from '../_base/Field';\n\ntype CreditCardSecurityCodeValue = string | number | null | undefined;\n\nexport interface CreditCardSecurityCodeFieldBaseProps {\n  /**\n   * The controlled value of the credit card number.\n   */\n  value?: CreditCardSecurityCodeValue;\n  /**\n   * The controlled onChange handler for the credit card number.\n   */\n  onChange?: (value?: CreditCardSecurityCodeValue) => void;\n  /**\n   * The default value of the credit card number.\n   */\n  defaultValue?: CreditCardSecurityCodeValue;\n  /**\n   * The CSV pictogram icon to display.\n   * Expects 'back' or 'front' depending on card type.\n   */\n  cardIcon?: 'front' | 'back';\n}\n\nexport interface CreditCardSecurityCodeFieldProps\n  extends Omit<\n      FieldProps<\n        Omit<AriaTextFieldProps, 'defaultValue' | 'value' | 'onChange'>\n      >,\n      'isRequired'\n    >,\n    CreditCardSecurityCodeFieldBaseProps {\n  /**\n   * The placeholder text to display when the input is empty.\n   */\n  placeholder?: string;\n  /**\n   * Expects a DetailsDisclosure component for further information.\n   */\n  children?: React.ReactNode;\n  /**\n   * Digits allowed in the input\n   * @default 3\n   */\n  digits?: number;\n}\n\nexport const CreditCardSecurityCodeField = ({\n  defaultValue,\n  value: valueControlled,\n  onChange: onChangeControlled,\n  label = 'Card security code',\n  cardIcon = 'back',\n  digits = 3,\n  ...props\n}: CreditCardSecurityCodeFieldProps) => {\n  const [value, setValue] =\n    React.useState<CreditCardSecurityCodeValue>(defaultValue);\n  const valueDefinitive = valueControlled ?? value;\n\n  return (\n    <Field<CreditCardSecurityCodeFieldBaseProps>\n      className={styles.creditCardSecurityCodeField}\n      as={AriaTextField}\n      isRequired\n      label={label}\n      {...props}\n    >\n      <div className={styles.inputWrapper}>\n        <PatternFormat\n          type=\"text\"\n          format={`${'#'.repeat(digits)}`}\n          customInput={Input}\n          placeholder={props?.placeholder}\n          defaultValue={defaultValue}\n          value={valueDefinitive}\n          onValueChange={(values) => {\n            if (typeof onChangeControlled === 'function') {\n              onChangeControlled(values.value);\n            }\n            setValue(values.value);\n          }}\n          autoComplete=\"cc-csc\"\n        />\n        <CreditCardSecurityCodeIcon cardIcon={cardIcon} />\n      </div>\n      {props?.children && (\n        <div className={styles.inputChildren}>{props.children}</div>\n      )}\n    </Field>\n  );\n};\n\nfunction CreditCardSecurityCodeIcon({\n  cardIcon = 'back',\n}: Pick<CreditCardSecurityCodeFieldBaseProps, 'cardIcon'>) {\n  return cardIcon === 'back' ? (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"48\"\n      height=\"48\"\n      fill=\"none\"\n      viewBox=\"0 0 48 48\"\n    >\n      <path\n        fill=\"#4B4855\"\n        d=\"M30.528 29.287v-.514l1.202-1.113a5 5 0 0 0 .258-.267q.105-.12.16-.233a.6.6 0 0 0 .054-.249.44.44 0 0 0-.252-.422.6.6 0 0 0-.266-.06.56.56 0 0 0-.27.063.43.43 0 0 0-.178.18.6.6 0 0 0-.063.279h-.678q0-.331.15-.576t.42-.377a1.4 1.4 0 0 1 .624-.134q.363 0 .632.129.27.126.42.353.15.225.15.517a1 1 0 0 1-.076.378q-.075.186-.265.414a6 6 0 0 1-.54.542l-.492.483v.023h1.418v.584zm-.802-3.377v3.377h-.714v-2.7h-.02l-.773.486v-.634l.836-.529zm4.317 3.296q.29.127.658.127.38 0 .673-.128a1.1 1.1 0 0 0 .46-.353.82.82 0 0 0 .166-.513.73.73 0 0 0-.194-.524q-.195-.211-.567-.26v-.026a.8.8 0 0 0 .46-.24.66.66 0 0 0 .176-.474.82.82 0 0 0-.145-.481 1 1 0 0 0-.407-.343 1.4 1.4 0 0 0-.612-.127q-.346 0-.621.127-.274.126-.436.348a.9.9 0 0 0-.166.514h.684a.4.4 0 0 1 .077-.224.47.47 0 0 1 .193-.147.65.65 0 0 1 .516.002.4.4 0 0 1 .23.374q0 .134-.07.235a.46.46 0 0 1-.194.154.7.7 0 0 1-.285.056h-.315v.525h.315q.19 0 .33.06a.5.5 0 0 1 .214.164.4.4 0 0 1 .075.24.4.4 0 0 1-.07.235.5.5 0 0 1-.197.16.7.7 0 0 1-.288.058.7.7 0 0 1-.282-.052.5.5 0 0 1-.201-.143.38.38 0 0 1-.081-.218h-.719q.005.295.17.521.166.225.453.353\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        fillRule=\"evenodd\"\n        d=\"M7.2 24v7.2h31.2V24zm30 1.2H8.4V30h28.8z\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        fillRule=\"evenodd\"\n        d=\"M4.8 14.4a4.8 4.8 0 0 1 4.8-4.8h28.8a4.8 4.8 0 0 1 4.8 4.8v19.2a4.8 4.8 0 0 1-4.8 4.8H9.6a4.8 4.8 0 0 1-4.8-4.8zm4.8-3.6h28.8a3.6 3.6 0 0 1 3.6 3.6H6a3.6 3.6 0 0 1 3.6-3.6M42 19.2v14.4a3.6 3.6 0 0 1-3.6 3.6H9.6A3.6 3.6 0 0 1 6 33.6V19.2z\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#FEFEFE\"\n        fillRule=\"evenodd\"\n        d=\"M42 33.6V19.2H6v14.4a3.6 3.6 0 0 0 3.6 3.6h28.8a3.6 3.6 0 0 0 3.6-3.6M38.4 24H7.2v7.2h31.2z\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#FEFEFE\"\n        d=\"M38.4 10.8H9.6A3.6 3.6 0 0 0 6 14.4h36a3.6 3.6 0 0 0-3.6-3.6\"\n      ></path>\n      <path\n        fill=\"#FEFEFE\"\n        fillRule=\"evenodd\"\n        d=\"M8.4 25.2h28.8V30H8.4zm22.128 4.087v-.514l1.202-1.113a5 5 0 0 0 .258-.267q.105-.12.16-.233a.6.6 0 0 0 .054-.249.44.44 0 0 0-.252-.422.6.6 0 0 0-.266-.06.56.56 0 0 0-.27.063.43.43 0 0 0-.178.18.6.6 0 0 0-.063.279h-.678q0-.331.15-.576t.42-.377a1.4 1.4 0 0 1 .624-.134q.363 0 .632.129.27.126.42.353.15.225.15.517a1 1 0 0 1-.076.378q-.075.186-.265.414a6 6 0 0 1-.54.542l-.492.483v.023h1.418v.584zm-.802-3.377v3.377h-.714v-2.7h-.02l-.773.486v-.634l.836-.529zm4.317 3.296q.29.127.658.127.38 0 .673-.128a1.1 1.1 0 0 0 .46-.353.82.82 0 0 0 .166-.513.73.73 0 0 0-.194-.524q-.195-.211-.567-.26v-.026a.8.8 0 0 0 .46-.24.66.66 0 0 0 .176-.474.82.82 0 0 0-.145-.481 1 1 0 0 0-.407-.343 1.4 1.4 0 0 0-.612-.127q-.346 0-.621.127-.274.126-.436.348a.9.9 0 0 0-.166.514h.684a.4.4 0 0 1 .077-.224.47.47 0 0 1 .193-.147.65.65 0 0 1 .516.002.4.4 0 0 1 .23.374q0 .134-.07.235a.46.46 0 0 1-.194.154.7.7 0 0 1-.285.056h-.315v.525h.315q.19 0 .33.06a.5.5 0 0 1 .214.164.4.4 0 0 1 .075.24.4.4 0 0 1-.07.235.5.5 0 0 1-.197.16.7.7 0 0 1-.288.058.7.7 0 0 1-.282-.052.5.5 0 0 1-.201-.143.38.38 0 0 1-.081-.218h-.719q.005.295.17.521.166.225.453.353\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#D32B1E\"\n        fillRule=\"evenodd\"\n        d=\"M37.641 30.866c1.298-.927 1.96-2.098 1.96-3.266s-.662-2.34-1.96-3.266c-1.295-.925-3.147-1.534-5.247-1.534s-3.952.61-5.248 1.534c-1.298.926-1.96 2.097-1.96 3.266 0 1.168.662 2.34 1.96 3.265 1.296.925 3.147 1.535 5.248 1.535 2.1 0 3.952-.61 5.247-1.534M32.394 33.6c4.643 0 8.407-2.687 8.407-6s-3.764-6-8.407-6-8.407 2.686-8.407 6 3.763 6 8.407 6\"\n        clipRule=\"evenodd\"\n      ></path>\n    </svg>\n  ) : (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"48\"\n      height=\"48\"\n      fill=\"none\"\n      viewBox=\"0 0 48 48\"\n    >\n      <path\n        fill=\"#D32B1E\"\n        fillRule=\"evenodd\"\n        d=\"M37.336 31.19c1.627-1.044 2.418-2.343 2.418-3.592s-.791-2.548-2.418-3.593c-1.615-1.036-3.917-1.716-6.522-1.716s-4.908.68-6.522 1.716c-1.627 1.045-2.418 2.343-2.418 3.593s.79 2.548 2.418 3.592c1.614 1.036 3.916 1.716 6.522 1.716 2.605 0 4.907-.68 6.522-1.716m-6.522 2.916c5.6 0 10.14-2.914 10.14-6.508 0-3.595-4.54-6.509-10.14-6.509s-10.14 2.914-10.14 6.509c0 3.594 4.54 6.508 10.14 6.508\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        d=\"M27.296 29.47v-.57l1.332-1.233q.17-.165.286-.296.117-.132.177-.258a.64.64 0 0 0 .06-.276.49.49 0 0 0-.28-.468.64.64 0 0 0-.294-.066.6.6 0 0 0-.3.07.5.5 0 0 0-.197.2.65.65 0 0 0-.07.308h-.75q0-.368.166-.638a1.1 1.1 0 0 1 .466-.418q.3-.149.69-.148.403 0 .7.142.3.14.467.391.166.25.166.574 0 .211-.084.419a1.8 1.8 0 0 1-.294.458 7 7 0 0 1-.598.602l-.546.535v.026h1.572v.647h-2.669Zm-.889-3.742v3.743h-.792v-2.992h-.022l-.857.537v-.702l.927-.586zm4.785 3.653q.32.14.73.14.42 0 .745-.142.326-.143.51-.39a.9.9 0 0 0 .184-.57.8.8 0 0 0-.215-.58q-.216-.234-.629-.287v-.03a.9.9 0 0 0 .51-.266.73.73 0 0 0 .196-.525.9.9 0 0 0-.161-.534 1.1 1.1 0 0 0-.452-.38 1.54 1.54 0 0 0-.678-.14q-.383 0-.689.14a1.2 1.2 0 0 0-.482.386.97.97 0 0 0-.185.57h.759a.43.43 0 0 1 .086-.248.5.5 0 0 1 .213-.163.73.73 0 0 1 .572.002.45.45 0 0 1 .255.415.45.45 0 0 1-.077.26.5.5 0 0 1-.216.17.8.8 0 0 1-.316.063h-.35v.581h.35q.212 0 .365.066a.54.54 0 0 1 .238.183.44.44 0 0 1 .084.265.45.45 0 0 1-.078.261.5.5 0 0 1-.218.177.8.8 0 0 1-.32.064.8.8 0 0 1-.312-.056.55.55 0 0 1-.223-.16.4.4 0 0 1-.09-.24h-.797q.006.327.189.577.184.249.502.391\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        fillRule=\"evenodd\"\n        d=\"M33.874 28.813v-.623l1.562-2.462h.99v2.45h.465v.635h-.464v.658h-.757v-.658zm1.782-2.223h.029v1.588H34.67v-.029zM17.687 15.988q.227-.42.227-1.022 0-.6-.227-1.021a1.57 1.57 0 0 0-.617-.642 1.73 1.73 0 0 0-.875-.222q-.49 0-.878.222a1.57 1.57 0 0 0-.615.641q-.226.422-.226 1.022c0 .6.076.74.226 1.02q.226.42.615.644.39.222.878.222.486 0 .875-.22a1.6 1.6 0 0 0 .617-.644m-.676-1.678q.117.267.117.656 0 .39-.117.656a.9.9 0 0 1-.324.405.87.87 0 0 1-.492.138.87.87 0 0 1-.49-.138.9.9 0 0 1-.327-.405 1.7 1.7 0 0 1-.115-.656q0-.39.115-.656a.9.9 0 0 1 .326-.405.87.87 0 0 1 .491-.138q.282 0 .492.138a.9.9 0 0 1 .324.405\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        d=\"M8.276 16.802V13.13h2.43v.64H9.053v.874h1.493v.64H9.052v1.517z\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        fillRule=\"evenodd\"\n        d=\"M11.229 16.802V13.13h1.448q.416 0 .71.149.295.147.45.417t.156.633q0 .366-.158.629a1.02 1.02 0 0 1-.457.402l-.033.014.778 1.427h-.856L12.57 15.5h-.566v1.302zm1.303-1.925h-.527v-1.112h.523q.225 0 .371.067a.45.45 0 0 1 .22.19.6.6 0 0 1 .074.308q0 .18-.073.303a.44.44 0 0 1-.219.183 1 1 0 0 1-.37.06Z\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        d=\"M21.56 16.802h-.67l-1.598-2.31h-.027v2.31h-.776V13.13h.681l1.585 2.308h.032V13.13h.773v3.67Zm.501-3.672v.64h1.124v3.032h.767V13.77h1.124v-.64z\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        fillRule=\"evenodd\"\n        d=\"M9.6 9.6a4.8 4.8 0 0 0-4.8 4.8v19.2a4.8 4.8 0 0 0 4.8 4.8h28.8a4.8 4.8 0 0 0 4.8-4.8V14.4a4.8 4.8 0 0 0-4.8-4.8zm28.8 1.2H9.6A3.6 3.6 0 0 0 6 14.4v19.2a3.6 3.6 0 0 0 3.6 3.6h28.8a3.6 3.6 0 0 0 3.6-3.6V14.4a3.6 3.6 0 0 0-3.6-3.6\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#FEFEFE\"\n        fillRule=\"evenodd\"\n        d=\"M9.6 10.8h28.8a3.6 3.6 0 0 1 3.6 3.6v19.2a3.6 3.6 0 0 1-3.6 3.6H9.6A3.6 3.6 0 0 1 6 33.6V14.4a3.6 3.6 0 0 1 3.6-3.6m17.696 18.67v-.57l1.332-1.233q.17-.165.286-.296.117-.132.177-.258a.64.64 0 0 0 .06-.276.49.49 0 0 0-.28-.468.64.64 0 0 0-.294-.066.6.6 0 0 0-.3.07.5.5 0 0 0-.197.2.65.65 0 0 0-.07.308h-.75q0-.368.166-.638a1.1 1.1 0 0 1 .466-.418q.3-.149.69-.148.403 0 .7.142.3.14.467.391.166.25.166.574 0 .211-.084.419a1.8 1.8 0 0 1-.294.458 7 7 0 0 1-.598.602l-.546.535v.026h1.572v.647h-2.669Zm-.89-3.742v3.743h-.79v-2.992h-.023l-.857.537v-.702l.927-.586h.744Zm4.786 3.653q.32.14.73.14.42 0 .745-.142.326-.143.51-.39a.9.9 0 0 0 .184-.57.8.8 0 0 0-.215-.58q-.216-.234-.629-.287v-.03a.9.9 0 0 0 .51-.266.73.73 0 0 0 .196-.525.9.9 0 0 0-.161-.534 1.1 1.1 0 0 0-.452-.38 1.54 1.54 0 0 0-.678-.14q-.383 0-.689.14a1.2 1.2 0 0 0-.482.386.97.97 0 0 0-.185.57h.759a.43.43 0 0 1 .086-.248.5.5 0 0 1 .213-.163.73.73 0 0 1 .572.002.45.45 0 0 1 .255.415.45.45 0 0 1-.077.26.5.5 0 0 1-.216.17.8.8 0 0 1-.316.063h-.35v.581h.35q.212 0 .365.066a.54.54 0 0 1 .238.183.44.44 0 0 1 .084.265.45.45 0 0 1-.078.261.5.5 0 0 1-.218.177.8.8 0 0 1-.32.064.8.8 0 0 1-.312-.056.55.55 0 0 1-.223-.16.4.4 0 0 1-.09-.24h-.797q.006.327.189.577.184.249.502.391m2.682-.568v-.623l1.562-2.462h.99v2.45h.465v.635h-.464v.658h-.757v-.658zM17.687 15.988q.227-.42.227-1.022 0-.6-.227-1.021a1.57 1.57 0 0 0-.617-.642 1.73 1.73 0 0 0-.875-.222q-.49 0-.878.222a1.57 1.57 0 0 0-.615.641q-.226.422-.226 1.022c0 .6.076.74.226 1.02q.226.42.615.644.39.222.878.222.486 0 .875-.22a1.6 1.6 0 0 0 .617-.644m-9.41.814V13.13h2.43v.64H9.052v.874h1.493v.64H9.052v1.517zm2.952 0V13.13h1.448q.416 0 .71.149.295.147.45.417t.156.633q0 .366-.158.629a1.02 1.02 0 0 1-.457.402l-.033.014.778 1.427h-.856L12.57 15.5h-.566v1.302zm10.33 0h-.67l-1.597-2.31h-.027v2.31h-.776V13.13h.681l1.585 2.308h.032V13.13h.773v3.67Zm.502-3.671v.64h1.124v3.03h.767v-3.03h1.124v-.64z\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#FEFEFE\"\n        d=\"M17.128 14.966q0-.39-.117-.656a.9.9 0 0 0-.324-.405.87.87 0 0 0-.492-.138.87.87 0 0 0-.49.138.9.9 0 0 0-.327.405 1.7 1.7 0 0 0-.115.656q0 .39.115.656a.9.9 0 0 0 .326.405q.21.138.491.138a.87.87 0 0 0 .492-.138.9.9 0 0 0 .324-.405 1.6 1.6 0 0 0 .117-.656m-5.123-.089h.527a1 1 0 0 0 .369-.061.44.44 0 0 0 .219-.183.6.6 0 0 0 .073-.303.6.6 0 0 0-.073-.308.45.45 0 0 0-.22-.19.9.9 0 0 0-.372-.067h-.523zm23.68 11.713h-.03l-.985 1.56v.029h1.015z\"\n      ></path>\n      <path\n        fill=\"#D32B1E\"\n        fillRule=\"evenodd\"\n        d=\"M36.062 30.866c1.297-.926 1.959-2.098 1.959-3.266s-.662-2.34-1.96-3.266c-1.295-.924-3.147-1.534-5.247-1.534s-3.952.61-5.248 1.534c-1.298.927-1.96 2.098-1.96 3.266s.662 2.34 1.96 3.266c1.296.925 3.147 1.534 5.248 1.534 2.1 0 3.952-.61 5.248-1.534M30.814 33.6c4.643 0 8.407-2.686 8.407-6s-3.764-6-8.407-6-8.407 2.686-8.407 6 3.764 6 8.407 6\"\n        clipRule=\"evenodd\"\n      ></path>\n    </svg>\n  );\n}\n\nexport default CreditCardSecurityCodeField;\n"],"names":["CreditCardSecurityCodeField","defaultValue","value","valueControlled","onChange","onChangeControlled","label","cardIcon","digits","props","setValue","React","useState","valueDefinitive","jsxs","Field","className","styles","as","AriaTextField","isRequired","children","jsx","PatternFormat","type","format","repeat","customInput","Input","placeholder","onValueChange","values","autoComplete","CreditCardSecurityCodeIcon","xmlns","width","height","fill","viewBox","d","fillRule","clipRule"],"mappings":"uVAuDaA,EAA8B,EACzCC,eACAC,MAAOC,EACPC,SAAUC,EACVC,QAAQ,qBACRC,WAAW,OACXC,SAAS,KACNC,MAEH,MAAOP,EAAOQ,GACZC,EAAMC,SAAsCX,GACxCY,EAAkBV,GAAmBD;AAE3C,OACEY,EAACC,EAAA,CACCC,UAAWC,EACXC,GAAIC,EACJC,YAAU,EACVd,WACIG,EAEJY,SAAA;iBAAC,MAAA,CAAIL,UAAWC,EACdI,SAAA;eAAAC,EAACC,EAAA,CACCC,KAAK,OACLC,OAAQ,GAAG,IAAIC,OAAOlB,KACtBmB,YAAaC,EACbC,YAAapB,GAAOoB,YACpB5B,eACAC,MAAOW,EACPiB,cAAgBC,IACoB,mBAAvB1B,GACTA,EAAmB0B,EAAO7B,OAE5BQ,EAASqB,EAAO7B,QAElB8B,aAAa;eAEfV,EAACW,GAA2B1B,gBAE7BE,GAAOY,yBACNC,EAAC,MAAA,CAAIN,UAAWC,EAAuBI,WAAMA,eAMrD,SAASY,GAA2B1B,SAClCA,EAAW;AAEX,OACEO,EAAC,MADiB,SAAbP,EACJ,CACC2B,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,KAAK,OACLC,QAAQ,YAERjB,SAAA;eAAAC,EAAC,OAAA,CACCe,KAAK,UACLE,EAAE;eAEJjB,EAAC,OAAA,CACCe,KAAK,UACLG,SAAS,UACTD,EAAE,2CACFE,SAAS;eAEXnB,EAAC,OAAA,CACCe,KAAK,UACLG,SAAS,UACTD,EAAE,gPACFE,SAAS;eAEXnB,EAAC,OAAA,CACCe,KAAK,UACLG,SAAS,UACTD,EAAE,8FACFE,SAAS;eAEXnB,EAAC,OAAA,CACCe,KAAK,UACLE,EAAE;eAEJjB,EAAC,OAAA,CACCe,KAAK,UACLG,SAAS,UACTD,EAAE,+lCACFE,SAAS;eAEXnB,EAAC,OAAA,CACCe,KAAK,UACLG,SAAS,UACTD,EAAE,0VACFE,SAAS,cAIZ,CACCP,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,KAAK,OACLC,QAAQ,YAERjB,SAAA;eAAAC,EAAC,OAAA,CACCe,KAAK,UACLG,SAAS,UACTD,EAAE,sYACFE,SAAS;eAEXnB,EAAC,OAAA,CACCe,KAAK,UACLE,EAAE;eAEJjB,EAAC,OAAA,CACCe,KAAK,UACLG,SAAS,UACTD,EAAE,omBACFE,SAAS;eAEXnB,EAAC,OAAA,CACCe,KAAK,UACLE,EAAE;eAEJjB,EAAC,OAAA,CACCe,KAAK,UACLG,SAAS,UACTD,EAAE,2SACFE,SAAS;eAEXnB,EAAC,OAAA,CACCe,KAAK,UACLE,EAAE;eAEJjB,EAAC,OAAA,CACCe,KAAK,UACLG,SAAS,UACTD,EAAE,sOACFE,SAAS;eAEXnB,EAAC,OAAA,CACCe,KAAK,UACLG,SAAS,UACTD,EAAE,42DACFE,SAAS;eAEXnB,EAAC,OAAA,CACCe,KAAK,UACLE,EAAE;eAEJjB,EAAC,OAAA,CACCe,KAAK,UACLG,SAAS,UACTD,EAAE,qVACFE,SAAS,cAIjB"}
+{"version":3,"file":"CreditCardSecurityCodeField.js","sources":["../../../src/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  Input,\n} from 'react-aria-components';\nimport { PatternFormat } from 'react-number-format';\nimport styles from './CreditCardSecurityCodeField.module.css';\nimport { Field, FieldProps } from '../_base/Field';\n\ntype CreditCardSecurityCodeValue = string | number | null | undefined;\n\nexport interface CreditCardSecurityCodeFieldBaseProps {\n  /**\n   * The controlled value of the credit card number.\n   */\n  value?: CreditCardSecurityCodeValue;\n  /**\n   * The controlled onChange handler for the credit card number.\n   */\n  onChange?: (value?: CreditCardSecurityCodeValue) => void;\n  /**\n   * The default value of the credit card number.\n   */\n  defaultValue?: CreditCardSecurityCodeValue;\n  /**\n   * The CSV pictogram icon to display.\n   * Expects 'back' or 'front' depending on card type.\n   */\n  cardIcon?: 'front' | 'back';\n}\n\nexport interface CreditCardSecurityCodeFieldProps\n  extends Omit<\n      FieldProps<\n        Omit<AriaTextFieldProps, 'defaultValue' | 'value' | 'onChange'>\n      >,\n      'isRequired'\n    >,\n    CreditCardSecurityCodeFieldBaseProps {\n  /**\n   * The placeholder text to display when the input is empty.\n   */\n  placeholder?: string;\n  /**\n   * Expects a DetailsDisclosure component for further information.\n   */\n  children?: React.ReactNode;\n  /**\n   * Digits allowed in the input\n   * @default 3\n   */\n  digits?: number;\n}\n\nexport const CreditCardSecurityCodeField = forwardRef<\n  HTMLInputElement,\n  CreditCardSecurityCodeFieldProps\n>(\n  (\n    {\n      defaultValue,\n      value: valueControlled,\n      onChange: onChangeControlled,\n      label = 'Card security code',\n      cardIcon = 'back',\n      digits = 3,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const [value, setValue] =\n      React.useState<CreditCardSecurityCodeValue>(defaultValue);\n    const valueDefinitive = valueControlled ?? value;\n\n    return (\n      <Field<CreditCardSecurityCodeFieldBaseProps>\n        className={styles.creditCardSecurityCodeField}\n        as={AriaTextField}\n        isRequired\n        label={label}\n        {...props}\n      >\n        <div className={styles.inputWrapper}>\n          <PatternFormat\n            getInputRef={forwardedRef}\n            type=\"text\"\n            format={`${'#'.repeat(digits)}`}\n            customInput={Input}\n            placeholder={props?.placeholder}\n            defaultValue={defaultValue}\n            value={valueDefinitive}\n            onValueChange={(values) => {\n              if (typeof onChangeControlled === 'function') {\n                onChangeControlled(values.value);\n              }\n              setValue(values.value);\n            }}\n            autoComplete=\"cc-csc\"\n          />\n          <CreditCardSecurityCodeIcon cardIcon={cardIcon} />\n        </div>\n        {props?.children && (\n          <div className={styles.inputChildren}>{props.children}</div>\n        )}\n      </Field>\n    );\n  },\n);\nCreditCardSecurityCodeField.displayName = 'CreditCardSecurityCodeField';\n\nfunction CreditCardSecurityCodeIcon({\n  cardIcon = 'back',\n}: Pick<CreditCardSecurityCodeFieldBaseProps, 'cardIcon'>) {\n  return cardIcon === 'back' ? (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"48\"\n      height=\"48\"\n      fill=\"none\"\n      viewBox=\"0 0 48 48\"\n    >\n      <path\n        fill=\"#4B4855\"\n        d=\"M30.528 29.287v-.514l1.202-1.113a5 5 0 0 0 .258-.267q.105-.12.16-.233a.6.6 0 0 0 .054-.249.44.44 0 0 0-.252-.422.6.6 0 0 0-.266-.06.56.56 0 0 0-.27.063.43.43 0 0 0-.178.18.6.6 0 0 0-.063.279h-.678q0-.331.15-.576t.42-.377a1.4 1.4 0 0 1 .624-.134q.363 0 .632.129.27.126.42.353.15.225.15.517a1 1 0 0 1-.076.378q-.075.186-.265.414a6 6 0 0 1-.54.542l-.492.483v.023h1.418v.584zm-.802-3.377v3.377h-.714v-2.7h-.02l-.773.486v-.634l.836-.529zm4.317 3.296q.29.127.658.127.38 0 .673-.128a1.1 1.1 0 0 0 .46-.353.82.82 0 0 0 .166-.513.73.73 0 0 0-.194-.524q-.195-.211-.567-.26v-.026a.8.8 0 0 0 .46-.24.66.66 0 0 0 .176-.474.82.82 0 0 0-.145-.481 1 1 0 0 0-.407-.343 1.4 1.4 0 0 0-.612-.127q-.346 0-.621.127-.274.126-.436.348a.9.9 0 0 0-.166.514h.684a.4.4 0 0 1 .077-.224.47.47 0 0 1 .193-.147.65.65 0 0 1 .516.002.4.4 0 0 1 .23.374q0 .134-.07.235a.46.46 0 0 1-.194.154.7.7 0 0 1-.285.056h-.315v.525h.315q.19 0 .33.06a.5.5 0 0 1 .214.164.4.4 0 0 1 .075.24.4.4 0 0 1-.07.235.5.5 0 0 1-.197.16.7.7 0 0 1-.288.058.7.7 0 0 1-.282-.052.5.5 0 0 1-.201-.143.38.38 0 0 1-.081-.218h-.719q.005.295.17.521.166.225.453.353\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        fillRule=\"evenodd\"\n        d=\"M7.2 24v7.2h31.2V24zm30 1.2H8.4V30h28.8z\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        fillRule=\"evenodd\"\n        d=\"M4.8 14.4a4.8 4.8 0 0 1 4.8-4.8h28.8a4.8 4.8 0 0 1 4.8 4.8v19.2a4.8 4.8 0 0 1-4.8 4.8H9.6a4.8 4.8 0 0 1-4.8-4.8zm4.8-3.6h28.8a3.6 3.6 0 0 1 3.6 3.6H6a3.6 3.6 0 0 1 3.6-3.6M42 19.2v14.4a3.6 3.6 0 0 1-3.6 3.6H9.6A3.6 3.6 0 0 1 6 33.6V19.2z\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#FEFEFE\"\n        fillRule=\"evenodd\"\n        d=\"M42 33.6V19.2H6v14.4a3.6 3.6 0 0 0 3.6 3.6h28.8a3.6 3.6 0 0 0 3.6-3.6M38.4 24H7.2v7.2h31.2z\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#FEFEFE\"\n        d=\"M38.4 10.8H9.6A3.6 3.6 0 0 0 6 14.4h36a3.6 3.6 0 0 0-3.6-3.6\"\n      ></path>\n      <path\n        fill=\"#FEFEFE\"\n        fillRule=\"evenodd\"\n        d=\"M8.4 25.2h28.8V30H8.4zm22.128 4.087v-.514l1.202-1.113a5 5 0 0 0 .258-.267q.105-.12.16-.233a.6.6 0 0 0 .054-.249.44.44 0 0 0-.252-.422.6.6 0 0 0-.266-.06.56.56 0 0 0-.27.063.43.43 0 0 0-.178.18.6.6 0 0 0-.063.279h-.678q0-.331.15-.576t.42-.377a1.4 1.4 0 0 1 .624-.134q.363 0 .632.129.27.126.42.353.15.225.15.517a1 1 0 0 1-.076.378q-.075.186-.265.414a6 6 0 0 1-.54.542l-.492.483v.023h1.418v.584zm-.802-3.377v3.377h-.714v-2.7h-.02l-.773.486v-.634l.836-.529zm4.317 3.296q.29.127.658.127.38 0 .673-.128a1.1 1.1 0 0 0 .46-.353.82.82 0 0 0 .166-.513.73.73 0 0 0-.194-.524q-.195-.211-.567-.26v-.026a.8.8 0 0 0 .46-.24.66.66 0 0 0 .176-.474.82.82 0 0 0-.145-.481 1 1 0 0 0-.407-.343 1.4 1.4 0 0 0-.612-.127q-.346 0-.621.127-.274.126-.436.348a.9.9 0 0 0-.166.514h.684a.4.4 0 0 1 .077-.224.47.47 0 0 1 .193-.147.65.65 0 0 1 .516.002.4.4 0 0 1 .23.374q0 .134-.07.235a.46.46 0 0 1-.194.154.7.7 0 0 1-.285.056h-.315v.525h.315q.19 0 .33.06a.5.5 0 0 1 .214.164.4.4 0 0 1 .075.24.4.4 0 0 1-.07.235.5.5 0 0 1-.197.16.7.7 0 0 1-.288.058.7.7 0 0 1-.282-.052.5.5 0 0 1-.201-.143.38.38 0 0 1-.081-.218h-.719q.005.295.17.521.166.225.453.353\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#D32B1E\"\n        fillRule=\"evenodd\"\n        d=\"M37.641 30.866c1.298-.927 1.96-2.098 1.96-3.266s-.662-2.34-1.96-3.266c-1.295-.925-3.147-1.534-5.247-1.534s-3.952.61-5.248 1.534c-1.298.926-1.96 2.097-1.96 3.266 0 1.168.662 2.34 1.96 3.265 1.296.925 3.147 1.535 5.248 1.535 2.1 0 3.952-.61 5.247-1.534M32.394 33.6c4.643 0 8.407-2.687 8.407-6s-3.764-6-8.407-6-8.407 2.686-8.407 6 3.763 6 8.407 6\"\n        clipRule=\"evenodd\"\n      ></path>\n    </svg>\n  ) : (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"48\"\n      height=\"48\"\n      fill=\"none\"\n      viewBox=\"0 0 48 48\"\n    >\n      <path\n        fill=\"#D32B1E\"\n        fillRule=\"evenodd\"\n        d=\"M37.336 31.19c1.627-1.044 2.418-2.343 2.418-3.592s-.791-2.548-2.418-3.593c-1.615-1.036-3.917-1.716-6.522-1.716s-4.908.68-6.522 1.716c-1.627 1.045-2.418 2.343-2.418 3.593s.79 2.548 2.418 3.592c1.614 1.036 3.916 1.716 6.522 1.716 2.605 0 4.907-.68 6.522-1.716m-6.522 2.916c5.6 0 10.14-2.914 10.14-6.508 0-3.595-4.54-6.509-10.14-6.509s-10.14 2.914-10.14 6.509c0 3.594 4.54 6.508 10.14 6.508\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        d=\"M27.296 29.47v-.57l1.332-1.233q.17-.165.286-.296.117-.132.177-.258a.64.64 0 0 0 .06-.276.49.49 0 0 0-.28-.468.64.64 0 0 0-.294-.066.6.6 0 0 0-.3.07.5.5 0 0 0-.197.2.65.65 0 0 0-.07.308h-.75q0-.368.166-.638a1.1 1.1 0 0 1 .466-.418q.3-.149.69-.148.403 0 .7.142.3.14.467.391.166.25.166.574 0 .211-.084.419a1.8 1.8 0 0 1-.294.458 7 7 0 0 1-.598.602l-.546.535v.026h1.572v.647h-2.669Zm-.889-3.742v3.743h-.792v-2.992h-.022l-.857.537v-.702l.927-.586zm4.785 3.653q.32.14.73.14.42 0 .745-.142.326-.143.51-.39a.9.9 0 0 0 .184-.57.8.8 0 0 0-.215-.58q-.216-.234-.629-.287v-.03a.9.9 0 0 0 .51-.266.73.73 0 0 0 .196-.525.9.9 0 0 0-.161-.534 1.1 1.1 0 0 0-.452-.38 1.54 1.54 0 0 0-.678-.14q-.383 0-.689.14a1.2 1.2 0 0 0-.482.386.97.97 0 0 0-.185.57h.759a.43.43 0 0 1 .086-.248.5.5 0 0 1 .213-.163.73.73 0 0 1 .572.002.45.45 0 0 1 .255.415.45.45 0 0 1-.077.26.5.5 0 0 1-.216.17.8.8 0 0 1-.316.063h-.35v.581h.35q.212 0 .365.066a.54.54 0 0 1 .238.183.44.44 0 0 1 .084.265.45.45 0 0 1-.078.261.5.5 0 0 1-.218.177.8.8 0 0 1-.32.064.8.8 0 0 1-.312-.056.55.55 0 0 1-.223-.16.4.4 0 0 1-.09-.24h-.797q.006.327.189.577.184.249.502.391\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        fillRule=\"evenodd\"\n        d=\"M33.874 28.813v-.623l1.562-2.462h.99v2.45h.465v.635h-.464v.658h-.757v-.658zm1.782-2.223h.029v1.588H34.67v-.029zM17.687 15.988q.227-.42.227-1.022 0-.6-.227-1.021a1.57 1.57 0 0 0-.617-.642 1.73 1.73 0 0 0-.875-.222q-.49 0-.878.222a1.57 1.57 0 0 0-.615.641q-.226.422-.226 1.022c0 .6.076.74.226 1.02q.226.42.615.644.39.222.878.222.486 0 .875-.22a1.6 1.6 0 0 0 .617-.644m-.676-1.678q.117.267.117.656 0 .39-.117.656a.9.9 0 0 1-.324.405.87.87 0 0 1-.492.138.87.87 0 0 1-.49-.138.9.9 0 0 1-.327-.405 1.7 1.7 0 0 1-.115-.656q0-.39.115-.656a.9.9 0 0 1 .326-.405.87.87 0 0 1 .491-.138q.282 0 .492.138a.9.9 0 0 1 .324.405\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        d=\"M8.276 16.802V13.13h2.43v.64H9.053v.874h1.493v.64H9.052v1.517z\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        fillRule=\"evenodd\"\n        d=\"M11.229 16.802V13.13h1.448q.416 0 .71.149.295.147.45.417t.156.633q0 .366-.158.629a1.02 1.02 0 0 1-.457.402l-.033.014.778 1.427h-.856L12.57 15.5h-.566v1.302zm1.303-1.925h-.527v-1.112h.523q.225 0 .371.067a.45.45 0 0 1 .22.19.6.6 0 0 1 .074.308q0 .18-.073.303a.44.44 0 0 1-.219.183 1 1 0 0 1-.37.06Z\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        d=\"M21.56 16.802h-.67l-1.598-2.31h-.027v2.31h-.776V13.13h.681l1.585 2.308h.032V13.13h.773v3.67Zm.501-3.672v.64h1.124v3.032h.767V13.77h1.124v-.64z\"\n      ></path>\n      <path\n        fill=\"#4B4855\"\n        fillRule=\"evenodd\"\n        d=\"M9.6 9.6a4.8 4.8 0 0 0-4.8 4.8v19.2a4.8 4.8 0 0 0 4.8 4.8h28.8a4.8 4.8 0 0 0 4.8-4.8V14.4a4.8 4.8 0 0 0-4.8-4.8zm28.8 1.2H9.6A3.6 3.6 0 0 0 6 14.4v19.2a3.6 3.6 0 0 0 3.6 3.6h28.8a3.6 3.6 0 0 0 3.6-3.6V14.4a3.6 3.6 0 0 0-3.6-3.6\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#FEFEFE\"\n        fillRule=\"evenodd\"\n        d=\"M9.6 10.8h28.8a3.6 3.6 0 0 1 3.6 3.6v19.2a3.6 3.6 0 0 1-3.6 3.6H9.6A3.6 3.6 0 0 1 6 33.6V14.4a3.6 3.6 0 0 1 3.6-3.6m17.696 18.67v-.57l1.332-1.233q.17-.165.286-.296.117-.132.177-.258a.64.64 0 0 0 .06-.276.49.49 0 0 0-.28-.468.64.64 0 0 0-.294-.066.6.6 0 0 0-.3.07.5.5 0 0 0-.197.2.65.65 0 0 0-.07.308h-.75q0-.368.166-.638a1.1 1.1 0 0 1 .466-.418q.3-.149.69-.148.403 0 .7.142.3.14.467.391.166.25.166.574 0 .211-.084.419a1.8 1.8 0 0 1-.294.458 7 7 0 0 1-.598.602l-.546.535v.026h1.572v.647h-2.669Zm-.89-3.742v3.743h-.79v-2.992h-.023l-.857.537v-.702l.927-.586h.744Zm4.786 3.653q.32.14.73.14.42 0 .745-.142.326-.143.51-.39a.9.9 0 0 0 .184-.57.8.8 0 0 0-.215-.58q-.216-.234-.629-.287v-.03a.9.9 0 0 0 .51-.266.73.73 0 0 0 .196-.525.9.9 0 0 0-.161-.534 1.1 1.1 0 0 0-.452-.38 1.54 1.54 0 0 0-.678-.14q-.383 0-.689.14a1.2 1.2 0 0 0-.482.386.97.97 0 0 0-.185.57h.759a.43.43 0 0 1 .086-.248.5.5 0 0 1 .213-.163.73.73 0 0 1 .572.002.45.45 0 0 1 .255.415.45.45 0 0 1-.077.26.5.5 0 0 1-.216.17.8.8 0 0 1-.316.063h-.35v.581h.35q.212 0 .365.066a.54.54 0 0 1 .238.183.44.44 0 0 1 .084.265.45.45 0 0 1-.078.261.5.5 0 0 1-.218.177.8.8 0 0 1-.32.064.8.8 0 0 1-.312-.056.55.55 0 0 1-.223-.16.4.4 0 0 1-.09-.24h-.797q.006.327.189.577.184.249.502.391m2.682-.568v-.623l1.562-2.462h.99v2.45h.465v.635h-.464v.658h-.757v-.658zM17.687 15.988q.227-.42.227-1.022 0-.6-.227-1.021a1.57 1.57 0 0 0-.617-.642 1.73 1.73 0 0 0-.875-.222q-.49 0-.878.222a1.57 1.57 0 0 0-.615.641q-.226.422-.226 1.022c0 .6.076.74.226 1.02q.226.42.615.644.39.222.878.222.486 0 .875-.22a1.6 1.6 0 0 0 .617-.644m-9.41.814V13.13h2.43v.64H9.052v.874h1.493v.64H9.052v1.517zm2.952 0V13.13h1.448q.416 0 .71.149.295.147.45.417t.156.633q0 .366-.158.629a1.02 1.02 0 0 1-.457.402l-.033.014.778 1.427h-.856L12.57 15.5h-.566v1.302zm10.33 0h-.67l-1.597-2.31h-.027v2.31h-.776V13.13h.681l1.585 2.308h.032V13.13h.773v3.67Zm.502-3.671v.64h1.124v3.03h.767v-3.03h1.124v-.64z\"\n        clipRule=\"evenodd\"\n      ></path>\n      <path\n        fill=\"#FEFEFE\"\n        d=\"M17.128 14.966q0-.39-.117-.656a.9.9 0 0 0-.324-.405.87.87 0 0 0-.492-.138.87.87 0 0 0-.49.138.9.9 0 0 0-.327.405 1.7 1.7 0 0 0-.115.656q0 .39.115.656a.9.9 0 0 0 .326.405q.21.138.491.138a.87.87 0 0 0 .492-.138.9.9 0 0 0 .324-.405 1.6 1.6 0 0 0 .117-.656m-5.123-.089h.527a1 1 0 0 0 .369-.061.44.44 0 0 0 .219-.183.6.6 0 0 0 .073-.303.6.6 0 0 0-.073-.308.45.45 0 0 0-.22-.19.9.9 0 0 0-.372-.067h-.523zm23.68 11.713h-.03l-.985 1.56v.029h1.015z\"\n      ></path>\n      <path\n        fill=\"#D32B1E\"\n        fillRule=\"evenodd\"\n        d=\"M36.062 30.866c1.297-.926 1.959-2.098 1.959-3.266s-.662-2.34-1.96-3.266c-1.295-.924-3.147-1.534-5.247-1.534s-3.952.61-5.248 1.534c-1.298.927-1.96 2.098-1.96 3.266s.662 2.34 1.96 3.266c1.296.925 3.147 1.534 5.248 1.534 2.1 0 3.952-.61 5.248-1.534M30.814 33.6c4.643 0 8.407-2.686 8.407-6s-3.764-6-8.407-6-8.407 2.686-8.407 6 3.764 6 8.407 6\"\n        clipRule=\"evenodd\"\n      ></path>\n    </svg>\n  );\n}\n\nexport default CreditCardSecurityCodeField;\n"],"names":["CreditCardSecurityCodeField","forwardRef","defaultValue","value","valueControlled","onChange","onChangeControlled","label","cardIcon","digits","props","forwardedRef","setValue","React","useState","valueDefinitive","jsxs","Field","className","styles","as","AriaTextField","isRequired","children","jsx","PatternFormat","getInputRef","type","format","repeat","customInput","Input","placeholder","onValueChange","values","autoComplete","CreditCardSecurityCodeIcon","xmlns","width","height","fill","viewBox","d","fillRule","clipRule","displayName"],"mappings":"wWAuDaA,EAA8BC,EAIzC,EAEIC,eACAC,MAAOC,EACPC,SAAUC,EACVC,QAAQ,qBACRC,WAAW,OACXC,SAAS,KACNC,GAELC,KAEA,MAAOR,EAAOS,GACZC,EAAMC,SAAsCZ,GACxCa,EAAkBX,GAAmBD;AAE3C,OACEa,EAACC,EAAA,CACCC,UAAWC,EACXC,GAAIC,EACJC,YAAU,EACVf,WACIG,EAEJa,SAAA;iBAAC,MAAA,CAAIL,UAAWC,EACdI,SAAA;eAAAC,EAACC,EAAA,CACCC,YAAaf,EACbgB,KAAK,OACLC,OAAQ,GAAG,IAAIC,OAAOpB,KACtBqB,YAAaC,EACbC,YAAatB,GAAOsB,YACpB9B,eACAC,MAAOY,EACPkB,cAAgBC,IACoB,mBAAvB5B,GACTA,EAAmB4B,EAAO/B,OAE5BS,EAASsB,EAAO/B,QAElBgC,aAAa;eAEfX,EAACY,GAA2B5B,gBAE7BE,GAAOa,yBACNC,EAAC,MAAA,CAAIN,UAAWC,EAAuBI,WAAMA,gBAQvD,SAASa,GAA2B5B,SAClCA,EAAW;AAEX,OACEQ,EAAC,MADiB,SAAbR,EACJ,CACC6B,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,KAAK,OACLC,QAAQ,YAERlB,SAAA;eAAAC,EAAC,OAAA,CACCgB,KAAK,UACLE,EAAE;eAEJlB,EAAC,OAAA,CACCgB,KAAK,UACLG,SAAS,UACTD,EAAE,2CACFE,SAAS;eAEXpB,EAAC,OAAA,CACCgB,KAAK,UACLG,SAAS,UACTD,EAAE,gPACFE,SAAS;eAEXpB,EAAC,OAAA,CACCgB,KAAK,UACLG,SAAS,UACTD,EAAE,8FACFE,SAAS;eAEXpB,EAAC,OAAA,CACCgB,KAAK,UACLE,EAAE;eAEJlB,EAAC,OAAA,CACCgB,KAAK,UACLG,SAAS,UACTD,EAAE,+lCACFE,SAAS;eAEXpB,EAAC,OAAA,CACCgB,KAAK,UACLG,SAAS,UACTD,EAAE,0VACFE,SAAS,cAIZ,CACCP,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,KAAK,OACLC,QAAQ,YAERlB,SAAA;eAAAC,EAAC,OAAA,CACCgB,KAAK,UACLG,SAAS,UACTD,EAAE,sYACFE,SAAS;eAEXpB,EAAC,OAAA,CACCgB,KAAK,UACLE,EAAE;eAEJlB,EAAC,OAAA,CACCgB,KAAK,UACLG,SAAS,UACTD,EAAE,omBACFE,SAAS;eAEXpB,EAAC,OAAA,CACCgB,KAAK,UACLE,EAAE;eAEJlB,EAAC,OAAA,CACCgB,KAAK,UACLG,SAAS,UACTD,EAAE,2SACFE,SAAS;eAEXpB,EAAC,OAAA,CACCgB,KAAK,UACLE,EAAE;eAEJlB,EAAC,OAAA,CACCgB,KAAK,UACLG,SAAS,UACTD,EAAE,sOACFE,SAAS;eAEXpB,EAAC,OAAA,CACCgB,KAAK,UACLG,SAAS,UACTD,EAAE,42DACFE,SAAS;eAEXpB,EAAC,OAAA,CACCgB,KAAK,UACLE,EAAE;eAEJlB,EAAC,OAAA,CACCgB,KAAK,UACLG,SAAS,UACTD,EAAE,qVACFE,SAAS,cAIjB,CAlHA5C,EAA4B6C,YAAc"}

package/dist/components/DatePicker/DatePicker.d.ts

@@ -65,5 +65,5 @@ export interface DatePickerProps extends Omit<AriaDatePickerProps<DateValue>, Da
      */
     calendarProps?: WithoutSharedProps<CalendarProps>;
 }
-export declare const DatePicker: (props: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
 export default DatePicker;

package/dist/components/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as l,useMemo as t,useRef as r}from"react";import{$ as i,a as o,b as n,c as s,d as u,e as d}from"../../DatePicker.module-DlLCFGCM.js";import{IconButton as m}from"../IconButton/IconButton.js";import{useDatePicker as c}from"@react-aria/datepicker";import{Popover as p}from"../Popover/Popover.js";import{Calendar as f}from"../Calendar/Calendar.js";import{D as h}from"../../DateField-rBq9QuR6.js";import{parseDateValue as V}from"../../utils/date/date.js";import{DatePickerContext as g}from"./DatePickerContext.js";import{$ as v,a as C}from"../../useControlledState-CLJIwghQ.js";import{b as P,h as y}from"../../CalendarDate-uEuHKGse.js";import{g as D}from"../../useCalendarState-BKam8aTi.js";const b=b=>{const j={...b,defaultValue:V(b?.defaultValue),value:V(b?.value),onChange:e=>b?.onChange?.(e.toDate("UTC").toISOString()),minValue:V(b?.minValue),maxValue:V(b?.maxValue),isDateUnavailable:e=>!!b?.isDateUnavailable&&b.isDateUnavailable(e.toDate("UTC").toISOString())},I=function(e){let a=i(e),[r,d]=v(e.value,e.defaultValue||null,e.onChange),[m]=l(r),c=r||e.placeholderValue||null,[p,f]=o(c,e.granularity),h=null!=r?r.toDate(f??"UTC"):null,V="hour"===p||"minute"===p||"second"===p,g=e.shouldCloseOnSelect??!0,[b,j]=l(null),[I,S]=l(null);if(r&&(b=r,"hour"in r&&(I=r)),c&&!(p in c))throw new Error("Invalid granularity "+p+" for value "+c.toString());let O="gregory"===r?.calendar.identifier&&"BC"===r.era,T=t(()=>({granularity:p,timeZone:f,hideTimeZone:e.hideTimeZone,hourCycle:e.hourCycle,shouldForceLeadingZeros:e.shouldForceLeadingZeros,showEra:O}),[p,e.hourCycle,e.shouldForceLeadingZeros,f,e.hideTimeZone,O]),{minValue:Z,maxValue:k,isDateUnavailable:x}=e,F=t(()=>n(r,Z,k,x,T),[r,Z,k,x,T]),U=C({...e,value:r,builtinValidation:F}),w=U.displayValidation.isInvalid,B=e.validationState||(w?"invalid":null),E=(e,a)=>{d("timeZone"in a?a.set(P(e)):y(e,a)),j(null),S(null),U.commitValidation()};return{...U,value:r,defaultValue:e.defaultValue??m,setValue:d,dateValue:b,timeValue:I,setDateValue:l=>{let t="function"==typeof g?g():g;V?I||t?E(l,I||u(e.defaultValue||e.placeholderValue)):j(l):(d(l),U.commitValidation()),t&&a.setOpen(!1)},setTimeValue:e=>{b&&e?E(b,e):S(e)},granularity:p,hasTime:V,...a,setOpen(l){!l&&!r&&b&&V&&E(b,I||u(e.defaultValue||e.placeholderValue)),a.setOpen(l)},validationState:B,isInvalid:w,formatValue(e,a){if(!h)return"";let l=s(a,T);return new D(e,l).format(h)},getDateFormatter(e,a){let l={...T,...a},t=s({},l);return new D(e,t)}}}(j),S=r(null),O=c(j,I,S),T={...b.dateFieldProps,...O.fieldProps,granularity:"day",hideTimeZone:!0,label:b.label,description:b.description,errorMessage:b.errorMessage},Z={...O.buttonProps,isInvalid:I.isInvalid,styleVariant:I.isInvalid?"critical":I.isOpen?"accent":"neutral",onClick:()=>I.isOpen?I.close():I.open()},k={...b.calendarProps,...O.calendarProps};/* @__PURE__ */
-return e("div",{className:d.datePicker,ref:S,children:/* @__PURE__ */a(g.Provider,{value:{isInDatePicker:!0},children:[
-/* @__PURE__ */e(h,{...T,children:/* @__PURE__ */e(h.EndSlot,{children:/* @__PURE__ */e(m,{...Z,size:"sm",emphasis:"tertiary",iconProps:{iconName:"calendar-days",iconPrefix:"fas"}})})}),I.isOpen&&/* @__PURE__ */e(p,{state:I,triggerRef:S,placement:"bottom start",hasArrow:!1,shouldFlip:!0,children:/* @__PURE__ */e("div",{role:"dialog",className:d.datePicker__dialog,...O.dialogProps,children:/* @__PURE__ */e(f,{...k})})})]})})};export{b as DatePicker,b as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as l,useMemo as t,forwardRef as r}from"react";import{$ as i,a as o,b as n,c as s,d as u,e as d}from"../../DatePicker.module-DlLCFGCM.js";import{IconButton as m}from"../IconButton/IconButton.js";import{useDatePicker as c}from"@react-aria/datepicker";import{Popover as p}from"../Popover/Popover.js";import{Calendar as f}from"../Calendar/Calendar.js";import{D as h}from"../../DateField-rBq9QuR6.js";import{parseDateValue as V}from"../../utils/date/date.js";import{DatePickerContext as g}from"./DatePickerContext.js";import{useObjectRef as v}from"@react-aria/utils";import{$ as C,a as P}from"../../useControlledState-CLJIwghQ.js";import{b as y,h as D}from"../../CalendarDate-uEuHKGse.js";import{g as b}from"../../useCalendarState-BKam8aTi.js";const j=r((r,j)=>{const I={...r,defaultValue:V(r?.defaultValue),value:V(r?.value),onChange:e=>r?.onChange?.(e.toDate("UTC").toISOString()),minValue:V(r?.minValue),maxValue:V(r?.maxValue),isDateUnavailable:e=>!!r?.isDateUnavailable&&r.isDateUnavailable(e.toDate("UTC").toISOString())},S=function(e){let a=i(e),[r,d]=C(e.value,e.defaultValue||null,e.onChange),[m]=l(r),c=r||e.placeholderValue||null,[p,f]=o(c,e.granularity),h=null!=r?r.toDate(f??"UTC"):null,V="hour"===p||"minute"===p||"second"===p,g=e.shouldCloseOnSelect??!0,[v,j]=l(null),[I,S]=l(null);if(r&&(v=r,"hour"in r&&(I=r)),c&&!(p in c))throw new Error("Invalid granularity "+p+" for value "+c.toString());let O="gregory"===r?.calendar.identifier&&"BC"===r.era,T=t(()=>({granularity:p,timeZone:f,hideTimeZone:e.hideTimeZone,hourCycle:e.hourCycle,shouldForceLeadingZeros:e.shouldForceLeadingZeros,showEra:O}),[p,e.hourCycle,e.shouldForceLeadingZeros,f,e.hideTimeZone,O]),{minValue:Z,maxValue:k,isDateUnavailable:x}=e,F=t(()=>n(r,Z,k,x,T),[r,Z,k,x,T]),U=P({...e,value:r,builtinValidation:F}),w=U.displayValidation.isInvalid,N=e.validationState||(w?"invalid":null),B=(e,a)=>{d("timeZone"in a?a.set(y(e)):D(e,a)),j(null),S(null),U.commitValidation()};return{...U,value:r,defaultValue:e.defaultValue??m,setValue:d,dateValue:v,timeValue:I,setDateValue:l=>{let t="function"==typeof g?g():g;V?I||t?B(l,I||u(e.defaultValue||e.placeholderValue)):j(l):(d(l),U.commitValidation()),t&&a.setOpen(!1)},setTimeValue:e=>{v&&e?B(v,e):S(e)},granularity:p,hasTime:V,...a,setOpen(l){!l&&!r&&v&&V&&B(v,I||u(e.defaultValue||e.placeholderValue)),a.setOpen(l)},validationState:N,isInvalid:w,formatValue(e,a){if(!h)return"";let l=s(a,T);return new b(e,l).format(h)},getDateFormatter(e,a){let l={...T,...a},t=s({},l);return new b(e,t)}}}(I),O=v(j),T=c(I,S,O),Z={...r.dateFieldProps,...T.fieldProps,granularity:"day",hideTimeZone:!0,label:r.label,description:r.description,errorMessage:r.errorMessage},k={...T.buttonProps,isInvalid:S.isInvalid,styleVariant:S.isInvalid?"critical":S.isOpen?"accent":"neutral",onClick:()=>S.isOpen?S.close():S.open()},x={...r.calendarProps,...T.calendarProps};/* @__PURE__ */
+return e("div",{className:d.datePicker,ref:O,children:/* @__PURE__ */a(g.Provider,{value:{isInDatePicker:!0},children:[
+/* @__PURE__ */e(h,{...Z,children:/* @__PURE__ */e(h.EndSlot,{children:/* @__PURE__ */e(m,{...k,size:"sm",emphasis:"tertiary",iconProps:{iconName:"calendar-days",iconPrefix:"fas"}})})}),S.isOpen&&/* @__PURE__ */e(p,{state:S,triggerRef:O,placement:"bottom start",hasArrow:!1,shouldFlip:!0,children:/* @__PURE__ */e("div",{role:"dialog",className:d.datePicker__dialog,...T.dialogProps,children:/* @__PURE__ */e(f,{...x})})})]})})});j.displayName="DatePicker";export{j as DatePicker,j as default};
 //# sourceMappingURL=DatePicker.js.map