@alto-avios/alto-ui 5.1.2 → 5.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { cva } from 'class-variance-authority';\nimport {\n  Carousel as AriaCarousel,\n  CarouselScroller as AriaCarouselScroller,\n  CarouselItem as AriaCarouselItem,\n  CarouselTabs as AriaCarouselTabs,\n  CarouselTab as AriaCarouselTab,\n} from 'react-aria-carousel';\nimport styles from './Carousel.module.css';\nimport { CarouselButton } from './CarouselButton/CarouselButton';\nimport { CarouselDots } from './CarouselDots/CarouselDots';\nimport { AutoplayControl } from './AutoplayControl/AutoplayControl';\nimport { focusStyleVariants } from '../../utils/focus/focusStyles';\nimport { useFocusRing } from '@react-aria/focus';\n\nimport {\n  WithResponsive,\n  resolveResponsiveProp,\n} from '../../utils/breakpoint/responsive';\nimport { useBreakpoint } from '../../utils/breakpoint/hooks/useBreakpoint';\n\nconst carousel = cva(styles.carousel, {\n  variants: {\n    looping: {\n      infinite: styles.infinite,\n      backToStart: styles.native,\n      off: undefined,\n    },\n  },\n});\n\nexport interface CarouselBaseProps {\n  /**\n   * Content to be displayed in the carousel\n   */\n  children?: React.ReactNode | React.ReactNode[];\n\n  /**\n   * Accessible name for the carousel\n   * Describes the purpose or content of the carousel for screen readers\n   * @example \"Featured products\" or \"Customer testimonials\"\n   */\n  'aria-label'?: string;\n\n  /**\n   * ID of an element that provides additional description for the carousel\n   * Can reference an element that gives more context about the carousel's content\n   * @example \"carousel-description\"\n   */\n  'aria-describedby'?: string;\n\n  /**\n   * Looping behavior\n   * - 'infinite': Carousel loops continuously\n   * - 'backToStart': Carousel loops back to start after reaching end\n   * - 'off': Looping is disabled\n   * @default 'off'\n   */\n  looping?: 'infinite' | 'backToStart' | 'off';\n\n  /**\n   * Number of items to display per page (minimum: 1)\n   * Decimal values (e.g., 2.25) can be used to show partial items\n   * @default 1\n   * @min 1\n   */\n  itemsPerPage?: number;\n\n  /**\n   * Space between carousel items in pixels\n   * @default 0\n   */\n  spaceBetweenItems?: number;\n\n  /**\n   * Amount of padding added to the scroll container to create a \"peek\" effect.\n   * This shows a portion of the adjacent items.\n   * Accepts any valid CSS dimension (px, rem, em, %) - e.g., \"15%\", \"20px\", \"2rem\"\n   * @example \"15%\" or \"20px\" or \"2rem\"\n   * @default undefined\n   */\n  scrollPadding?: string;\n\n  /* Button and Controls Props */\n  /**\n   * Icon type for navigation buttons\n   * @default 'chevron'\n   */\n  iconType?: 'chevron';\n\n  /**\n   * Style of carousel arrow buttons\n   * @default 'neutral'\n   */\n  arrowStyleVariant?:\n    | 'neutral'\n    | 'white'\n    | 'shapeFlat'\n    | 'shapeElevated'\n    | 'gradient';\n\n  /**\n   * Size of navigation buttons\n   * @default 'md'\n   */\n  arrowSize?: 'sm' | 'md' | 'lg';\n\n  /**\n   * Whether to hide navigation buttons when disabled\n   * Note: Navigation buttons are automatically hidden when all items fit on one page\n   * @default false\n   */\n  hideDisabledArrow?: boolean;\n\n  /**\n   * Whether to show arrows only when hovering over the carousel or when it has focus\n   * @default false\n   */\n  showArrowsOnHover?: boolean;\n\n  /**\n   * Focus style for interactive elements\n   * @default 'default'\n   */\n  focusStyle?: 'default' | 'white';\n\n  /* Dots/Tabs Props */\n  /**\n   * Size of pagination dots\n   * @default 'md'\n   */\n  dotsSize?: 'md' | 'lg';\n\n  /**\n   * Visual style of pagination dots\n   * @default 'standard'\n   */\n  dotsVariant?: 'standard' | 'transparent';\n\n  /**\n   * Whether to hide pagination dots\n   * Note: Dots are automatically hidden when there's only one page\n   * @default false\n   */\n  hideDots?: boolean;\n\n  /* Autoplay Props */\n  /**\n   * Whether the autoplay is enabled\n   * @default false\n   */\n  autoPlay?: boolean;\n\n  /**\n   * Interval in milliseconds between slides during autoplay\n   * @default 2000\n   */\n  autoPlayInterval?: number;\n\n  /**\n   * Style variant for autoplay control button\n   * @default 'neutralVibrant'\n   */\n  autoPlayStyleVariant?:\n    | 'neutralVibrant'\n    | 'neutralSubtle'\n    | 'whiteVibrant'\n    | 'whiteSubtle';\n\n  /**\n   * Size of autoplay control button\n   * @default 'md'\n   */\n  autoPlayControlSize?: 'sm' | 'md';\n\n  /**\n   * Whether to enable mouse dragging for the carousel\n   * @default true\n   */\n  mouseDragging?: boolean;\n\n  /* Custom Class Names for Positioning and Styling */\n  /**\n   * Class name for the outermost wrapper of the carousel\n   */\n  carouselWrapperClassName?: string;\n\n  /**\n   * Class name for the previous button\n   * Use this to position the previous button\n   */\n  prevArrowClassName?: string;\n\n  /**\n   * Class name for the next button\n   * Use this to position the next button\n   */\n  nextArrowClassName?: string;\n\n  /**\n   * Class name for the autoplay control\n   * Use this to position the autoplay button\n   */\n  autoplayControlClassName?: string;\n\n  /**\n   * Class name for the dots container\n   * Use this to position the pagination dots\n   */\n  dotsContainerClassName?: string;\n\n  /**\n   * Class name for the dots wrapper\n   * Use this to style the dots wrapper\n   */\n  dotsWrapperClassName?: string;\n\n  /**\n   * Class name for individual dots\n   */\n  dotClassName?: string;\n\n  /**\n   * Class name for the active dot\n   */\n  activeDotClassName?: string;\n\n  /**\n   * Class name for individual carousel item wrappers\n   * Use this to style the wrapper div around each carousel item\n   */\n  itemWrapperClassName?: string;\n\n  /**\n   * Class name for the currently active/visible carousel item\n   * This class is applied to the item that corresponds to the current page\n   */\n  activeItemClassName?: string;\n\n  /**\n   * Callback fired when a carousel navigation button (prev/next) is pressed\n   */\n  onArrowPress?: (direction: 'prev' | 'next') => void;\n\n  /**\n   * Callback fired when a dot is pressed\n   */\n  onDotPress?: (index: number) => void;\n\n  /**\n   * Callback fired when the autoplay button is pressed\n   */\n  onAutoplayPress?: (state: 'play' | 'pause') => void;\n}\n\ntype ResponsiveKeys =\n  | 'itemsPerPage'\n  | 'spaceBetweenItems'\n  | 'scrollPadding'\n  | 'showArrowsOnHover'\n  | 'arrowSize'\n  | 'hideDots';\n\nexport type CarouselProps = WithResponsive<CarouselBaseProps, ResponsiveKeys>;\n\nexport const Carousel = ({\n  children = [],\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedby,\n  looping = 'off',\n  itemsPerPage = 1,\n  spaceBetweenItems = 0,\n  scrollPadding,\n\n  // Button and Controls Props\n  iconType = 'chevron',\n  arrowStyleVariant = 'neutral',\n  arrowSize = 'md',\n  hideDisabledArrow = false,\n  showArrowsOnHover = false,\n  focusStyle = 'default',\n\n  // Dots/Tabs Props\n  dotsSize = 'md',\n  dotsVariant = 'standard',\n  hideDots = false,\n\n  // Autoplay Props\n  autoPlay = false,\n  autoPlayInterval = 2000,\n  autoPlayStyleVariant = 'neutralVibrant',\n  autoPlayControlSize = 'md',\n\n  // Mouse Dragging\n  mouseDragging = true,\n\n  // Custom Class Names\n  carouselWrapperClassName = '',\n  prevArrowClassName = '',\n  nextArrowClassName = '',\n  autoplayControlClassName = '',\n  dotsContainerClassName = '',\n  dotsWrapperClassName = '',\n  dotClassName = '',\n  activeDotClassName = '',\n  itemWrapperClassName = '',\n  activeItemClassName = '',\n\n  // Event Callbacks\n  onArrowPress,\n  onDotPress,\n  onAutoplayPress,\n}: CarouselProps) => {\n  // Map looping values to expected loop values for AriaCarousel\n  const getLoopValue = () => {\n    if (looping === 'infinite') return 'infinite';\n    if (looping === 'backToStart') return 'native';\n    if (looping === 'off') return undefined;\n    return looping; // other values pass through\n  };\n\n  const items = React.Children.toArray(children);\n  const totalItems = items.length;\n\n  const breakpoint = useBreakpoint();\n  const resolvedItemsPerPage =\n    resolveResponsiveProp(itemsPerPage, breakpoint) ?? 1;\n  const resolvedSpaceBetweenItems =\n    resolveResponsiveProp(spaceBetweenItems, breakpoint) ?? 0;\n  const resolvedScrollPadding =\n    resolveResponsiveProp(scrollPadding, breakpoint) ?? undefined;\n  const resolvedArrowSize =\n    resolveResponsiveProp(arrowSize, breakpoint) ?? 'md';\n  const resolvedHideDots = resolveResponsiveProp(hideDots, breakpoint) ?? false;\n\n  // Ensure itemsPerPage is at least 1\n  // We allow decimal values for showing partial items\n  const safeItemsPerPage = Math.max(1, resolvedItemsPerPage);\n\n  // Calculate total pages based on items per page\n  const totalPages = Math.ceil(totalItems / safeItemsPerPage);\n\n  // Determine if dots should be shown\n  // Hide dots if:\n  // 1. resolvedHideDots prop is true (responsive), OR\n  // 2. There's only one page (totalPages <= 1)\n  const shouldShowDots = !resolvedHideDots && totalPages > 1;\n\n  const carouselRef = useRef<HTMLDivElement>(null);\n  const ariaCarouselRef = useRef<HTMLDivElement>(null);\n\n  const [currentPage, setCurrentPage] = useState(0);\n  const [prevPage, setPrevPage] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isTransitioning] = useState(false);\n\n  // Add state variables for drag/link handling\n  const [dragStartPosition, setDragStartPosition] = useState<{\n    x: number;\n    y: number;\n  } | null>(null);\n  const dragThreshold = 5; // Pixels of movement needed to consider as a drag\n\n  // Helper function to get class names with defaults\n  const getClassNameWithDefault = (\n    customClassName: string,\n    defaultClassName: string,\n  ): string => {\n    return customClassName || defaultClassName;\n  };\n\n  // Get CSS classes based on showing partial items\n  const getCarouselWrapperClasses = () => {\n    const classes = [styles.carouselWrapper];\n\n    if (!Number.isInteger(safeItemsPerPage)) {\n      classes.push(styles.showPartialItems);\n    }\n\n    if (resolvedScrollPadding) {\n      classes.push(styles.hasScrollPadding);\n    }\n\n    // Apply default wrapper class if no custom wrapper class is provided\n    if (carouselWrapperClassName && carouselWrapperClassName.trim()) {\n      classes.push(carouselWrapperClassName);\n    } else {\n      classes.push(styles.defaultCarouselWrapper);\n    }\n\n    return classes.join(' ');\n  };\n\n  // Determine if we need to set CSS variables and return only what's needed\n  const getCssVariables = () => {\n    const cssVars: Record<string, string> = {};\n\n    // Only set these if they differ from defaults\n    if (resolvedItemsPerPage !== 1) {\n      cssVars['--items-per-page'] = String(safeItemsPerPage);\n    }\n\n    if (resolvedSpaceBetweenItems > 0) {\n      cssVars['--space-between-items'] = `${resolvedSpaceBetweenItems}px`;\n    }\n\n    if (resolvedScrollPadding) {\n      cssVars['--scroll-padding'] = resolvedScrollPadding;\n    }\n\n    return Object.keys(cssVars).length > 0 ? cssVars : undefined;\n  };\n\n  // Helper function to determine which items are currently active/visible\n  const getActiveItemIndices = () => {\n    const startIndex = currentPage * Math.floor(safeItemsPerPage);\n    const endIndex = Math.min(\n      startIndex + Math.ceil(safeItemsPerPage),\n      totalItems,\n    );\n\n    const activeIndices: number[] = [];\n    for (let i = startIndex; i < endIndex; i++) {\n      activeIndices.push(i);\n    }\n\n    return activeIndices;\n  };\n\n  const navigateToSlide = (index: number) => {\n    if (index === currentPage || index < 0 || index >= totalPages) {\n      return;\n    }\n\n    // Find and click the corresponding hidden tab\n    if (carouselRef.current) {\n      const targetTab = carouselRef.current.querySelector(\n        `[data-slide-tab=\"true\"][data-index=\"${index}\"]`,\n      ) as HTMLElement;\n\n      if (targetTab) {\n        targetTab.click();\n      }\n    }\n  };\n\n  // Add effect to handle link click prevention during drag\n  useEffect(() => {\n    if (!carouselRef.current || !mouseDragging) return;\n\n    // Function to prevent click events on links during/after drag\n    const preventLinkActivation = (e: MouseEvent) => {\n      // If we are currently dragging, or just finished dragging, prevent link clicks\n      if (isDragging) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        // Reset isDragging after the current event cycle completes\n        setTimeout(() => {\n          setIsDragging(false);\n        }, 0);\n      }\n    };\n\n    // Function to handle mouse down events\n    const handleMouseDown = (e: MouseEvent) => {\n      setDragStartPosition({ x: e.clientX, y: e.clientY });\n    };\n\n    // Function to handle mouse move events\n    const handleMouseMove = (e: MouseEvent) => {\n      if (dragStartPosition === null) return;\n\n      // Calculate the distance moved\n      const dx = Math.abs(e.clientX - dragStartPosition.x);\n      const dy = Math.abs(e.clientY - dragStartPosition.y);\n      const distance = Math.sqrt(dx * dx + dy * dy);\n\n      // If the user has moved more than the threshold, consider it a drag\n      if (distance > dragThreshold) {\n        setIsDragging(true);\n      }\n    };\n\n    // Function to handle mouse up events\n    const handleMouseUp = () => {\n      // If this wasn't a drag, don't interfere with normal clicks\n      if (!isDragging) {\n        setDragStartPosition(null);\n        return;\n      }\n\n      // Add a brief delay for the click prevention to work\n      setTimeout(() => {\n        setIsDragging(false);\n        setDragStartPosition(null);\n      }, 50);\n    };\n\n    // Add event listeners for the carousel container\n    const carouselElement = carouselRef.current;\n\n    // Capture phase is important to catch events before they reach the links\n    carouselElement.addEventListener('mousedown', handleMouseDown, true);\n    carouselElement.addEventListener('mousemove', handleMouseMove, true);\n    carouselElement.addEventListener('mouseup', handleMouseUp, true);\n\n    // This is the key event listener that prevents link activation\n    carouselElement.addEventListener('click', preventLinkActivation, true);\n\n    return () => {\n      // Clean up event listeners\n      carouselElement.removeEventListener('mousedown', handleMouseDown, true);\n      carouselElement.removeEventListener('mousemove', handleMouseMove, true);\n      carouselElement.removeEventListener('mouseup', handleMouseUp, true);\n      carouselElement.removeEventListener('click', preventLinkActivation, true);\n    };\n  }, [mouseDragging, isDragging, dragStartPosition, dragThreshold]);\n\n  // Handle transition direction\n  useEffect(() => {\n    if (carouselRef.current) {\n      const scroller = carouselRef.current.querySelector(`.${styles.scroller}`);\n      if (scroller && scroller instanceof HTMLElement) {\n        if (prevPage < currentPage) {\n          scroller.classList.remove(styles.slideLeft);\n          scroller.classList.add(styles.slideRight);\n        } else if (prevPage > currentPage) {\n          scroller.classList.remove(styles.slideRight);\n          scroller.classList.add(styles.slideLeft);\n        }\n      }\n    }\n  }, [currentPage, prevPage]);\n\n  // Track selected tab changes\n  useEffect(() => {\n    if (!carouselRef.current) return;\n\n    const checkCurrentPage = () => {\n      if (!carouselRef.current) return;\n\n      // Find the currently selected tab\n      const selectedTab = carouselRef.current.querySelector(\n        '[data-slide-tab=\"true\"][aria-selected=\"true\"]',\n      );\n      if (selectedTab) {\n        const indexStr = (selectedTab as HTMLElement).dataset.index;\n        if (typeof indexStr === 'string' && indexStr.length > 0) {\n          const newIndex = parseInt(indexStr, 10);\n          if (\n            !isNaN(newIndex) &&\n            newIndex !== currentPage &&\n            newIndex >= 0 &&\n            newIndex < totalPages\n          ) {\n            setPrevPage(currentPage);\n            setCurrentPage(newIndex);\n          }\n        }\n      }\n    };\n\n    // Set up mutation observer to watch for aria-selected changes\n    const observer = new MutationObserver((mutations) => {\n      let shouldCheck = false;\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === 'attributes' &&\n          mutation.attributeName === 'aria-selected'\n        ) {\n          shouldCheck = true;\n        }\n      });\n\n      if (shouldCheck) {\n        // Small delay to ensure DOM is updated\n        setTimeout(checkCurrentPage, 10);\n      }\n    });\n\n    // Observe all hidden tabs\n    const hiddenTabs = carouselRef.current.querySelectorAll(\n      '[data-slide-tab=\"true\"]',\n    );\n    hiddenTabs.forEach((tab) => {\n      observer.observe(tab, {\n        attributes: true,\n        attributeFilter: ['aria-selected'],\n      });\n    });\n\n    // Initial check\n    checkCurrentPage();\n\n    // Also check periodically as backup\n    const interval = setInterval(checkCurrentPage, 500);\n\n    return () => {\n      observer.disconnect();\n      clearInterval(interval);\n    };\n  }, [currentPage, totalPages]);\n\n  // Interaction handlers for hover and focus\n  const interactionHandlers = showArrowsOnHover\n    ? {\n        onMouseEnter: () => setIsHovered(true),\n        onMouseLeave: () => setIsHovered(false),\n        onFocus: () => setIsFocused(true),\n        onBlur: (e: React.FocusEvent) => {\n          // Only blur if focus is moving outside the carousel\n          if (!e.currentTarget.contains(e.relatedTarget as Node)) {\n            setIsFocused(false);\n          }\n        },\n      }\n    : {};\n\n  // Determine whether arrows should be visible\n  // Hide arrows if:\n  // 1. There's only one page (all items fit on screen), OR\n  // 2. showArrowsOnHover is true and carousel is not hovered/focused\n  const shouldShowArrows = totalPages > 1;\n  const arrowsVisible =\n    shouldShowArrows && (!showArrowsOnHover || isHovered || isFocused);\n\n  // Get style object only if we have variables to set\n  const cssVars = getCssVariables();\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  // Custom styles for grid-auto-columns calculation\n  const getScrollerStyles = () => {\n    const styles: React.CSSProperties = {};\n\n    // ALWAYS apply gap if spaceBetweenItems is set, regardless of itemsPerPage\n    if (resolvedSpaceBetweenItems >= 0) {\n      styles.gap = `${resolvedSpaceBetweenItems}px`;\n    }\n\n    // Only calculate grid-auto-columns if we have multiple items per page AND spacing\n    if (resolvedItemsPerPage > 1 && resolvedSpaceBetweenItems > 0) {\n      // Advanced calculation for grid layout to account for gap spacing\n      const gapSpacePerItem =\n        (resolvedSpaceBetweenItems * (safeItemsPerPage - 1)) / safeItemsPerPage;\n\n      styles.gridAutoColumns = `calc(${100 / safeItemsPerPage}% - ${gapSpacePerItem}px)`;\n    } else if (resolvedItemsPerPage > 1) {\n      // No gap, just divide width evenly\n      styles.gridAutoColumns = `${100 / safeItemsPerPage}%`;\n    }\n\n    return styles;\n  };\n\n  // Get active item indices for the current page\n  const activeItemIndices = getActiveItemIndices();\n\n  // Handle carousel keyboard navigation\n  const handleCarouselKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      // Navigate to previous slide\n      const prevButton = carouselRef.current?.querySelector(\n        '[dir=\"prev\"]',\n      ) as HTMLButtonElement;\n      if (prevButton && !prevButton.disabled) {\n        prevButton.click();\n      }\n    } else if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      // Navigate to next slide\n      const nextButton = carouselRef.current?.querySelector(\n        '[dir=\"next\"]',\n      ) as HTMLButtonElement;\n      if (nextButton && !nextButton.disabled) {\n        nextButton.click();\n      }\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      // Go to first slide\n      navigateToSlide(0);\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      // Go to last slide\n      navigateToSlide(totalPages - 1);\n    }\n  };\n\n  // Generate a meaningful default aria-label if none provided\n  const getDefaultAriaLabel = () => {\n    if (ariaLabel) return ariaLabel;\n\n    const currentSlideNumber = currentPage + 1;\n    const autoplayStatus = autoPlay ? ', autoplay enabled' : '';\n\n    return `Carousel with ${totalItems} items, currently showing slide ${currentSlideNumber} of ${totalPages}${autoplayStatus}`;\n  };\n\n  return (\n    <div\n      className={getCarouselWrapperClasses()}\n      ref={carouselRef}\n      style={cssVars as React.CSSProperties}\n      data-dots-size={dotsSize}\n      {...interactionHandlers}\n      data-arrows-visible={arrowsVisible ? 'true' : 'false'}\n      data-transitioning={isTransitioning ? 'true' : undefined}\n      data-scroll-padding={resolvedScrollPadding}\n      role=\"region\"\n      aria-label={getDefaultAriaLabel()}\n      aria-describedby={ariaDescribedby}\n      aria-roledescription=\"carousel\"\n    >\n      <AriaCarousel\n        className={`${carousel({ looping })}`}\n        loop={getLoopValue()}\n        ref={ariaCarouselRef}\n        autoplay={autoPlay}\n        autoplayInterval={autoPlayInterval}\n        mouseDragging={mouseDragging && !isTransitioning}\n        onDragStart={(e) => {\n          setIsDragging(true);\n          if (e && e.nativeEvent) {\n            setDragStartPosition({\n              x: e.nativeEvent.clientX,\n              y: e.nativeEvent.clientY,\n            });\n          }\n        }}\n        onDragEnd={() => {\n          // We keep isDragging true for a short time after drag ends\n          // This helps ensure click events don't fire immediately after dragging\n          setTimeout(() => {\n            setIsDragging(false);\n          }, 50);\n        }}\n        data-dragging={isDragging ? 'true' : 'false'}\n        itemsPerPage={safeItemsPerPage}\n        scrollPadding={resolvedScrollPadding}\n        data-has-space-between={\n          resolvedSpaceBetweenItems > 0 ? 'true' : undefined\n        }\n        data-items-per-page={\n          resolvedItemsPerPage !== 1 ? safeItemsPerPage.toString() : undefined\n        }\n      >\n        <AriaCarouselScroller\n          className={`${styles.scroller} ${focusStyleVariants({ focusStyle })}`}\n          {...focusProps}\n          data-focused={isFocusVisible ? true : undefined}\n          data-focus-visible={isFocusVisible ? true : undefined}\n          data-transitioning={isTransitioning ? 'true' : undefined}\n          style={getScrollerStyles()}\n          tabIndex={0}\n          role=\"region\"\n          aria-label=\"Carousel content\"\n          onKeyDown={handleCarouselKeyDown}\n        >\n          {items.map((child, index) => {\n            const isActiveItem = activeItemIndices.includes(index);\n            const itemClasses = [\n              itemWrapperClassName || '',\n              styles.item,\n              isActiveItem && activeItemClassName ? activeItemClassName : '',\n            ]\n              .filter(Boolean)\n              .join(' ');\n\n            return (\n              <AriaCarouselItem\n                key={index}\n                className={itemClasses}\n                data-is-active={isActiveItem ? 'true' : undefined}\n                data-item-index={index}\n                aria-label={`Slide ${index + 1} of ${totalItems}`}\n              >\n                {child}\n              </AriaCarouselItem>\n            );\n          })}\n        </AriaCarouselScroller>\n\n        <div\n          className={`${styles.controls} ${showArrowsOnHover ? styles.showOnHover : ''}`}\n        >\n          <CarouselButton\n            dir=\"prev\"\n            variant={arrowStyleVariant}\n            size={resolvedArrowSize}\n            focusStyle={focusStyle}\n            iconType={iconType}\n            hideDisabledArrow={hideDisabledArrow}\n            onPress={() => onArrowPress?.('prev')}\n            className={`${getClassNameWithDefault(prevArrowClassName, styles.defaultPrevButton)} ${!arrowsVisible ? styles.hidden : ''}`}\n          />\n\n          <CarouselButton\n            dir=\"next\"\n            variant={arrowStyleVariant}\n            size={resolvedArrowSize}\n            focusStyle={focusStyle}\n            iconType={iconType}\n            hideDisabledArrow={hideDisabledArrow}\n            onPress={() => onArrowPress?.('next')}\n            className={`${getClassNameWithDefault(nextArrowClassName, styles.defaultNextButton)} ${!arrowsVisible ? styles.hidden : ''}`}\n          />\n        </div>\n\n        <div className={styles.hiddenTabs}>\n          <AriaCarouselTabs>\n            {(page) => (\n              <AriaCarouselTab\n                key={page.index}\n                index={page.index}\n                data-index={page.index}\n                data-slide-tab=\"true\"\n                tabIndex={-1}\n              />\n            )}\n          </AriaCarouselTabs>\n        </div>\n\n        {autoPlay && (\n          <div\n            className={`${styles.autoplayControlWrapper} ${getClassNameWithDefault(autoplayControlClassName, styles.defaultAutoplayControl)}`}\n          >\n            <AutoplayControl\n              variant={autoPlayStyleVariant}\n              size={autoPlayControlSize}\n              className=\"\"\n              onPress={onAutoplayPress}\n            />\n          </div>\n        )}\n\n        {shouldShowDots && (\n          <CarouselDots\n            totalItems={totalPages}\n            currentPage={currentPage}\n            onDotClick={(index) => navigateToSlide(index)}\n            onPress={onDotPress}\n            focusStyle={focusStyle}\n            dotsSize={dotsSize}\n            variant={dotsVariant}\n            className={getClassNameWithDefault(\n              dotsContainerClassName,\n              styles.defaultDotsContainer,\n            )}\n            dotsWrapperClassName={dotsWrapperClassName}\n            dotClassName={dotClassName}\n            activeDotClassName={activeDotClassName}\n            isTransitioning={isTransitioning}\n          />\n        )}\n      </AriaCarousel>\n    </div>\n  );\n};\n\nexport default Carousel;\n"],"names":["carousel","cva","styles","variants","looping","infinite","backToStart","native","off","Carousel","children","ariaLabel","ariaDescribedby","itemsPerPage","spaceBetweenItems","scrollPadding","iconType","arrowStyleVariant","arrowSize","hideDisabledArrow","showArrowsOnHover","focusStyle","dotsSize","dotsVariant","hideDots","autoPlay","autoPlayInterval","autoPlayStyleVariant","autoPlayControlSize","mouseDragging","carouselWrapperClassName","prevArrowClassName","nextArrowClassName","autoplayControlClassName","dotsContainerClassName","dotsWrapperClassName","dotClassName","activeDotClassName","itemWrapperClassName","activeItemClassName","onArrowPress","onDotPress","onAutoplayPress","items","React","Children","toArray","totalItems","length","breakpoint","useBreakpoint","resolvedItemsPerPage","resolveResponsiveProp","resolvedSpaceBetweenItems","resolvedScrollPadding","resolvedArrowSize","resolvedHideDots","safeItemsPerPage","Math","max","totalPages","ceil","shouldShowDots","carouselRef","useRef","ariaCarouselRef","currentPage","setCurrentPage","useState","prevPage","setPrevPage","isDragging","setIsDragging","isHovered","setIsHovered","isFocused","setIsFocused","isTransitioning","dragStartPosition","setDragStartPosition","getClassNameWithDefault","customClassName","defaultClassName","navigateToSlide","index","current","targetTab","querySelector","click","useEffect","preventLinkActivation","e","preventDefault","stopPropagation","setTimeout","handleMouseDown","x","clientX","y","clientY","handleMouseMove","dx","abs","dy","sqrt","handleMouseUp","carouselElement","addEventListener","removeEventListener","scroller","HTMLElement","classList","remove","slideLeft","add","slideRight","checkCurrentPage","selectedTab","indexStr","dataset","newIndex","parseInt","isNaN","observer","MutationObserver","mutations","shouldCheck","forEach","mutation","type","attributeName","querySelectorAll","tab","observe","attributes","attributeFilter","interval","setInterval","disconnect","clearInterval","interactionHandlers","onMouseEnter","onMouseLeave","onFocus","onBlur","currentTarget","contains","relatedTarget","arrowsVisible","cssVars","String","Object","keys","getCssVariables","focusProps","isFocusVisible","useFocusRing","activeItemIndices","startIndex","floor","endIndex","min","activeIndices","i","push","getActiveItemIndices","jsx","className","classes","carouselWrapper","Number","isInteger","showPartialItems","hasScrollPadding","trim","defaultCarouselWrapper","join","getCarouselWrapperClasses","ref","style","role","getDefaultAriaLabel","jsxs","AriaCarousel","loop","autoplay","autoplayInterval","onDragStart","nativeEvent","onDragEnd","toString","AriaCarouselScroller","focusStyleVariants","gap","gapSpacePerItem","gridAutoColumns","getScrollerStyles","tabIndex","onKeyDown","key","prevButton","disabled","nextButton","map","child","isActiveItem","includes","itemClasses","item","filter","Boolean","AriaCarouselItem","controls","showOnHover","CarouselButton","dir","variant","size","onPress","defaultPrevButton","hidden","defaultNextButton","hiddenTabs","AriaCarouselTabs","page","AriaCarouselTab","autoplayControlWrapper","defaultAutoplayControl","AutoplayControl","CarouselDots","onDotClick","defaultDotsContainer"],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sources":["../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { cva } from 'class-variance-authority';\nimport {\n  Carousel as AriaCarousel,\n  CarouselScroller as AriaCarouselScroller,\n  CarouselItem as AriaCarouselItem,\n  CarouselTabs as AriaCarouselTabs,\n  CarouselTab as AriaCarouselTab,\n} from 'react-aria-carousel';\nimport styles from './Carousel.module.css';\nimport { CarouselButton } from './CarouselButton/CarouselButton';\nimport { CarouselDots } from './CarouselDots/CarouselDots';\nimport { AutoplayControl } from './AutoplayControl/AutoplayControl';\nimport { focusStyleVariants } from '../../utils/focus/focusStyles';\nimport { useFocusRing } from '@react-aria/focus';\n\nimport {\n  WithResponsive,\n  resolveResponsiveProp,\n} from '../../utils/breakpoint/responsive';\nimport { useBreakpoint } from '../../utils/breakpoint/hooks/useBreakpoint';\n\nconst carousel = cva(styles.carousel, {\n  variants: {\n    looping: {\n      infinite: styles.infinite,\n      backToStart: styles.native,\n      off: undefined,\n    },\n  },\n});\n\nexport interface CarouselBaseProps {\n  /**\n   * Content to be displayed in the carousel\n   */\n  children?: React.ReactNode | React.ReactNode[];\n\n  /**\n   * Accessible name for the carousel\n   * Describes the purpose or content of the carousel for screen readers\n   * @example \"Featured products\" or \"Customer testimonials\"\n   */\n  'aria-label'?: string;\n\n  /**\n   * ID of an element that provides additional description for the carousel\n   * Can reference an element that gives more context about the carousel's content\n   * @example \"carousel-description\"\n   */\n  'aria-describedby'?: string;\n\n  /**\n   * Looping behavior\n   * - 'infinite': Carousel loops continuously\n   * - 'backToStart': Carousel loops back to start after reaching end\n   * - 'off': Looping is disabled\n   * @default 'off'\n   */\n  looping?: 'infinite' | 'backToStart' | 'off';\n\n  /**\n   * Number of items to display per page (minimum: 1)\n   * Decimal values (e.g., 2.25) can be used to show partial items\n   * @default 1\n   * @min 1\n   */\n  itemsPerPage?: number;\n\n  /**\n   * Space between carousel items in pixels\n   * @default 0\n   */\n  spaceBetweenItems?: number;\n\n  /**\n   * Amount of padding added to the scroll container to create a \"peek\" effect.\n   * This shows a portion of the adjacent items.\n   * Accepts any valid CSS dimension (px, rem, em, %) - e.g., \"15%\", \"20px\", \"2rem\"\n   * @example \"15%\" or \"20px\" or \"2rem\"\n   * @default undefined\n   */\n  scrollPadding?: string;\n\n  /* Button and Controls Props */\n  /**\n   * Icon type for navigation buttons\n   * @default 'chevron'\n   */\n  iconType?: 'chevron';\n\n  /**\n   * Style of carousel arrow buttons\n   * @default 'neutral'\n   */\n  arrowStyleVariant?:\n    | 'neutral'\n    | 'white'\n    | 'shapeFlat'\n    | 'shapeElevated'\n    | 'gradient';\n\n  /**\n   * Size of navigation buttons\n   * @default 'md'\n   */\n  arrowSize?: 'sm' | 'md' | 'lg';\n\n  /**\n   * Whether to hide navigation buttons when disabled\n   * Note: Navigation buttons are automatically hidden when all items fit on one page\n   * @default false\n   */\n  hideDisabledArrow?: boolean;\n\n  /**\n   * Whether to show arrows only when hovering over the carousel or when it has focus\n   * @default false\n   */\n  showArrowsOnHover?: boolean;\n\n  /**\n   * Focus style for interactive elements\n   * @default 'default'\n   */\n  focusStyle?: 'default' | 'white';\n\n  /* Dots/Tabs Props */\n  /**\n   * Size of pagination dots\n   * @default 'md'\n   */\n  dotsSize?: 'md' | 'lg';\n\n  /**\n   * Visual style of pagination dots\n   * @default 'standard'\n   */\n  dotsVariant?: 'standard' | 'transparent';\n\n  /**\n   * Whether to hide pagination dots\n   * Note: Dots are automatically hidden when there's only one page\n   * @default false\n   */\n  hideDots?: boolean;\n\n  /* Autoplay Props */\n  /**\n   * Whether the autoplay is enabled\n   * @default false\n   */\n  autoPlay?: boolean;\n\n  /**\n   * Interval in milliseconds between slides during autoplay\n   * @default 2000\n   */\n  autoPlayInterval?: number;\n\n  /**\n   * Style variant for autoplay control button\n   * @default 'neutralVibrant'\n   */\n  autoPlayStyleVariant?:\n    | 'neutralVibrant'\n    | 'neutralSubtle'\n    | 'whiteVibrant'\n    | 'whiteSubtle';\n\n  /**\n   * Size of autoplay control button\n   * @default 'md'\n   */\n  autoPlayControlSize?: 'sm' | 'md';\n\n  /**\n   * Whether to enable mouse dragging for the carousel\n   * @default true\n   */\n  mouseDragging?: boolean;\n\n  /* Custom Class Names for Positioning and Styling */\n  /**\n   * Class name for the outermost wrapper of the carousel\n   */\n  carouselWrapperClassName?: string;\n\n  /**\n   * Class name for the previous button\n   * Use this to position the previous button\n   */\n  prevArrowClassName?: string;\n\n  /**\n   * Class name for the next button\n   * Use this to position the next button\n   */\n  nextArrowClassName?: string;\n\n  /**\n   * Class name for the autoplay control\n   * Use this to position the autoplay button\n   */\n  autoplayControlClassName?: string;\n\n  /**\n   * Class name for the dots container\n   * Use this to position the pagination dots\n   */\n  dotsContainerClassName?: string;\n\n  /**\n   * Class name for the dots wrapper\n   * Use this to style the dots wrapper\n   */\n  dotsWrapperClassName?: string;\n\n  /**\n   * Class name for individual dots\n   */\n  dotClassName?: string;\n\n  /**\n   * Class name for the active dot\n   */\n  activeDotClassName?: string;\n\n  /**\n   * Class name for individual carousel item wrappers\n   * Use this to style the wrapper div around each carousel item\n   */\n  itemWrapperClassName?: string;\n\n  /**\n   * Class name for the currently active/visible carousel item\n   * This class is applied to the item that corresponds to the current page\n   */\n  activeItemClassName?: string;\n\n  /**\n   * Callback fired when a carousel navigation button (prev/next) is pressed\n   */\n  onArrowPress?: (direction: 'prev' | 'next') => void;\n\n  /**\n   * Callback fired when a dot is pressed\n   */\n  onDotPress?: (index: number) => void;\n\n  /**\n   * Callback fired when the autoplay button is pressed\n   */\n  onAutoplayPress?: (state: 'play' | 'pause') => void;\n\n  /**\n   * Callback fired whenever the active page changes, regardless of input method\n   * (arrow buttons, trackpad scroll, touch swipe, keyboard navigation, dot press, autoplay)\n   * Use this to track all carousel navigation events, e.g. for analytics\n   * @param index - zero-based index of the new active page\n   */\n  onPageChange?: (index: number) => void;\n}\n\ntype ResponsiveKeys =\n  | 'itemsPerPage'\n  | 'spaceBetweenItems'\n  | 'scrollPadding'\n  | 'showArrowsOnHover'\n  | 'arrowSize'\n  | 'hideDots';\n\nexport type CarouselProps = WithResponsive<CarouselBaseProps, ResponsiveKeys>;\n\nexport const Carousel = ({\n  children = [],\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedby,\n  looping = 'off',\n  itemsPerPage = 1,\n  spaceBetweenItems = 0,\n  scrollPadding,\n\n  // Button and Controls Props\n  iconType = 'chevron',\n  arrowStyleVariant = 'neutral',\n  arrowSize = 'md',\n  hideDisabledArrow = false,\n  showArrowsOnHover = false,\n  focusStyle = 'default',\n\n  // Dots/Tabs Props\n  dotsSize = 'md',\n  dotsVariant = 'standard',\n  hideDots = false,\n\n  // Autoplay Props\n  autoPlay = false,\n  autoPlayInterval = 2000,\n  autoPlayStyleVariant = 'neutralVibrant',\n  autoPlayControlSize = 'md',\n\n  // Mouse Dragging\n  mouseDragging = true,\n\n  // Custom Class Names\n  carouselWrapperClassName = '',\n  prevArrowClassName = '',\n  nextArrowClassName = '',\n  autoplayControlClassName = '',\n  dotsContainerClassName = '',\n  dotsWrapperClassName = '',\n  dotClassName = '',\n  activeDotClassName = '',\n  itemWrapperClassName = '',\n  activeItemClassName = '',\n\n  // Event Callbacks\n  onArrowPress,\n  onDotPress,\n  onAutoplayPress,\n  onPageChange,\n}: CarouselProps) => {\n  // Map looping values to expected loop values for AriaCarousel\n  const getLoopValue = () => {\n    if (looping === 'infinite') return 'infinite';\n    if (looping === 'backToStart') return 'native';\n    if (looping === 'off') return undefined;\n    return looping; // other values pass through\n  };\n\n  const items = React.Children.toArray(children);\n  const totalItems = items.length;\n\n  const breakpoint = useBreakpoint();\n  const resolvedItemsPerPage =\n    resolveResponsiveProp(itemsPerPage, breakpoint) ?? 1;\n  const resolvedSpaceBetweenItems =\n    resolveResponsiveProp(spaceBetweenItems, breakpoint) ?? 0;\n  const resolvedScrollPadding =\n    resolveResponsiveProp(scrollPadding, breakpoint) ?? undefined;\n  const resolvedArrowSize =\n    resolveResponsiveProp(arrowSize, breakpoint) ?? 'md';\n  const resolvedHideDots = resolveResponsiveProp(hideDots, breakpoint) ?? false;\n\n  // Ensure itemsPerPage is at least 1\n  // We allow decimal values for showing partial items\n  const safeItemsPerPage = Math.max(1, resolvedItemsPerPage);\n\n  // Calculate total pages based on items per page\n  const totalPages = Math.ceil(totalItems / safeItemsPerPage);\n\n  // Determine if dots should be shown\n  // Hide dots if:\n  // 1. resolvedHideDots prop is true (responsive), OR\n  // 2. There's only one page (totalPages <= 1)\n  const shouldShowDots = !resolvedHideDots && totalPages > 1;\n\n  const carouselRef = useRef<HTMLDivElement>(null);\n  const ariaCarouselRef = useRef<HTMLDivElement>(null);\n\n  const [currentPage, setCurrentPage] = useState(0);\n  const [prevPage, setPrevPage] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isTransitioning] = useState(false);\n\n  // Add state variables for drag/link handling\n  const [dragStartPosition, setDragStartPosition] = useState<{\n    x: number;\n    y: number;\n  } | null>(null);\n  const dragThreshold = 5; // Pixels of movement needed to consider as a drag\n\n  // Helper function to get class names with defaults\n  const getClassNameWithDefault = (\n    customClassName: string,\n    defaultClassName: string,\n  ): string => {\n    return customClassName || defaultClassName;\n  };\n\n  // Get CSS classes based on showing partial items\n  const getCarouselWrapperClasses = () => {\n    const classes = [styles.carouselWrapper];\n\n    if (!Number.isInteger(safeItemsPerPage)) {\n      classes.push(styles.showPartialItems);\n    }\n\n    if (resolvedScrollPadding) {\n      classes.push(styles.hasScrollPadding);\n    }\n\n    // Apply default wrapper class if no custom wrapper class is provided\n    if (carouselWrapperClassName && carouselWrapperClassName.trim()) {\n      classes.push(carouselWrapperClassName);\n    } else {\n      classes.push(styles.defaultCarouselWrapper);\n    }\n\n    return classes.join(' ');\n  };\n\n  // Determine if we need to set CSS variables and return only what's needed\n  const getCssVariables = () => {\n    const cssVars: Record<string, string> = {};\n\n    // Only set these if they differ from defaults\n    if (resolvedItemsPerPage !== 1) {\n      cssVars['--items-per-page'] = String(safeItemsPerPage);\n    }\n\n    if (resolvedSpaceBetweenItems > 0) {\n      cssVars['--space-between-items'] = `${resolvedSpaceBetweenItems}px`;\n    }\n\n    if (resolvedScrollPadding) {\n      cssVars['--scroll-padding'] = resolvedScrollPadding;\n    }\n\n    return Object.keys(cssVars).length > 0 ? cssVars : undefined;\n  };\n\n  // Helper function to determine which items are currently active/visible\n  const getActiveItemIndices = () => {\n    const startIndex = currentPage * Math.floor(safeItemsPerPage);\n    const endIndex = Math.min(\n      startIndex + Math.ceil(safeItemsPerPage),\n      totalItems,\n    );\n\n    const activeIndices: number[] = [];\n    for (let i = startIndex; i < endIndex; i++) {\n      activeIndices.push(i);\n    }\n\n    return activeIndices;\n  };\n\n  const navigateToSlide = (index: number) => {\n    if (index === currentPage || index < 0 || index >= totalPages) {\n      return;\n    }\n\n    // Find and click the corresponding hidden tab\n    if (carouselRef.current) {\n      const targetTab = carouselRef.current.querySelector(\n        `[data-slide-tab=\"true\"][data-index=\"${index}\"]`,\n      ) as HTMLElement;\n\n      if (targetTab) {\n        targetTab.click();\n      }\n    }\n  };\n\n  // Add effect to handle link click prevention during drag\n  useEffect(() => {\n    if (!carouselRef.current || !mouseDragging) return;\n\n    // Function to prevent click events on links during/after drag\n    const preventLinkActivation = (e: MouseEvent) => {\n      // If we are currently dragging, or just finished dragging, prevent link clicks\n      if (isDragging) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        // Reset isDragging after the current event cycle completes\n        setTimeout(() => {\n          setIsDragging(false);\n        }, 0);\n      }\n    };\n\n    // Function to handle mouse down events\n    const handleMouseDown = (e: MouseEvent) => {\n      setDragStartPosition({ x: e.clientX, y: e.clientY });\n    };\n\n    // Function to handle mouse move events\n    const handleMouseMove = (e: MouseEvent) => {\n      if (dragStartPosition === null) return;\n\n      // Calculate the distance moved\n      const dx = Math.abs(e.clientX - dragStartPosition.x);\n      const dy = Math.abs(e.clientY - dragStartPosition.y);\n      const distance = Math.sqrt(dx * dx + dy * dy);\n\n      // If the user has moved more than the threshold, consider it a drag\n      if (distance > dragThreshold) {\n        setIsDragging(true);\n      }\n    };\n\n    // Function to handle mouse up events\n    const handleMouseUp = () => {\n      // If this wasn't a drag, don't interfere with normal clicks\n      if (!isDragging) {\n        setDragStartPosition(null);\n        return;\n      }\n\n      // Add a brief delay for the click prevention to work\n      setTimeout(() => {\n        setIsDragging(false);\n        setDragStartPosition(null);\n      }, 50);\n    };\n\n    // Add event listeners for the carousel container\n    const carouselElement = carouselRef.current;\n\n    // Capture phase is important to catch events before they reach the links\n    carouselElement.addEventListener('mousedown', handleMouseDown, true);\n    carouselElement.addEventListener('mousemove', handleMouseMove, true);\n    carouselElement.addEventListener('mouseup', handleMouseUp, true);\n\n    // This is the key event listener that prevents link activation\n    carouselElement.addEventListener('click', preventLinkActivation, true);\n\n    return () => {\n      // Clean up event listeners\n      carouselElement.removeEventListener('mousedown', handleMouseDown, true);\n      carouselElement.removeEventListener('mousemove', handleMouseMove, true);\n      carouselElement.removeEventListener('mouseup', handleMouseUp, true);\n      carouselElement.removeEventListener('click', preventLinkActivation, true);\n    };\n  }, [mouseDragging, isDragging, dragStartPosition, dragThreshold]);\n\n  // Handle transition direction\n  useEffect(() => {\n    if (carouselRef.current) {\n      const scroller = carouselRef.current.querySelector(`.${styles.scroller}`);\n      if (scroller && scroller instanceof HTMLElement) {\n        if (prevPage < currentPage) {\n          scroller.classList.remove(styles.slideLeft);\n          scroller.classList.add(styles.slideRight);\n        } else if (prevPage > currentPage) {\n          scroller.classList.remove(styles.slideRight);\n          scroller.classList.add(styles.slideLeft);\n        }\n      }\n    }\n  }, [currentPage, prevPage]);\n\n  // Track selected tab changes\n  useEffect(() => {\n    if (!carouselRef.current) return;\n\n    const checkCurrentPage = () => {\n      if (!carouselRef.current) return;\n\n      // Find the currently selected tab\n      const selectedTab = carouselRef.current.querySelector(\n        '[data-slide-tab=\"true\"][aria-selected=\"true\"]',\n      );\n      if (selectedTab) {\n        const indexStr = (selectedTab as HTMLElement).dataset.index;\n        if (typeof indexStr === 'string' && indexStr.length > 0) {\n          const newIndex = parseInt(indexStr, 10);\n          if (\n            !isNaN(newIndex) &&\n            newIndex !== currentPage &&\n            newIndex >= 0 &&\n            newIndex < totalPages\n          ) {\n            setPrevPage(currentPage);\n            setCurrentPage(newIndex);\n          }\n        }\n      }\n    };\n\n    // Set up mutation observer to watch for aria-selected changes\n    const observer = new MutationObserver((mutations) => {\n      let shouldCheck = false;\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === 'attributes' &&\n          mutation.attributeName === 'aria-selected'\n        ) {\n          shouldCheck = true;\n        }\n      });\n\n      if (shouldCheck) {\n        // Small delay to ensure DOM is updated\n        setTimeout(checkCurrentPage, 10);\n      }\n    });\n\n    // Observe all hidden tabs\n    const hiddenTabs = carouselRef.current.querySelectorAll(\n      '[data-slide-tab=\"true\"]',\n    );\n    hiddenTabs.forEach((tab) => {\n      observer.observe(tab, {\n        attributes: true,\n        attributeFilter: ['aria-selected'],\n      });\n    });\n\n    // Initial check\n    checkCurrentPage();\n\n    // Also check periodically as backup\n    const interval = setInterval(checkCurrentPage, 500);\n\n    return () => {\n      observer.disconnect();\n      clearInterval(interval);\n    };\n  }, [currentPage, totalPages]);\n\n  // Interaction handlers for hover and focus\n  const interactionHandlers = showArrowsOnHover\n    ? {\n        onMouseEnter: () => setIsHovered(true),\n        onMouseLeave: () => setIsHovered(false),\n        onFocus: () => setIsFocused(true),\n        onBlur: (e: React.FocusEvent) => {\n          // Only blur if focus is moving outside the carousel\n          if (!e.currentTarget.contains(e.relatedTarget as Node)) {\n            setIsFocused(false);\n          }\n        },\n      }\n    : {};\n\n  // Determine whether arrows should be visible\n  // Hide arrows if:\n  // 1. There's only one page (all items fit on screen), OR\n  // 2. showArrowsOnHover is true and carousel is not hovered/focused\n  const shouldShowArrows = totalPages > 1;\n  const arrowsVisible =\n    shouldShowArrows && (!showArrowsOnHover || isHovered || isFocused);\n\n  // Get style object only if we have variables to set\n  const cssVars = getCssVariables();\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  // Custom styles for grid-auto-columns calculation\n  const getScrollerStyles = () => {\n    const styles: React.CSSProperties = {};\n\n    // ALWAYS apply gap if spaceBetweenItems is set, regardless of itemsPerPage\n    if (resolvedSpaceBetweenItems >= 0) {\n      styles.gap = `${resolvedSpaceBetweenItems}px`;\n    }\n\n    // Only calculate grid-auto-columns if we have multiple items per page AND spacing\n    if (resolvedItemsPerPage > 1 && resolvedSpaceBetweenItems > 0) {\n      // Advanced calculation for grid layout to account for gap spacing\n      const gapSpacePerItem =\n        (resolvedSpaceBetweenItems * (safeItemsPerPage - 1)) / safeItemsPerPage;\n\n      styles.gridAutoColumns = `calc(${100 / safeItemsPerPage}% - ${gapSpacePerItem}px)`;\n    } else if (resolvedItemsPerPage > 1) {\n      // No gap, just divide width evenly\n      styles.gridAutoColumns = `${100 / safeItemsPerPage}%`;\n    }\n\n    return styles;\n  };\n\n  // Get active item indices for the current page\n  const activeItemIndices = getActiveItemIndices();\n\n  // Handle carousel keyboard navigation\n  const handleCarouselKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      // Navigate to previous slide\n      const prevButton = carouselRef.current?.querySelector(\n        '[dir=\"prev\"]',\n      ) as HTMLButtonElement;\n      if (prevButton && !prevButton.disabled) {\n        prevButton.click();\n      }\n    } else if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      // Navigate to next slide\n      const nextButton = carouselRef.current?.querySelector(\n        '[dir=\"next\"]',\n      ) as HTMLButtonElement;\n      if (nextButton && !nextButton.disabled) {\n        nextButton.click();\n      }\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      // Go to first slide\n      navigateToSlide(0);\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      // Go to last slide\n      navigateToSlide(totalPages - 1);\n    }\n  };\n\n  // Generate a meaningful default aria-label if none provided\n  const getDefaultAriaLabel = () => {\n    if (ariaLabel) return ariaLabel;\n\n    const currentSlideNumber = currentPage + 1;\n    const autoplayStatus = autoPlay ? ', autoplay enabled' : '';\n\n    return `Carousel with ${totalItems} items, currently showing slide ${currentSlideNumber} of ${totalPages}${autoplayStatus}`;\n  };\n\n  return (\n    <div\n      className={getCarouselWrapperClasses()}\n      ref={carouselRef}\n      style={cssVars as React.CSSProperties}\n      data-dots-size={dotsSize}\n      {...interactionHandlers}\n      data-arrows-visible={arrowsVisible ? 'true' : 'false'}\n      data-transitioning={isTransitioning ? 'true' : undefined}\n      data-scroll-padding={resolvedScrollPadding}\n      role=\"region\"\n      aria-label={getDefaultAriaLabel()}\n      aria-describedby={ariaDescribedby}\n      aria-roledescription=\"carousel\"\n    >\n      <AriaCarousel\n        className={`${carousel({ looping })}`}\n        loop={getLoopValue()}\n        ref={ariaCarouselRef}\n        autoplay={autoPlay}\n        autoplayInterval={autoPlayInterval}\n        mouseDragging={mouseDragging && !isTransitioning}\n        onDragStart={(e) => {\n          setIsDragging(true);\n          if (e && e.nativeEvent) {\n            setDragStartPosition({\n              x: e.nativeEvent.clientX,\n              y: e.nativeEvent.clientY,\n            });\n          }\n        }}\n        onDragEnd={() => {\n          // We keep isDragging true for a short time after drag ends\n          // This helps ensure click events don't fire immediately after dragging\n          setTimeout(() => {\n            setIsDragging(false);\n          }, 50);\n        }}\n        data-dragging={isDragging ? 'true' : 'false'}\n        itemsPerPage={safeItemsPerPage}\n        scrollPadding={resolvedScrollPadding}\n        data-has-space-between={\n          resolvedSpaceBetweenItems > 0 ? 'true' : undefined\n        }\n        data-items-per-page={\n          resolvedItemsPerPage !== 1 ? safeItemsPerPage.toString() : undefined\n        }\n        onActivePageIndexChange={onPageChange ? ({ index }) => onPageChange(index) : undefined}\n      >\n        <AriaCarouselScroller\n          className={`${styles.scroller} ${focusStyleVariants({ focusStyle })}`}\n          {...focusProps}\n          data-focused={isFocusVisible ? true : undefined}\n          data-focus-visible={isFocusVisible ? true : undefined}\n          data-transitioning={isTransitioning ? 'true' : undefined}\n          style={getScrollerStyles()}\n          tabIndex={0}\n          role=\"region\"\n          aria-label=\"Carousel content\"\n          onKeyDown={handleCarouselKeyDown}\n        >\n          {items.map((child, index) => {\n            const isActiveItem = activeItemIndices.includes(index);\n            const itemClasses = [\n              itemWrapperClassName || '',\n              styles.item,\n              isActiveItem && activeItemClassName ? activeItemClassName : '',\n            ]\n              .filter(Boolean)\n              .join(' ');\n\n            return (\n              <AriaCarouselItem\n                key={index}\n                className={itemClasses}\n                data-is-active={isActiveItem ? 'true' : undefined}\n                data-item-index={index}\n                aria-label={`Slide ${index + 1} of ${totalItems}`}\n              >\n                {child}\n              </AriaCarouselItem>\n            );\n          })}\n        </AriaCarouselScroller>\n\n        <div\n          className={`${styles.controls} ${showArrowsOnHover ? styles.showOnHover : ''}`}\n        >\n          <CarouselButton\n            dir=\"prev\"\n            variant={arrowStyleVariant}\n            size={resolvedArrowSize}\n            focusStyle={focusStyle}\n            iconType={iconType}\n            hideDisabledArrow={hideDisabledArrow}\n            onPress={() => onArrowPress?.('prev')}\n            className={`${getClassNameWithDefault(prevArrowClassName, styles.defaultPrevButton)} ${!arrowsVisible ? styles.hidden : ''}`}\n          />\n\n          <CarouselButton\n            dir=\"next\"\n            variant={arrowStyleVariant}\n            size={resolvedArrowSize}\n            focusStyle={focusStyle}\n            iconType={iconType}\n            hideDisabledArrow={hideDisabledArrow}\n            onPress={() => onArrowPress?.('next')}\n            className={`${getClassNameWithDefault(nextArrowClassName, styles.defaultNextButton)} ${!arrowsVisible ? styles.hidden : ''}`}\n          />\n        </div>\n\n        <div className={styles.hiddenTabs}>\n          <AriaCarouselTabs>\n            {(page) => (\n              <AriaCarouselTab\n                key={page.index}\n                index={page.index}\n                data-index={page.index}\n                data-slide-tab=\"true\"\n                tabIndex={-1}\n              />\n            )}\n          </AriaCarouselTabs>\n        </div>\n\n        {autoPlay && (\n          <div\n            className={`${styles.autoplayControlWrapper} ${getClassNameWithDefault(autoplayControlClassName, styles.defaultAutoplayControl)}`}\n          >\n            <AutoplayControl\n              variant={autoPlayStyleVariant}\n              size={autoPlayControlSize}\n              className=\"\"\n              onPress={onAutoplayPress}\n            />\n          </div>\n        )}\n\n        {shouldShowDots && (\n          <CarouselDots\n            totalItems={totalPages}\n            currentPage={currentPage}\n            onDotClick={(index) => navigateToSlide(index)}\n            onPress={onDotPress}\n            focusStyle={focusStyle}\n            dotsSize={dotsSize}\n            variant={dotsVariant}\n            className={getClassNameWithDefault(\n              dotsContainerClassName,\n              styles.defaultDotsContainer,\n            )}\n            dotsWrapperClassName={dotsWrapperClassName}\n            dotClassName={dotClassName}\n            activeDotClassName={activeDotClassName}\n            isTransitioning={isTransitioning}\n          />\n        )}\n      </AriaCarousel>\n    </div>\n  );\n};\n\nexport default Carousel;\n"],"names":["carousel","cva","styles","variants","looping","infinite","backToStart","native","off","Carousel","children","ariaLabel","ariaDescribedby","itemsPerPage","spaceBetweenItems","scrollPadding","iconType","arrowStyleVariant","arrowSize","hideDisabledArrow","showArrowsOnHover","focusStyle","dotsSize","dotsVariant","hideDots","autoPlay","autoPlayInterval","autoPlayStyleVariant","autoPlayControlSize","mouseDragging","carouselWrapperClassName","prevArrowClassName","nextArrowClassName","autoplayControlClassName","dotsContainerClassName","dotsWrapperClassName","dotClassName","activeDotClassName","itemWrapperClassName","activeItemClassName","onArrowPress","onDotPress","onAutoplayPress","onPageChange","items","React","Children","toArray","totalItems","length","breakpoint","useBreakpoint","resolvedItemsPerPage","resolveResponsiveProp","resolvedSpaceBetweenItems","resolvedScrollPadding","resolvedArrowSize","resolvedHideDots","safeItemsPerPage","Math","max","totalPages","ceil","shouldShowDots","carouselRef","useRef","ariaCarouselRef","currentPage","setCurrentPage","useState","prevPage","setPrevPage","isDragging","setIsDragging","isHovered","setIsHovered","isFocused","setIsFocused","isTransitioning","dragStartPosition","setDragStartPosition","getClassNameWithDefault","customClassName","defaultClassName","navigateToSlide","index","current","targetTab","querySelector","click","useEffect","preventLinkActivation","e","preventDefault","stopPropagation","setTimeout","handleMouseDown","x","clientX","y","clientY","handleMouseMove","dx","abs","dy","sqrt","handleMouseUp","carouselElement","addEventListener","removeEventListener","scroller","HTMLElement","classList","remove","slideLeft","add","slideRight","checkCurrentPage","selectedTab","indexStr","dataset","newIndex","parseInt","isNaN","observer","MutationObserver","mutations","shouldCheck","forEach","mutation","type","attributeName","querySelectorAll","tab","observe","attributes","attributeFilter","interval","setInterval","disconnect","clearInterval","interactionHandlers","onMouseEnter","onMouseLeave","onFocus","onBlur","currentTarget","contains","relatedTarget","arrowsVisible","cssVars","String","Object","keys","getCssVariables","focusProps","isFocusVisible","useFocusRing","activeItemIndices","startIndex","floor","endIndex","min","activeIndices","i","push","getActiveItemIndices","jsx","className","classes","carouselWrapper","Number","isInteger","showPartialItems","hasScrollPadding","trim","defaultCarouselWrapper","join","getCarouselWrapperClasses","ref","style","role","getDefaultAriaLabel","jsxs","AriaCarousel","loop","autoplay","autoplayInterval","onDragStart","nativeEvent","onDragEnd","toString","onActivePageIndexChange","AriaCarouselScroller","focusStyleVariants","gap","gapSpacePerItem","gridAutoColumns","getScrollerStyles","tabIndex","onKeyDown","key","prevButton","disabled","nextButton","map","child","isActiveItem","includes","itemClasses","item","filter","Boolean","AriaCarouselItem","controls","showOnHover","CarouselButton","dir","variant","size","onPress","defaultPrevButton","hidden","defaultNextButton","hiddenTabs","AriaCarouselTabs","page","AriaCarouselTab","autoplayControlWrapper","defaultAutoplayControl","AutoplayControl","CarouselDots","onDotClick","defaultDotsContainer"],"mappings":"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"}

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

@@ -34,7 +34,7 @@ export interface CheckboxProps extends AriaCheckboxProps {
      */
     validationBehavior?: 'native' | 'aria';
     /** Description text for the checkbox */
-    description?: string;
+    description?: React.ReactNode;
     /** Alternate way to provide label content */
     children?: React.ReactNode;
     /** Focus style variant */

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 l,useMemo as r}from"react";import{Checkbox as t}from"react-aria-components";import{c as s}from"../../index-DiYWUa65.js";import d from"../FieldDescription/FieldDescription.js";import{FieldError as o}from"../FieldError/FieldError.js";import '../../assets/Checkbox.css';const c="_checkboxContainer_zuklp_24",n="_checkboxLabel_zuklp_29",u="_checkboxDescription_zuklp_33",p="_checkboxSvgWrapper_zuklp_38",_="_svg_zuklp_52",m="_checkboxLabelWrapper_zuklp_179",h={isInvalid:!0,validationErrors:["Invalid"],validationDetails:{valid:!1}},v=s("_checkbox_zuklp_2",{variants:{focusStyle:{default:"_defaultFocus_zuklp_80",white:"_whiteFocus_zuklp_84"}},defaultVariants:{focusStyle:"default"}}),f=({label:s,isIndeterminate:f,defaultSelected:k,isSelected:b,value:x,isDisabled:y,isReadOnly:z,isRequired:I,isInvalid:S,validate:F,autoFocus:N,name:D,validationBehavior:g,description:j,children:w,errorMessage:B,errorPrefix:E="Error:",testId:R,focusStyle:q="default",...C})=>{const L=l(),O=l(),P=r(()=>S?"function"==typeof B?B(h):B:null,[B,S]),W=[j?O:null,S&&P?L:null].filter(Boolean).join(" "),M=s||w;/* @__PURE__ */
-return e("div",{className:c,"data-testid":R,children:[S&&P&&/* @__PURE__ */i(o,{id:L,errorPrefix:E,isInvalid:S,children:P}),
-/* @__PURE__ */e("div",{className:m,children:[
-/* @__PURE__ */i(t,{className:v({focusStyle:q}),isIndeterminate:f,defaultSelected:k,isSelected:b,value:x,isDisabled:y,isReadOnly:z,isRequired:I,isInvalid:S,validate:F,autoFocus:N,name:D,validationBehavior:g,"aria-describedby":W||void 0,...C,children:({isIndeterminate:l})=>/* @__PURE__ */e(a,{children:[
-/* @__PURE__ */i("div",{className:`${p}`,"data-disabled":y,children:/* @__PURE__ */i("svg",{className:_,viewBox:"0 0 18 18","aria-hidden":"true",children:l?/* @__PURE__ */i("rect",{x:1,y:7.5,width:15,height:3}):/* @__PURE__ */i("polyline",{points:"1 9 7 14 15 4"})})}),M?/* @__PURE__ */i("span",{className:n,children:M}):null]})}),j&&/* @__PURE__ */i(d,{id:O,className:u,children:j})]})]})};export{f as Checkbox,f as default};
+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};
 //# 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?: string;\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 } 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"}

package/dist/components/ClearFieldButton/ClearFieldButton.js

@@ -1,2 +1,3 @@
-import{jsx as o}from"react/jsx-runtime";import{c as e}from"../../index-DiYWUa65.js";import{Button as t}from"react-aria-components";import{Icon as s}from"../Icon/Icon.js";import{focusStyleVariants as a}from"../../utils/focus/focusStyles.js";import '../../assets/ClearFieldButton.css';const m=e("_clearFieldButton_hkevp_1",{variants:{size:{sm:"_sm_hkevp_18",md:"_md_hkevp_23",lg:"_lg_hkevp_28"}},defaultVariants:{size:"md"}}),r=({size:e="md",form:r,formAction:i,formEncType:c,formMethod:f,formNoValidate:l,formTarget:n,name:d,value:u,isDisabled:p,autoFocus:_,type:h,slot:v,onClick:y,className:k,focusStyle:x="default",...z})=>/* @__PURE__ */o(t,{className:`${m({size:e})} ${k||""} ${a({focusStyle:x})}`,form:r,formAction:i,formEncType:c,formMethod:f,formNoValidate:l,formTarget:n,name:d,value:u,isDisabled:p,autoFocus:_,type:h,slot:v,onPress:y,...z,children:/* @__PURE__ */o(s,{iconName:"circle-xmark",iconSize:"1x","data-testid":"icon"})});export{r as ClearFieldButton,r as default};
+import{jsx as s}from"react/jsx-runtime";import{c as e}from"../../index-CCUt_dAN.js";import{Button as i}from"react-aria-components";import{Icon as d}from"../Icon/Icon.js";import{focusStyleVariants as m}from"../../utils/focus/focusStyles.js";import{getBaseValue as l,generateResponsiveClasses as o}from"../../utils/breakpoint/responsiveSSR.js";import '../../assets/ClearFieldButton.css';const _={clearFieldButton:"_clearFieldButton_dnd4g_1","size--sm":"_size--sm_dnd4g_34","size--md":"_size--md_dnd4g_38","size--lg":"_size--lg_dnd4g_42","sm:size--sm":"_sm:size--sm_dnd4g_1","sm:size--md":"_sm:size--md_dnd4g_1","sm:size--lg":"_sm:size--lg_dnd4g_1","md:size--sm":"_md:size--sm_dnd4g_1","md:size--md":"_md:size--md_dnd4g_1","md:size--lg":"_md:size--lg_dnd4g_1","lg:size--sm":"_lg:size--sm_dnd4g_1","lg:size--md":"_lg:size--md_dnd4g_1","lg:size--lg":"_lg:size--lg_dnd4g_1","xl:size--sm":"_xl:size--sm_dnd4g_1","xl:size--md":"_xl:size--md_dnd4g_1","xl:size--lg":"_xl:size--lg_dnd4g_1","xxl:size--sm":"_xxl:size--sm_dnd4g_1","xxl:size--md":"_xxl:size--md_dnd4g_1","xxl:size--lg":"_xxl:size--lg_dnd4g_1"},n=o(_),t=e(_.clearFieldButton,{variants:{size:{sm:_["size--sm"],md:_["size--md"],lg:_["size--lg"]}},defaultVariants:{size:"md"}}),r=({size:e="md",form:o,formAction:_,formEncType:r,formMethod:z,formNoValidate:a,formTarget:g,name:c,value:f,isDisabled:x,autoFocus:u,type:p,slot:y,onClick:j,className:S,focusStyle:F="default",...N})=>{const v=l(e,"md"),B=n(e,"size");/* @__PURE__ */
+return s(i,{className:[t({size:v}),m({focusStyle:F}),...B,S].filter(Boolean).join(" "),form:o,formAction:_,formEncType:r,formMethod:z,formNoValidate:a,formTarget:g,name:c,value:f,isDisabled:x,autoFocus:u,type:p,slot:y,onPress:j,...N,children:/* @__PURE__ */s(d,{iconName:"circle-xmark",iconSize:"1x","data-testid":"icon"})})};export{r as ClearFieldButton,r as default};
 //# sourceMappingURL=ClearFieldButton.js.map

package/dist/components/ClearFieldButton/ClearFieldButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClearFieldButton.js","sources":["../../../src/components/ClearFieldButton/ClearFieldButton.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { Button as AriaButton } from 'react-aria-components';\nimport { ButtonProps } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport styles from './ClearFieldButton.module.css';\nimport { FormProps } from '../../utils/forms/formProps';\nimport { focusStyleVariants } from '../../utils/focus/focusStyles';\n\nconst clearFieldButton = cva(styles.clearFieldButton, {\n  variants: {\n    size: {\n      sm: styles.sm,\n      md: styles.md,\n      lg: styles.lg,\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport interface ClearFieldButtonProps\n  extends Omit<ButtonProps, '$styleText'>,\n    FormProps {\n  slot?: string;\n  className?: string;\n  focusStyle?: 'default' | 'white';\n  onClick?: () => void;\n  type?: 'button' | 'submit' | 'reset';\n}\n\nexport const ClearFieldButton = ({\n  size = 'md',\n  form,\n  formAction,\n  formEncType,\n  formMethod,\n  formNoValidate,\n  formTarget,\n  name,\n  value,\n  isDisabled,\n  autoFocus,\n  type,\n  slot,\n  onClick,\n  className,\n  focusStyle = 'default',\n  ...props\n}: ClearFieldButtonProps) => {\n  return (\n    <AriaButton\n      className={`${clearFieldButton({ size })} ${className || ''} ${focusStyleVariants({ focusStyle })}`}\n      form={form}\n      formAction={formAction}\n      formEncType={formEncType}\n      formMethod={formMethod}\n      formNoValidate={formNoValidate}\n      formTarget={formTarget}\n      name={name}\n      value={value}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      type={type}\n      slot={slot}\n      onPress={onClick}\n      {...props}\n    >\n      <Icon iconName={'circle-xmark'} iconSize={'1x'} data-testid=\"icon\" />\n    </AriaButton>\n  );\n};\n\nexport default ClearFieldButton;\n"],"names":["clearFieldButton","cva","variants","size","sm","md","lg","defaultVariants","ClearFieldButton","form","formAction","formEncType","formMethod","formNoValidate","formTarget","name","value","isDisabled","autoFocus","type","slot","onClick","className","focusStyle","props","jsx","AriaButton","focusStyleVariants","onPress","children","Icon","iconName","iconSize"],"mappings":"sPAQMA,EAAmBC,8BAA6B,CACpDC,SAAU,CACRC,KAAM,CACJC,kBACAC,kBACAC,oBAGJC,gBAAiB,CACfJ,KAAM,QAcGK,EAAmB,EAC9BL,OAAO,KACPM,OACAC,aACAC,cACAC,aACAC,iBACAC,aACAC,OACAC,QACAC,aACAC,YACAC,OACAC,OACAC,UACAC,YACAC,aAAa,aACVC,oBAGDC,EAACC,EAAA,CACCJ,UAAW,GAAGtB,EAAiB,CAAEG,YAAWmB,GAAa,MAAMK,EAAmB,CAAEJ,iBACpFd,OACAC,aACAC,cACAC,aACAC,iBACAC,aACAC,OACAC,QACAC,aACAC,YACAC,OACAC,OACAQ,QAASP,KACLG,EAEJK,0BAACC,EAAA,CAAKC,SAAU,eAAgBC,SAAU,KAAM,cAAY"}
+{"version":3,"file":"ClearFieldButton.js","sources":["../../../src/components/ClearFieldButton/ClearFieldButton.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { Button as AriaButton } from 'react-aria-components';\nimport { ButtonProps } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport styles from './ClearFieldButton.module.css';\nimport { FormProps } from '../../utils/forms/formProps';\nimport { focusStyleVariants } from '../../utils/focus/focusStyles';\nimport {\n  generateResponsiveClasses,\n  getBaseValue,\n} from '../../utils/breakpoint/responsiveSSR';\n\nconst getResponsiveClasses = generateResponsiveClasses(styles);\n\nconst clearFieldButton = cva(styles.clearFieldButton, {\n  variants: {\n    size: {\n      sm: styles['size--sm'],\n      md: styles['size--md'],\n      lg: styles['size--lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport interface ClearFieldButtonProps\n  extends Omit<ButtonProps, '$styleText'>,\n    FormProps {\n  slot?: string;\n  className?: string;\n  focusStyle?: 'default' | 'white';\n  onClick?: () => void;\n  type?: 'button' | 'submit' | 'reset';\n}\n\nexport const ClearFieldButton = ({\n  size = 'md',\n  form,\n  formAction,\n  formEncType,\n  formMethod,\n  formNoValidate,\n  formTarget,\n  name,\n  value,\n  isDisabled,\n  autoFocus,\n  type,\n  slot,\n  onClick,\n  className,\n  focusStyle = 'default',\n  ...props\n}: ClearFieldButtonProps) => {\n  const baseSize = getBaseValue(size, 'md');\n  const sizeResponsiveClasses = getResponsiveClasses(size, 'size');\n\n  return (\n    <AriaButton\n      className={[\n        clearFieldButton({ size: baseSize }),\n        focusStyleVariants({ focusStyle }),\n        ...sizeResponsiveClasses,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      form={form}\n      formAction={formAction}\n      formEncType={formEncType}\n      formMethod={formMethod}\n      formNoValidate={formNoValidate}\n      formTarget={formTarget}\n      name={name}\n      value={value}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      type={type}\n      slot={slot}\n      onPress={onClick}\n      {...props}\n    >\n      <Icon iconName={'circle-xmark'} iconSize={'1x'} data-testid=\"icon\" />\n    </AriaButton>\n  );\n};\n\nexport default ClearFieldButton;\n"],"names":["getResponsiveClasses","generateResponsiveClasses","styles","clearFieldButton","cva","variants","size","sm","md","lg","defaultVariants","ClearFieldButton","form","formAction","formEncType","formMethod","formNoValidate","formTarget","name","value","isDisabled","autoFocus","type","slot","onClick","className","focusStyle","props","baseSize","getBaseValue","sizeResponsiveClasses","jsx","AriaButton","focusStyleVariants","filter","Boolean","join","onPress","children","Icon","iconName","iconSize"],"mappings":"8hCAYMA,EAAuBC,EAA0BC,GAEjDC,EAAmBC,EAAIF,EAAOC,iBAAkB,CACpDE,SAAU,CACRC,KAAM,CACJC,GAAIL,EAAO,YACXM,GAAIN,EAAO,YACXO,GAAIP,EAAO,cAGfQ,gBAAiB,CACfJ,KAAM,QAcGK,EAAmB,EAC9BL,OAAO,KACPM,OACAC,aACAC,cACAC,aACAC,iBACAC,aACAC,OACAC,QACAC,aACAC,YACAC,OACAC,OACAC,UACAC,YACAC,aAAa,aACVC,MAEH,MAAMC,EAAWC,EAAavB,EAAM,MAC9BwB,EAAwB9B,EAAqBM,EAAM;AAEzD,OACEyB,EAACC,EAAA,CACCP,UAAW,CACTtB,EAAiB,CAAEG,KAAMsB,IACzBK,EAAmB,CAAEP,kBAClBI,EACHL,GAECS,OAAOC,SACPC,KAAK,KACRxB,OACAC,aACAC,cACAC,aACAC,iBACAC,aACAC,OACAC,QACAC,aACAC,YACAC,OACAC,OACAc,QAASb,KACLG,EAEJW,0BAACC,EAAA,CAAKC,SAAU,eAAgBC,SAAU,KAAM,cAAY"}

package/dist/components/CreditCardNumberField/CreditCardNumberField.js

@@ -1,4 +1,4 @@
-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-7RDg5nwN.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__ */
+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};

package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js

@@ -1,4 +1,4 @@
-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-7RDg5nwN.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__ */
+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"}),

package/dist/components/Currency/Currency.js

@@ -1,3 +1,3 @@
-import{jsx as r}from"react/jsx-runtime";import{useMemo as e}from"react";import{c}from"../../index-DiYWUa65.js";import '../../assets/Currency.css';const n=c("_currency_1w262_1",{variants:{styleVariant:{primary:"_currency-primary_1w262_23",secondary:"_currency-secondary_1w262_27",white:"_currency-white_1w262_31",onSpend:"_currency-onSpend_1w262_35",onCollect:"_currency-onCollect_1w262_39",accentPrimary:"_currency-accentPrimary_1w262_43",accentSecondary:"_currency-accentSecondary_1w262_47"},size:{"5xs":"_currency-5xs_1w262_107","4xs":"_currency-4xs_1w262_100","3xs":"_currency-3xs_1w262_93","2xs":"_currency-2xs_1w262_86",xs:"_currency-xs_1w262_79",sm:"_currency-sm_1w262_72",md:"_currency-md_1w262_65",lg:"_currency-lg_1w262_58",xl:"_currency-xl_1w262_51"},isStrikethrough:{true:"_currency-strikethrough_1w262_11",false:""}},defaultVariants:{styleVariant:"accentSecondary"}}),t=({children:c,locale:t="en-GB",symbol:_,size:i="md",styleVariant:a,isStrikethrough:s=!1,formatOptions:y={style:"currency",minimumFractionDigits:0,maximumFractionDigits:2},formatter:u})=>{const o=e(()=>{if(null==c)return"";if(u)return u(c);const{style:r,currency:e="GBP",...n}=y,i={style:r||"decimal",minimumFractionDigits:0,maximumFractionDigits:0,...n};"currency"===i.style&&(i.currency=e||"GBP");let a=new Intl.NumberFormat(t,i).format(c);return"decimal"===i.style&&(a=_+a),a},[c,t,_,y,u]);/* @__PURE__ */
+import{jsx as r}from"react/jsx-runtime";import{useMemo as e}from"react";import{c}from"../../index-CCUt_dAN.js";import '../../assets/Currency.css';const n=c("_currency_1w262_1",{variants:{styleVariant:{primary:"_currency-primary_1w262_23",secondary:"_currency-secondary_1w262_27",white:"_currency-white_1w262_31",onSpend:"_currency-onSpend_1w262_35",onCollect:"_currency-onCollect_1w262_39",accentPrimary:"_currency-accentPrimary_1w262_43",accentSecondary:"_currency-accentSecondary_1w262_47"},size:{"5xs":"_currency-5xs_1w262_107","4xs":"_currency-4xs_1w262_100","3xs":"_currency-3xs_1w262_93","2xs":"_currency-2xs_1w262_86",xs:"_currency-xs_1w262_79",sm:"_currency-sm_1w262_72",md:"_currency-md_1w262_65",lg:"_currency-lg_1w262_58",xl:"_currency-xl_1w262_51"},isStrikethrough:{true:"_currency-strikethrough_1w262_11",false:""}},defaultVariants:{styleVariant:"accentSecondary"}}),t=({children:c,locale:t="en-GB",symbol:_,size:i="md",styleVariant:a,isStrikethrough:s=!1,formatOptions:y={style:"currency",minimumFractionDigits:0,maximumFractionDigits:2},formatter:u})=>{const o=e(()=>{if(null==c)return"";if(u)return u(c);const{style:r,currency:e="GBP",...n}=y,i={style:r||"decimal",minimumFractionDigits:0,maximumFractionDigits:0,...n};"currency"===i.style&&(i.currency=e||"GBP");let a=new Intl.NumberFormat(t,i).format(c);return"decimal"===i.style&&(a=_+a),a},[c,t,_,y,u]);/* @__PURE__ */
 return r("span",{className:n({styleVariant:a,size:i,isStrikethrough:s}),...s?{role:"deletion"}:{},children:o})};export{t as Currency,t as default};
 //# sourceMappingURL=Currency.js.map

package/dist/components/DateField/DateField.d.ts

@@ -1,7 +1,7 @@
 import { DateFieldProps as AriaDateFieldBaseProps, DateValue } from 'react-aria-components';
 import { FieldProps } from '../_base/Field/Field';
 type AriaDateFieldProps = Omit<AriaDateFieldBaseProps<DateValue>, 'defaultValue' | 'value' | 'onChange' | 'minValue' | 'maxValue' | 'isDateUnavailable' | 'isDisabled' | 'isRequired' | 'isInvalid'>;
-export type DateFieldProps = Omit<FieldProps<AriaDateFieldProps>, 'maxWidthByChars'> & {
+export type DateFieldProps = Omit<FieldProps<AriaDateFieldProps>, 'maxWidthByChars' | 'granularity'> & {
     /**
      * Label for the date field
      */
@@ -43,6 +43,10 @@ export type DateFieldProps = Omit<FieldProps<AriaDateFieldProps>, 'maxWidthByCha
      * The maximum value of the date field.
      */
     maxValue?: string | DateValue;
+    /**
+     * The smallest time division that can be set in the date field.
+     */
+    granularity?: 'month' | 'day' | 'hour' | 'minute' | 'second';
     /**
      * Children for DateField subcomponents
      */

package/dist/components/DateField/DateField.js

@@ -1,2 +1,2 @@
-import"react/jsx-runtime";import"react-aria-components";import"@react-aria/utils";import{D as t,D as e}from"../../DateField-oLDKE7Lh.js";import"../_base/Field/Field.js";import"react";import"../../utils/date/date.js";import"../DatePicker/DatePickerContext.js";export{t as DateField,e as default};
+import"react/jsx-runtime";import"react-aria-components";import"@react-aria/utils";import{D as t,D as e}from"../../DateField-rBq9QuR6.js";import"../_base/Field/Field.js";import"react";import"../../utils/date/date.js";import"../DatePicker/DatePickerContext.js";export{t as DateField,e as default};
 //# sourceMappingURL=DateField.js.map

package/dist/components/DateField/index.js

@@ -1,2 +1,2 @@
-import{D as e}from"../../DateField-oLDKE7Lh.js";export{e as default};
+import{D as e}from"../../DateField-rBq9QuR6.js";export{e as default};
 //# sourceMappingURL=index.js.map

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-CGXPuf59.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-oLDKE7Lh.js";import{parseDateValue as v}from"../../utils/date/date.js";import{DatePickerContext as V}from"./DatePickerContext.js";import{b as g,h as C}from"../../CalendarDate-B7n_TjYa.js";import{f as P}from"../../useCalendarState-C9LlCwg-.js";import{$ as y}from"../../useFormValidationState-CqKt4CQY.js";import{$ as D}from"../../useControlledState-DCczKDCM.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())},S=function(e){let a=i(e),[r,d]=D(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(null!=f?f:"UTC"):null,v="hour"===p||"minute"===p||"second"===p;var V;let b=null===(V=e.shouldCloseOnSelect)||void 0===V||V,[j,S]=l(null),[I,O]=l(null);if(r&&(j=r,"hour"in r&&(I=r)),c&&!(p in c))throw new Error("Invalid granularity "+p+" for value "+c.toString());let T="gregory"===(null==r?void 0:r.calendar.identifier)&&"BC"===r.era,Z=t(()=>({granularity:p,timeZone:f,hideTimeZone:e.hideTimeZone,hourCycle:e.hourCycle,shouldForceLeadingZeros:e.shouldForceLeadingZeros,showEra:T}),[p,e.hourCycle,e.shouldForceLeadingZeros,f,e.hideTimeZone,T]),{minValue:F,maxValue:k,isDateUnavailable:x}=e,U=t(()=>n(r,F,k,x,Z),[r,F,k,x,Z]),w=y({...e,value:r,builtinValidation:U}),B=w.displayValidation.isInvalid,E=e.validationState||(B?"invalid":null),L=(e,a)=>{d("timeZone"in a?a.set(g(e)):C(e,a)),S(null),O(null),w.commitValidation()};var N;return{...w,value:r,defaultValue:null!==(N=e.defaultValue)&&void 0!==N?N:m,setValue:d,dateValue:j,timeValue:I,setDateValue:l=>{let t="function"==typeof b?b():b;v?I||t?L(l,I||u(e.defaultValue||e.placeholderValue)):S(l):(d(l),w.commitValidation()),t&&a.setOpen(!1)},setTimeValue:e=>{j&&e?L(j,e):O(e)},granularity:p,hasTime:v,...a,setOpen(l){!l&&!r&&j&&v&&L(j,I||u(e.defaultValue||e.placeholderValue)),a.setOpen(l)},validationState:E,isInvalid:B,formatValue(e,a){if(!h)return"";let l=s(a,Z);return new P(e,l).format(h)},getDateFormatter(e,a){let l={...Z,...a},t=s({},l);return new P(e,t)}}}(j),I=r(null),O=c(j,S,I),T={...b.dateFieldProps,...O.fieldProps,granularity:"day",hideTimeZone:!0,label:b.label,description:b.description,errorMessage:b.errorMessage},Z={...O.buttonProps,isInvalid:S.isInvalid,styleVariant:S.isInvalid?"critical":S.isOpen?"accent":"neutral",onClick:()=>S.isOpen?S.close():S.open()},F={...b.calendarProps,...O.calendarProps};/* @__PURE__ */
-return e("div",{className:d.datePicker,ref:I,children:/* @__PURE__ */a(V.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"}})})}),S.isOpen&&/* @__PURE__ */e(p,{state:S,triggerRef:I,placement:"bottom start",hasArrow:!1,shouldFlip:!0,children:/* @__PURE__ */e("div",{role:"dialog",className:d.datePicker__dialog,...O.dialogProps,children:/* @__PURE__ */e(f,{...F})})})]})})};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,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};
 //# sourceMappingURL=DatePicker.js.map

package/dist/components/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx","../../../node_modules/@react-stately/datepicker/dist/useDatePickerState.mjs"],"sourcesContent":["import { useRef } from 'react';\nimport styles from './DatePicker.module.css';\nimport IconButton, { type IconButtonProps } from '../IconButton';\nimport { useDatePickerState } from 'react-stately';\nimport {\n  DateValue,\n  useDatePicker,\n  type AriaDatePickerProps,\n} from '@react-aria/datepicker';\nimport Popover from '../Popover';\nimport Calendar from '../Calendar';\nimport { type CalendarProps } from '../_base/Calendar';\nimport DateField, { type DateFieldProps } from '../DateField';\nimport { parseDateValue } from '../../utils/date/date';\nimport { DatePickerContext } from './DatePickerContext';\n\ntype WithoutSharedProps<T> = Omit<T, keyof DatePickerProps>;\n\n/**\n * Keys from AriaDatePickerProps that are incompatible with our DatePickerProps\n * They only use 'DateValue' when we need to use 'string | DateValue'\n */\ntype DateValueKeys =\n  | 'defaultValue'\n  | 'value'\n  | 'onChange'\n  | 'minValue'\n  | 'maxValue'\n  | 'isDateUnavailable';\n\nexport interface DatePickerProps\n  extends Omit<AriaDatePickerProps<DateValue>, DateValueKeys> {\n  /**\n   * Label for the date field\n   */\n  label?: DateFieldProps['label'];\n  /**\n   * Description for the date field shown below the label\n   */\n  description?: DateFieldProps['description'];\n  /**\n   * The default value of the date field.\n   */\n  defaultValue?: string | DateValue;\n  /**\n   * The controlled value of the date field.\n   */\n  value?: string | DateValue;\n  /**\n   * Function called when the date field value changes\n   */\n  onChange?: (value: string) => void;\n  /**\n   * The minimum value of the date field.\n   */\n  minValue?: string | DateValue;\n  /**\n   * The maximum value of the date field.\n   */\n  maxValue?: string | DateValue;\n  /**\n   * Callback function to mark cells as unavailable. Unavailable cells will have `aria-disabled=\"true\"`\n   */\n  isDateUnavailable?: (date: string) => boolean;\n  /**\n   * Whether the date picker is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the date picker is invalid\n   */\n  isInvalid?: boolean;\n  /**\n   * Whether the date field is required\n   */\n  isRequired?: boolean;\n  /**\n   * Message shown when the field is invalid\n   */\n  errorMessage?: DateFieldProps['errorMessage'];\n  /**\n   * Props passed to the date field component\n   */\n  dateFieldProps?: WithoutSharedProps<Omit<DateFieldProps, 'children'>>;\n  /**\n   * Props passed to the calendar component\n   */\n  calendarProps?: WithoutSharedProps<CalendarProps>;\n}\n\nexport const DatePicker = (props: DatePickerProps) => {\n  // Change string props to DateValue for internal manipulation\n  const parsedProps = {\n    ...props,\n    // date value\n    defaultValue: parseDateValue(props?.defaultValue),\n    value: parseDateValue(props?.value),\n    onChange: (dateValue: DateValue) =>\n      props?.onChange?.(dateValue.toDate('UTC').toISOString()),\n    // config\n    minValue: parseDateValue(props?.minValue),\n    maxValue: parseDateValue(props?.maxValue),\n    isDateUnavailable: (dateValue: DateValue) =>\n      props?.isDateUnavailable\n        ? props.isDateUnavailable(dateValue.toDate('UTC').toISOString())\n        : false,\n  } as AriaDatePickerProps<DateValue>;\n\n  const state = useDatePickerState(parsedProps);\n  const positioningRef = useRef(null);\n\n  const datePickerProps = useDatePicker(parsedProps, state, positioningRef);\n\n  const dateFieldProps = {\n    ...props.dateFieldProps,\n    ...datePickerProps.fieldProps,\n    granularity: 'day',\n    hideTimeZone: true,\n    label: props.label,\n    description: props.description,\n    errorMessage: props.errorMessage,\n  } as DateFieldProps;\n\n  const iconButtonProps = {\n    ...datePickerProps.buttonProps,\n    isInvalid: state.isInvalid,\n    styleVariant: (() => {\n      if (state.isInvalid) return 'critical';\n      return state.isOpen ? 'accent' : 'neutral';\n    })(),\n    onClick: () => (state.isOpen ? state.close() : state.open()),\n  } as IconButtonProps;\n\n  const calendarComponentProps = {\n    ...props.calendarProps,\n    ...datePickerProps.calendarProps,\n  } as CalendarProps;\n\n  return (\n    <div className={styles.datePicker} ref={positioningRef}>\n      <DatePickerContext.Provider value={{ isInDatePicker: true }}>\n        <DateField {...dateFieldProps}>\n          <DateField.EndSlot>\n            <IconButton\n              {...iconButtonProps}\n              size=\"sm\"\n              emphasis=\"tertiary\"\n              iconProps={{ iconName: 'calendar-days', iconPrefix: 'fas' }}\n            />\n          </DateField.EndSlot>\n        </DateField>\n        {state.isOpen && (\n          <Popover\n            state={state}\n            triggerRef={positioningRef}\n            placement=\"bottom start\"\n            hasArrow={false}\n            shouldFlip\n          >\n            <div\n              role=\"dialog\"\n              className={styles['datePicker__dialog']}\n              {...datePickerProps.dialogProps}\n            >\n              <Calendar {...calendarComponentProps} />\n            </div>\n          </Popover>\n        )}\n      </DatePickerContext.Provider>\n    </div>\n  );\n};\n\nexport default DatePicker;\n","import {getFormatOptions as $35a22f14a1f04b11$export$7e319ea407e63bc0, getPlaceholderTime as $35a22f14a1f04b11$export$c5221a78ef73c5e9, getValidationResult as $35a22f14a1f04b11$export$f18627323ab57ac0, useDefaultProps as $35a22f14a1f04b11$export$2440da353cedad43} from \"./utils.mjs\";\nimport {toCalendarDate as $goopS$toCalendarDate, toCalendarDateTime as $goopS$toCalendarDateTime, DateFormatter as $goopS$DateFormatter} from \"@internationalized/date\";\nimport {useFormValidationState as $goopS$useFormValidationState} from \"@react-stately/form\";\nimport {useOverlayTriggerState as $goopS$useOverlayTriggerState} from \"@react-stately/overlays\";\nimport {useControlledState as $goopS$useControlledState} from \"@react-stately/utils\";\nimport {useState as $goopS$useState, useMemo as $goopS$useMemo} from \"react\";\n\n/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */ \n\n\n\n\n\nfunction $ab5bf3f618090389$export$87194bb378cc3ac2(props) {\n    let overlayState = (0, $goopS$useOverlayTriggerState)(props);\n    let [value, setValue] = (0, $goopS$useControlledState)(props.value, props.defaultValue || null, props.onChange);\n    let [initialValue] = (0, $goopS$useState)(value);\n    let v = value || props.placeholderValue || null;\n    let [granularity, defaultTimeZone] = (0, $35a22f14a1f04b11$export$2440da353cedad43)(v, props.granularity);\n    let dateValue = value != null ? value.toDate(defaultTimeZone !== null && defaultTimeZone !== void 0 ? defaultTimeZone : 'UTC') : null;\n    let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';\n    var _props_shouldCloseOnSelect;\n    let shouldCloseOnSelect = (_props_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _props_shouldCloseOnSelect !== void 0 ? _props_shouldCloseOnSelect : true;\n    let [selectedDate, setSelectedDate] = (0, $goopS$useState)(null);\n    let [selectedTime, setSelectedTime] = (0, $goopS$useState)(null);\n    if (value) {\n        selectedDate = value;\n        if ('hour' in value) selectedTime = value;\n    }\n    // props.granularity must actually exist in the value if one is provided.\n    if (v && !(granularity in v)) throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());\n    let showEra = (value === null || value === void 0 ? void 0 : value.calendar.identifier) === 'gregory' && value.era === 'BC';\n    let formatOpts = (0, $goopS$useMemo)(()=>({\n            granularity: granularity,\n            timeZone: defaultTimeZone,\n            hideTimeZone: props.hideTimeZone,\n            hourCycle: props.hourCycle,\n            shouldForceLeadingZeros: props.shouldForceLeadingZeros,\n            showEra: showEra\n        }), [\n        granularity,\n        props.hourCycle,\n        props.shouldForceLeadingZeros,\n        defaultTimeZone,\n        props.hideTimeZone,\n        showEra\n    ]);\n    let { minValue: minValue, maxValue: maxValue, isDateUnavailable: isDateUnavailable } = props;\n    let builtinValidation = (0, $goopS$useMemo)(()=>(0, $35a22f14a1f04b11$export$f18627323ab57ac0)(value, minValue, maxValue, isDateUnavailable, formatOpts), [\n        value,\n        minValue,\n        maxValue,\n        isDateUnavailable,\n        formatOpts\n    ]);\n    let validation = (0, $goopS$useFormValidationState)({\n        ...props,\n        value: value,\n        builtinValidation: builtinValidation\n    });\n    let isValueInvalid = validation.displayValidation.isInvalid;\n    let validationState = props.validationState || (isValueInvalid ? 'invalid' : null);\n    let commitValue = (date, time)=>{\n        setValue('timeZone' in time ? time.set((0, $goopS$toCalendarDate)(date)) : (0, $goopS$toCalendarDateTime)(date, time));\n        setSelectedDate(null);\n        setSelectedTime(null);\n        validation.commitValidation();\n    };\n    // Intercept setValue to make sure the Time section is not changed by date selection in Calendar\n    let selectDate = (newValue)=>{\n        let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;\n        if (hasTime) {\n            if (selectedTime || shouldClose) commitValue(newValue, selectedTime || (0, $35a22f14a1f04b11$export$c5221a78ef73c5e9)(props.defaultValue || props.placeholderValue));\n            else setSelectedDate(newValue);\n        } else {\n            setValue(newValue);\n            validation.commitValidation();\n        }\n        if (shouldClose) overlayState.setOpen(false);\n    };\n    let selectTime = (newValue)=>{\n        if (selectedDate && newValue) commitValue(selectedDate, newValue);\n        else setSelectedTime(newValue);\n    };\n    var _props_defaultValue;\n    return {\n        ...validation,\n        value: value,\n        defaultValue: (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : initialValue,\n        setValue: setValue,\n        dateValue: selectedDate,\n        timeValue: selectedTime,\n        setDateValue: selectDate,\n        setTimeValue: selectTime,\n        granularity: granularity,\n        hasTime: hasTime,\n        ...overlayState,\n        setOpen (isOpen) {\n            // Commit the selected date when the calendar is closed. Use a placeholder time if one wasn't set.\n            // If only the time was set and not the date, don't commit. The state will be preserved until\n            // the user opens the popover again.\n            if (!isOpen && !value && selectedDate && hasTime) commitValue(selectedDate, selectedTime || (0, $35a22f14a1f04b11$export$c5221a78ef73c5e9)(props.defaultValue || props.placeholderValue));\n            overlayState.setOpen(isOpen);\n        },\n        validationState: validationState,\n        isInvalid: isValueInvalid,\n        formatValue (locale, fieldOptions) {\n            if (!dateValue) return '';\n            let formatOptions = (0, $35a22f14a1f04b11$export$7e319ea407e63bc0)(fieldOptions, formatOpts);\n            let formatter = new (0, $goopS$DateFormatter)(locale, formatOptions);\n            return formatter.format(dateValue);\n        },\n        getDateFormatter (locale, formatOptions) {\n            let newOptions = {\n                ...formatOpts,\n                ...formatOptions\n            };\n            let newFormatOptions = (0, $35a22f14a1f04b11$export$7e319ea407e63bc0)({}, newOptions);\n            return new (0, $goopS$DateFormatter)(locale, newFormatOptions);\n        }\n    };\n}\n\n\nexport {$ab5bf3f618090389$export$87194bb378cc3ac2 as useDatePickerState};\n//# sourceMappingURL=useDatePickerState.module.js.map\n"],"names":["DatePicker","props","parsedProps","defaultValue","parseDateValue","value","onChange","dateValue","toDate","toISOString","minValue","maxValue","isDateUnavailable","state","overlayState","$goopS$useOverlayTriggerState","setValue","$goopS$useControlledState","initialValue","$goopS$useState","v","placeholderValue","granularity","defaultTimeZone","$35a22f14a1f04b11$export$2440da353cedad43","hasTime","_props_shouldCloseOnSelect","shouldCloseOnSelect","selectedDate","setSelectedDate","selectedTime","setSelectedTime","Error","toString","showEra","calendar","identifier","era","formatOpts","$goopS$useMemo","timeZone","hideTimeZone","hourCycle","shouldForceLeadingZeros","builtinValidation","$35a22f14a1f04b11$export$f18627323ab57ac0","validation","$goopS$useFormValidationState","isValueInvalid","displayValidation","isInvalid","validationState","commitValue","date","time","set","$goopS$toCalendarDate","$goopS$toCalendarDateTime","commitValidation","_props_defaultValue","timeValue","setDateValue","newValue","shouldClose","$35a22f14a1f04b11$export$c5221a78ef73c5e9","setOpen","setTimeValue","isOpen","formatValue","locale","fieldOptions","formatOptions","$35a22f14a1f04b11$export$7e319ea407e63bc0","$goopS$DateFormatter","format","getDateFormatter","newOptions","newFormatOptions","useDatePickerState","positioningRef","useRef","datePickerProps","useDatePicker","dateFieldProps","fieldProps","label","description","errorMessage","iconButtonProps","buttonProps","styleVariant","onClick","close","open","calendarComponentProps","calendarProps","className","styles","datePicker","ref","children","jsxs","DatePickerContext","Provider","isInDatePicker","jsx","DateField","EndSlot","IconButton","size","emphasis","iconProps","iconName","iconPrefix","Popover","triggerRef","placement","hasArrow","shouldFlip","role","dialogProps","Calendar"],"mappings":"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","x_google_ignoreList":[1]}
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx","../../../node_modules/react-stately/node_modules/react-stately/dist/private/datepicker/useDatePickerState.mjs"],"sourcesContent":["import { useRef } from 'react';\nimport styles from './DatePicker.module.css';\nimport IconButton, { type IconButtonProps } from '../IconButton';\nimport { useDatePickerState } from 'react-stately';\nimport {\n  DateValue,\n  useDatePicker,\n  type AriaDatePickerProps,\n} from '@react-aria/datepicker';\nimport Popover from '../Popover';\nimport Calendar from '../Calendar';\nimport { type CalendarProps } from '../_base/Calendar';\nimport DateField, { type DateFieldProps } from '../DateField';\nimport { parseDateValue } from '../../utils/date/date';\nimport { DatePickerContext } from './DatePickerContext';\n\ntype WithoutSharedProps<T> = Omit<T, keyof DatePickerProps>;\n\n/**\n * Keys from AriaDatePickerProps that are incompatible with our DatePickerProps\n * They only use 'DateValue' when we need to use 'string | DateValue'\n */\ntype DateValueKeys =\n  | 'defaultValue'\n  | 'value'\n  | 'onChange'\n  | 'minValue'\n  | 'maxValue'\n  | 'isDateUnavailable';\n\nexport interface DatePickerProps\n  extends Omit<AriaDatePickerProps<DateValue>, DateValueKeys> {\n  /**\n   * Label for the date field\n   */\n  label?: DateFieldProps['label'];\n  /**\n   * Description for the date field shown below the label\n   */\n  description?: DateFieldProps['description'];\n  /**\n   * The default value of the date field.\n   */\n  defaultValue?: string | DateValue;\n  /**\n   * The controlled value of the date field.\n   */\n  value?: string | DateValue;\n  /**\n   * Function called when the date field value changes\n   */\n  onChange?: (value: string) => void;\n  /**\n   * The minimum value of the date field.\n   */\n  minValue?: string | DateValue;\n  /**\n   * The maximum value of the date field.\n   */\n  maxValue?: string | DateValue;\n  /**\n   * Callback function to mark cells as unavailable. Unavailable cells will have `aria-disabled=\"true\"`\n   */\n  isDateUnavailable?: (date: string) => boolean;\n  /**\n   * Whether the date picker is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the date picker is invalid\n   */\n  isInvalid?: boolean;\n  /**\n   * Whether the date field is required\n   */\n  isRequired?: boolean;\n  /**\n   * Message shown when the field is invalid\n   */\n  errorMessage?: DateFieldProps['errorMessage'];\n  /**\n   * Props passed to the date field component\n   */\n  dateFieldProps?: WithoutSharedProps<Omit<DateFieldProps, 'children'>>;\n  /**\n   * Props passed to the calendar component\n   */\n  calendarProps?: WithoutSharedProps<CalendarProps>;\n}\n\nexport const DatePicker = (props: DatePickerProps) => {\n  // Change string props to DateValue for internal manipulation\n  const parsedProps = {\n    ...props,\n    // date value\n    defaultValue: parseDateValue(props?.defaultValue),\n    value: parseDateValue(props?.value),\n    onChange: (dateValue: DateValue) =>\n      props?.onChange?.(dateValue.toDate('UTC').toISOString()),\n    // config\n    minValue: parseDateValue(props?.minValue),\n    maxValue: parseDateValue(props?.maxValue),\n    isDateUnavailable: (dateValue: DateValue) =>\n      props?.isDateUnavailable\n        ? props.isDateUnavailable(dateValue.toDate('UTC').toISOString())\n        : false,\n  } as AriaDatePickerProps<DateValue>;\n\n  const state = useDatePickerState(parsedProps);\n  const positioningRef = useRef(null);\n\n  const datePickerProps = useDatePicker(parsedProps, state, positioningRef);\n\n  const dateFieldProps = {\n    ...props.dateFieldProps,\n    ...datePickerProps.fieldProps,\n    granularity: 'day',\n    hideTimeZone: true,\n    label: props.label,\n    description: props.description,\n    errorMessage: props.errorMessage,\n  } as DateFieldProps;\n\n  const iconButtonProps = {\n    ...datePickerProps.buttonProps,\n    isInvalid: state.isInvalid,\n    styleVariant: (() => {\n      if (state.isInvalid) return 'critical';\n      return state.isOpen ? 'accent' : 'neutral';\n    })(),\n    onClick: () => (state.isOpen ? state.close() : state.open()),\n  } as IconButtonProps;\n\n  const calendarComponentProps = {\n    ...props.calendarProps,\n    ...datePickerProps.calendarProps,\n  } as CalendarProps;\n\n  return (\n    <div className={styles.datePicker} ref={positioningRef}>\n      <DatePickerContext.Provider value={{ isInDatePicker: true }}>\n        <DateField {...dateFieldProps}>\n          <DateField.EndSlot>\n            <IconButton\n              {...iconButtonProps}\n              size=\"sm\"\n              emphasis=\"tertiary\"\n              iconProps={{ iconName: 'calendar-days', iconPrefix: 'fas' }}\n            />\n          </DateField.EndSlot>\n        </DateField>\n        {state.isOpen && (\n          <Popover\n            state={state}\n            triggerRef={positioningRef}\n            placement=\"bottom start\"\n            hasArrow={false}\n            shouldFlip\n          >\n            <div\n              role=\"dialog\"\n              className={styles['datePicker__dialog']}\n              {...datePickerProps.dialogProps}\n            >\n              <Calendar {...calendarComponentProps} />\n            </div>\n          </Popover>\n        )}\n      </DatePickerContext.Provider>\n    </div>\n  );\n};\n\nexport default DatePicker;\n","import {getFormatOptions as $8b141f2f71e88f85$export$7e319ea407e63bc0, getPlaceholderTime as $8b141f2f71e88f85$export$c5221a78ef73c5e9, getValidationResult as $8b141f2f71e88f85$export$f18627323ab57ac0, useDefaultProps as $8b141f2f71e88f85$export$2440da353cedad43} from \"./utils.mjs\";\nimport {useFormValidationState as $fd2148440a13ec26$export$fc1a364ae1f3ff10} from \"../form/useFormValidationState.mjs\";\nimport {useOverlayTriggerState as $f11fb0bcf1b2687a$export$61c6a8c84e605fb6} from \"../overlays/useOverlayTriggerState.mjs\";\nimport {useControlledState as $3e6197669829fe11$export$40bfa8c7b0832715} from \"../utils/useControlledState.mjs\";\nimport {toCalendarDate as $gC1o7$toCalendarDate, toCalendarDateTime as $gC1o7$toCalendarDateTime, DateFormatter as $gC1o7$DateFormatter} from \"@internationalized/date\";\nimport {useState as $gC1o7$useState, useMemo as $gC1o7$useMemo} from \"react\";\n\n/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */ \n\n\n\n\n\nfunction $28aae683a942e141$export$87194bb378cc3ac2(props) {\n    let overlayState = (0, $f11fb0bcf1b2687a$export$61c6a8c84e605fb6)(props);\n    let [value, setValue] = (0, $3e6197669829fe11$export$40bfa8c7b0832715)(props.value, props.defaultValue || null, props.onChange);\n    let [initialValue] = (0, $gC1o7$useState)(value);\n    let v = value || props.placeholderValue || null;\n    let [granularity, defaultTimeZone] = (0, $8b141f2f71e88f85$export$2440da353cedad43)(v, props.granularity);\n    let dateValue = value != null ? value.toDate(defaultTimeZone ?? 'UTC') : null;\n    let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';\n    let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;\n    let [selectedDate, setSelectedDate] = (0, $gC1o7$useState)(null);\n    let [selectedTime, setSelectedTime] = (0, $gC1o7$useState)(null);\n    if (value) {\n        selectedDate = value;\n        if ('hour' in value) selectedTime = value;\n    }\n    // props.granularity must actually exist in the value if one is provided.\n    if (v && !(granularity in v)) throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());\n    let showEra = value?.calendar.identifier === 'gregory' && value.era === 'BC';\n    let formatOpts = (0, $gC1o7$useMemo)(()=>({\n            granularity: granularity,\n            timeZone: defaultTimeZone,\n            hideTimeZone: props.hideTimeZone,\n            hourCycle: props.hourCycle,\n            shouldForceLeadingZeros: props.shouldForceLeadingZeros,\n            showEra: showEra\n        }), [\n        granularity,\n        props.hourCycle,\n        props.shouldForceLeadingZeros,\n        defaultTimeZone,\n        props.hideTimeZone,\n        showEra\n    ]);\n    let { minValue: minValue, maxValue: maxValue, isDateUnavailable: isDateUnavailable } = props;\n    let builtinValidation = (0, $gC1o7$useMemo)(()=>(0, $8b141f2f71e88f85$export$f18627323ab57ac0)(value, minValue, maxValue, isDateUnavailable, formatOpts), [\n        value,\n        minValue,\n        maxValue,\n        isDateUnavailable,\n        formatOpts\n    ]);\n    let validation = (0, $fd2148440a13ec26$export$fc1a364ae1f3ff10)({\n        ...props,\n        value: value,\n        builtinValidation: builtinValidation\n    });\n    let isValueInvalid = validation.displayValidation.isInvalid;\n    let validationState = props.validationState || (isValueInvalid ? 'invalid' : null);\n    let commitValue = (date, time)=>{\n        setValue('timeZone' in time ? time.set((0, $gC1o7$toCalendarDate)(date)) : (0, $gC1o7$toCalendarDateTime)(date, time));\n        setSelectedDate(null);\n        setSelectedTime(null);\n        validation.commitValidation();\n    };\n    // Intercept setValue to make sure the Time section is not changed by date selection in Calendar\n    let selectDate = (newValue)=>{\n        let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;\n        if (hasTime) {\n            if (selectedTime || shouldClose) commitValue(newValue, selectedTime || (0, $8b141f2f71e88f85$export$c5221a78ef73c5e9)(props.defaultValue || props.placeholderValue));\n            else setSelectedDate(newValue);\n        } else {\n            setValue(newValue);\n            validation.commitValidation();\n        }\n        if (shouldClose) overlayState.setOpen(false);\n    };\n    let selectTime = (newValue)=>{\n        if (selectedDate && newValue) commitValue(selectedDate, newValue);\n        else setSelectedTime(newValue);\n    };\n    return {\n        ...validation,\n        value: value,\n        defaultValue: props.defaultValue ?? initialValue,\n        setValue: setValue,\n        dateValue: selectedDate,\n        timeValue: selectedTime,\n        setDateValue: selectDate,\n        setTimeValue: selectTime,\n        granularity: granularity,\n        hasTime: hasTime,\n        ...overlayState,\n        setOpen (isOpen) {\n            // Commit the selected date when the calendar is closed. Use a placeholder time if one wasn't set.\n            // If only the time was set and not the date, don't commit. The state will be preserved until\n            // the user opens the popover again.\n            if (!isOpen && !value && selectedDate && hasTime) commitValue(selectedDate, selectedTime || (0, $8b141f2f71e88f85$export$c5221a78ef73c5e9)(props.defaultValue || props.placeholderValue));\n            overlayState.setOpen(isOpen);\n        },\n        validationState: validationState,\n        isInvalid: isValueInvalid,\n        formatValue (locale, fieldOptions) {\n            if (!dateValue) return '';\n            let formatOptions = (0, $8b141f2f71e88f85$export$7e319ea407e63bc0)(fieldOptions, formatOpts);\n            let formatter = new (0, $gC1o7$DateFormatter)(locale, formatOptions);\n            return formatter.format(dateValue);\n        },\n        getDateFormatter (locale, formatOptions) {\n            let newOptions = {\n                ...formatOpts,\n                ...formatOptions\n            };\n            let newFormatOptions = (0, $8b141f2f71e88f85$export$7e319ea407e63bc0)({}, newOptions);\n            return new (0, $gC1o7$DateFormatter)(locale, newFormatOptions);\n        }\n    };\n}\n\n\nexport {$28aae683a942e141$export$87194bb378cc3ac2 as useDatePickerState};\n//# sourceMappingURL=useDatePickerState.mjs.map\n"],"names":["DatePicker","props","parsedProps","defaultValue","parseDateValue","value","onChange","dateValue","toDate","toISOString","minValue","maxValue","isDateUnavailable","state","overlayState","$f11fb0bcf1b2687a$export$61c6a8c84e605fb6","setValue","$3e6197669829fe11$export$40bfa8c7b0832715","initialValue","$gC1o7$useState","v","placeholderValue","granularity","defaultTimeZone","$8b141f2f71e88f85$export$2440da353cedad43","hasTime","shouldCloseOnSelect","selectedDate","setSelectedDate","selectedTime","setSelectedTime","Error","toString","showEra","calendar","identifier","era","formatOpts","$gC1o7$useMemo","timeZone","hideTimeZone","hourCycle","shouldForceLeadingZeros","builtinValidation","$8b141f2f71e88f85$export$f18627323ab57ac0","validation","$fd2148440a13ec26$export$fc1a364ae1f3ff10","isValueInvalid","displayValidation","isInvalid","validationState","commitValue","date","time","set","$gC1o7$toCalendarDate","$gC1o7$toCalendarDateTime","commitValidation","timeValue","setDateValue","newValue","shouldClose","$8b141f2f71e88f85$export$c5221a78ef73c5e9","setOpen","setTimeValue","isOpen","formatValue","locale","fieldOptions","formatOptions","$8b141f2f71e88f85$export$7e319ea407e63bc0","$gC1o7$DateFormatter","format","getDateFormatter","newOptions","newFormatOptions","useDatePickerState","positioningRef","useRef","datePickerProps","useDatePicker","dateFieldProps","fieldProps","label","description","errorMessage","iconButtonProps","buttonProps","styleVariant","onClick","close","open","calendarComponentProps","calendarProps","className","styles","datePicker","ref","children","jsxs","DatePickerContext","Provider","isInDatePicker","jsx","DateField","EndSlot","IconButton","size","emphasis","iconProps","iconName","iconPrefix","Popover","triggerRef","placement","hasArrow","shouldFlip","role","dialogProps","Calendar"],"mappings":"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","x_google_ignoreList":[1]}

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,7 +1,7 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as t,useMemo as r,useRef as l}from"react";import{useDateRangePicker as n}from"@react-aria/datepicker";import{DateField as i}from"react-aria-components";import{CalendarRange as o}from"../CalendarRange/CalendarRange.js";import{Popover as d}from"../Popover/Popover.js";import{IconButton as s}from"../IconButton/IconButton.js";import{d as u,D as m}from"../../DateField-oLDKE7Lh.js";import{DatePickerContext as c}from"../DatePicker/DatePickerContext.js";import{Paragraph as v}from"../Paragraph/Paragraph.js";import{parseDateValue as p}from"../../utils/date/date.js";import{$ as f,a as h,f as g,c as y,d as C,e as P}from"../../DatePicker.module-CGXPuf59.js";import{Field as V}from"../_base/Field/Field.js";import{b as D,h as b}from"../../CalendarDate-B7n_TjYa.js";import{f as T}from"../../useCalendarState-C9LlCwg-.js";import{$ as Z}from"../../useFormValidationState-CqKt4CQY.js";import{$ as I}from"../../useControlledState-DCczKDCM.js";function j(e){return null!=(null==e?void 0:e.start)&&null!=e.end}const F=F=>{const S={...F,defaultValue:(()=>{if(F?.defaultValue&&F.defaultValue?.start&&F.defaultValue?.end)return{start:p(F.defaultValue.start),end:p(F.defaultValue.end)}})(),value:(()=>{if(F?.value&&F.value?.start&&F.value?.end)return{start:p(F.value.start),end:p(F.value.end)}})(),onChange:e=>{if(!F.onChange||!e?.start||!e?.end)return;const a={start:e.start.toDate("UTC").toISOString(),end:e.end.toDate("UTC").toISOString()};return F.onChange(a)},minValue:p(F?.minValue),maxValue:p(F?.maxValue),isDateUnavailable:e=>!!F?.isDateUnavailable&&F.isDateUnavailable(e.toDate("UTC").toISOString())},R=function(e){var a,l;let n=f(e),[i,o]=I(e.value,e.defaultValue||null,e.onChange),[d]=t(i),[s,u]=t(()=>i||{start:null,end:null});null==i&&s.start&&s.end&&(s={start:null,end:null},u(s));let m=i||s,c=e=>{m=e||{start:null,end:null},u(m),j(m)?o(m):o(null)},v=(null==m?void 0:m.start)||(null==m?void 0:m.end)||e.placeholderValue||null,[p,P]=h(v,e.granularity),V="hour"===p||"minute"===p||"second"===p;var F;let S=null===(F=e.shouldCloseOnSelect)||void 0===F||F,[R,k]=t(null),[x,O]=t(null);m&&j(m)&&(R=m,"hour"in m.start&&(x=m));let N=(e,a)=>{c({start:"timeZone"in a.start?a.start.set(D(e.start)):b(e.start,a.start),end:"timeZone"in a.end?a.end.set(D(e.end)):b(e.end,a.end)}),k(null),O(null),H.commitValidation()},U=a=>{let t="function"==typeof S?S():S;V?j(a)&&(t||(null==x?void 0:x.start)&&(null==x?void 0:x.end))?N(a,{start:(null==x?void 0:x.start)||C(e.placeholderValue),end:(null==x?void 0:x.end)||C(e.placeholderValue)}):k(a):j(a)?(c(a),H.commitValidation()):k(a),t&&n.setOpen(!1)},_=e=>{j(R)&&j(e)?N(R,e):O(e)},w="gregory"===(null==m||null===(a=m.start)||void 0===a?void 0:a.calendar.identifier)&&"BC"===m.start.era||"gregory"===(null==m||null===(l=m.end)||void 0===l?void 0:l.calendar.identifier)&&"BC"===m.end.era,B=r(()=>({granularity:p,timeZone:P,hideTimeZone:e.hideTimeZone,hourCycle:e.hourCycle,shouldForceLeadingZeros:e.shouldForceLeadingZeros,showEra:w}),[p,e.hourCycle,e.shouldForceLeadingZeros,P,e.hideTimeZone,w]),{minValue:L,maxValue:$,isDateUnavailable:E}=e,q=r(()=>g(m,L,$,E,B),[m,L,$,E,B]),H=Z({...e,value:i,name:r(()=>[e.startName,e.endName].filter(e=>null!=e),[e.startName,e.endName]),builtinValidation:q}),M=H.displayValidation.isInvalid,W=e.validationState||(M?"invalid":null);var z;return{...H,value:m,defaultValue:null!==(z=e.defaultValue)&&void 0!==z?z:d,setValue:c,dateRange:R,timeRange:x,granularity:p,hasTime:V,setDate(e,a){var t,r;U("start"===e?{start:a,end:null!==(t=null==R?void 0:R.end)&&void 0!==t?t:null}:{start:null!==(r=null==R?void 0:R.start)&&void 0!==r?r:null,end:a})},setTime(e,a){var t,r;_("start"===e?{start:a,end:null!==(t=null==x?void 0:x.end)&&void 0!==t?t:null}:{start:null!==(r=null==x?void 0:x.start)&&void 0!==r?r:null,end:a})},setDateTime(e,a){var t,r;c("start"===e?{start:a,end:null!==(t=null==m?void 0:m.end)&&void 0!==t?t:null}:{start:null!==(r=null==m?void 0:m.start)&&void 0!==r?r:null,end:a})},setDateRange:U,setTimeRange:_,...n,setOpen(a){a||(null==m?void 0:m.start)&&(null==m?void 0:m.end)||!j(R)||!V||N(R,{start:(null==x?void 0:x.start)||C(e.placeholderValue),end:(null==x?void 0:x.end)||C(e.placeholderValue)}),n.setOpen(a)},validationState:W,isInvalid:M,formatValue(a,t){if(!m||!m.start||!m.end)return null;let r,l="timeZone"in m.start?m.start.timeZone:void 0,n=e.granularity||(m.start&&"minute"in m.start?"minute":"day"),i="timeZone"in m.end?m.end.timeZone:void 0,o=e.granularity||(m.end&&"minute"in m.end?"minute":"day"),d=y(t,{granularity:n,timeZone:l,hideTimeZone:e.hideTimeZone,hourCycle:e.hourCycle,showEra:"gregory"===m.start.calendar.identifier&&"BC"===m.start.era||"gregory"===m.end.calendar.identifier&&"BC"===m.end.era}),s=m.start.toDate(l||"UTC"),u=m.end.toDate(i||"UTC"),c=new T(a,d);if(l===i&&n===o&&0!==m.start.compare(m.end)){try{let e=c.formatRangeToParts(s,u),a=-1;for(let l=0;l<e.length;l++){let t=e[l];if("shared"===t.source&&"literal"===t.type)a=l;else if("endRange"===t.source)break}let t="",r="";for(let l=0;l<e.length;l++)l<a?t+=e[l].value:l>a&&(r+=e[l].value);return{start:t,end:r}}catch{}r=c}else{let l=y(t,{granularity:o,timeZone:i,hideTimeZone:e.hideTimeZone,hourCycle:e.hourCycle});r=new T(a,l)}return{start:c.format(s),end:r.format(u)}},getDateFormatter(e,a){let t={...B,...a},r=y({},t);return new T(e,r)}}}(S),k=l(null),x=n(S,R,k),O={granularity:"day",hideTimeZone:!0},N={...F.startDateFieldProps,...x.startFieldProps,...O},U={...F.endDateFieldProps,...x.endFieldProps,...O},{"aria-labelledby":_,...w}=x.groupProps,B={...x.buttonProps,isInvalid:R.isInvalid,styleVariant:R.isInvalid?"critical":R.isOpen?"accent":"neutral",onClick:()=>R.isOpen?R.close():R.open()},L={...F.calendarProps,...x.calendarProps};/* @__PURE__ */
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as t,useMemo as r,useRef as n}from"react";import{useDateRangePicker as l}from"@react-aria/datepicker";import{DateField as i}from"react-aria-components";import{CalendarRange as s}from"../CalendarRange/CalendarRange.js";import{Popover as o}from"../Popover/Popover.js";import{IconButton as d}from"../IconButton/IconButton.js";import{d as u,D as m}from"../../DateField-rBq9QuR6.js";import{DatePickerContext as c}from"../DatePicker/DatePickerContext.js";import{Paragraph as p}from"../Paragraph/Paragraph.js";import{parseDateValue as f}from"../../utils/date/date.js";import{$ as h,a as g,f as v,c as y,d as C,e as P}from"../../DatePicker.module-DlLCFGCM.js";import{Field as V}from"../_base/Field/Field.js";import{$ as D,a as b}from"../../useControlledState-CLJIwghQ.js";import{b as T,h as Z}from"../../CalendarDate-uEuHKGse.js";import{g as I}from"../../useCalendarState-BKam8aTi.js";function j(e){return null!=e?.start&&null!=e.end}const F=F=>{const R={...F,defaultValue:(()=>{if(F?.defaultValue&&F.defaultValue?.start&&F.defaultValue?.end)return{start:f(F.defaultValue.start),end:f(F.defaultValue.end)}})(),value:(()=>{if(F?.value&&F.value?.start&&F.value?.end)return{start:f(F.value.start),end:f(F.value.end)}})(),onChange:e=>{if(!F.onChange||!e?.start||!e?.end)return;const a={start:e.start.toDate("UTC").toISOString(),end:e.end.toDate("UTC").toISOString()};return F.onChange(a)},minValue:f(F?.minValue),maxValue:f(F?.maxValue),isDateUnavailable:e=>!!F?.isDateUnavailable&&F.isDateUnavailable(e.toDate("UTC").toISOString())},S=function(e){let a=h(e),[n,l]=D(e.value,e.defaultValue||null,e.onChange),[i]=t(n),[s,o]=t(()=>n||{start:null,end:null});null==n&&s.start&&s.end&&(s={start:null,end:null},o(s));let d=n||s,u=e=>{d=e||{start:null,end:null},o(d),j(d)?l(d):l(null)},m=d?.start||d?.end||e.placeholderValue||null,[c,p]=g(m,e.granularity),f="hour"===c||"minute"===c||"second"===c,P=e.shouldCloseOnSelect??!0,[V,F]=t(null),[R,S]=t(null);d&&j(d)&&(V=d,"hour"in d.start&&(R=d));let k=(e,a)=>{u({start:"timeZone"in a.start?a.start.set(T(e.start)):Z(e.start,a.start),end:"timeZone"in a.end?a.end.set(T(e.end)):Z(e.end,a.end)}),F(null),S(null),$.commitValidation()},x=t=>{let r="function"==typeof P?P():P;f?j(t)&&(r||R?.start&&R?.end)?k(t,{start:R?.start||C(e.placeholderValue),end:R?.end||C(e.placeholderValue)}):F(t):j(t)?(u(t),$.commitValidation()):F(t),r&&a.setOpen(!1)},O=e=>{j(V)&&j(e)?k(V,e):S(e)},N="gregory"===d?.start?.calendar.identifier&&"BC"===d.start.era||"gregory"===d?.end?.calendar.identifier&&"BC"===d.end.era,U=r(()=>({granularity:c,timeZone:p,hideTimeZone:e.hideTimeZone,hourCycle:e.hourCycle,shouldForceLeadingZeros:e.shouldForceLeadingZeros,showEra:N}),[c,e.hourCycle,e.shouldForceLeadingZeros,p,e.hideTimeZone,N]),{minValue:_,maxValue:w,isDateUnavailable:B}=e,L=r(()=>v(d,_,w,B,U),[d,_,w,B,U]),$=b({...e,value:n,name:r(()=>[e.startName,e.endName].filter(e=>null!=e),[e.startName,e.endName]),builtinValidation:L}),E=$.displayValidation.isInvalid,q=e.validationState||(E?"invalid":null);return{...$,value:d,defaultValue:e.defaultValue??i,setValue:u,dateRange:V,timeRange:R,granularity:c,hasTime:f,setDate(e,a){x("start"===e?{start:a,end:V?.end??null}:{start:V?.start??null,end:a})},setTime(e,a){O("start"===e?{start:a,end:R?.end??null}:{start:R?.start??null,end:a})},setDateTime(e,a){u("start"===e?{start:a,end:d?.end??null}:{start:d?.start??null,end:a})},setDateRange:x,setTimeRange:O,...a,setOpen(t){t||d?.start&&d?.end||!j(V)||!f||k(V,{start:R?.start||C(e.placeholderValue),end:R?.end||C(e.placeholderValue)}),a.setOpen(t)},validationState:q,isInvalid:E,formatValue(a,t){if(!d||!d.start||!d.end)return null;let r,n="timeZone"in d.start?d.start.timeZone:void 0,l=e.granularity||(d.start&&"minute"in d.start?"minute":"day"),i="timeZone"in d.end?d.end.timeZone:void 0,s=e.granularity||(d.end&&"minute"in d.end?"minute":"day"),o=y(t,{granularity:l,timeZone:n,hideTimeZone:e.hideTimeZone,hourCycle:e.hourCycle,showEra:"gregory"===d.start.calendar.identifier&&"BC"===d.start.era||"gregory"===d.end.calendar.identifier&&"BC"===d.end.era}),u=d.start.toDate(n||"UTC"),m=d.end.toDate(i||"UTC"),c=new I(a,o);if(n===i&&l===s&&0!==d.start.compare(d.end)){try{let e=c.formatRangeToParts(u,m),a=-1;for(let n=0;n<e.length;n++){let t=e[n];if("shared"===t.source&&"literal"===t.type)a=n;else if("endRange"===t.source)break}let t="",r="";for(let n=0;n<e.length;n++)n<a?t+=e[n].value:n>a&&(r+=e[n].value);return{start:t,end:r}}catch{}r=c}else{let n=y(t,{granularity:s,timeZone:i,hideTimeZone:e.hideTimeZone,hourCycle:e.hourCycle});r=new I(a,n)}return{start:c.format(u),end:r.format(m)}},getDateFormatter(e,a){let t={...U,...a},r=y({},t);return new I(e,r)}}}(R),k=n(null),x=l(R,S,k),O={granularity:"day",hideTimeZone:!0},N={...F.startDateFieldProps,...x.startFieldProps,...O},U={...F.endDateFieldProps,...x.endFieldProps,...O},{"aria-labelledby":_,...w}=x.groupProps,B={...x.buttonProps,isInvalid:S.isInvalid,styleVariant:S.isInvalid?"critical":S.isOpen?"accent":"neutral",onClick:()=>S.isOpen?S.close():S.open()},L={...F.calendarProps,...x.calendarProps};/* @__PURE__ */
 return e("div",{className:P.datePicker,ref:k,children:/* @__PURE__ */e(V,{className:P.datePicker__field,as:i,label:F.label,description:F.description,errorMessage:F.errorMessage,isDisabled:F.isDisabled,isRequired:F.isRequired,isInvalid:x.isInvalid,columns:F.columns,maxWidthByChars:F.maxWidthByChars,errorPlacement:F.errorPlacement,optionalTranslation:F.optionalTranslation,errorId:F.errorId,errorPrefix:F.errorPrefix,visuallyHiddenLabel:F.visuallyHiddenLabel,children:/* @__PURE__ */a(c.Provider,{value:{isInDateRangePicker:!0},children:[
 /* @__PURE__ */a("div",{...w,className:`${u.dateInput__wrapper} ${u["dateInput__wrapper--has-background"]}`,children:[
 /* @__PURE__ */e(m,{...N}),
-/* @__PURE__ */e(v,{foregroundColor:F.isDisabled?"disabledPrimary":"secondary",children:"–"}),
-/* @__PURE__ */e(m,{...U,children:/* @__PURE__ */e(m.EndSlot,{children:/* @__PURE__ */e(s,{...B,size:"sm",emphasis:"tertiary",iconProps:{iconName:"calendar-days",iconPrefix:"fas"}})})})]}),R.isOpen&&/* @__PURE__ */e(d,{state:R,triggerRef:k,placement:"bottom start",hasArrow:!1,shouldFlip:!0,children:/* @__PURE__ */e("div",{role:"dialog",className:P.datePicker__dialog,...x.dialogProps,children:/* @__PURE__ */e(o,{...L})})})]})})})};export{F as DateRangePicker,F as default};
+/* @__PURE__ */e(p,{foregroundColor:F.isDisabled?"disabledPrimary":"secondary",children:"–"}),
+/* @__PURE__ */e(m,{...U,children:/* @__PURE__ */e(m.EndSlot,{children:/* @__PURE__ */e(d,{...B,size:"sm",emphasis:"tertiary",iconProps:{iconName:"calendar-days",iconPrefix:"fas"}})})})]}),S.isOpen&&/* @__PURE__ */e(o,{state:S,triggerRef:k,placement:"bottom start",hasArrow:!1,shouldFlip:!0,children:/* @__PURE__ */e("div",{role:"dialog",className:P.datePicker__dialog,...x.dialogProps,children:/* @__PURE__ */e(s,{...L})})})]})})})};export{F as DateRangePicker,F as default};
 //# sourceMappingURL=DateRangePicker.js.map