@chassis-ui/react 0.5.0 → 0.6.0

package/dist/chunks/datepicker-DuYmXiSe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker-DuYmXiSe.js","names":["withoutSlotIds","toAriaPlacement","resolveDataPlacement","useFloatingOverlay","useFormField","useFormReset","useOpenStateProps","useRequiredValueInput","Portal","renderFormField","DEFAULT_CALENDAR_LABELS","CalendarLabelsProvider","Calendar","useCalendarLabels","mergeIsDateUnavailable","RangeCalendar","validationClassName","focusFirstSegment","DateField","React","classNames","useOverlayPlacement","useOverlay","state","triggerRef","element","overlayRef","positionProps","resolvedPlacement","useOverlayPosition","overlayPositionStyle","overlayDismissProps","mergeProps","overlayProps","CalendarToggleButton","forwardRef","internalRef","useRef","ref","useForkedRef","forwardedRef","toggleProps","useButton","buttonProps","ClearButton","labels","renderDatePickerShell","groupProps","size","invalid","valid","className","groupRef","fieldClassName","field","clearButton","toggleButton","portalContainer","placementAttr","isOpen","overlayStyle","FocusScope","calendar","DatePicker","props","DatePickerMultiple","DatePickerSingle","_selectionMode","validProp","rest","combinedIsDateUnavailable","useMemo","unavailableDates","isDateUnavailable","forkedGroupRef","calendarRef","inputRef","toggleButtonRef","requiredInputProps","pickerProps","disabled","missing","required","useDatePickerState","value","defaultValue","showInvalid","showValid","groupId","useDatePicker","describedBy","labelledBy","group","descriptionProps","errorMessageProps","domDialogProps","useDialog","dialogProps","triggerProps","calendarProps","fieldProps","name","feedbackId","helpId","labelId","isControlled","uncontrolledValues","setUncontrolledValues","useState","values","setValues","next","onChange","useOverlayTriggerState","mergedLabels","MultiDateField","date","formatter","useDateFormatter","a","b","toCalendarDate","DateRangePicker","endFieldRef","endInputRef","startInputRef","requiredOptions","start","end","useDateRangePickerState","useDateRangePicker","startFieldProps","endFieldProps"],"sources":["../../src/hooks/useOverlayPlacement.ts","../../src/components/datepicker/CalendarToggleButton.tsx","../../src/components/datepicker/ClearButton.tsx","../../src/components/datepicker/renderDatePickerShell.tsx","../../src/components/datepicker/DatePicker.tsx","../../src/components/datepicker/DateRangePicker.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, RefObject } from 'react'\nimport { mergeProps, useOverlay, useOverlayPosition } from 'react-aria'\nimport { OverlayTriggerState } from 'react-stately'\n\nimport { resolveDataPlacement, toAriaPlacement } from '../utils/overlayPlacement'\nimport { useFloatingOverlay } from './useFloatingOverlay'\n\ninterface UseOverlayPlacementProps {\n  overlayRef: RefObject<HTMLElement | null>\n  state: OverlayTriggerState\n  triggerRef: RefObject<HTMLElement | null>\n}\n\ninterface UseOverlayPlacementResult {\n  overlayStyle: CSSProperties\n  placementAttr: string\n  // Re-typed as plain HTML attributes for the same `rollup-plugin-dts` portability reason as\n  // before (see git history) — react-aria's own return type pulls in a `FocusableElement`\n  // reference the bundled `.d.ts` can't always resolve a portable name for.\n  overlayDismissProps: HTMLAttributes<HTMLElement>\n  // Where the calendar is portaled: `document.body`, or the open `<dialog>` the trigger is in.\n  // `null` while an open calendar's container isn't known yet.\n  portalContainer: Element | null\n}\n\n// Shared by `DatePicker` and `DateRangePicker` — both position their calendar overlay the same\n// way (`bottom-start`, 2px offset, closing on Escape, on any click outside it, or when focus leaves\n// the trigger group). Lives in `hooks/` rather than `components/datepicker/` like every other hook\n// in this library, regardless of how many components use it — see `useFormField` for the same\n// treatment despite having many more callers.\n//\n// Built directly on `useOverlay` + `useOverlayPosition` rather than the higher-level `usePopover`\n// combo hook. `usePopover` computes its own internal `onClose` for `useOverlayPosition` from\n// `isNonModal` (`isNonModal && !isSubmenu ? state.close : null`, neither overridable by a caller),\n// and `isNonModal: true` — needed so the calendar doesn't lock page scroll or aria-hide the rest of\n// the page, since it was never meant to be modal — unconditionally arms `useOverlayPosition`'s\n// close-on-any-window-scroll listener (`useCloseOnScroll`, keyed off `onClose !== null`) as a side\n// effect. That's wrong here: the calendar should reposition with its trigger when the page scrolls,\n// not disappear. Calling the two lower-level hooks directly, with `onClose: null` passed to\n// `useOverlayPosition` alone, gets the positioning and Escape/blur dismissal this calendar needs\n// without arming that listener — the same fix already applied to `Autocomplete`/`Combobox`/\n// `Menu`/`MenuSubmenu`/`Popover`, none of which use `usePopover` either, all for this same reason.\nexport const useOverlayPlacement = ({\n  overlayRef,\n  state,\n  triggerRef\n}: UseOverlayPlacementProps): UseOverlayPlacementResult => {\n  // The trigger's own toggle button lives inside `triggerRef`, not `overlayRef` — without this,\n  // focus moving there when the button is pressed would count as an \"outside\" interaction and\n  // close the overlay, which the button's own `onPress` then immediately reopens on click.\n  const shouldCloseOnInteractOutside = (element: Element) => !triggerRef.current?.contains(element)\n\n  // Escape key + outside-interaction dismissal — the two pieces of `usePopover`'s bundled behavior\n  // this calendar still needs. `isDismissable: true` — *not* `usePopover`'s own default of `false`\n  // whenever `isNonModal` is true — is required to actually get outside-*click* dismissal:\n  // `useOverlay`'s `shouldCloseOnBlur` only closes on a focus-based blur, and explicitly bails when\n  // the click target isn't focusable (`relatedTarget` is `null`, i.e. focus lands on `document.body`,\n  // as it does for an ordinary click on plain page content) — its own source comments that this case\n  // is intentionally left to the separate pointerdown-outside listener `useOverlay` only wires up\n  // when `isDismissable` is true. Leaving it at the `usePopover`-matching default therefore silently\n  // drops the single most common way users try to dismiss a popover.\n  const { overlayProps } = useOverlay(\n    {\n      isDismissable: true,\n      isOpen: state.isOpen,\n      onClose: state.close,\n      shouldCloseOnBlur: true,\n      shouldCloseOnInteractOutside\n    },\n    overlayRef\n  )\n\n  const { overlayProps: positionProps, placement: resolvedPlacement } = useOverlayPosition({\n    isOpen: state.isOpen,\n    offset: 2,\n    // Opts out of `useOverlayPosition`'s own close-on-any-window-scroll listener — see this hook's\n    // own comment above. Leaving this `undefined` would NOT disable it: `useCloseOnScroll` only\n    // early-returns on `onClose === null`, not merely falsy.\n    onClose: null,\n    overlayRef,\n    placement: toAriaPlacement('bottom-start'),\n    targetRef: triggerRef\n  })\n\n  const { style: overlayPositionStyle, ...overlayDismissProps } = mergeProps(\n    overlayProps,\n    positionProps\n  )\n  const overlayStyle: CSSProperties = {\n    position: overlayPositionStyle?.position as CSSProperties['position'],\n    top: overlayPositionStyle?.top,\n    left: overlayPositionStyle?.left\n  }\n  const placementAttr = resolveDataPlacement('bottom-start', resolvedPlacement)\n\n  // Portaled like `Combobox`'s panel: rendered in place, the calendar was clipped by any ancestor\n  // that scrolls (`overflow: auto`, a `table-responsive`, a scrolling card or dialog body), and\n  // that ancestor scrolled instead of the calendar covering what is under it.\n  const portalContainer = useFloatingOverlay({\n    close: state.close,\n    isOpen: state.isOpen,\n    triggerRef\n  })\n\n  return { overlayStyle, placementAttr, overlayDismissProps, portalContainer }\n}\n","import React, { forwardRef, useRef } from 'react'\nimport { AriaButtonProps, useButton } from 'react-aria'\nimport { OverlayTriggerState } from 'react-stately'\n\nimport { useForkedRef } from '../../hooks'\n\ninterface CalendarToggleButtonProps {\n  buttonProps: AriaButtonProps\n  state: OverlayTriggerState\n}\n\n// Shared by `DatePicker` and `DateRangePicker` — both trigger their calendar overlay with an\n// identical calendar-icon button. `buttonProps.onPress` (from that caller's own `useDatePicker`/\n// `useDateRangePicker`) only ever opens the overlay (matches upstream react-aria), so re-clicking\n// the button while it's already open would otherwise do nothing — overridden here to actually\n// toggle. Forwards its ref so callers can move focus onto it explicitly — e.g. `ClearButton` sits\n// immediately before it and unmounts itself on press, so focus needs somewhere to land.\nexport const CalendarToggleButton = forwardRef<HTMLButtonElement, CalendarToggleButtonProps>(\n  ({ buttonProps, state }, forwardedRef) => {\n    const internalRef = useRef<HTMLButtonElement>(null)\n    const ref = useForkedRef(internalRef, forwardedRef)\n    const { buttonProps: toggleProps } = useButton(\n      { ...buttonProps, onPress: () => state.toggle() },\n      internalRef\n    )\n\n    return (\n      <button {...toggleProps} className=\"input-adorn\" ref={ref} type=\"button\">\n        <svg\n          fill=\"none\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          width=\"16\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <rect\n            height=\"12\"\n            rx=\"1.5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.25\"\n            width=\"13\"\n            x=\"1.5\"\n            y=\"3\"\n          />\n          <path d=\"M1.5 6.5h13\" stroke=\"currentColor\" strokeWidth=\"1.25\" />\n          <path\n            d=\"M4.5 1.5v3M11.5 1.5v3\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"1.25\"\n          />\n        </svg>\n      </button>\n    )\n  }\n)\n\nCalendarToggleButton.displayName = 'CalendarToggleButton'\n","import React, { useRef } from 'react'\nimport { useButton } from 'react-aria'\n\nimport { useCalendarLabels } from '../calendar/labels'\n\ninterface ClearButtonProps {\n  isDisabled?: boolean\n  onPress: () => void\n}\n\n// Shared by `DatePicker` and `DateRangePicker` — a trailing \"×\" adornment that resets the\n// current selection to empty. Rendered only while there's something to clear (see each caller's\n// own conditional). `useButton` for the same reason `CalendarToggleButton` uses it: proper\n// press/keyboard semantics consistent with the rest of this library, rather than a raw `onClick`.\nexport const ClearButton = ({ isDisabled, onPress }: ClearButtonProps) => {\n  const ref = useRef<HTMLButtonElement>(null)\n  const labels = useCalendarLabels()\n  const { buttonProps } = useButton({ 'aria-label': labels.clear, isDisabled, onPress }, ref)\n\n  return (\n    <button {...buttonProps} className=\"input-adorn\" ref={ref} type=\"button\">\n      <svg\n        fill=\"none\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        width=\"16\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M4 4l8 8M12 4l-8 8\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeWidth=\"1.25\"\n        />\n      </svg>\n    </button>\n  )\n}\n","import React, { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react'\nimport classNames from 'classnames'\nimport { FocusScope } from 'react-aria'\n\nimport { validationClassName } from '../../utils/validationClassName'\nimport { Portal } from '../portal/Portal'\n\nexport interface RenderDatePickerShellOptions {\n  /**\n   * The fully-built calendar element (`Calendar`/`RangeCalendar`, with its own dialog role/ref\n   * already applied) — only ever mounted while `isOpen`, inside a `FocusScope`.\n   */\n  calendar: ReactNode\n  className?: string\n  /**\n   * The `ClearButton` element, or `null`/`undefined` when there's nothing to clear.\n   */\n  clearButton?: ReactNode\n  disabled?: boolean\n  /**\n   * The field itself — a single segmented `DateField`, a read-only `MultiDateField`, or a pair\n   * of `DateField`s either side of a separator.\n   */\n  field: ReactNode\n  /**\n   * className for the wrapper directly around `field` — differs slightly by variant\n   * (`DateRangePicker`'s two side-by-side fields need `d-flex`, the single-field variants don't).\n   */\n  fieldClassName: string\n  /**\n   * Already-merged props (react-aria's `groupProps`/`mergeProps(rest)`, plus\n   * `aria-describedby`/`aria-labelledby` and any variant-specific ARIA attributes) for the\n   * `.form-input` wrapper — assembling this is the caller's job since react-aria only returns a\n   * `groupProps` shape for the single-select hooks, not the manually-assembled multi-select case.\n   */\n  groupProps: HTMLAttributes<HTMLDivElement>\n  groupRef: Ref<HTMLDivElement>\n  invalid?: boolean\n  isOpen: boolean\n  overlayDismissProps: HTMLAttributes<HTMLElement>\n  overlayRef: Ref<HTMLDivElement>\n  overlayStyle?: CSSProperties\n  placementAttr?: string\n  /**\n   * Where the overlay is portaled (`useOverlayPlacement`'s `portalContainer`). The calendar mounts\n   * only once it is known, so it mounts once, in the open `<dialog>` the picker is in if any.\n   */\n  portalContainer: Element | null\n  size?: 'sm' | 'lg'\n  toggleButton: ReactNode\n  valid?: boolean\n}\n\n// Shared `.form-input` adorn-wrapper + popover-overlay shell for `DatePicker`'s two internal\n// variants (single/multiple selection) and `DateRangePicker` — otherwise duplicated near-verbatim\n// three times. What's left in each caller is only the genuinely variant-specific pieces: which\n// field(s) render inside the wrapper, which calendar (`Calendar`/`RangeCalendar`, single- vs.\n// range-typed props) renders inside the overlay, and how each variant's own `groupProps`/hidden\n// inputs get built.\nexport const renderDatePickerShell = ({\n  calendar,\n  className,\n  clearButton,\n  disabled,\n  field,\n  fieldClassName,\n  groupProps,\n  groupRef,\n  invalid,\n  isOpen,\n  overlayDismissProps,\n  overlayRef,\n  overlayStyle,\n  placementAttr,\n  portalContainer,\n  size,\n  toggleButton,\n  valid\n}: RenderDatePickerShellOptions): ReactNode => (\n  <>\n    <div\n      {...groupProps}\n      className={classNames(\n        'form-input',\n        size,\n        { disabled },\n        validationClassName(invalid, valid),\n        className\n      )}\n      ref={groupRef}\n    >\n      <div className={fieldClassName}>{field}</div>\n      {clearButton}\n      {toggleButton}\n    </div>\n    <Portal container={portalContainer}>\n      <div\n        className=\"datepicker\"\n        data-cx-placement={placementAttr}\n        hidden={!isOpen}\n        ref={overlayRef}\n        {...overlayDismissProps}\n        style={overlayStyle}\n      >\n        {isOpen && portalContainer && (\n          <FocusScope contain restoreFocus>\n            {calendar}\n          </FocusScope>\n        )}\n      </div>\n    </Portal>\n  </>\n)\n","import React, { forwardRef, HTMLAttributes, ReactNode, useMemo, useRef, useState } from 'react'\nimport { AriaButtonProps, mergeProps, useDateFormatter, useDatePicker, useDialog } from 'react-aria'\nimport {\n  DateValue,\n  OverlayTriggerState,\n  useDatePickerState,\n  useOverlayTriggerState\n} from 'react-stately'\nimport { toCalendarDate } from '@internationalized/date'\n\nimport {\n  useForkedRef,\n  useFormField,\n  useOpenStateProps,\n  useOverlayPlacement,\n  useFormReset,\n  useRequiredValueInput\n} from '../../hooks'\nimport { mergeIsDateUnavailable } from '../../utils/mergeIsDateUnavailable'\nimport { withoutSlotIds } from '../../utils/idRefs'\nimport { renderFormField } from '../form-field/renderFormField'\nimport { Calendar } from '../calendar/Calendar'\nimport { CalendarToggleButton } from './CalendarToggleButton'\nimport { ClearButton } from './ClearButton'\nimport { DateField, focusFirstSegment } from './DateField'\nimport { renderDatePickerShell } from './renderDatePickerShell'\nimport './DatePicker.scss'\nimport { CalendarLabels, CalendarLabelsProvider, DEFAULT_CALENDAR_LABELS } from '../calendar/labels'\n\ninterface DatePickerBaseProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * An accessible label for the date picker, used when there's no visible `<label>`.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible `<label>` element for the date picker.\n   */\n  'aria-labelledby'?: string\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Whether the calendar popover is open by default (uncontrolled).\n   *\n   * @deprecated Use `defaultVisible`.\n   */\n  defaultOpen?: boolean\n  /**\n   * Whether the calendar popover is open when the date picker first renders. Use it instead of\n   * `visible` when nothing outside needs to control the popover.\n   *\n   * @default false\n   */\n  defaultVisible?: boolean\n  /**\n   * Prevents the date picker from being focused or interacted with.\n   */\n  disabled?: boolean\n  /**\n   * The day that starts the week in the calendar overlay, overriding the default set by the\n   * active locale.\n   *\n   * @default 'mon'\n   */\n  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'\n  /**\n   * A description for the field, rendered below the date picker.\n   */\n  help?: ReactNode\n  /**\n   * `id` forwarded to the field's grouping element — useful for pairing with a `<label for>`.\n   */\n  id?: string\n  /**\n   * Set component validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the date picker when `invalid` is set, and\n   * after a submit that an empty `required` date picker held back.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * Callback that is called for each date in the calendar. If it returns `true`, that date is\n   * shown but cannot be selected.\n   */\n  isDateUnavailable?: (date: DateValue) => boolean\n  /**\n   * Overrides for the strings this component and its calendar render themselves rather than\n   * getting from the active locale — the calendar trigger, the clear adornment, and the calendar's\n   * own year-view arrows/announcements. Date segment order, month and weekday names all follow\n   * `I18nProvider`'s locale via react-aria and need no override. Merged over the English defaults,\n   * so passing one key leaves the rest alone.\n   */\n  labels?: Partial<CalendarLabels>\n  /**\n   * Whether the calendar popover is open (controlled).\n   *\n   * @deprecated Use `visible`.\n   */\n  isOpen?: boolean\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with the field group.\n   */\n  label?: ReactNode\n  /**\n   * The maximum allowed date that a user may select.\n   */\n  maxValue?: DateValue | null\n  /**\n   * The minimum allowed date that a user may select.\n   */\n  minValue?: DateValue | null\n  /**\n   * `name` of an auto-created hidden input, kept in sync with the selection, for native form\n   * submission — one input when `selectionMode` is `'single'`, one per selected date when it's\n   * `'multiple'` (same `name` on each, which browsers serialize as multiple form values). Omit to\n   * skip creating any. The value is the date's `toString()`: `2026-03-15`, with a time\n   * `2026-03-15T09:30:00`, and with a time zone `2026-03-15T09:30:00+09:00[Asia/Tokyo]`, which\n   * `parseZonedDateTime` reads back.\n   */\n  name?: string\n  /**\n   * Callback fired when the calendar popover's open state changes.\n   *\n   * @deprecated Use `onVisibleChange`.\n   */\n  onOpenChange?: (isOpen: boolean) => void\n  /**\n   * Callback fired when the calendar popover asks to open or close: the calendar button, a\n   * completed selection, the Escape key or a click outside. Receives the state it asks for.\n   * With `visible` set, the popover changes only when `visible` does.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * Toggle the required state for the component. An empty required date picker holds its form\n   * back from submitting, takes focus and shows as invalid, with `invalidFeedback`, until it has\n   * a value or the form is reset. `invalid`, once set, and `valid` decide how it looks instead.\n   * With `selectionMode=\"multiple\"` it asks for one date at least, and the calendar button takes\n   * the focus.\n   */\n  required?: boolean\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to\n   * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed\n   * with `isDateUnavailable` when both are given — a date unavailable by either is unavailable.\n   * Applies to both the calendar overlay and typing a date directly into the field.\n   */\n  unavailableDates?: string[]\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the date picker when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * Whether the calendar popover is open. Setting it makes the popover controlled: it opens and\n   * closes only when this changes, so pair it with `onVisibleChange`.\n   */\n  visible?: boolean\n  /**\n   * Number of months to display side by side in the calendar overlay.\n   *\n   * @default 1\n   */\n  visibleMonths?: number\n}\n\nexport interface DatePickerSingleProps extends DatePickerBaseProps {\n  /**\n   * The initial selected date (uncontrolled).\n   */\n  defaultValue?: DateValue | null\n  /**\n   * The smallest unit the field shows and edits. `'hour'`, `'minute'` and `'second'` add a time\n   * to the date: the value is then a `CalendarDateTime`, or a `ZonedDateTime` when `value`,\n   * `defaultValue` or `placeholderValue` is one, and a value or placeholder given must carry a\n   * time. Picking a day in the calendar keeps the time. A day picked in an empty field takes the\n   * time, and zone, of `defaultValue`, else `placeholderValue`, else midnight with no zone: a\n   * controlled zoned `value`, once cleared, needs a zoned `placeholderValue` to stay zoned.\n   *\n   * @default 'day', or 'minute' for a value with a time\n   */\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  /**\n   * Hide the time zone of a `ZonedDateTime` value.\n   */\n  hideTimeZone?: boolean\n  /**\n   * Show 12 or 24 hours. Defaults to the locale's.\n   */\n  hourCycle?: 12 | 24\n  /**\n   * The date the segments start from while the field is empty, such as\n   * `new CalendarDateTime(2026, 1, 1, 9)`, and the month the calendar opens on. With no\n   * `defaultValue`, its time is the one a day picked in the calendar gets, and its type the type\n   * of value `onChange` receives: a `ZonedDateTime` gives zoned values. With a time\n   * `granularity` it must carry a time.\n   */\n  placeholderValue?: DateValue\n  /**\n   * Show a leading zero on the day, month and hour, as `03/05` rather than `3/5`, whatever the\n   * locale does.\n   */\n  shouldForceLeadingZeros?: boolean\n  /**\n   * Callback fired when the selected date changes. With a time (`granularity`), it receives a\n   * `CalendarDateTime` or `ZonedDateTime`.\n   */\n  onChange?: (value: DateValue | null) => void\n  /**\n   * Whether a single date or multiple, independently toggled dates can be selected. Multiple\n   * selection replaces the editable segmented field with a read-only, comma-separated list of\n   * the selected dates — a segmented day/month/year field has no way to represent more than one\n   * date.\n   *\n   * @default 'single'\n   */\n  selectionMode?: 'single'\n  /**\n   * The selected date (controlled).\n   */\n  value?: DateValue | null\n}\n\nexport interface DatePickerMultipleProps extends DatePickerBaseProps {\n  /**\n   * The initial selected dates (uncontrolled).\n   */\n  defaultValue?: DateValue[] | null\n  /**\n   * Callback fired when the set of selected dates changes.\n   */\n  onChange?: (value: DateValue[]) => void\n  /**\n   * Whether a single date or multiple, independently toggled dates can be selected. Multiple\n   * selection replaces the editable segmented field with a read-only, comma-separated list of\n   * the selected dates — a segmented day/month/year field has no way to represent more than one\n   * date.\n   *\n   * @default 'single'\n   */\n  selectionMode: 'multiple'\n  /**\n   * The selected dates (controlled).\n   */\n  value?: DateValue[] | null\n}\n\nexport type DatePickerProps = DatePickerSingleProps | DatePickerMultipleProps\n\n// Dispatches on `selectionMode` between two internal implementations that share little beyond\n// the field/overlay shell and `useFormField` — `selectionMode: 'multiple'` has no\n// `useDatePickerState`/`useDatePicker` equivalent to build on (see `DatePickerMultiple`'s own\n// comment), so bolting an array value onto the single-value hook pair isn't an option.\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {\n  if (props.selectionMode === 'multiple') return <DatePickerMultiple {...props} ref={ref} />\n  return <DatePickerSingle {...props} ref={ref} />\n})\n\nDatePicker.displayName = 'DatePicker'\n\nconst DatePickerSingle = forwardRef<HTMLDivElement, DatePickerSingleProps>(\n  (\n    {\n      className,\n      defaultOpen,\n      defaultValue,\n      defaultVisible,\n      disabled,\n      firstDayOfWeek,\n      granularity,\n      help,\n      hideTimeZone,\n      hourCycle,\n      id,\n      invalid,\n      invalidFeedback,\n      isDateUnavailable,\n      isOpen,\n      label,\n      labels,\n      maxValue,\n      minValue,\n      name,\n      onChange,\n      onOpenChange,\n      onVisibleChange,\n      placeholderValue,\n      required,\n      selectionMode: _selectionMode,\n      shouldForceLeadingZeros,\n      size,\n      unavailableDates,\n      valid: validProp,\n      validFeedback,\n      value,\n      visible,\n      visibleMonths,\n      ...rest\n    }: DatePickerSingleProps,\n    ref\n  ) => {\n    const combinedIsDateUnavailable = useMemo(\n      () => mergeIsDateUnavailable(unavailableDates, isDateUnavailable),\n      [unavailableDates, isDateUnavailable]\n    )\n\n    const groupRef = useRef<HTMLDivElement>(null)\n    const forkedGroupRef = useForkedRef(ref, groupRef)\n    const calendarRef = useRef<HTMLDivElement>(null)\n    const inputRef = useRef<HTMLInputElement>(null)\n    const overlayRef = useRef<HTMLDivElement>(null)\n    const toggleButtonRef = useRef<HTMLButtonElement>(null)\n\n    // `required` has to reach an input a form validates (FORMS.md, gotcha 9). react-aria writes\n    // `aria-required` on the segments, which aren't form controls, and the input that carries the\n    // value is `type=\"hidden\"`, which a form doesn't validate. As in `TimeField`, a required\n    // picker's input is a text input that isn't displayed, and `missing` shows the picker as\n    // invalid from a submit that input held back until it has a value. The first segment takes\n    // the focus a browser would give an input it displays. A disabled input isn't validated; the\n    // picker has no read-only state to leave out.\n    const {\n      inputProps: requiredInputProps,\n      missing,\n      valid\n    } = useRequiredValueInput(inputRef, {\n      focus: () => focusFirstSegment(groupRef.current),\n      invalid,\n      required,\n      valid: validProp\n    })\n\n    // What both react-stately's state and react-aria's hook read: the hook hands the time props\n    // on to the field's segments.\n    const pickerProps = {\n      defaultValue,\n      granularity,\n      hideTimeZone,\n      hourCycle,\n      isDateUnavailable: combinedIsDateUnavailable,\n      isDisabled: disabled,\n      // `false` would override the state's own check of the range and unavailable dates:\n      // react-stately takes a defined `isInvalid` as the whole validation state.\n      isInvalid: invalid || missing || undefined,\n      isRequired: required,\n      maxValue,\n      minValue,\n      onChange,\n      placeholderValue,\n      shouldForceLeadingZeros,\n      value\n    }\n\n    const state = useDatePickerState({\n      ...useOpenStateProps(\n        { defaultOpen, defaultVisible, isOpen, onOpenChange, onVisibleChange, visible },\n        'DatePicker'\n      ),\n      ...pickerProps\n    })\n    // A reset of the form puts the date back to its first value, controlled or not, as the text\n    // fields go back to theirs: react-stately's picker state has no reset of its own.\n    useFormReset(groupRef, value !== undefined ? value : (defaultValue ?? null), state.setValue)\n    // A value outside `minValue`/`maxValue`, or on an unavailable date, is invalid too, shown as\n    // `invalid` is, as `TimeField` shows it. So is a `missing` one, which the state was given.\n    const showInvalid = invalid || state.displayValidation.isInvalid\n    const showValid = valid && !showInvalid\n\n    const {\n      describedBy,\n      feedbackId,\n      helpId,\n      inputId: groupId,\n      labelId,\n      labelledBy\n    } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid: showInvalid,\n      invalidFeedback,\n      label,\n      valid: showValid,\n      validFeedback\n    })\n\n    const {\n      buttonProps,\n      calendarProps,\n      descriptionProps,\n      dialogProps,\n      errorMessageProps,\n      fieldProps,\n      groupProps\n    } = useDatePicker(\n      {\n        ...pickerProps,\n        // Given to the hook, so the help and feedback describe the segments, which take focus,\n        // and the calendar button, not only the group around them.\n        'aria-describedby': describedBy,\n        'aria-label': rest['aria-label'],\n        'aria-labelledby': labelledBy,\n        id: groupId\n      },\n      state,\n      groupRef\n    )\n    // react-aria's `aria-describedby` holds its description of the selected date, added once\n    // mounted, and the help and feedback given to it; the slot ids come out (FORMS.md, gotcha 6).\n    // It's set again after the spread, where the caller's own value would replace it (gotcha 4).\n    const group = withoutSlotIds(groupProps, descriptionProps, errorMessageProps)\n\n    const { overlayStyle, placementAttr, overlayDismissProps, portalContainer } =\n      useOverlayPlacement({\n        overlayRef,\n        state,\n        triggerRef: groupRef\n      })\n\n    // `Calendar` is dialog-agnostic by design (see its own comment) — applying `role=\"dialog\"`\n    // etc. is this component's concern, layered on via the generic HTML-attribute passthrough\n    // `Calendar` merges onto its root.\n    const { dialogProps: domDialogProps } = useDialog(dialogProps, calendarRef)\n\n    // react-aria names the trigger in the active locale; `labels.calendar` replaces that name.\n    const triggerProps = labels?.calendar\n      ? { ...buttonProps, 'aria-label': labels.calendar }\n      : buttonProps\n\n    return (\n      <CalendarLabelsProvider labels={labels}>\n        {renderFormField({\n          children: (\n            <>\n              {renderDatePickerShell({\n                calendar: (\n                  <Calendar\n                    {...domDialogProps}\n                    autoFocus\n                    defaultFocusedValue={calendarProps.defaultFocusedValue}\n                    disabled={disabled}\n                    firstDayOfWeek={firstDayOfWeek}\n                    isDateUnavailable={combinedIsDateUnavailable}\n                    maxValue={maxValue}\n                    minValue={minValue}\n                    onChange={calendarProps.onChange}\n                    ref={calendarRef}\n                    value={calendarProps.value}\n                    visibleMonths={visibleMonths}\n                  />\n                ),\n                className,\n                clearButton: state.value && !disabled && (\n                  <ClearButton\n                    onPress={() => {\n                      state.setValue(null)\n                      // `ClearButton` unmounts itself once `state.value` clears — without this, focus\n                      // would otherwise drop to `document.body` (same failure mode fixed for the\n                      // calendar's own month/year view switch — see `CalendarMonthYearPicker`'s comment).\n                      toggleButtonRef.current?.focus()\n                    }}\n                  />\n                ),\n                disabled,\n                field: (\n                  <DateField\n                    fieldProps={withoutSlotIds(fieldProps, descriptionProps, errorMessageProps)}\n                  />\n                ),\n                fieldClassName: 'w-100 overflow-x-scroll',\n                groupProps: {\n                  ...mergeProps(group, rest),\n                  'aria-describedby': group['aria-describedby'],\n                  'aria-labelledby': labelledBy\n                },\n                groupRef: forkedGroupRef,\n                invalid: showInvalid,\n                isOpen: state.isOpen,\n                overlayDismissProps,\n                overlayRef,\n                overlayStyle,\n                placementAttr,\n                portalContainer,\n                size,\n                toggleButton: (\n                  <CalendarToggleButton\n                    buttonProps={withoutSlotIds(triggerProps, descriptionProps, errorMessageProps)}\n                    ref={toggleButtonRef}\n                    state={state}\n                  />\n                ),\n                valid: showValid\n              })}\n              {(name || required) && (\n                <input\n                  disabled={disabled}\n                  name={name}\n                  type=\"hidden\"\n                  value={state.value ? state.value.toString() : ''}\n                  {...requiredInputProps}\n                  ref={inputRef}\n                />\n              )}\n            </>\n          ),\n          help,\n          ids: { feedback: feedbackId, help: helpId, label: labelId },\n          invalid: showInvalid,\n          invalidFeedback,\n          label,\n          valid: showValid,\n          validFeedback\n        })}\n      </CalendarLabelsProvider>\n    )\n  }\n)\n\nDatePickerSingle.displayName = 'DatePickerSingle'\n\n// `selectionMode: 'multiple'` counterpart to `DatePickerSingle` — deliberately not built on\n// `useDatePickerState`/`useDatePicker`, since neither has any multi-value concept (a single\n// `DateValue`, edited through one segmented day/month/year field that has no way to represent\n// more than one date — see react-stately's own `useDatePickerState` types). Instead this is\n// assembled from the same lower-level pieces already used elsewhere in this codebase:\n// `useOverlayTriggerState` for open/close (the same `OverlayTriggerState` shape\n// `useOverlayPlacement`/`CalendarToggleButton` already expect, so both are reused unchanged), the\n// manual controlled/uncontrolled pattern `ChipInput` already uses for its own array value, and\n// a read-only comma-separated field in place of `DateField`'s editable segments.\nconst DatePickerMultiple = forwardRef<HTMLDivElement, DatePickerMultipleProps>(\n  (\n    {\n      className,\n      defaultOpen,\n      defaultValue,\n      defaultVisible,\n      disabled,\n      firstDayOfWeek,\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      isDateUnavailable,\n      isOpen,\n      label,\n      labels,\n      maxValue,\n      minValue,\n      name,\n      onChange,\n      onOpenChange,\n      onVisibleChange,\n      required,\n      selectionMode: _selectionMode,\n      size,\n      unavailableDates,\n      valid: validProp,\n      validFeedback,\n      value,\n      visible,\n      visibleMonths,\n      ...rest\n    }: DatePickerMultipleProps,\n    ref\n  ) => {\n    const combinedIsDateUnavailable = useMemo(\n      () => mergeIsDateUnavailable(unavailableDates, isDateUnavailable),\n      [unavailableDates, isDateUnavailable]\n    )\n\n    const isControlled = value !== undefined\n    const [uncontrolledValues, setUncontrolledValues] = useState<DateValue[]>(defaultValue ?? [])\n    const values = isControlled ? (value ?? []) : uncontrolledValues\n\n    const setValues = (next: DateValue[]) => {\n      if (!isControlled) setUncontrolledValues(next)\n      onChange?.(next)\n    }\n\n    const state: OverlayTriggerState = useOverlayTriggerState(\n      useOpenStateProps(\n        { defaultOpen, defaultVisible, isOpen, onOpenChange, onVisibleChange, visible },\n        'DatePicker'\n      )\n    )\n\n    const groupRef = useRef<HTMLDivElement>(null)\n    const forkedGroupRef = useForkedRef(ref, groupRef)\n    const calendarRef = useRef<HTMLDivElement>(null)\n    const inputRef = useRef<HTMLInputElement>(null)\n    const overlayRef = useRef<HTMLDivElement>(null)\n    const toggleButtonRef = useRef<HTMLButtonElement>(null)\n\n    // A reset of the form puts the dates back to their first value, controlled or not.\n    useFormReset(groupRef, value !== undefined ? (value ?? []) : (defaultValue ?? []), setValues)\n\n    // Required asks for one date at least. Each date has a hidden input of its own, so there is\n    // none while the picker is empty: it then renders the text input that isn't displayed, with\n    // no `name`, as nothing is submitted for an empty picker. See `DatePickerSingle`. The calendar\n    // button takes the focus, this variant's one element that can. Nothing here says \"required\"\n    // to a screen reader: ARIA allows `aria-required` on neither a button nor a group, so a\n    // caller's label or help has to.\n    const {\n      inputProps: requiredInputProps,\n      missing,\n      valid\n    } = useRequiredValueInput(inputRef, {\n      focus: () => toggleButtonRef.current?.focus(),\n      invalid,\n      required: required && values.length === 0,\n      valid: validProp\n    })\n    const showInvalid = invalid || missing\n\n    const {\n      describedBy,\n      feedbackId,\n      helpId,\n      inputId: groupId,\n      labelId,\n      labelledBy\n    } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid: showInvalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const { overlayStyle, placementAttr, overlayDismissProps, portalContainer } =\n      useOverlayPlacement({\n        overlayRef,\n        state,\n        triggerRef: groupRef\n      })\n\n    const { dialogProps: domDialogProps } = useDialog(\n      { 'aria-label': rest['aria-label'], 'aria-labelledby': labelledBy },\n      calendarRef\n    )\n\n    // This variant builds its own trigger button props rather than getting them from\n    // `useDatePicker` (see the component comment), so it has to resolve the label itself — it's\n    // the provider here, so it can't read the context it's about to publish.\n    const mergedLabels = { ...DEFAULT_CALENDAR_LABELS, ...labels }\n\n    // Described by the help and feedback as the group is: the button is this variant's one\n    // element that takes focus.\n    const buttonProps: AriaButtonProps = {\n      'aria-describedby': describedBy,\n      'aria-expanded': state.isOpen,\n      'aria-haspopup': 'dialog',\n      'aria-label': mergedLabels.calendar,\n      isDisabled: disabled\n    }\n\n    return (\n      <CalendarLabelsProvider labels={labels}>\n        {renderFormField({\n          children: (\n            <>\n              {renderDatePickerShell({\n                calendar: (\n                  <Calendar\n                    {...domDialogProps}\n                    autoFocus\n                    disabled={disabled}\n                    firstDayOfWeek={firstDayOfWeek}\n                    isDateUnavailable={combinedIsDateUnavailable}\n                    maxValue={maxValue}\n                    minValue={minValue}\n                    onChange={setValues}\n                    ref={calendarRef}\n                    selectionMode=\"multiple\"\n                    value={values}\n                    visibleMonths={visibleMonths}\n                  />\n                ),\n                className,\n                clearButton: values.length > 0 && !disabled && (\n                  <ClearButton\n                    onPress={() => {\n                      setValues([])\n                      // See the single-selection `ClearButton` usage above for why this is needed.\n                      toggleButtonRef.current?.focus()\n                    }}\n                  />\n                ),\n                disabled,\n                field: <MultiDateField values={values} />,\n                fieldClassName: 'w-100 overflow-x-scroll',\n                groupProps: {\n                  ...mergeProps(rest),\n                  'aria-describedby': describedBy,\n                  'aria-disabled': disabled || undefined,\n                  'aria-labelledby': labelledBy,\n                  id: groupId,\n                  role: 'group'\n                },\n                groupRef: forkedGroupRef,\n                invalid: showInvalid,\n                isOpen: state.isOpen,\n                overlayDismissProps,\n                overlayRef,\n                overlayStyle,\n                placementAttr,\n                portalContainer,\n                size,\n                toggleButton: (\n                  <CalendarToggleButton\n                    buttonProps={buttonProps}\n                    ref={toggleButtonRef}\n                    state={state}\n                  />\n                ),\n                valid\n              })}\n              {name &&\n                values.map((date) => (\n                  <input\n                    disabled={disabled}\n                    key={date.toString()}\n                    name={name}\n                    type=\"hidden\"\n                    value={date.toString()}\n                  />\n                ))}\n              {requiredInputProps && (\n                <input disabled={disabled} value=\"\" {...requiredInputProps} ref={inputRef} />\n              )}\n            </>\n          ),\n          help,\n          ids: { feedback: feedbackId, help: helpId, label: labelId },\n          invalid: showInvalid,\n          invalidFeedback,\n          label,\n          valid,\n          validFeedback\n        })}\n      </CalendarLabelsProvider>\n    )\n  }\n)\n\nDatePickerMultiple.displayName = 'DatePickerMultiple'\n\ninterface MultiDateFieldProps {\n  values: DateValue[]\n}\n\n// Read-only stand-in for `DateField`'s editable segments — a segmented day/month/year field can\n// only ever represent one date, so multiple selection instead shows every selected date, formatted\n// per the active locale and joined with commas. Each is formatted as its own calendar day, in UTC\n// on both sides: a `ZonedDateTime`'s instant, formatted in the viewer's time zone, is another day\n// for a viewer far enough from the value's zone.\nconst MultiDateField = ({ values }: MultiDateFieldProps) => {\n  const formatter = useDateFormatter({ dateStyle: 'medium', timeZone: 'UTC' })\n\n  return (\n    <div className=\"datepicker-field\">\n      {values.length > 0 && (\n        <>\n          {values\n            .slice()\n            .sort((a, b) => a.compare(b))\n            .map((date) => formatter.format(toCalendarDate(date).toDate('UTC')))\n            .join(', ')}\n        </>\n      )}\n    </div>\n  )\n}\n","import React, { forwardRef, HTMLAttributes, ReactNode, useMemo, useRef } from 'react'\nimport { mergeProps, RangeValue, useDateRangePicker, useDialog } from 'react-aria'\nimport { DateValue, useDateRangePickerState } from 'react-stately'\n\nimport {\n  useForkedRef,\n  useFormField,\n  useOpenStateProps,\n  useOverlayPlacement,\n  useFormReset,\n  useRequiredValueInput\n} from '../../hooks'\nimport { DateRangePreset } from '../../utils/dateRangePresets'\nimport { mergeIsDateUnavailable } from '../../utils/mergeIsDateUnavailable'\nimport { withoutSlotIds } from '../../utils/idRefs'\nimport { renderFormField } from '../form-field/renderFormField'\nimport { RangeCalendar } from '../calendar/RangeCalendar'\nimport { CalendarToggleButton } from './CalendarToggleButton'\nimport { ClearButton } from './ClearButton'\nimport { DateField, focusFirstSegment } from './DateField'\nimport { renderDatePickerShell } from './renderDatePickerShell'\nimport './DatePicker.scss'\nimport './DateRangePicker.scss'\nimport { CalendarLabels, CalendarLabelsProvider } from '../calendar/labels'\n\nexport interface DateRangePickerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * An accessible label for the date range picker, used when there's no visible `<label>`.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible `<label>` element for the date range picker.\n   */\n  'aria-labelledby'?: string\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Whether the calendar popover is open by default (uncontrolled).\n   *\n   * @deprecated Use `defaultVisible`.\n   */\n  defaultOpen?: boolean\n  /**\n   * The initial selected date range (uncontrolled).\n   */\n  defaultValue?: RangeValue<DateValue> | null\n  /**\n   * Whether the calendar popover is open when the date range picker first renders. Use it\n   * instead of `visible` when nothing outside needs to control the popover.\n   *\n   * @default false\n   */\n  defaultVisible?: boolean\n  /**\n   * Prevents the date range picker from being focused or interacted with.\n   */\n  disabled?: boolean\n  /**\n   * The day that starts the week in the calendar overlay, overriding the default set by the\n   * active locale.\n   *\n   * @default 'mon'\n   */\n  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'\n  /**\n   * The smallest unit the fields show and edit. `'hour'`, `'minute'` and `'second'` add a time\n   * to both dates: the range's dates are then `CalendarDateTime`s, or `ZonedDateTime`s when\n   * `value`, `defaultValue` or `placeholderValue` holds them, and a range or placeholder given\n   * must carry times. Picking a range in the calendar keeps the times. A range picked in an\n   * empty field takes the time, and zone, of `placeholderValue`, else midnight with no zone: a\n   * zoned range, once cleared, needs a zoned `placeholderValue` to stay zoned.\n   *\n   * @default 'day', or 'minute' for a range with times\n   */\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  /**\n   * A description for the field, rendered below the date range picker.\n   */\n  help?: ReactNode\n  /**\n   * Hide the time zone of `ZonedDateTime` dates.\n   */\n  hideTimeZone?: boolean\n  /**\n   * Show 12 or 24 hours. Defaults to the locale's.\n   */\n  hourCycle?: 12 | 24\n  /**\n   * `id` forwarded to the field's grouping element — useful for pairing with a `<label for>`.\n   */\n  id?: string\n  /**\n   * Set component validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the date range picker when `invalid` is set,\n   * and after a submit that a `required` date range picker with a date missing held back.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * Callback that is called for each date in the calendar. If it returns `true`, that date is\n   * shown but cannot be selected.\n   */\n  isDateUnavailable?: (date: DateValue) => boolean\n  /**\n   * Overrides for the strings this component and its calendar render themselves rather than\n   * getting from the active locale — the calendar trigger, the clear adornment and the calendar's\n   * own year-view arrows/announcements. Date segment order, month and weekday names all follow\n   * `I18nProvider`'s locale via react-aria and need no override. Merged over the English defaults,\n   * so passing one key leaves the rest alone.\n   */\n  labels?: Partial<CalendarLabels>\n  /**\n   * Whether the calendar popover is open (controlled).\n   *\n   * @deprecated Use `visible`.\n   */\n  isOpen?: boolean\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with the field group.\n   */\n  label?: ReactNode\n  /**\n   * The maximum allowed date that a user may select.\n   */\n  maxValue?: DateValue | null\n  /**\n   * The minimum allowed date that a user may select.\n   */\n  minValue?: DateValue | null\n  /**\n   * Base `name` for a pair of auto-created hidden inputs, kept in sync with the selection, for\n   * native form submission — rendered as `${name}Start` and `${name}End`. Omit to skip creating\n   * them. Each value is the date's `toString()`: `2026-03-15`, with a time `2026-03-15T09:30:00`,\n   * and with a time zone `2026-03-15T09:30:00+09:00[Asia/Tokyo]`, which `parseZonedDateTime`\n   * reads back.\n   */\n  name?: string\n  /**\n   * Callback fired when the selected date range changes. With a time (`granularity`), its dates\n   * are `CalendarDateTime`s or `ZonedDateTime`s.\n   */\n  onChange?: (value: RangeValue<DateValue> | null) => void\n  /**\n   * Callback fired when the calendar popover's open state changes.\n   *\n   * @deprecated Use `onVisibleChange`.\n   */\n  onOpenChange?: (isOpen: boolean) => void\n  /**\n   * Callback fired when the calendar popover asks to open or close: the calendar button, a\n   * completed selection, the Escape key or a click outside. Receives the state it asks for.\n   * With `visible` set, the popover changes only when `visible` does.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * The date both fields start from while empty, such as `new CalendarDateTime(2026, 1, 1, 9)`,\n   * and the month the calendar opens on. Its time is the one a range picked in the calendar gets,\n   * and its type the type of the dates `onChange` receives: a `ZonedDateTime` gives zoned dates.\n   * With a time `granularity` it must carry a time.\n   */\n  placeholderValue?: DateValue\n  /**\n   * A list of quick-select range presets shown in the overlay next to the calendar. Selecting a\n   * preset commits its range immediately, the same as picking a start and end date from the\n   * calendar: in order, kept inside `minValue`/`maxValue`, and with the times of the current\n   * range. A preset the calendar couldn't select is disabled: one with no day inside those\n   * limits, and one with an unavailable day in its range. The preset matching the current\n   * selection (if any) is marked selected. Omit to not show a preset list.\n   */\n  presets?: DateRangePreset[]\n  /**\n   * Toggle the required state for the component. A required date range picker with its start or\n   * its end missing holds its form back from submitting, takes focus in the field that is empty\n   * and shows as invalid, with `invalidFeedback`, until it has both dates or the form is reset.\n   * `invalid`, once set, and `valid` decide how it looks instead.\n   */\n  required?: boolean\n  /**\n   * Show a leading zero on the day, month and hour, as `03/05` rather than `3/5`, whatever the\n   * locale does.\n   */\n  shouldForceLeadingZeros?: boolean\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to\n   * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed\n   * with `isDateUnavailable` when both are given — a date unavailable by either is unavailable.\n   * Applies to both the calendar overlay and typing a date directly into either field.\n   */\n  unavailableDates?: string[]\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the date range picker when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The selected date range (controlled).\n   */\n  value?: RangeValue<DateValue> | null\n  /**\n   * Whether the calendar popover is open. Setting it makes the popover controlled: it opens and\n   * closes only when this changes, so pair it with `onVisibleChange`.\n   */\n  visible?: boolean\n  /**\n   * Number of months to display side by side in the calendar overlay.\n   *\n   * @default 1\n   */\n  visibleMonths?: number\n}\n\n// Mirrors `DatePicker` closely — same field/overlay/dialog composition, just with two\n// segmented fields (`startFieldProps`/`endFieldProps` in place of a single `fieldProps`) and\n// `RangeCalendar` in place of `Calendar` in the overlay, dialog role/ref landing directly on\n// it exactly as `Calendar` does for `DatePicker`. `presets` is passed straight through —\n// `RangeCalendar` owns rendering and selecting them (it's also usable standalone), so completing\n// one goes through the same `state.setValue`/`onChange` path a two-click grid selection does,\n// which is what closes this overlay automatically.\nexport const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(\n  (\n    {\n      className,\n      defaultOpen,\n      defaultValue,\n      defaultVisible,\n      disabled,\n      firstDayOfWeek,\n      granularity,\n      help,\n      hideTimeZone,\n      hourCycle,\n      id,\n      invalid,\n      invalidFeedback,\n      isDateUnavailable,\n      isOpen,\n      label,\n      labels,\n      maxValue,\n      minValue,\n      name,\n      onChange,\n      onOpenChange,\n      onVisibleChange,\n      placeholderValue,\n      presets,\n      required,\n      shouldForceLeadingZeros,\n      size,\n      unavailableDates,\n      valid: validProp,\n      validFeedback,\n      value,\n      visible,\n      visibleMonths,\n      ...rest\n    }: DateRangePickerProps,\n    ref\n  ): ReactNode => {\n    const combinedIsDateUnavailable = useMemo(\n      () => mergeIsDateUnavailable(unavailableDates, isDateUnavailable),\n      [unavailableDates, isDateUnavailable]\n    )\n\n    const groupRef = useRef<HTMLDivElement>(null)\n    const forkedGroupRef = useForkedRef(ref, groupRef)\n    const calendarRef = useRef<HTMLDivElement>(null)\n    const endFieldRef = useRef<HTMLDivElement>(null)\n    const endInputRef = useRef<HTMLInputElement>(null)\n    const overlayRef = useRef<HTMLDivElement>(null)\n    const startInputRef = useRef<HTMLInputElement>(null)\n    const toggleButtonRef = useRef<HTMLButtonElement>(null)\n\n    // As in `DatePicker`: a required picker's two inputs are text inputs that aren't displayed,\n    // which a form validates where it doesn't a `type=\"hidden\"` one (FORMS.md, gotcha 9), so it\n    // is held back until both dates are in. Each input reports the submit it held back, and puts\n    // the focus in its own field: the start's first segment is the group's first.\n    const requiredOptions = { invalid, required, valid: validProp }\n    const start = useRequiredValueInput(startInputRef, {\n      ...requiredOptions,\n      focus: () => focusFirstSegment(groupRef.current)\n    })\n    const end = useRequiredValueInput(endInputRef, {\n      ...requiredOptions,\n      focus: () => focusFirstSegment(endFieldRef.current)\n    })\n    const missing = start.missing || end.missing\n    const valid = start.valid && end.valid\n\n    // What both react-stately's state and react-aria's hook read: the hook hands the time props\n    // on to the fields' segments.\n    const pickerProps = {\n      defaultValue,\n      granularity,\n      hideTimeZone,\n      hourCycle,\n      isDateUnavailable: combinedIsDateUnavailable,\n      isDisabled: disabled,\n      // `false` would override the state's own check of the range, unavailable dates and an end\n      // before the start: react-stately takes a defined `isInvalid` as the whole validation state.\n      isInvalid: invalid || missing || undefined,\n      isRequired: required,\n      maxValue,\n      minValue,\n      onChange,\n      placeholderValue,\n      shouldForceLeadingZeros,\n      value\n    }\n\n    const state = useDateRangePickerState({\n      ...useOpenStateProps(\n        { defaultOpen, defaultVisible, isOpen, onOpenChange, onVisibleChange, visible },\n        'DateRangePicker'\n      ),\n      ...pickerProps\n    })\n    // A reset of the form puts the range back to its first value, controlled or not, as the text\n    // fields go back to theirs: react-stately's picker state has no reset of its own.\n    useFormReset(groupRef, value !== undefined ? value : (defaultValue ?? null), state.setValue)\n    // A range outside `minValue`/`maxValue`, over an unavailable date or ending before it starts\n    // is invalid too, shown as `invalid` is, as `TimeField` shows a time out of range. So is a\n    // range with a date `missing`, which the state was given.\n    const showInvalid = invalid || state.displayValidation.isInvalid\n    const showValid = valid && !showInvalid\n\n    const {\n      describedBy,\n      feedbackId,\n      helpId,\n      inputId: groupId,\n      labelId,\n      labelledBy\n    } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid: showInvalid,\n      invalidFeedback,\n      label,\n      valid: showValid,\n      validFeedback\n    })\n\n    const {\n      buttonProps,\n      calendarProps,\n      descriptionProps,\n      dialogProps,\n      endFieldProps,\n      errorMessageProps,\n      groupProps,\n      startFieldProps\n    } = useDateRangePicker(\n      {\n        ...pickerProps,\n        // Given to the hook, so the help and feedback describe the segments of both fields, which\n        // take focus, and the calendar button, not only the group around them.\n        'aria-describedby': describedBy,\n        'aria-label': rest['aria-label'],\n        'aria-labelledby': labelledBy,\n        id: groupId\n      },\n      state,\n      groupRef\n    )\n    // As in `DatePicker`: react-aria's value keeps its description of the selected range, without\n    // the slot ids (FORMS.md, gotcha 6), and is set again after the spread (gotcha 4).\n    const group = withoutSlotIds(groupProps, descriptionProps, errorMessageProps)\n\n    const { overlayStyle, placementAttr, overlayDismissProps, portalContainer } =\n      useOverlayPlacement({\n        overlayRef,\n        state,\n        triggerRef: groupRef\n      })\n\n    const { dialogProps: domDialogProps } = useDialog(dialogProps, calendarRef)\n\n    // react-aria names the trigger in the active locale; `labels.calendar` replaces that name.\n    const triggerProps = labels?.calendar\n      ? { ...buttonProps, 'aria-label': labels.calendar }\n      : buttonProps\n\n    return (\n      <CalendarLabelsProvider labels={labels}>\n        {renderFormField({\n          children: (\n            <>\n              {renderDatePickerShell({\n                calendar: (\n                  <RangeCalendar\n                    {...domDialogProps}\n                    autoFocus\n                    defaultFocusedValue={calendarProps.defaultFocusedValue}\n                    disabled={disabled}\n                    firstDayOfWeek={firstDayOfWeek}\n                    isDateUnavailable={combinedIsDateUnavailable}\n                    maxValue={maxValue}\n                    minValue={minValue}\n                    onChange={calendarProps.onChange}\n                    presets={presets}\n                    ref={calendarRef}\n                    value={calendarProps.value}\n                    visibleMonths={visibleMonths}\n                  />\n                ),\n                className,\n                // `state.value` is always a `{ start, end }` object, never `null` itself — even with\n                // nothing picked yet — so the endpoints are what actually indicate a selection to\n                // clear (matching the hidden-input `value`s below, which check the same way).\n                clearButton: (state.value?.start || state.value?.end) && !disabled && (\n                  <ClearButton\n                    onPress={() => {\n                      state.setValue(null)\n                      // See `DatePicker`'s identical `ClearButton` usage for why this is needed —\n                      // this button unmounts itself once cleared, so focus needs somewhere to land.\n                      toggleButtonRef.current?.focus()\n                    }}\n                  />\n                ),\n                disabled,\n                field: (\n                  <>\n                    <DateField\n                      fieldProps={withoutSlotIds(\n                        startFieldProps,\n                        descriptionProps,\n                        errorMessageProps\n                      )}\n                    />\n                    <span aria-hidden=\"true\" className=\"daterangepicker-separator\">\n                      –\n                    </span>\n                    <DateField\n                      fieldProps={withoutSlotIds(\n                        endFieldProps,\n                        descriptionProps,\n                        errorMessageProps\n                      )}\n                      fieldRef={endFieldRef}\n                    />\n                  </>\n                ),\n                fieldClassName: 'd-flex w-100',\n                groupProps: {\n                  ...mergeProps(group, rest),\n                  'aria-describedby': group['aria-describedby'],\n                  'aria-labelledby': labelledBy\n                },\n                groupRef: forkedGroupRef,\n                invalid: showInvalid,\n                isOpen: state.isOpen,\n                overlayDismissProps,\n                overlayRef,\n                overlayStyle,\n                placementAttr,\n                portalContainer,\n                size,\n                toggleButton: (\n                  <CalendarToggleButton\n                    buttonProps={withoutSlotIds(triggerProps, descriptionProps, errorMessageProps)}\n                    ref={toggleButtonRef}\n                    state={state}\n                  />\n                ),\n                valid: showValid\n              })}\n              {(name || required) && (\n                <>\n                  <input\n                    disabled={disabled}\n                    name={name && `${name}Start`}\n                    type=\"hidden\"\n                    value={state.value?.start ? state.value.start.toString() : ''}\n                    {...start.inputProps}\n                    ref={startInputRef}\n                  />\n                  <input\n                    disabled={disabled}\n                    name={name && `${name}End`}\n                    type=\"hidden\"\n                    value={state.value?.end ? state.value.end.toString() : ''}\n                    {...end.inputProps}\n                    ref={endInputRef}\n                  />\n                </>\n              )}\n            </>\n          ),\n          help,\n          ids: { feedback: feedbackId, help: helpId, label: labelId },\n          invalid: showInvalid,\n          invalidFeedback,\n          label,\n          valid: showValid,\n          validFeedback\n        })}\n      </CalendarLabelsProvider>\n    )\n  }\n)\n\nDateRangePicker.displayName = 'DateRangePicker'\n"],"mappings":"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"}

package/dist/chunks/dialogTitle-DMBvXZLT.js

@@ -0,0 +1,2 @@
+import{n as e,t}from"./lazyElement-tfMG21pZ.js";import{t as n}from"./useHydrated-Dud4JEwp.js";import{isValidElement as r,useCallback as i,useState as a}from"react";function o(e){let t=n(),[r,o]=a(),s=i(e=>(o(e),()=>o(t=>t===e?void 0:t)),[]);return[t?r:e(),s]}const s=e=>typeof e==`string`&&e!==``?e:void 0;function c(t,n){if(t.asChild){let n=e(t.children),i=r(n)?s(n.props.id):void 0;if(i)return i}if(t.id!==``)return s(t.id)??n}function l(n,i){let a=[n];for(;a.length>0;){let n=e(a.shift());if(Array.isArray(n)){a.unshift(...n);continue}if(!r(n))continue;let o=n.props;if(!t(n,i.dialog)){if(t(n,i.title))return c(o,i.generatedId);a.unshift(o.children)}}}export{o as n,l as t};
+//# sourceMappingURL=dialogTitle-DMBvXZLT.js.map

package/dist/chunks/dialogTitle-DMBvXZLT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogTitle-DMBvXZLT.js","names":["resolveLazy","useHydrated","useDialogTitle","hydrated","titleId","setTitleId","useState","registerTitle","useCallback","id","current","serverTitleId","ownId","renderedTitleId","props","child","slottedId","isValidElement","generatedId","findDialogTitleId","pending","children","node","lookup","isElementOfType"],"sources":["../../src/hooks/useDialogTitle.ts","../../src/utils/dialogTitle.ts"],"sourcesContent":["import { useCallback, useState } from 'react'\n\nimport { useHydrated } from './useHydrated'\n\nexport type RegisterDialogTitle = (id: string) => () => void\n\n// The title a `Modal` or a `Drawer` is labelled by. `ModalTitle` and `DrawerTitle` register the id\n// they have in the DOM, from a layout effect, and take it out when they unmount, so the dialog's\n// `aria-labelledby` names an element that is there: the generated id of the context, or the `id`\n// a caller gave the title. A dialog with no title has no `aria-labelledby`, which would be a\n// dangling reference, and one that outranks a caller's `aria-label` besides.\n//\n// An effect doesn't run on a server, so until hydration the label is `serverTitleId()`: the id of\n// a title the dialog's children are seen to render (`findDialogTitleId`) when the dialog is\n// rendered open, and none for a closed dialog, which nothing reads a name from. Hydration renders\n// that value again, so it never mismatches, then settles on what registered.\nexport function useDialogTitle(\n  serverTitleId: () => string | undefined\n): [string | undefined, RegisterDialogTitle] {\n  const hydrated = useHydrated()\n  const [titleId, setTitleId] = useState<string>()\n  const registerTitle = useCallback<RegisterDialogTitle>((id) => {\n    setTitleId(id)\n    return () => setTitleId((current) => (current === id ? undefined : current))\n  }, [])\n\n  return [hydrated ? titleId : serverTitleId(), registerTitle]\n}\n","import { isValidElement, ReactNode } from 'react'\n\nimport { isElementOfType, resolveLazy } from './lazyElement'\n\nexport interface DialogTitleLookup {\n  /** The dialog itself: a title inside a nested one of the same kind labels that one instead. */\n  dialog: object\n  /** The id the title takes when it has none of its own (the dialog's context `titleId`). */\n  generatedId: string\n  /** The dialog's title part (`ModalTitle`, `DrawerTitle`). */\n  title: object\n}\n\nconst ownId = (id: unknown): string | undefined =>\n  typeof id === 'string' && id !== '' ? id : undefined\n\n// The id the title found here renders, as the title works it out: the `asChild` element's own\n// `id`, the title's `id`, or the generated one. An empty `id` is rendered and registers nothing.\nfunction renderedTitleId(props: Record<string, unknown>, generatedId: string): string | undefined {\n  if (props.asChild) {\n    const child = resolveLazy(props.children)\n    const slottedId = isValidElement(child)\n      ? ownId((child.props as { id?: unknown }).id)\n      : undefined\n    if (slottedId) return slottedId\n  }\n  if (props.id === '') return undefined\n  return ownId(props.id) ?? generatedId\n}\n\n// The title a dialog renders, read from its children before they render, for the HTML a server\n// sends: a title registers its id from a layout effect (`useDialogTitle`), which a server never\n// runs, and a server can't otherwise know whether a title renders or under what id. This finds a\n// title written among the children, at any depth of the elements given, and returns the id it\n// will have. A title that a component renders by itself, not one it is given, isn't found: the\n// dialog then has no `aria-labelledby` until hydration, which is a missing name for that moment\n// and never a reference to an id the HTML doesn't hold.\n//\n// Children are read as `CONVENTIONS.md` \"Reading children\" asks: lazy nodes and lazy types are\n// resolved, so a dialog composed in a Server Component finds its title too. Anything that isn't\n// an element is passed over; a child that is still loading suspends the dialog, as it does every\n// component that reads its children.\nexport function findDialogTitleId(\n  children: ReactNode,\n  lookup: DialogTitleLookup\n): string | undefined {\n  const pending: unknown[] = [children]\n  while (pending.length > 0) {\n    const node = resolveLazy(pending.shift())\n    if (Array.isArray(node)) {\n      pending.unshift(...node)\n      continue\n    }\n    if (!isValidElement(node)) continue\n    const props = node.props as Record<string, unknown>\n    if (isElementOfType(node, lookup.dialog)) continue\n    if (isElementOfType(node, lookup.title)) return renderedTitleId(props, lookup.generatedId)\n    pending.unshift(props.children)\n  }\n  return undefined\n}\n"],"mappings":"A,oKAgBA,SAAgBE,EACd,EAC2C,CAC3C,IAAMC,EAAWF,EAAY,EACvB,CAACG,EAASC,GAAcC,EAAiB,EACzCC,EAAgBC,EAAkC,IACtDH,EAAWI,CAAE,MACAJ,EAAY,GAAaK,IAAYD,EAAK,IAAA,GAAYC,CAAQ,GAC1E,CAAC,CAAC,EAEL,MAAO,CAACP,EAAWC,EAAUO,EAAc,EAAGJ,CAAa,CAC7D,CCdA,MAAMK,EAAS,GACb,OAAOH,GAAO,UAAYA,IAAO,GAAKA,EAAK,IAAA,GAI7C,SAASI,EAAgB,EAAgC,EAAyC,CAChG,GAAIC,EAAM,QAAS,CACjB,IAAMC,EAAQf,EAAYc,EAAM,QAAQ,EAClCE,EAAYC,EAAeF,CAAK,EAClCH,EAAOG,EAAM,MAA2B,EAAE,EAC1C,IAAA,GACJ,GAAIC,EAAW,OAAOA,CACxB,CACA,GAAIF,EAAM,KAAO,GACjB,OAAOF,EAAME,EAAM,EAAE,GAAKI,CAC5B,CAcA,SAAgBC,EACd,EACA,EACoB,CACpB,IAAMC,EAAqB,CAACC,CAAQ,EACpC,KAAOD,EAAQ,OAAS,GAAG,CACzB,IAAME,EAAOtB,EAAYoB,EAAQ,MAAM,CAAC,EACxC,GAAI,MAAM,QAAQE,CAAI,EAAG,CACvBF,EAAQ,QAAQ,GAAGE,CAAI,EACvB,QACF,CACA,GAAI,CAACL,EAAeK,CAAI,EAAG,SAC3B,IAAMR,EAAQQ,EAAK,MACnB,GAAI,GAAgBA,EAAMC,EAAO,MAAM,EACvC,IAAIC,EAAgBF,EAAMC,EAAO,KAAK,EAAG,OAAOV,EAAgBC,EAAOS,EAAO,WAAW,EACzFH,EAAQ,QAAQN,EAAM,QAAQ,CAD2D,CAE3F,CAEF,C"}

package/dist/chunks/{divider-C1-NoKMV.js → divider-DbWmMSrn.js}

@@ -1,2 +1,2 @@
-import"./focus-ring-Bs80iIBN.js";import{S as e,g as t}from"./slot-BQVx1Eew.js";import{t as n}from"./polymorphic-CZIFszAy.js";import r,{Children as i,useId as a}from"react";import o from"classnames";import{useSeparator as s}from"react-aria";function c({children:n,className:c,component:l,labelPlacement:u=`center`,orientation:d=`horizontal`,...f},p){let m=i.toArray(n).some(e=>e!==``),h=l??(d===`vertical`||m?`div`:`hr`),g=t(h),_=a();e(g===`hr`&&m,"Divider: an `<hr>` cannot hold a label, so the label is not rendered. Leave `component` unset, or render another element.");let v=m&&g!==`hr`,y=f,b=y[`aria-label`]!=null||y[`aria-labelledby`]!=null,{separatorProps:x}=s({elementType:g,orientation:d});return g===`hr`&&d===`vertical`&&(x[`aria-orientation`]=`vertical`),/* @__PURE__ */ r.createElement(h,{className:o(`divider`,d===`vertical`&&`divider-vertical`,v&&`divider-labelled`,v&&u!==`center`&&`divider-${u}`,c),...x,"aria-labelledby":v&&!b?_:void 0,...f,ref:p},v?/* @__PURE__ */ r.createElement(`span`,{className:`divider-label`,id:_},n):void 0)}const l=n(c,`Divider`);export{l as t};
-//# sourceMappingURL=divider-C1-NoKMV.js.map
+import"./focus-ring-Bs80iIBN.js";import{C as e,g as t}from"./slot-DagH0Gxq.js";import{t as n}from"./polymorphic-mAKwlLiW.js";import r,{Children as i,useId as a}from"react";import o from"classnames";import{useSeparator as s}from"react-aria";function c({children:n,className:c,component:l,labelPlacement:u=`center`,orientation:d=`horizontal`,...f},p){let m=i.toArray(n).some(e=>e!==``),h=l??(d===`vertical`||m?`div`:`hr`),g=t(h),_=a();e(g===`hr`&&m,"Divider: an `<hr>` cannot hold a label, so the label is not rendered. Leave `component` unset, or render another element.");let v=m&&g!==`hr`,y=f,b=y[`aria-label`]!=null||y[`aria-labelledby`]!=null,{separatorProps:x}=s({elementType:g,orientation:d});return g===`hr`&&d===`vertical`&&(x[`aria-orientation`]=`vertical`),/* @__PURE__ */ r.createElement(h,{className:o(`divider`,d===`vertical`&&`divider-vertical`,v&&`divider-labelled`,v&&u!==`center`&&`divider-${u}`,c),...x,"aria-labelledby":v&&!b?_:void 0,...f,ref:p},v?/* @__PURE__ */ r.createElement(`span`,{className:`divider-label`,id:_},n):void 0)}const l=n(c,`Divider`);export{l as t};
+//# sourceMappingURL=divider-DbWmMSrn.js.map

package/dist/chunks/{divider-C1-NoKMV.js.map → divider-DbWmMSrn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"divider-C1-NoKMV.js","names":["devWarning","resolveElementTag","createPolymorphicComponent","React","classNames","DividerRender","rest","hasLabel","Children","children","child","Component","component","orientation","rootTag","labelId","useId","label","labelling","named","useSeparator","labelPlacement","className","separatorProps","Divider"],"sources":["../../src/components/divider/Divider.tsx"],"sourcesContent":["import React, {\n  Children,\n  ElementType,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  useId\n} from 'react'\nimport classNames from 'classnames'\nimport { useSeparator } from 'react-aria'\n\nimport './Divider.scss'\nimport { devWarning } from '../../utils/devWarning'\nimport { resolveElementTag } from '../../utils/elementKind'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n  PolymorphicRefWithFallback\n} from '../../utils/polymorphic'\n\ntype DividerOwnProps<C extends ElementType> = {\n  /**\n   * A label shown in the line, such as \"or\" between two ways to sign in. It names the separator\n   * for screen readers. Not possible on an `<hr>`, which can't hold content.\n   */\n  children?: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use an HTML element or a component.\n   * Defaults to `hr`, or `div` for a vertical divider or one with a label.\n   */\n  component?: C\n  /**\n   * Where the label sits along the line. `start` and `end` draw the line on one side only.\n   *\n   * @default 'center'\n   */\n  labelPlacement?: 'start' | 'center' | 'end'\n  /**\n   * The direction of the line. A vertical divider stretches to the height of its flex row.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport type DividerProps<C extends ElementType = 'hr'> = PolymorphicComponentProps<\n  C,\n  DividerOwnProps<C>\n>\n\ntype DividerComponent = (<C extends ElementType = 'hr'>(\n  // A vertical or labelled divider renders a `<div>` while `C` stays `'hr'`.\n  props: DividerProps<C> & { ref?: PolymorphicRefWithFallback<C, HTMLDivElement> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction DividerRender<C extends ElementType = 'hr'>(\n  {\n    children,\n    className,\n    component,\n    labelPlacement = 'center',\n    orientation = 'horizontal',\n    ...rest\n  }: DividerProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  // What renders nothing (`null`, a boolean, `''`, an empty array) is no label.\n  const hasLabel = Children.toArray(children).some((child) => child !== '')\n  const Component = component ?? (orientation === 'vertical' || hasLabel ? 'div' : 'hr')\n  const rootTag = resolveElementTag(Component)\n  const labelId = useId()\n\n  // An `<hr>` is a void element: React throws on its children.\n  devWarning(\n    rootTag === 'hr' && hasLabel,\n    'Divider: an `<hr>` cannot hold a label, so the label is not rendered. Leave `component` ' +\n      'unset, or render another element.'\n  )\n  const label = hasLabel && rootTag !== 'hr'\n  const labelling = rest as { 'aria-label'?: string; 'aria-labelledby'?: string }\n  const named = labelling['aria-label'] != null || labelling['aria-labelledby'] != null\n\n  const { separatorProps } = useSeparator({ elementType: rootTag, orientation })\n  // react-aria leaves an `<hr>`'s orientation to its implicit role, which is horizontal.\n  if (rootTag === 'hr' && orientation === 'vertical')\n    separatorProps['aria-orientation'] = 'vertical'\n\n  return (\n    <Component\n      className={classNames(\n        'divider',\n        orientation === 'vertical' && 'divider-vertical',\n        label && 'divider-labelled',\n        label && labelPlacement !== 'center' && `divider-${labelPlacement}`,\n        className\n      )}\n      {...separatorProps}\n      aria-labelledby={label && !named ? labelId : undefined}\n      {...rest}\n      ref={ref}\n    >\n      {label ? (\n        <span className=\"divider-label\" id={labelId}>\n          {children}\n        </span>\n      ) : undefined}\n    </Component>\n  )\n}\n\nexport const Divider = createPolymorphicComponent<DividerComponent>(\n  DividerRender as ForwardRefRenderFunction<Element, DividerProps<ElementType>>,\n  'Divider'\n)\n"],"mappings":"A,gPA4DA,SAASK,EACP,CACE,WACA,YACA,YACA,iBAAiB,SACjB,cAAc,aACd,GAAGC,GAEL,EACA,CAEA,IAAMC,EAAWC,EAAS,QAAQC,CAAQ,CAAC,CAAC,KAAM,GAAUC,IAAU,EAAE,EAClEC,EAAYC,IAAcC,IAAgB,YAAcN,EAAW,MAAQ,MAC3EO,EAAUb,EAAkBU,CAAS,EACrCI,EAAUC,EAAM,EAGtBhB,EACEc,IAAY,MAAQP,EACpB,2HAEF,EACA,IAAMU,EAAQV,GAAYO,IAAY,KAChCI,EAAYZ,EACZa,EAAQD,EAAU,eAAiB,MAAQA,EAAU,oBAAsB,KAE3E,CAAE,kBAAmBE,EAAa,CAAE,YAAaN,EAAS,aAAY,CAAC,EAK7E,OAHIA,IAAY,MAAQD,IAAgB,aACtC,EAAe,oBAAsB,YAGrC,kBAAA,cAACF,EAAD,CACE,UAAWP,EACT,UACAS,IAAgB,YAAc,mBAC9BI,GAAS,mBACTA,GAASI,IAAmB,UAAY,WAAWA,IACnDC,CACF,EACA,GAAIC,EACJ,kBAAiBN,GAAS,CAACE,EAAQJ,EAAU,IAAA,GAC7C,GAAIT,EACC,KAOI,EALRW,EACC,kBAAA,cAAC,OAAD,CAAM,UAAU,gBAAgB,GAAIF,CAE9B,EADHN,CACG,EACJ,IAAA,EACK,CAEf,CAEA,MAAae,EAAUtB,EACrBG,EACA,SACF,E"}
+{"version":3,"file":"divider-DbWmMSrn.js","names":["devWarning","resolveElementTag","createPolymorphicComponent","React","classNames","DividerRender","rest","hasLabel","Children","children","child","Component","component","orientation","rootTag","labelId","useId","label","labelling","named","useSeparator","labelPlacement","className","separatorProps","Divider"],"sources":["../../src/components/divider/Divider.tsx"],"sourcesContent":["import React, {\n  Children,\n  ElementType,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  useId\n} from 'react'\nimport classNames from 'classnames'\nimport { useSeparator } from 'react-aria'\n\nimport './Divider.scss'\nimport { devWarning } from '../../utils/devWarning'\nimport { resolveElementTag } from '../../utils/elementKind'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n  PolymorphicRefWithFallback\n} from '../../utils/polymorphic'\n\ntype DividerOwnProps<C extends ElementType> = {\n  /**\n   * A label shown in the line, such as \"or\" between two ways to sign in. It names the separator\n   * for screen readers. Not possible on an `<hr>`, which can't hold content.\n   */\n  children?: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use an HTML element or a component.\n   * Defaults to `hr`, or `div` for a vertical divider or one with a label.\n   */\n  component?: C\n  /**\n   * Where the label sits along the line. `start` and `end` draw the line on one side only.\n   *\n   * @default 'center'\n   */\n  labelPlacement?: 'start' | 'center' | 'end'\n  /**\n   * The direction of the line. A vertical divider stretches to the height of its flex row.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport type DividerProps<C extends ElementType = 'hr'> = PolymorphicComponentProps<\n  C,\n  DividerOwnProps<C>\n>\n\ntype DividerComponent = (<C extends ElementType = 'hr'>(\n  // A vertical or labelled divider renders a `<div>` while `C` stays `'hr'`.\n  props: DividerProps<C> & { ref?: PolymorphicRefWithFallback<C, HTMLDivElement> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction DividerRender<C extends ElementType = 'hr'>(\n  {\n    children,\n    className,\n    component,\n    labelPlacement = 'center',\n    orientation = 'horizontal',\n    ...rest\n  }: DividerProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  // What renders nothing (`null`, a boolean, `''`, an empty array) is no label.\n  const hasLabel = Children.toArray(children).some((child) => child !== '')\n  const Component = component ?? (orientation === 'vertical' || hasLabel ? 'div' : 'hr')\n  const rootTag = resolveElementTag(Component)\n  const labelId = useId()\n\n  // An `<hr>` is a void element: React throws on its children.\n  devWarning(\n    rootTag === 'hr' && hasLabel,\n    'Divider: an `<hr>` cannot hold a label, so the label is not rendered. Leave `component` ' +\n      'unset, or render another element.'\n  )\n  const label = hasLabel && rootTag !== 'hr'\n  const labelling = rest as { 'aria-label'?: string; 'aria-labelledby'?: string }\n  const named = labelling['aria-label'] != null || labelling['aria-labelledby'] != null\n\n  const { separatorProps } = useSeparator({ elementType: rootTag, orientation })\n  // react-aria leaves an `<hr>`'s orientation to its implicit role, which is horizontal.\n  if (rootTag === 'hr' && orientation === 'vertical')\n    separatorProps['aria-orientation'] = 'vertical'\n\n  return (\n    <Component\n      className={classNames(\n        'divider',\n        orientation === 'vertical' && 'divider-vertical',\n        label && 'divider-labelled',\n        label && labelPlacement !== 'center' && `divider-${labelPlacement}`,\n        className\n      )}\n      {...separatorProps}\n      aria-labelledby={label && !named ? labelId : undefined}\n      {...rest}\n      ref={ref}\n    >\n      {label ? (\n        <span className=\"divider-label\" id={labelId}>\n          {children}\n        </span>\n      ) : undefined}\n    </Component>\n  )\n}\n\nexport const Divider = createPolymorphicComponent<DividerComponent>(\n  DividerRender as ForwardRefRenderFunction<Element, DividerProps<ElementType>>,\n  'Divider'\n)\n"],"mappings":"A,gPA4DA,SAASK,EACP,CACE,WACA,YACA,YACA,iBAAiB,SACjB,cAAc,aACd,GAAGC,GAEL,EACA,CAEA,IAAMC,EAAWC,EAAS,QAAQC,CAAQ,CAAC,CAAC,KAAM,GAAUC,IAAU,EAAE,EAClEC,EAAYC,IAAcC,IAAgB,YAAcN,EAAW,MAAQ,MAC3EO,EAAUb,EAAkBU,CAAS,EACrCI,EAAUC,EAAM,EAGtBhB,EACEc,IAAY,MAAQP,EACpB,2HAEF,EACA,IAAMU,EAAQV,GAAYO,IAAY,KAChCI,EAAYZ,EACZa,EAAQD,EAAU,eAAiB,MAAQA,EAAU,oBAAsB,KAE3E,CAAE,kBAAmBE,EAAa,CAAE,YAAaN,EAAS,aAAY,CAAC,EAK7E,OAHIA,IAAY,MAAQD,IAAgB,aACtC,EAAe,oBAAsB,YAGrC,kBAAA,cAACF,EAAD,CACE,UAAWP,EACT,UACAS,IAAgB,YAAc,mBAC9BI,GAAS,mBACTA,GAASI,IAAmB,UAAY,WAAWA,IACnDC,CACF,EACA,GAAIC,EACJ,kBAAiBN,GAAS,CAACE,EAAQJ,EAAU,IAAA,GAC7C,GAAIT,EACC,KAOI,EALRW,EACC,kBAAA,cAAC,OAAD,CAAM,UAAU,gBAAgB,GAAIF,CAE9B,EADHN,CACG,EACJ,IAAA,EACK,CAEf,CAEA,MAAae,EAAUtB,EACrBG,EACA,SACF,E"}

package/dist/chunks/drawer-DPxF30qn.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{y as e}from"./slot-DagH0Gxq.js";import{t}from"./polymorphic-mAKwlLiW.js";import{t as n}from"./useIsomorphicLayoutEffect-BbqRwuqn.js";import{t as r}from"./useDialogElement-yEgUSejP.js";import{t as i}from"./CloseButton-CAQ--0sB.js";import{n as a,t as o}from"./dialogTitle-DMBvXZLT.js";import s,{createContext as c,forwardRef as l,useContext as u,useEffect as d,useId as f,useRef as p}from"react";import m from"classnames";const h=c({close:()=>{}}),g=c(()=>()=>{}),_=()=>u(h);function v({children:t,component:r,className:i,id:a,...o},c){let{titleId:l}=_(),d=u(g),f=r??`h2`,p=m(`drawer-title`,i),h=e(f)??a??l;return n(()=>h?d(h):void 0,[d,h]),/* @__PURE__ */ s.createElement(f,{className:p,id:h,...o,ref:c},t)}const y=t(v,`DrawerTitle`),b=/* @__PURE__ */ new Set,x=l(({"aria-labelledby":e,children:t,backdrop:i=!0,className:c,defaultVisible:l,fitContent:u,fullscreen:_,instant:v,keyboard:S=!0,onClick:C,onClose:w,onClosePrevented:T,onHidden:E,onKeyDown:D,onShow:O,onShown:k,onVisibleChange:A,placement:j,responsive:M,scroll:N=!1,sheet:P,translucent:F,open:I,visible:L,...R},z)=>{let{close:B,dialogRef:V,forkedRef:H,handleBackdropClick:U,handleCancel:W,handleKeyDown:G,handleNativeClose:K,hiding:q,staticBounce:J}=r({backdrop:i,defaultVisible:l,instant:v,isModal:!!i||!N,keyboard:S,lockScroll:!N,onBeforeShow:e=>{for(let t of b)t.dialog!==e&&t.close()},onClick:C,onClose:w,onClosePrevented:T,onHidden:E,onKeyDown:D,onShow:O,onShown:k,onVisibleChange:A,open:I,ref:z,visible:L}),Y=f(),[X,Z]=a(()=>I?o(t,{dialog:x,generatedId:Y,title:y}):void 0),Q=p(B);Q.current=B,n(()=>{let e=V.current;if(!e)return;let t={dialog:e,close:()=>Q.current()};return b.add(t),()=>{b.delete(t)}},[V]),d(()=>{if(!M)return;let e=()=>{let e=V.current;e?.open&&getComputedStyle(e).position!==`fixed`&&Q.current()};return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[V,M]);let $=m(M?`max-${M}:drawer`:`drawer`,`drawer-${j}`,{fullscreen:_,sheet:P,translucent:F,instant:v,"drawer-fit-content":u,static:J,hiding:q},c);return/* @__PURE__ */ s.createElement(h.Provider,{value:{close:B,titleId:Y}},/* @__PURE__ */ s.createElement(g.Provider,{value:Z},/* @__PURE__ */ s.createElement(`dialog`,{"aria-labelledby":e??(R[`aria-label`]?void 0:X),tabIndex:-1,...R,open:I,className:$,onCancel:W,onClick:U,onClose:K,onKeyDown:G,ref:H},t)))});x.displayName=`Drawer`;function S({children:e,className:t,component:n,...r},i){let a=n??`div`,o=m(`drawer-body`,t);return/* @__PURE__ */ s.createElement(a,{className:o,...r,ref:i},e)}const C=t(S,`DrawerBody`);function w({children:e,className:t,component:n,stacked:r,...i},a){let o=n??`div`,c=m(`drawer-footer`,{stacked:r},t);return/* @__PURE__ */ s.createElement(o,{className:c,...i,ref:a},e)}const T=t(w,`DrawerFooter`);function E({children:e,className:t,closeButton:n=!0,closeLabel:r,component:a,...o},c){let l=a??`div`,{close:u}=_(),d=m(`drawer-header`,t);return/* @__PURE__ */ s.createElement(l,{className:d,...o,ref:c},e,n&&/* @__PURE__ */ s.createElement(i,{label:r,onClick:u}))}const D=t(E,`DrawerHeader`);export{y as a,x as i,T as n,_ as o,C as r,D as t};
+//# sourceMappingURL=drawer-DPxF30qn.js.map

package/dist/chunks/drawer-DPxF30qn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-DPxF30qn.js","names":["resolveSlottedId","useIsomorphicLayoutEffect","useDialogElement","CloseButton","useDialogTitle","findDialogTitleId","React","classNames","DrawerContext","createContext","DrawerTitleContext","useDrawer","useContext","DrawerTitleRender","rest","registerTitle","Component","component","_className","className","resolvedId","id","titleId","children","DrawerTitle","createPolymorphicComponent","openDrawers","Drawer","forwardRef","ariaLabelledBy","backdrop","scroll","entry","dialog","useId","labelledBy","open","closeRef","useRef","close","dialogRef","useEffect","responsive","handleResize","placement","fitContent","staticBounce","handleCancel","handleBackdropClick","handleNativeClose","handleKeyDown","forkedRef","DrawerBodyRender","DrawerBody","DrawerFooterRender","DrawerFooter","DrawerHeaderRender","closeButton","closeLabel","DrawerHeader"],"sources":["../../src/components/drawer/context.ts","../../src/components/drawer/useDrawer.ts","../../src/components/drawer/DrawerTitle.tsx","../../src/components/drawer/Drawer.tsx","../../src/components/drawer/DrawerBody.tsx","../../src/components/drawer/DrawerFooter.tsx","../../src/components/drawer/DrawerHeader.tsx"],"sourcesContent":["import { createContext } from 'react'\n\nimport { RegisterDialogTitle } from '../../hooks/useDialogTitle'\n\nexport interface DrawerContextProps {\n  /**\n   * Requests the drawer be closed — fires `onClose`. Wire this to any element's `onClick`; see\n   * `useDrawer`.\n   */\n  close: () => void\n  /**\n   * Id generated by `Drawer` and applied automatically by `DrawerTitle` to itself, so the\n   * dialog's `aria-labelledby` resolves to it without any manual wiring.\n   */\n  titleId?: string\n}\n\nexport const DrawerContext = createContext<DrawerContextProps>({ close: () => {} })\n\n// How a rendered `DrawerTitle` tells its `Drawer` the id it has (`useDialogTitle`). Apart from\n// `DrawerContext`, whose value `useDrawer` returns to callers.\nexport const DrawerTitleContext = createContext<RegisterDialogTitle>(() => () => {})\n","import { useContext } from 'react'\nimport { DrawerContext, DrawerContextProps } from './context'\n\nexport type UseDrawerResult = DrawerContextProps\n\n// Reach the enclosing `Drawer`'s close handler from anywhere in its composed markup — e.g. to\n// close it from a plain `Button` placed in a `DrawerFooter`. Only meaningful inside a `Drawer`;\n// outside one it returns a no-op `close`.\nexport const useDrawer = (): UseDrawerResult => useContext(DrawerContext)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement, useContext } from 'react'\nimport classNames from 'classnames'\n\nimport { useIsomorphicLayoutEffect } from '../../hooks'\nimport { DrawerTitleContext } from './context'\nimport { useDrawer } from './useDrawer'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { resolveSlottedId } from '../../utils/elementKind'\n\ntype DrawerTitleOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type DrawerTitleProps<C extends ElementType = 'h2'> = PolymorphicComponentProps<\n  C,\n  DrawerTitleOwnProps<C>\n>\n\ntype DrawerTitleComponent = (<C extends ElementType = 'h2'>(\n  props: DrawerTitleProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction DrawerTitleRender<C extends ElementType = 'h2'>(\n  { children, component, className, id, ...rest }: DrawerTitleProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const { titleId } = useDrawer()\n  const registerTitle = useContext(DrawerTitleContext)\n  const Component = component ?? 'h2'\n  const _className = classNames('drawer-title', className)\n  // Under `asChild` the child's own `id` is the one rendered (`Slot`), so it is the one registered.\n  const resolvedId = resolveSlottedId(Component) ?? id ?? titleId\n\n  // The drawer is labelled by this title, under the id it has here.\n  useIsomorphicLayoutEffect(\n    () => (resolvedId ? registerTitle(resolvedId) : undefined),\n    [registerTitle, resolvedId]\n  )\n\n  return (\n    <Component className={_className} id={resolvedId} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const DrawerTitle = createPolymorphicComponent<DrawerTitleComponent>(\n  DrawerTitleRender as ForwardRefRenderFunction<Element, DrawerTitleProps<ElementType>>,\n  'DrawerTitle'\n)\n","import React, { DialogHTMLAttributes, forwardRef, useEffect, useId, useRef } from 'react'\nimport classNames from 'classnames'\n\nimport { useDialogElement, useIsomorphicLayoutEffect } from '../../hooks'\nimport { useDialogTitle } from '../../hooks/useDialogTitle'\nimport { findDialogTitleId } from '../../utils/dialogTitle'\nimport { DrawerContext, DrawerTitleContext } from './context'\nimport { DrawerTitle } from './DrawerTitle'\n\nexport interface DrawerProps extends Omit<\n  DialogHTMLAttributes<HTMLDialogElement>,\n  'onCancel' | 'onClose'\n> {\n  /**\n   * Show a backdrop while the drawer is open. `'static'` blocks closing on backdrop click\n   * (the drawer nudges instead). `false` takes effect only together with `scroll`: the drawer\n   * then opens non-modal, with no backdrop and the page usable behind it. Without `scroll` the\n   * drawer stays modal, backdrop and all, as chassis-css's vanilla drawer derives it.\n   */\n  backdrop?: boolean | 'static'\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Whether the drawer is open when it first renders. Such a drawer is uncontrolled: it closes\n   * itself on a close request. Use `visible` to open and close it from outside.\n   */\n  defaultVisible?: boolean\n  /**\n   * Size the height to the drawer's content instead of `--drawer-height`. Meaningful for\n   * `placement=\"bottom\"`.\n   */\n  fitContent?: boolean\n  /**\n   * Expand the panel to fill the viewport, animating in from the direction of `placement`.\n   */\n  fullscreen?: boolean\n  /**\n   * Disable the open/close transition entirely.\n   */\n  instant?: boolean\n  /**\n   * Closes the drawer when the escape key is pressed.\n   */\n  keyboard?: boolean\n  /**\n   * Renders the drawer open from its first paint, server HTML included, as a non-modal dialog: a\n   * static preview. It stays open until a close request. Use `visible` or `defaultVisible` to\n   * open it as a modal dialog.\n   */\n  open?: boolean\n  /**\n   * Callback fired when the drawer requests to be closed (escape, backdrop click, close button,\n   * or another drawer opening).\n   */\n  onClose?: () => void\n  /**\n   * Callback fired when a close attempt is blocked (static backdrop click, or escape with `keyboard=false`).\n   */\n  onClosePrevented?: () => void\n  /**\n   * Callback fired after the exit transition completes and the drawer is fully hidden.\n   */\n  onHidden?: () => void\n  /**\n   * Callback fired when the drawer starts to open.\n   */\n  onShow?: () => void\n  /**\n   * Callback fired after the entry transition completes and the drawer is fully visible.\n   */\n  onShown?: () => void\n  /**\n   * Callback fired with `false` when the drawer requests to be closed, at the same moments as\n   * `onClose`. It makes `visible` and `onVisibleChange` a pair that takes a state setter.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * Which viewport edge the panel slides in from. Always required — there is no default\n   * off-screen transform without one.\n   */\n  placement: 'start' | 'end' | 'top' | 'bottom'\n  /**\n   * Renders as a drawer only below this breakpoint — inline as a flex container above it.\n   */\n  responsive?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n  /**\n   * Allow the page behind the drawer to scroll while it's open.\n   */\n  scroll?: boolean\n  /**\n   * Remove the inset gap, border radius, and border so the panel sits flush against the\n   * viewport edge.\n   */\n  sheet?: boolean\n  /**\n   * Apply a frosted-glass background to the panel.\n   */\n  translucent?: boolean\n  /**\n   * Whether the drawer is open. The drawer is then controlled: a close request only fires\n   * `onClose` and `onVisibleChange`, and the drawer closes when this becomes `false`.\n   */\n  visible?: boolean\n}\n\n// Currently-open drawers, so opening one can auto-close any other open drawer\n// (\"When a second drawer opens while one is already open, the first closes automatically\").\nconst openDrawers = new Set<{ dialog: HTMLDialogElement; close: () => void }>()\n\nexport const Drawer = forwardRef<HTMLDialogElement, DrawerProps>(\n  (\n    {\n      'aria-labelledby': ariaLabelledBy,\n      children,\n      backdrop = true,\n      className,\n      defaultVisible,\n      fitContent,\n      fullscreen,\n      instant,\n      keyboard = true,\n      onClick,\n      onClose,\n      onClosePrevented,\n      onHidden,\n      onKeyDown,\n      onShow,\n      onShown,\n      onVisibleChange,\n      placement,\n      responsive,\n      scroll = false,\n      sheet,\n      translucent,\n      open,\n      visible,\n      ...rest\n    },\n    ref\n  ) => {\n    const {\n      close,\n      dialogRef,\n      forkedRef,\n      handleBackdropClick,\n      handleCancel,\n      handleKeyDown,\n      handleNativeClose,\n      hiding,\n      staticBounce\n    } = useDialogElement({\n      backdrop,\n      defaultVisible,\n      instant,\n      isModal: Boolean(backdrop) || !scroll,\n      keyboard,\n      // Modal for its backdrop, the page still scrolls under a `scroll` drawer.\n      lockScroll: !scroll,\n      onBeforeShow: (dialog) => {\n        for (const entry of openDrawers) {\n          if (entry.dialog !== dialog) entry.close()\n        }\n      },\n      onClick,\n      onClose,\n      onClosePrevented,\n      onHidden,\n      onKeyDown,\n      onShow,\n      onShown,\n      onVisibleChange,\n      open,\n      ref,\n      visible\n    })\n\n    const titleId = useId()\n    // Labelled by the title that is rendered, under the id it has, unless the caller names the\n    // dialog itself: `aria-labelledby` would outrank that `aria-label`.\n    const [labelledBy, registerTitle] = useDialogTitle(() =>\n      open\n        ? findDialogTitleId(children, { dialog: Drawer, generatedId: titleId, title: DrawerTitle })\n        : undefined\n    )\n\n    const closeRef = useRef(close)\n    closeRef.current = close\n\n    // Register in the cross-instance registry so other drawers can auto-close this one. From a\n    // layout effect, as the show effect that reads the registry (`onBeforeShow`) runs: two drawers\n    // mounted open in one commit both opened before either was registered, and both stayed open.\n    useIsomorphicLayoutEffect(() => {\n      const dialog = dialogRef.current\n      if (!dialog) return undefined\n      const entry = { dialog, close: () => closeRef.current() }\n      openDrawers.add(entry)\n      return () => {\n        openDrawers.delete(entry)\n      }\n    }, [dialogRef])\n\n    // A `responsive` drawer is one only below its breakpoint: above it chassis-css lays the\n    // element out in the page. One that is open when the viewport grows past the breakpoint\n    // would stay in the top layer, over an inert and scroll-locked page, so it asks to close, as\n    // chassis-css's own drawer does on `resize`. Read from the computed `position` like there,\n    // not from a width: the breakpoints are the theme's.\n    useEffect(() => {\n      if (!responsive) return undefined\n      const handleResize = () => {\n        const dialog = dialogRef.current\n        if (!dialog?.open || getComputedStyle(dialog).position === 'fixed') return\n        closeRef.current()\n      }\n      window.addEventListener('resize', handleResize)\n      return () => window.removeEventListener('resize', handleResize)\n    }, [dialogRef, responsive])\n\n    // `hiding` has to stay on the class list for the whole exit transition: the native `open`\n    // attribute — and with it, the `[class*=\"drawer\"]:not([open], .hiding)` escape hatch\n    // chassis-css's navbar styles use to suppress the drawer-flash transition when the navbar\n    // itself crosses its `expand` breakpoint — would otherwise get stripped the instant `open`\n    // is removed, which would also strip the *intentional* close transition this class exists\n    // to protect.\n    const _className = classNames(\n      responsive ? `max-${responsive}:drawer` : 'drawer',\n      `drawer-${placement}`,\n      {\n        fullscreen,\n        sheet,\n        translucent,\n        instant,\n        'drawer-fit-content': fitContent,\n        static: staticBounce,\n        hiding\n      },\n      className\n    )\n\n    return (\n      <DrawerContext.Provider value={{ close, titleId }}>\n        <DrawerTitleContext.Provider value={registerTitle}>\n          <dialog\n            // Out of `rest`, so a caller's `aria-labelledby={undefined}` (a wrapper forwarding a prop\n            // it wasn't given) leaves the title's label in place instead of writing over it.\n            aria-labelledby={ariaLabelledBy ?? (rest['aria-label'] ? undefined : labelledBy)}\n            // Firefox and Safari put a `<dialog>` without a tabindex in the Tab order, where it takes\n            // focus with no ring: a `responsive` drawer shown inline is a stop between its links.\n            tabIndex={-1}\n            {...rest}\n            open={open}\n            className={_className}\n            onCancel={handleCancel}\n            onClick={handleBackdropClick}\n            onClose={handleNativeClose}\n            onKeyDown={handleKeyDown}\n            ref={forkedRef}\n          >\n            {children}\n          </dialog>\n        </DrawerTitleContext.Provider>\n      </DrawerContext.Provider>\n    )\n  }\n)\n\nDrawer.displayName = 'Drawer'\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype DrawerBodyOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type DrawerBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  DrawerBodyOwnProps<C>\n>\n\ntype DrawerBodyComponent = (<C extends ElementType = 'div'>(\n  props: DrawerBodyProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction DrawerBodyRender<C extends ElementType = 'div'>(\n  { children, className, component, ...rest }: DrawerBodyProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('drawer-body', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const DrawerBody = createPolymorphicComponent<DrawerBodyComponent>(\n  DrawerBodyRender as ForwardRefRenderFunction<Element, DrawerBodyProps<ElementType>>,\n  'DrawerBody'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype DrawerFooterOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Stack the footer actions as full-width columns instead of a right-aligned row.\n   */\n  stacked?: boolean\n}\n\nexport type DrawerFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  DrawerFooterOwnProps<C>\n>\n\ntype DrawerFooterComponent = (<C extends ElementType = 'div'>(\n  props: DrawerFooterProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction DrawerFooterRender<C extends ElementType = 'div'>(\n  { children, className, component, stacked, ...rest }: DrawerFooterProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('drawer-footer', { stacked }, className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const DrawerFooter = createPolymorphicComponent<DrawerFooterComponent>(\n  DrawerFooterRender as ForwardRefRenderFunction<Element, DrawerFooterProps<ElementType>>,\n  'DrawerFooter'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { useDrawer } from './useDrawer'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { CloseButton } from '../close-button/CloseButton'\n\ntype DrawerHeaderOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Add a close button component to the header.\n   */\n  closeButton?: boolean\n  /**\n   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for\n   * non-English UIs.\n   */\n  closeLabel?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type DrawerHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  DrawerHeaderOwnProps<C>\n>\n\ntype DrawerHeaderComponent = (<C extends ElementType = 'div'>(\n  props: DrawerHeaderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction DrawerHeaderRender<C extends ElementType = 'div'>(\n  { children, className, closeButton = true, closeLabel, component, ...rest }: DrawerHeaderProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const { close } = useDrawer()\n  const _className = classNames('drawer-header', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n      {closeButton && <CloseButton label={closeLabel} onClick={close} />}\n    </Component>\n  )\n}\n\nexport const DrawerHeader = createPolymorphicComponent<DrawerHeaderComponent>(\n  DrawerHeaderRender as ForwardRefRenderFunction<Element, DrawerHeaderProps<ElementType>>,\n  'DrawerHeader'\n)\n"],"mappings":"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"}

package/dist/chunks/file-input-B5YaBXjI.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{t as e}from"./useForkedRef-WoqMqsWE.js";import{t}from"./useFormField-q21MOgh8.js";import{t as n}from"./useHeldBack-o-CsPcSe.js";import{t as r}from"./renderFormField-CaZ8-xrn.js";import{t as i}from"./validationClassName-gRGs4KBm.js";import a,{forwardRef as o,useRef as s}from"react";import c from"classnames";const l=o(({className:o,help:l,id:u,invalid:d,invalidFeedback:f,label:p,size:m,valid:h,validFeedback:g,..._},v)=>{let y=s(null),b=e(v,y),{invalid:x,valid:S}=n(y,{invalid:d,valid:h}),{describedBy:C,feedbackId:w,helpId:T,inputId:E,labelId:D,labelledBy:O}=t({ariaDescribedBy:_[`aria-describedby`],ariaLabelledBy:_[`aria-labelledby`],help:l,id:u,invalid:x,invalidFeedback:f,label:p,valid:S,validFeedback:g}),k=c(`form-input`,m,i(x,S),o);return r({children:/* @__PURE__ */ a.createElement(`input`,{..._,"aria-describedby":C,"aria-labelledby":_[`aria-labelledby`]&&O,"aria-invalid":x||void 0,className:k,id:E,ref:b,type:`file`}),help:l,ids:{feedback:w,help:T,input:E,label:D},invalid:x,invalidFeedback:f,label:p,valid:S,validFeedback:g})});l.displayName=`FileInput`;export{l as t};
+//# sourceMappingURL=file-input-B5YaBXjI.js.map

package/dist/chunks/file-input-B5YaBXjI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input-B5YaBXjI.js","names":["useForkedRef","useHeldBack","renderFormField","validationClassName","React","classNames","FileInput","forwardRef","invalidProp","validProp","rest","inputRef","useRef","forkedRef","ref","useFormField","_className","size","invalid","valid","className","describedBy","labelledBy","inputId","feedbackId","helpId","labelId"],"sources":["../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import React, {\n  ChangeEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  ReactNode,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\n\nimport { useForkedRef, useFormField, useHeldBack } from '../../hooks'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\n\n// No `value` or `defaultValue`: a file input's value is the files chosen, and a string given\n// throws at mount (`InvalidStateError`).\nexport interface FileInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'defaultValue' | 'size' | 'value'\n> {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n  /**\n   * A description for the field, rendered below the input.\n   */\n  help?: ReactNode\n  /**\n   * Set component validation state to invalid. Left unset, the component shows as invalid by itself\n   * from a submit it held back (an empty `required` one, say) until it no longer would, or its\n   * form is reset. Set it, to `false` too, and it alone decides.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the input when `invalid` is set, and after a\n   * submit the field held back, until it no longer would.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with this input.\n   */\n  label?: ReactNode\n  /**\n   * Allows selecting more than one file.\n   */\n  multiple?: boolean\n  /**\n   * Method called when the selected file(s) change.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the input when `valid` is set.\n   */\n  validFeedback?: ReactNode\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n  (\n    {\n      className,\n      help,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      label,\n      size,\n      valid: validProp,\n      validFeedback,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n    // Shown as invalid from a submit it held back until it no longer would (`useHeldBack`). The\n    // browser's own message stays: no react-aria hook is given this control to cancel it. It is\n    // on the first invalid control of the form alone, and gone at the next click.\n    const { invalid, valid } = useHeldBack(inputRef, { invalid: invalidProp, valid: validProp })\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const _className = classNames(\n      'form-input',\n      size,\n      validationClassName(invalid, valid),\n      className\n    )\n\n    return renderFormField({\n      children: (\n        <input\n          {...rest}\n          aria-describedby={describedBy}\n          // A caller's `aria-labelledby` adds to the visible label, as in `TextInput`, rather than\n          // taking its place: it outranks the `<label for>`.\n          aria-labelledby={rest['aria-labelledby'] && labelledBy}\n          aria-invalid={invalid || undefined}\n          className={_className}\n          id={inputId}\n          ref={forkedRef}\n          type=\"file\"\n        />\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nFileInput.displayName = 'FileInput'\n"],"mappings":"A,4VAoEA,MAAaM,EAAYC,GAErB,CACE,YACA,OACA,KACA,QAASC,EACT,kBACA,QACA,OACA,MAAOC,EACP,gBACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAWC,EAAyB,IAAI,EACxCC,EAAYb,EAAac,EAAKH,CAAQ,EAItC,CAAE,UAAS,SAAUV,EAAYU,EAAU,CAAE,QAASH,EAAa,MAAOC,CAAU,CAAC,EAErF,CAAE,cAAa,aAAY,SAAQ,UAAS,UAAS,cAAeM,EAAa,CACrF,gBAAiBL,EAAK,oBACtB,eAAgBA,EAAK,mBACrB,OACA,KACA,UACA,kBACA,QACA,QACA,eACF,CAAC,EAEKM,EAAaX,EACjB,aACAY,EACAd,EAAoBe,EAASC,CAAK,EAClCC,CACF,EAEA,OAAOlB,EAAgB,CACrB,SACE,kBAAA,cAAC,QAAD,CACE,GAAIQ,EACJ,mBAAkBW,EAGlB,kBAAiBX,EAAK,oBAAsBY,EAC5C,eAAcJ,GAAW,IAAA,GACzB,UAAWF,EACX,GAAIO,EACJ,IAAKV,EACL,KAAK,MACN,CAAA,EAEH,OACA,IAAK,CAAE,SAAUW,EAAY,KAAMC,EAAQ,MAAOF,EAAS,MAAOG,CAAQ,EAC1E,UACA,kBACA,QACA,QACA,eACF,CAAC,CACH,CACF,EAEA,EAAU,YAAc,Y"}

package/dist/chunks/{flex-C2jV5LyV.js → flex-C6CbAkVJ.js}

@@ -1,2 +1,2 @@
-import"./focus-ring-Bs80iIBN.js";import{t as e}from"./polymorphic-CZIFszAy.js";import{a as t,i as n}from"./breakpoints-CGk8szzR.js";import{t as r}from"./spacingClassName-DVhk8m3P.js";import i from"react";import a from"classnames";function o({children:e,className:o,component:s,inline:c,direction:l,wrap:u,justify:d,align:f,alignContent:p,gap:m,rowGap:h,columnGap:g,..._},v){let y=s??`div`,b=a(c?`d-inline-flex`:`d-flex`,n([t(l,(e,t)=>`${t}flex-${e}`),t(u,(e,t)=>`${t}flex-${e}`),t(d,(e,t)=>`${t}justify-content-${e}`),t(f,(e,t)=>`${t}align-items-${e}`),t(p,(e,t)=>`${t}align-content-${e}`),t(m,(e,t)=>r(`gap`,e,t)),t(h,(e,t)=>r(`row-gap`,e,t)),t(g,(e,t)=>r(`column-gap`,e,t))]),o);return/* @__PURE__ */ i.createElement(y,{className:b,..._,ref:v},e)}const s=e(o,`Flex`);export{s as t};
-//# sourceMappingURL=flex-C2jV5LyV.js.map
+import"./focus-ring-Bs80iIBN.js";import{t as e}from"./polymorphic-mAKwlLiW.js";import{a as t,i as n}from"./breakpoints-CGk8szzR.js";import{t as r}from"./spacingClassName-DVhk8m3P.js";import i from"react";import a from"classnames";function o({children:e,className:o,component:s,inline:c,direction:l,wrap:u,justify:d,align:f,alignContent:p,gap:m,rowGap:h,columnGap:g,..._},v){let y=s??`div`,b=a(c?`d-inline-flex`:`d-flex`,n([t(l,(e,t)=>`${t}flex-${e}`),t(u,(e,t)=>`${t}flex-${e}`),t(d,(e,t)=>`${t}justify-content-${e}`),t(f,(e,t)=>`${t}align-items-${e}`),t(p,(e,t)=>`${t}align-content-${e}`),t(m,(e,t)=>r(`gap`,e,t)),t(h,(e,t)=>r(`row-gap`,e,t)),t(g,(e,t)=>r(`column-gap`,e,t))]),o);return/* @__PURE__ */ i.createElement(y,{className:b,..._,ref:v},e)}const s=e(o,`Flex`);export{s as t};
+//# sourceMappingURL=flex-C6CbAkVJ.js.map

package/dist/chunks/{flex-C2jV5LyV.js.map → flex-C6CbAkVJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"flex-C2jV5LyV.js","names":["createPolymorphicComponent","responsiveProp","responsiveClassNames","spacingClassName","React","classNames","FlexRender","rest","Component","component","_className","inline","direction","prefix","value","wrap","justify","align","alignContent","gap","rowGap","columnGap","className","children","Flex"],"sources":["../../src/components/flex/Flex.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { responsiveClassNames, responsiveProp } from '../../utils/breakpoints'\nimport { spacingClassName } from '../../utils/spacingClassName'\nimport { Responsive, Spacing } from '../../types'\n\ntype FlexOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Renders an inline flex container (`.d-inline-flex`) instead of a block-level one (`.d-flex`,\n   * the default).\n   */\n  inline?: boolean\n  /**\n   * Sets `flex-direction`. Omit for the browser default (`row`). An object sets it per\n   * breakpoint, `base` being the narrowest width: `{ base: 'column', md: 'row' }`. The\n   * breakpoints are widths of the viewport, so unlike `Stack`'s `direction` they need no\n   * `.contains-inline` ancestor.\n   */\n  direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>\n  /**\n   * Sets `flex-wrap`. Omit for the browser default (`nowrap`). Takes an object per breakpoint,\n   * as `direction` does.\n   */\n  wrap?: Responsive<'wrap' | 'nowrap' | 'wrap-reverse'>\n  /**\n   * Sets `justify-content`, aligning items along the main axis. Takes an object per breakpoint,\n   * as `direction` does.\n   */\n  justify?: Responsive<'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'>\n  /**\n   * Sets `align-items`, aligning items along the cross axis. Takes an object per breakpoint, as\n   * `direction` does.\n   */\n  align?: Responsive<'start' | 'end' | 'center' | 'baseline' | 'stretch'>\n  /**\n   * Sets `align-content`, distributing wrapped lines along the cross axis. Has no effect on\n   * single-line (non-wrapping) containers. Takes an object per breakpoint, as `direction` does.\n   */\n  alignContent?: Responsive<'start' | 'end' | 'center' | 'between' | 'around' | 'stretch'>\n  /**\n   * Spacing between children on both axes, mapped to the `gap-*` utility classes. Overridden per\n   * axis by `rowGap`/`columnGap` where set. Takes an object per breakpoint, as `direction` does.\n   *\n   * @type { Responsive<Spacing | 0> }\n   */\n  gap?: Responsive<Spacing | 0>\n  /**\n   * Spacing between rows (the cross axis when wrapped), mapped to the `row-gap-*` utility\n   * classes. Independent of `gap`/`columnGap`. Takes an object per breakpoint, as `direction`\n   * does.\n   *\n   * @type { Responsive<Spacing | 0> }\n   */\n  rowGap?: Responsive<Spacing | 0>\n  /**\n   * Spacing between columns (the main axis), mapped to the `column-gap-*` utility classes.\n   * Independent of `gap`/`rowGap`. Takes an object per breakpoint, as `direction` does.\n   *\n   * @type { Responsive<Spacing | 0> }\n   */\n  columnGap?: Responsive<Spacing | 0>\n}\n\nexport type FlexProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FlexOwnProps<C>>\n\ntype FlexComponent = (<C extends ElementType = 'div'>(\n  props: FlexProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction FlexRender<C extends ElementType = 'div'>(\n  {\n    children,\n    className,\n    component,\n    inline,\n    direction,\n    wrap,\n    justify,\n    align,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n    ...rest\n  }: FlexProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames(\n    inline ? 'd-inline-flex' : 'd-flex',\n    responsiveClassNames([\n      responsiveProp(direction, (value, prefix) => `${prefix}flex-${value}`),\n      responsiveProp(wrap, (value, prefix) => `${prefix}flex-${value}`),\n      responsiveProp(justify, (value, prefix) => `${prefix}justify-content-${value}`),\n      responsiveProp(align, (value, prefix) => `${prefix}align-items-${value}`),\n      responsiveProp(alignContent, (value, prefix) => `${prefix}align-content-${value}`),\n      responsiveProp(gap, (value, prefix) => spacingClassName('gap', value, prefix)),\n      responsiveProp(rowGap, (value, prefix) => spacingClassName('row-gap', value, prefix)),\n      responsiveProp(columnGap, (value, prefix) => spacingClassName('column-gap', value, prefix))\n    ]),\n    className\n  )\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const Flex = createPolymorphicComponent<FlexComponent>(\n  FlexRender as ForwardRefRenderFunction<Element, FlexProps<ElementType>>,\n  'Flex'\n)\n"],"mappings":"A,sOAmFA,SAASM,EACP,CACE,WACA,YACA,YACA,SACA,YACA,OACA,UACA,QACA,eACA,MACA,SACA,YACA,GAAGC,GAEL,EACA,CACA,IAAMC,EAAYC,GAAa,MACzBC,EAAaL,EACjBM,EAAS,gBAAkB,SAC3BT,EAAqB,CACnBD,EAAeW,GAAY,EAAO,IAAW,GAAGC,EAAO,OAAOC,GAAO,EACrEb,EAAec,GAAO,EAAO,IAAW,GAAGF,EAAO,OAAOC,GAAO,EAChEb,EAAee,GAAU,EAAO,IAAW,GAAGH,EAAO,kBAAkBC,GAAO,EAC9Eb,EAAegB,GAAQ,EAAO,IAAW,GAAGJ,EAAO,cAAcC,GAAO,EACxEb,EAAeiB,GAAe,EAAO,IAAW,GAAGL,EAAO,gBAAgBC,GAAO,EACjFb,EAAekB,GAAM,EAAO,IAAWhB,EAAiB,MAAOW,EAAOD,CAAM,CAAC,EAC7EZ,EAAemB,GAAS,EAAO,IAAWjB,EAAiB,UAAWW,EAAOD,CAAM,CAAC,EACpFZ,EAAeoB,GAAY,EAAO,IAAWlB,EAAiB,aAAcW,EAAOD,CAAM,CAAC,CAC5F,CAAC,EACDS,CACF,EAEA,MACE,kBAAA,cAACd,EAAD,CAAW,UAAWE,EAAY,GAAIH,EAAW,KAEtC,EADRgB,CACQ,CAEf,CAEA,MAAaC,EAAOxB,EAClBM,EACA,MACF,E"}
+{"version":3,"file":"flex-C6CbAkVJ.js","names":["createPolymorphicComponent","responsiveProp","responsiveClassNames","spacingClassName","React","classNames","FlexRender","rest","Component","component","_className","inline","direction","prefix","value","wrap","justify","align","alignContent","gap","rowGap","columnGap","className","children","Flex"],"sources":["../../src/components/flex/Flex.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { responsiveClassNames, responsiveProp } from '../../utils/breakpoints'\nimport { spacingClassName } from '../../utils/spacingClassName'\nimport { Responsive, Spacing } from '../../types'\n\ntype FlexOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Renders an inline flex container (`.d-inline-flex`) instead of a block-level one (`.d-flex`,\n   * the default).\n   */\n  inline?: boolean\n  /**\n   * Sets `flex-direction`. Omit for the browser default (`row`). An object sets it per\n   * breakpoint, `base` being the narrowest width: `{ base: 'column', md: 'row' }`. The\n   * breakpoints are widths of the viewport, so unlike `Stack`'s `direction` they need no\n   * `.contains-inline` ancestor.\n   */\n  direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>\n  /**\n   * Sets `flex-wrap`. Omit for the browser default (`nowrap`). Takes an object per breakpoint,\n   * as `direction` does.\n   */\n  wrap?: Responsive<'wrap' | 'nowrap' | 'wrap-reverse'>\n  /**\n   * Sets `justify-content`, aligning items along the main axis. Takes an object per breakpoint,\n   * as `direction` does.\n   */\n  justify?: Responsive<'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'>\n  /**\n   * Sets `align-items`, aligning items along the cross axis. Takes an object per breakpoint, as\n   * `direction` does.\n   */\n  align?: Responsive<'start' | 'end' | 'center' | 'baseline' | 'stretch'>\n  /**\n   * Sets `align-content`, distributing wrapped lines along the cross axis. Has no effect on\n   * single-line (non-wrapping) containers. Takes an object per breakpoint, as `direction` does.\n   */\n  alignContent?: Responsive<'start' | 'end' | 'center' | 'between' | 'around' | 'stretch'>\n  /**\n   * Spacing between children on both axes, mapped to the `gap-*` utility classes. Overridden per\n   * axis by `rowGap`/`columnGap` where set. Takes an object per breakpoint, as `direction` does.\n   *\n   * @type { Responsive<Spacing | 0> }\n   */\n  gap?: Responsive<Spacing | 0>\n  /**\n   * Spacing between rows (the cross axis when wrapped), mapped to the `row-gap-*` utility\n   * classes. Independent of `gap`/`columnGap`. Takes an object per breakpoint, as `direction`\n   * does.\n   *\n   * @type { Responsive<Spacing | 0> }\n   */\n  rowGap?: Responsive<Spacing | 0>\n  /**\n   * Spacing between columns (the main axis), mapped to the `column-gap-*` utility classes.\n   * Independent of `gap`/`rowGap`. Takes an object per breakpoint, as `direction` does.\n   *\n   * @type { Responsive<Spacing | 0> }\n   */\n  columnGap?: Responsive<Spacing | 0>\n}\n\nexport type FlexProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FlexOwnProps<C>>\n\ntype FlexComponent = (<C extends ElementType = 'div'>(\n  props: FlexProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction FlexRender<C extends ElementType = 'div'>(\n  {\n    children,\n    className,\n    component,\n    inline,\n    direction,\n    wrap,\n    justify,\n    align,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n    ...rest\n  }: FlexProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames(\n    inline ? 'd-inline-flex' : 'd-flex',\n    responsiveClassNames([\n      responsiveProp(direction, (value, prefix) => `${prefix}flex-${value}`),\n      responsiveProp(wrap, (value, prefix) => `${prefix}flex-${value}`),\n      responsiveProp(justify, (value, prefix) => `${prefix}justify-content-${value}`),\n      responsiveProp(align, (value, prefix) => `${prefix}align-items-${value}`),\n      responsiveProp(alignContent, (value, prefix) => `${prefix}align-content-${value}`),\n      responsiveProp(gap, (value, prefix) => spacingClassName('gap', value, prefix)),\n      responsiveProp(rowGap, (value, prefix) => spacingClassName('row-gap', value, prefix)),\n      responsiveProp(columnGap, (value, prefix) => spacingClassName('column-gap', value, prefix))\n    ]),\n    className\n  )\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const Flex = createPolymorphicComponent<FlexComponent>(\n  FlexRender as ForwardRefRenderFunction<Element, FlexProps<ElementType>>,\n  'Flex'\n)\n"],"mappings":"A,sOAmFA,SAASM,EACP,CACE,WACA,YACA,YACA,SACA,YACA,OACA,UACA,QACA,eACA,MACA,SACA,YACA,GAAGC,GAEL,EACA,CACA,IAAMC,EAAYC,GAAa,MACzBC,EAAaL,EACjBM,EAAS,gBAAkB,SAC3BT,EAAqB,CACnBD,EAAeW,GAAY,EAAO,IAAW,GAAGC,EAAO,OAAOC,GAAO,EACrEb,EAAec,GAAO,EAAO,IAAW,GAAGF,EAAO,OAAOC,GAAO,EAChEb,EAAee,GAAU,EAAO,IAAW,GAAGH,EAAO,kBAAkBC,GAAO,EAC9Eb,EAAegB,GAAQ,EAAO,IAAW,GAAGJ,EAAO,cAAcC,GAAO,EACxEb,EAAeiB,GAAe,EAAO,IAAW,GAAGL,EAAO,gBAAgBC,GAAO,EACjFb,EAAekB,GAAM,EAAO,IAAWhB,EAAiB,MAAOW,EAAOD,CAAM,CAAC,EAC7EZ,EAAemB,GAAS,EAAO,IAAWjB,EAAiB,UAAWW,EAAOD,CAAM,CAAC,EACpFZ,EAAeoB,GAAY,EAAO,IAAWlB,EAAiB,aAAcW,EAAOD,CAAM,CAAC,CAC5F,CAAC,EACDS,CACF,EAEA,MACE,kBAAA,cAACd,EAAD,CAAW,UAAWE,EAAY,GAAIH,EAAW,KAEtC,EADRgB,CACQ,CAEf,CAEA,MAAaC,EAAOxB,EAClBM,EACA,MACF,E"}

package/dist/chunks/floating-input-B9YAJ9d4.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{C as e,c as t}from"./slot-DagH0Gxq.js";import{t as n}from"./context-HDVxTNPi.js";import{t as r}from"./FormLabel-CpzWYh6U.js";import{t as i}from"./renderFormField-CaZ8-xrn.js";import a,{forwardRef as o,useCallback as s,useEffect as c,useId as l,useMemo as u,useState as d}from"react";import f from"classnames";const p=o(({children:o,className:p,help:m,ids:h,invalid:g,invalidFeedback:_,label:v,valid:y,validFeedback:b,...x},S)=>{let C=l(),w=h?.input??(h?.label?void 0:`${C}-input`),T=h?.label??`${C}-label`,E=h?.help??`${C}-help`,D=h?.feedback??`${C}-feedback`,[O,k]=d({}),A=s((e,t)=>k(n=>n.invalid===e&&n.valid===t?n:{invalid:e,valid:t}),[]),j=g!==void 0||!!y,M=j?g:O.invalid,N=j?y:O.valid,P=!!(M&&_),F=t(!!m&&E,(P||!!(N&&b)&&!P)&&D),I=u(()=>({describedBy:F,inputId:w,labelId:T,reportValidation:A}),[F,w,T,A]);return c(()=>{e(w!==void 0&&!document.getElementById(w),"FloatingInput: no element has the id that the label points at with `htmlFor`. A field component of this library takes that id by itself; a control with an `id` of its own, or any other control, needs it passed as `ids={{ input: yourControlId }}` (or `ids.label` for a group with no single input, named through `aria-labelledby`).")},[w]),i({children:/* @__PURE__ */ a.createElement(`div`,{className:f(`form-floating`,p),...x,ref:S},/* @__PURE__ */ a.createElement(r,{htmlFor:w,id:T},v),/* @__PURE__ */ a.createElement(n.Provider,{value:I},o)),help:m,ids:{feedback:D,help:E},invalid:M,invalidFeedback:_,valid:N,validFeedback:b})});p.displayName=`FloatingInput`;export{p as t};
+//# sourceMappingURL=floating-input-B9YAJ9d4.js.map

package/dist/chunks/floating-input-B9YAJ9d4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-input-B9YAJ9d4.js","names":["devWarning","joinIds","FormFieldContext","FormLabel","renderFormField","React","classNames","FloatingInput","forwardRef","rest","generatedId","useId","inputId","ids","labelId","helpId","feedbackId","fieldValidation","setFieldValidation","useState","reportValidation","useCallback","previous","fieldInvalid","fieldValid","decided","invalid","valid","shownInvalid","shownValid","showInvalidFeedback","invalidFeedback","describedBy","help","validFeedback","field","useMemo","useEffect","className","label","children"],"sources":["../../src/components/floating-input/FloatingInput.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useState\n} from 'react'\nimport classNames from 'classnames'\n\nimport { FormLabel } from '../form/FormLabel'\nimport { FormFieldContext } from '../form-field/context'\nimport { FormFieldIds, renderFormField } from '../form-field/renderFormField'\nimport { devWarning } from '../../utils/devWarning'\nimport { joinIds } from '../../utils/idRefs'\n\nexport interface FloatingInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /**\n   * The form control (e.g. a `TextInput`, `Select`, or `Textarea`) the floating label attaches\n   * to. Chassis-css's floating-label CSS relies on a `label:has(~ .form-input)` selector, so this\n   * must render an element carrying the `form-input` class as a direct child.\n   */\n  children: ReactNode\n  /**\n   * A string of all className you want applied to the `.form-floating` element.\n   */\n  className?: string\n  /**\n   * A description for the field, rendered below the control. Setting this (or `invalidFeedback`/\n   * `validFeedback`) wraps the floating input in a `.form-field`.\n   */\n  help?: ReactNode\n  /**\n   * The ids that tie the label, help and feedback to the wrapped control, in place of the ones\n   * `FloatingInput` generates. A field component of this library (`TextInput`, `Select`,\n   * `Textarea`) takes them by itself and needs none. Any other control, such as a native\n   * `<input>`, takes them by hand: `input` is the label's `htmlFor` and goes on the control as\n   * its `id`, `label` is the label's own `id`, for a control named through `aria-labelledby`,\n   * and `help` and `feedback` are the ids of the help and feedback text, for the control's\n   * `aria-describedby`. `label` without `input` leaves the label with no `htmlFor`.\n   */\n  ids?: FormFieldIds\n  /**\n   * Set field validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the control when `invalid` is set, or when\n   * the field inside shows a submit it held back.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a floating `FormLabel` associated with the wrapped control.\n   */\n  label: ReactNode\n  /**\n   * Set field validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the control when `valid` is set.\n   */\n  validFeedback?: ReactNode\n}\n\nexport const FloatingInput = forwardRef<HTMLDivElement, FloatingInputProps>(\n  (\n    {\n      children,\n      className,\n      help,\n      ids,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback,\n      ...rest\n    },\n    ref\n  ) => {\n    const generatedId = useId()\n    // `ids.label` alone says the control is no single input: the label gets no `htmlFor`.\n    const inputId = ids?.input ?? (ids?.label ? undefined : `${generatedId}-input`)\n    const labelId = ids?.label ?? `${generatedId}-label`\n    const helpId = ids?.help ?? `${generatedId}-help`\n    const feedbackId = ids?.feedback ?? `${generatedId}-feedback`\n\n    // What the field inside decided itself: a submit it held back, or a `validated` form's\n    // verdict (FORMS.md, gotcha 10). The feedback shows with that mark, unless `invalid` or\n    // `valid` is set here.\n    const [fieldValidation, setFieldValidation] = useState<{ invalid?: boolean; valid?: boolean }>(\n      {}\n    )\n    const reportValidation = useCallback(\n      (fieldInvalid: boolean | undefined, fieldValid: boolean | undefined) =>\n        setFieldValidation((previous) =>\n          previous.invalid === fieldInvalid && previous.valid === fieldValid\n            ? previous\n            : { invalid: fieldInvalid, valid: fieldValid }\n        ),\n      []\n    )\n    const decided = invalid !== undefined || Boolean(valid)\n    const shownInvalid = decided ? invalid : fieldValidation.invalid\n    const shownValid = decided ? valid : fieldValidation.valid\n\n    // The same choice `renderFormField` makes: at most one feedback renders, and `invalid` wins.\n    const showInvalidFeedback = Boolean(shownInvalid && invalidFeedback)\n    const showValidFeedback = Boolean(shownValid && validFeedback) && !showInvalidFeedback\n    const describedBy = joinIds(\n      Boolean(help) && helpId,\n      (showInvalidFeedback || showValidFeedback) && feedbackId\n    )\n\n    // A field component inside reads these in `useFormField`, so the consumer repeats no id.\n    const field = useMemo(\n      () => ({ describedBy, inputId, labelId, reportValidation }),\n      [describedBy, inputId, labelId, reportValidation]\n    )\n\n    // Only a field component takes the id by itself. Checked once the control is in the document,\n    // since nothing at render says whether a child read the context.\n    useEffect(() => {\n      devWarning(\n        inputId !== undefined && !document.getElementById(inputId),\n        'FloatingInput: no element has the id that the label points at with `htmlFor`. A field ' +\n          'component of this library takes that id by itself; a control with an `id` of its ' +\n          'own, or any other control, needs it passed as `ids={{ input: yourControlId }}` (or ' +\n          '`ids.label` for a group with no single input, named through `aria-labelledby`).'\n      )\n    }, [inputId])\n\n    return renderFormField({\n      children: (\n        <div className={classNames('form-floating', className)} {...rest} ref={ref}>\n          <FormLabel htmlFor={inputId} id={labelId}>\n            {label}\n          </FormLabel>\n          <FormFieldContext.Provider value={field}>{children}</FormFieldContext.Provider>\n        </div>\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId },\n      invalid: shownInvalid,\n      invalidFeedback,\n      valid: shownValid,\n      validFeedback\n    })\n  }\n)\n\nFloatingInput.displayName = 'FloatingInput'\n"],"mappings":"A,6VAmEA,MAAaO,EAAgBC,GAEzB,CACE,WACA,YACA,OACA,MACA,UACA,kBACA,QACA,QACA,gBACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAcC,EAAM,EAEpBC,EAAUC,GAAK,QAAUA,GAAK,MAAQ,IAAA,GAAY,GAAGH,EAAY,SACjEI,EAAUD,GAAK,OAAS,GAAGH,EAAY,QACvCK,EAASF,GAAK,MAAQ,GAAGH,EAAY,OACrCM,EAAaH,GAAK,UAAY,GAAGH,EAAY,WAK7C,CAACO,EAAiBC,GAAsBC,EAC5C,CAAC,CACH,EACMC,EAAmBC,GACtB,EAAmC,IAClCH,EAAoB,GAClBI,EAAS,UAAYC,GAAgBD,EAAS,QAAUE,EACpDF,EACA,CAAE,QAASC,EAAc,MAAOC,CAAW,CACjD,EACF,CAAC,CACH,EACMC,EAAUC,IAAY,IAAA,IAAa,EAAQC,EAC3CC,EAAeH,EAAUC,EAAUT,EAAgB,QACnDY,EAAaJ,EAAUE,EAAQV,EAAgB,MAG/Ca,EAAsB,GAAQF,GAAgBG,GAE9CC,EAAc/B,EAClB,EAAQgC,GAASlB,GAChBe,GAHuB,GAAQD,GAAcK,IAAkB,CAACJ,IAGnBd,CAChD,EAGMmB,EAAQC,OACL,CAAE,cAAa,UAAS,UAAS,kBAAiB,GACzD,CAACJ,EAAapB,EAASE,EAASM,CAAgB,CAClD,EAcA,OAVAiB,MAAgB,CACdrC,EACEY,IAAY,IAAA,IAAa,CAAC,SAAS,eAAeA,CAAO,EACzD,2UAIF,CACF,EAAG,CAACA,CAAO,CAAC,EAELR,EAAgB,CACrB,SACE,kBAAA,cAAC,MAAD,CAAK,UAAWE,EAAW,gBAAiBgC,CAAS,EAAG,GAAI7B,EAAW,KAKlE,EAJH,kBAAA,cAACN,EAAD,CAAW,QAASS,EAAS,GAAIE,CAEtB,EADRyB,CACQ,EACX,kBAAA,cAACrC,EAAiB,SAAlB,CAA2B,MAAOiC,CAA4C,EAApCK,CAAoC,CAC3E,EAEP,OACA,IAAK,CAAE,SAAUxB,EAAY,KAAMD,CAAO,EAC1C,QAASa,EACT,kBACA,MAAOC,EACP,eACF,CAAC,CACH,CACF,EAEA,EAAc,YAAc,gB"}

package/dist/chunks/{form-field-Bcx96ezd.js → form-field-D74QY_wP.js}

@@ -1,2 +1,2 @@
-import"./focus-ring-Bs80iIBN.js";import{S as e}from"./slot-BQVx1Eew.js";import{t}from"./renderFormField-_6WswnEX.js";import{forwardRef as n}from"react";const r=n(function({children:n,className:r,help:i,ids:a,invalid:o,invalidFeedback:s,label:c,valid:l,validFeedback:u},d){return e(!!c&&!a?.input&&!a?.label,"FormField: `label` is set but `ids.input`/`ids.label` are not — the rendered label won't be associated with your control (no `htmlFor`, no `aria-labelledby` target). Pass `ids={{ input: yourControlId }}` (or `ids.label` for a group with no single input) so the label has something to point at."),t({children:n,className:r,help:i,ids:a,invalid:o,invalidFeedback:s,label:c,ref:d,valid:l,validFeedback:u})});r.displayName=`FormField`;export{r as t};
-//# sourceMappingURL=form-field-Bcx96ezd.js.map
+import"./focus-ring-Bs80iIBN.js";import{C as e}from"./slot-DagH0Gxq.js";import{t}from"./renderFormField-CaZ8-xrn.js";import{forwardRef as n}from"react";const r=n(function({children:n,className:r,help:i,ids:a,invalid:o,invalidFeedback:s,label:c,valid:l,validFeedback:u},d){return e(!!c&&!a?.input&&!a?.label,"FormField: `label` is set but `ids.input`/`ids.label` are not — the rendered label won't be associated with your control (no `htmlFor`, no `aria-labelledby` target). Pass `ids={{ input: yourControlId }}` (or `ids.label` for a group with no single input) so the label has something to point at."),t({children:n,className:r,help:i,ids:a,invalid:o,invalidFeedback:s,label:c,ref:d,valid:l,validFeedback:u})});r.displayName=`FormField`;export{r as t};
+//# sourceMappingURL=form-field-D74QY_wP.js.map

package/dist/chunks/{form-field-Bcx96ezd.js.map → form-field-D74QY_wP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-field-Bcx96ezd.js","names":["devWarning","FormField","forwardRef","label","ids","renderFormField"],"sources":["../../src/components/form-field/FormField.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from 'react'\n\nimport { FormFieldIds, renderFormField } from './renderFormField'\nimport { devWarning } from '../../utils/devWarning'\n\nexport interface FormFieldProps {\n  /**\n   * The form control(s) this field wraps.\n   */\n  children: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * A description for the field, rendered below the control(s).\n   */\n  help?: ReactNode\n  /**\n   * The DOM ids of the wrapped control(s), used to associate the label (`htmlFor`) and\n   * point your control's own `aria-describedby` at the rendered help/feedback text.\n   */\n  ids?: FormFieldIds\n  /**\n   * Set field validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the control(s) when `invalid` is set.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with `ids.input`.\n   */\n  label?: ReactNode\n  /**\n   * Set field validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the control(s) when `valid` is set.\n   */\n  validFeedback?: ReactNode\n}\n\n// Standalone `.form-field` wrapper for the \"wrap this yourself\" case: a control with no field\n// props of its own, or grouping more than one element under one label (e.g. an input plus a\n// sibling status meter). Combobox/DatePicker/ChipInput/OtpInput do NOT use this — they\n// call `renderFormField` directly and expose label/help/validFeedback/invalidFeedback as their\n// own props (see FORMS.md). Wrapping any of those 10 components in `FormField` produces a\n// nested, empty `.form-field` div — see FORMS.md's Gotchas section.\n//\n// The ref goes to the `.form-field` element. It stays `null` while the field renders its children\n// bare, with no `label`, `help`, feedback or `className` to need the element.\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  { children, className, help, ids, invalid, invalidFeedback, label, valid, validFeedback },\n  ref\n) {\n  devWarning(\n    !!label && !ids?.input && !ids?.label,\n    'FormField: `label` is set but `ids.input`/`ids.label` are not — the rendered label ' +\n      \"won't be associated with your control (no `htmlFor`, no `aria-labelledby` target). \" +\n      'Pass `ids={{ input: yourControlId }}` (or `ids.label` for a group with no single ' +\n      'input) so the label has something to point at.'\n  )\n\n  return renderFormField({\n    children,\n    className,\n    help,\n    ids,\n    invalid,\n    invalidFeedback,\n    label,\n    ref,\n    valid,\n    validFeedback\n  })\n})\n\nFormField.displayName = 'FormField'\n"],"mappings":"A,wJAsDA,MAAaC,EAAYC,EAA2C,SAClE,CAAE,WAAU,YAAW,OAAM,MAAK,UAAS,kBAAiB,QAAO,QAAO,iBAC1E,EACA,CASA,OARAF,EACE,CAAC,CAACG,GAAS,CAACC,GAAK,OAAS,CAACA,GAAK,MAChC,uSAIF,EAEOC,EAAgB,CACrB,WACA,YACA,OACA,MACA,UACA,kBACA,QACA,MACA,QACA,eACF,CAAC,CACH,CAAC,EAED,EAAU,YAAc,Y"}
+{"version":3,"file":"form-field-D74QY_wP.js","names":["devWarning","FormField","forwardRef","label","ids","renderFormField"],"sources":["../../src/components/form-field/FormField.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from 'react'\n\nimport { FormFieldIds, renderFormField } from './renderFormField'\nimport { devWarning } from '../../utils/devWarning'\n\nexport interface FormFieldProps {\n  /**\n   * The form control(s) this field wraps.\n   */\n  children: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * A description for the field, rendered below the control(s).\n   */\n  help?: ReactNode\n  /**\n   * The DOM ids of the wrapped control(s), used to associate the label (`htmlFor`) and\n   * point your control's own `aria-describedby` at the rendered help/feedback text.\n   */\n  ids?: FormFieldIds\n  /**\n   * Set field validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the control(s) when `invalid` is set.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with `ids.input`.\n   */\n  label?: ReactNode\n  /**\n   * Set field validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the control(s) when `valid` is set.\n   */\n  validFeedback?: ReactNode\n}\n\n// Standalone `.form-field` wrapper for the \"wrap this yourself\" case: a control with no field\n// props of its own, or grouping more than one element under one label (e.g. an input plus a\n// sibling status meter). Combobox/DatePicker/ChipInput/OtpInput do NOT use this — they\n// call `renderFormField` directly and expose label/help/validFeedback/invalidFeedback as their\n// own props (see FORMS.md). Wrapping any of those 10 components in `FormField` produces a\n// nested, empty `.form-field` div — see FORMS.md's Gotchas section.\n//\n// The ref goes to the `.form-field` element. It stays `null` while the field renders its children\n// bare, with no `label`, `help`, feedback or `className` to need the element.\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  { children, className, help, ids, invalid, invalidFeedback, label, valid, validFeedback },\n  ref\n) {\n  devWarning(\n    !!label && !ids?.input && !ids?.label,\n    'FormField: `label` is set but `ids.input`/`ids.label` are not — the rendered label ' +\n      \"won't be associated with your control (no `htmlFor`, no `aria-labelledby` target). \" +\n      'Pass `ids={{ input: yourControlId }}` (or `ids.label` for a group with no single ' +\n      'input) so the label has something to point at.'\n  )\n\n  return renderFormField({\n    children,\n    className,\n    help,\n    ids,\n    invalid,\n    invalidFeedback,\n    label,\n    ref,\n    valid,\n    validFeedback\n  })\n})\n\nFormField.displayName = 'FormField'\n"],"mappings":"A,wJAsDA,MAAaC,EAAYC,EAA2C,SAClE,CAAE,WAAU,YAAW,OAAM,MAAK,UAAS,kBAAiB,QAAO,QAAO,iBAC1E,EACA,CASA,OARAF,EACE,CAAC,CAACG,GAAS,CAACC,GAAK,OAAS,CAACA,GAAK,MAChC,uSAIF,EAEOC,EAAgB,CACrB,WACA,YACA,OACA,MACA,UACA,kBACA,QACA,MACA,QACA,eACF,CAAC,CACH,CAAC,EAED,EAAU,YAAc,Y"}

package/dist/chunks/grid-BCVkow3u.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{C as e}from"./slot-DagH0Gxq.js";import{t}from"./polymorphic-mAKwlLiW.js";import{a as n,i as r,n as i,t as a}from"./breakpoints-CGk8szzR.js";import o from"react";import s from"classnames";function c({children:e,className:t,component:n,fluidUntil:r,fluid:i,...a},c){let l=n??`div`,u=s(`container`,i&&`fluid`,r,t);return/* @__PURE__ */ o.createElement(l,{className:u,...a,ref:c},e)}const l=t(c,`Container`),u=/* @__PURE__ */ new Set([`zero`,`4xs`,`3xs`,`2xs`,`xs`,`sm`,`md`,`lg`,`xl`,`2xl`,`3xl`,`4xl`,`5xl`,`6xl`]),d=(e,t=``)=>e!==void 0&&u.has(e)?`${t}gap-${e}`:null,f=e=>e!==void 0&&!u.has(e)?e:void 0,p=(e,t=1/0)=>typeof e==`number`&&Number.isInteger(e)&&e>=1&&e<=t,m=(t,n,r,i,a)=>{let o=typeof r==`string`||p(r,a);return e(!o,`${t}: \`${n}\` has no class to render for ${JSON.stringify(r)}: @chassis-ui/css has \`${i}-1\` to \`${i}-${a}\`, so the value does nothing.`),o},h=e=>p(e,6),g=e=>p(e)&&!h(e)?`repeat(${e}, minmax(0, 1fr))`:void 0,_=e=>p(e,12),v=(e,t)=>`${t}grid-flow-${e.replace(`column`,`col`)}`;function y({children:t,className:c,component:l,columns:u,rows:y,gap:b,flow:x,contained:S,fill:C,min:w,style:T,...E},D){let O=l??`div`,k=i(u),A=i(y),j=i(b),M=s(C?`grid-fill`:`grid`,S&&`contained`,r([n(u,(e,t)=>!C&&(t===``?_(e):m(`Grid`,`columns`,e,`grid-cols`,12))&&`${t}grid-cols-${e}`),n(y,(e,t)=>!C&&(t===``?h(e):m(`Grid`,`rows`,e,`grid-rows`,6))&&`${t}grid-rows-${e}`),n(b,d),n(x,v)],a),c),N={...T},P=f(j);if(P!==void 0&&(N[`--cx-grid-gap`]=P),C)w!==void 0&&(N[`--cx-grid-min`]=w);else{e(k!==void 0&&!p(k),`Grid: \`columns\` takes a whole number from 1 up, not ${JSON.stringify(k)}, which sets nothing.`),e(A!==void 0&&!p(A),`Grid: \`rows\` takes a whole number from 1 up, not ${JSON.stringify(A)}, which sets nothing.`),p(k)&&!_(k)&&(N[`--cx-grid-columns`]=k);let t=g(A);t!==void 0&&(N.gridTemplateRows=t)}return/* @__PURE__ */ o.createElement(O,{className:M,style:N,...E,ref:D},t)}const b=t(y,`Grid`);function x({children:t,className:i,component:c,span:l,start:u,end:_,rowSpan:v,rowStart:y,rowEnd:b,subgrid:x,rows:S,gap:C,style:w,...T},E){let D=c??`div`;e(!x&&(S!==void 0||C!==void 0),"GridItem: `rows` and `gap` apply to a `subgrid` alone; without it they do nothing."),e(!!x&&S!==void 0&&!p(S),`GridItem: \`rows\` takes a whole number from 1 up, not ${JSON.stringify(S)}, which sets nothing.`);let O=(e,t,n,r)=>m(`GridItem`,e,t,n,r),k=s(r([n(l,(e,t)=>O(`span`,e,`col-span`,12)&&`${t}col-span-${e}`),n(u,(e,t)=>O(`start`,e,`col-start`,12)&&`${t}col-start-${e}`),n(_,(e,t)=>O(`end`,e,`col-end`,13)&&`${t}col-end-${e}`),n(v,(e,t)=>O(`rowSpan`,e,`row-span`,6)&&`${t}row-span-${e}`),n(y,(e,t)=>O(`rowStart`,e,`row-start`,6)&&`${t}row-start-${e}`),n(b,(e,t)=>O(`rowEnd`,e,`row-end`,7)&&`${t}row-end-${e}`)],a),x&&`grid grid-cols-subgrid`,x&&h(S)&&`grid-rows-${S}`,x&&d(C),i),A={...w};if(x){let e=g(S);e!==void 0&&(A.gridTemplateRows=e);let t=f(C);t!==void 0&&(A[`--cx-grid-gap`]=t)}return/* @__PURE__ */ o.createElement(D,{className:k,style:A,...T,ref:E},t)}const S=t(x,`GridItem`);export{b as n,l as r,S as t};
+//# sourceMappingURL=grid-BCVkow3u.js.map

package/dist/chunks/grid-BCVkow3u.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-BCVkow3u.js","names":["devWarning","responsiveProp","responsiveClassNames","baseValue","GRID_BREAKPOINTS","React","classNames","ContainerRender","rest","Component","component","_className","fluid","fluidUntil","className","children","Container","createPolymorphicComponent","SPACING_TOKENS","gapClassName","gap","prefix","gapValue","isCount","value","max","hasPlacementClass","hasRule","prop","base","hasRowsClass","rows","rowsTemplate","hasColumnsClass","columns","flowClassName","flow","GridRender","baseColumns","baseRows","baseGap","fill","contained","_style","style","_gap","min","_rows","Grid","GridItemRender","subgrid","has","span","start","end","rowSpan","rowStart","rowEnd","GridItem"],"sources":["../../src/components/grid/Container.tsx","../../src/types.ts","../../src/components/grid/gap.ts","../../src/components/grid/limits.ts","../../src/components/grid/rows.ts","../../src/components/grid/Grid.tsx","../../src/components/grid/GridItem.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { Breakpoint } from '../../types'\n\ntype ContainerOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Set container 100% wide until the given breakpoint, after which it scales up with `max-width`\n   * at every larger breakpoint.\n   *\n   * @type Breakpoint\n   */\n  fluidUntil?: Breakpoint\n  /**\n   * Set container 100% wide, spanning the entire width of the viewport.\n   */\n  fluid?: boolean\n}\n\nexport type ContainerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ContainerOwnProps<C>\n>\n\ntype ContainerComponent = (<C extends ElementType = 'div'>(\n  props: ContainerProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ContainerRender<C extends ElementType = 'div'>(\n  { children, className, component, fluidUntil, fluid, ...rest }: ContainerProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('container', fluid && 'fluid', fluidUntil, className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const Container = createPolymorphicComponent<ContainerComponent>(\n  ContainerRender as ForwardRefRenderFunction<Element, ContainerProps<ElementType>>,\n  'Container'\n)\n","/**\n * Breakpoints\n */\nexport type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\n/**\n * Container breakpoints: the same widths, measured on the nearest query container instead of the\n * viewport. chassis-css's `@md:` classes.\n */\nexport type ContainerBreakpoint = '@sm' | '@md' | '@lg' | '@xl' | '@2xl'\n\n/**\n * A prop value that can change with the width. A plain value applies at every width. An object\n * holds one value per width: `base` from the narrowest, each breakpoint key from that breakpoint\n * up, as in `{ base: 'column', md: 'row' }`. `K` is the keys the prop reads: the viewport\n * breakpoints unless the component also takes the container ones.\n */\nexport type Responsive<T, K extends string = Breakpoint> =\n  T | ({ base?: T } & Partial<Record<K, T>>)\n\n/**\n * Context colors\n */\nexport type ContextColor =\n  | 'default'\n  | 'alternate'\n  | 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'info'\n  | 'black'\n  | 'white'\n\n/**\n * Context styles\n */\nexport type ContextStyle = 'basic' | 'solid' | 'outline' | 'smooth'\n\n/**\n * Component sizes\n */\nexport type Sizing = 'sm' | 'md' | 'lg'\n\n/**\n * Extended sizes\n */\nexport type ExtendedSizing = '2xs' | 'xs' | Sizing | 'xl' | '2xl'\n\n/**\n * Spacing values. `SPACING` is the runtime source of truth — `Spacing` is derived from it so the\n * two can't drift apart; anything needing the values at runtime (e.g. validating a string against\n * the scale) should import `SPACING`, not hand-copy the list.\n */\nexport const SPACING = [\n  'zero',\n  '4xs',\n  '3xs',\n  '2xs',\n  'xs',\n  'sm',\n  'md',\n  'lg',\n  'xl',\n  '2xl',\n  '3xl',\n  '4xl',\n  '5xl',\n  '6xl'\n] as const\n\nexport type Spacing = (typeof SPACING)[number]\n\n/**\n * Font families\n */\nexport type FontFamily = 'text' | 'display' | 'code' | 'html'\n\n/**\n * Font weights\n */\nexport type FontWeight = 'elegant' | 'normal' | 'strong' | 'mass'\n\n/**\n * Font sizes\n */\nexport type FontSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'\n\n/**\n * Component placements\n */\nexport type Placements =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top-end'\n  | 'top'\n  | 'top-start'\n  | 'bottom-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'right-start'\n  | 'right'\n  | 'right-end'\n  | 'left-start'\n  | 'left'\n  | 'left-end'\n\n/**\n * Component shapes\n */\nexport type Shapes =\n  | 'rounded'\n  | 'rounded-top'\n  | 'rounded-end'\n  | 'rounded-bottom'\n  | 'rounded-start'\n  | 'rounded-circle'\n  | 'rounded-pill'\n  | 'rounded-0'\n  | 'rounded-1'\n  | 'rounded-2'\n  | 'rounded-3'\n\nexport type TextColor =\n  | ContextColor\n  | 'main'\n  | 'subtle'\n  | 'slight'\n  | 'solid'\n  | 'inverse'\n  | 'highlight'\n  | 'active'\n  | 'contrast'\n\nexport type Triggers = 'hover' | 'focus' | 'click'\n","import { SPACING } from '../../types'\n\nconst SPACING_TOKENS = new Set<string>(SPACING)\n\n// A `Spacing` token is chassis-css's own `gap-{token}` utility, which a breakpoint prefix makes\n// responsive. Anything else (a raw CSS value, e.g. `\"1rem\"` or `\".25rem 1rem\"`) has no class and\n// goes to the `--cx-grid-gap` custom property instead: see `gapValue`.\nexport const gapClassName = (gap: string | undefined, prefix = ''): string | null =>\n  gap !== undefined && SPACING_TOKENS.has(gap) ? `${prefix}gap-${gap}` : null\n\nexport const gapValue = (gap: string | undefined): string | undefined =>\n  gap !== undefined && !SPACING_TOKENS.has(gap) ? gap : undefined\n","import { devWarning } from '../../utils/devWarning'\n\n// chassis-css generates the placement and template classes for twelve columns and six rows\n// (grid.mdx, \"Placement classes stop at twelve columns and six rows\"): past them, a class names\n// no rule, and a count that isn't a whole number from 1 up names none at any size.\nexport const GRID_COLUMNS = 12\nexport const GRID_ROWS = 6\n\nexport const isCount = (value: unknown, max = Infinity): value is number =>\n  typeof value === 'number' && Number.isInteger(value) && value >= 1 && value <= max\n\n/**\n * Whether chassis-css has a class for a placement value: a word (`'full'`, `'auto'`), or a whole\n * number from 1 to `max`. For any other value the component renders none, with a development\n * warning, as `CardImage` and `Skeleton` render none for a value without a rule. The component\n * spells the class itself, so the Tailwind sweep (`test/utils/tailwindClassNames.spec.tsx`)\n * reads its template.\n */\nexport const hasPlacementClass = (\n  component: 'Grid' | 'GridItem',\n  prop: string,\n  value: number | string,\n  base: string,\n  max: number\n): boolean => {\n  const hasRule = typeof value === 'string' || isCount(value, max)\n  devWarning(\n    !hasRule,\n    `${component}: \\`${prop}\\` has no class to render for ${JSON.stringify(value)}: ` +\n      `@chassis-ui/css has \\`${base}-1\\` to \\`${base}-${max}\\`, so the value does nothing.`\n  )\n  return hasRule\n}\n","import { GRID_ROWS, isCount } from './limits'\n\n// chassis-css has `grid-rows-1` to `grid-rows-6`.\nexport const hasRowsClass = (rows: number | undefined) => isCount(rows, GRID_ROWS)\n\n// A row count with no class is the declaration of the class, set inline: see `Grid`'s `rows`.\n// `grid-template-rows` isn't inherited, so unlike a custom property it stays on the one grid. A\n// count that isn't one (`2.5`) is left out: `repeat(2.5, …)` is invalid, and a browser drops it.\nexport const rowsTemplate = (rows: number | undefined): string | undefined =>\n  isCount(rows) && !hasRowsClass(rows) ? `repeat(${rows}, minmax(0, 1fr))` : undefined\n","import React, { CSSProperties, ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { devWarning } from '../../utils/devWarning'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport {\n  baseValue,\n  GRID_BREAKPOINTS,\n  responsiveClassNames,\n  responsiveProp\n} from '../../utils/breakpoints'\nimport { Breakpoint, ContainerBreakpoint, Responsive, Spacing } from '../../types'\nimport { gapClassName, gapValue } from './gap'\nimport { GRID_COLUMNS, GRID_ROWS, hasPlacementClass, isCount } from './limits'\nimport { hasRowsClass, rowsTemplate } from './rows'\n\ntype GridStyle = CSSProperties & {\n  '--cx-grid-columns'?: number\n  '--cx-grid-gap'?: string\n  '--cx-grid-min'?: string\n}\n\n/**\n * The direction a grid places its items in, and whether it fills earlier gaps (`dense`): the\n * values of CSS `grid-auto-flow`.\n */\nexport type GridFlow = 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'\n\n// A token is a class at any width. A raw CSS value is a custom property, which only the base\n// can be: an inline style holds no media query.\ntype GridGap = Spacing | (string & {})\n\ntype GridOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Number of columns in the grid template (the column count of `@chassis-ui/css` when omitted,\n   * `12` by default). A count from 1 to 12 is mapped to the `grid-cols-{n}` class, which applies\n   * to this grid alone. Any other count has no class and is set via the `--cx-grid-columns`\n   * custom property, which a grid nested in this one inherits: give that grid `columns` of its\n   * own. Has no effect when `fill` is set.\n   *\n   * An object sets the count from a width up, as in `{ base: 1, md: 3 }`, here and on `rows`,\n   * `gap` and `flow`. A breakpoint key (`md`) is a width of the viewport. A container key\n   * (`'@md'`) is the same width of the nearest query container (an ancestor with the\n   * `contains-inline` class), and wins over a breakpoint key where both apply. Without a query\n   * container above the grid, a container key never applies. The count of a key is a class, so\n   * a count from 1 to 12.\n   */\n  columns?: Responsive<number, Breakpoint | ContainerBreakpoint>\n  /**\n   * Number of equal rows in the grid template. A grid has none when omitted: its rows are as\n   * tall as their content. A count from 1 to 6 is mapped to the `grid-rows-{n}` class; any other\n   * count has no class and is set inline, as the `grid-template-rows` the class declares. Has no\n   * effect when `fill` is set. An object sets the count from a width up, where it is a class, so\n   * a count from 1 to 6.\n   */\n  rows?: Responsive<number, Breakpoint | ContainerBreakpoint>\n  /**\n   * Gap between grid items: a `Spacing` token (mapped to the `gap-{token}` class) or any raw CSS\n   * `gap` value, including a `\"{row} {column}\"` pair (set via the `--cx-grid-gap` custom\n   * property). The gutter of the current breakpoint when omitted, or of the query container when\n   * `contained` is set. An object sets the gap from a width up: only a token fits a key other\n   * than `base`, since a raw value has no class.\n   *\n   * @type { Spacing | string | { base?: Spacing | string } & Partial<Record<Breakpoint | ContainerBreakpoint, Spacing>> }\n   */\n  gap?: GridGap | ({ base?: GridGap } & Partial<Record<Breakpoint | ContainerBreakpoint, Spacing>>)\n  /**\n   * The direction items are placed in, mapped to the `grid-flow-*` classes: by `'row'` (the CSS\n   * default) or by `'column'`, which fills the `rows` of one column before it starts the next.\n   * `'dense'`, `'row-dense'` and `'column-dense'` also move later items into gaps that earlier,\n   * wider ones left. An object sets the flow from a width up.\n   */\n  flow?: Responsive<GridFlow, Breakpoint | ContainerBreakpoint>\n  /**\n   * Adds the `contained` class: the default gutter and column count follow the width of the\n   * nearest query container instead of the viewport, so a grid in a narrow column of a wide page\n   * has the gutter of a narrow page. Without a query container above it the grid keeps the\n   * values of the viewport. `columns` and `gap` still override them.\n   */\n  contained?: boolean\n  /**\n   * Renders `.grid-fill` instead of `.grid` — columns expand equally to fill the available\n   * width, with the column count determined by the number of children rather than `columns`.\n   */\n  fill?: boolean\n  /**\n   * Minimum column width of a `fill` grid, set via the `--cx-grid-min` custom property: any CSS\n   * length, e.g. `\"16rem\"`. Children wrap to a new row when they would get narrower. `12rem` in\n   * `@chassis-ui/css` when omitted. Only relevant when `fill` is set.\n   */\n  min?: string\n}\n\nexport type GridProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridOwnProps<C>>\n\n// chassis-css has `grid-cols-1` to `grid-cols-12`.\nconst hasColumnsClass = (columns: number | undefined) => isCount(columns, GRID_COLUMNS)\n\n// chassis-css names the values as Tailwind does: `grid-flow-col`, `grid-flow-col-dense`.\nconst flowClassName = (flow: GridFlow, prefix: string) =>\n  `${prefix}grid-flow-${flow.replace('column', 'col')}`\n\ntype GridComponent = (<C extends ElementType = 'div'>(\n  props: GridProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction GridRender<C extends ElementType = 'div'>(\n  {\n    children,\n    className,\n    component,\n    columns,\n    rows,\n    gap,\n    flow,\n    contained,\n    fill,\n    min,\n    style,\n    ...rest\n  }: GridProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n\n  // A class where chassis-css has one: `--cx-grid-columns` set inline is inherited by every grid\n  // nested in this one, which then has this grid's column count instead of its own. Only a base\n  // count with no class falls back to the property; a breakpoint's can't, since an inline style\n  // holds no media query. `.grid-fill` counts its own columns. A base row count with no class is\n  // set inline too, as a declaration: see `rowsTemplate`.\n  const baseColumns = baseValue(columns)\n  const baseRows = baseValue(rows)\n  const baseGap = baseValue<string>(gap)\n\n  const _className = classNames(\n    fill ? 'grid-fill' : 'grid',\n    contained && 'contained',\n    responsiveClassNames(\n      [\n        // The base of a count past the classes is a custom property or a declaration (below); a\n        // breakpoint's can only be a class, so past them it is none, and warns.\n        responsiveProp(\n          columns,\n          (value, prefix) =>\n            !fill &&\n            (prefix === ''\n              ? hasColumnsClass(value)\n              : hasPlacementClass('Grid', 'columns', value, 'grid-cols', GRID_COLUMNS)) &&\n            `${prefix}grid-cols-${value}`\n        ),\n        responsiveProp(\n          rows,\n          (value, prefix) =>\n            !fill &&\n            (prefix === ''\n              ? hasRowsClass(value)\n              : hasPlacementClass('Grid', 'rows', value, 'grid-rows', GRID_ROWS)) &&\n            `${prefix}grid-rows-${value}`\n        ),\n        responsiveProp<string>(gap, gapClassName),\n        responsiveProp(flow, flowClassName)\n      ],\n      GRID_BREAKPOINTS\n    ),\n    className\n  )\n\n  const _style: GridStyle = { ...style }\n  const _gap = gapValue(baseGap)\n\n  if (_gap !== undefined) _style['--cx-grid-gap'] = _gap\n\n  if (fill) {\n    if (min !== undefined) _style['--cx-grid-min'] = min\n  } else {\n    // A count is a whole number from 1 up: `repeat(2.5, …)` is invalid, and a browser drops it.\n    devWarning(\n      baseColumns !== undefined && !isCount(baseColumns),\n      `Grid: \\`columns\\` takes a whole number from 1 up, not ${JSON.stringify(baseColumns)}, ` +\n        'which sets nothing.'\n    )\n    devWarning(\n      baseRows !== undefined && !isCount(baseRows),\n      `Grid: \\`rows\\` takes a whole number from 1 up, not ${JSON.stringify(baseRows)}, which ` +\n        'sets nothing.'\n    )\n    if (isCount(baseColumns) && !hasColumnsClass(baseColumns)) {\n      _style['--cx-grid-columns'] = baseColumns\n    }\n    const _rows = rowsTemplate(baseRows)\n    if (_rows !== undefined) _style.gridTemplateRows = _rows\n  }\n\n  return (\n    <Component className={_className} style={_style} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const Grid = createPolymorphicComponent<GridComponent>(\n  GridRender as ForwardRefRenderFunction<Element, GridProps<ElementType>>,\n  'Grid'\n)\n","import React, { CSSProperties, ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { GRID_BREAKPOINTS, responsiveClassNames, responsiveProp } from '../../utils/breakpoints'\nimport { Breakpoint, ContainerBreakpoint, Responsive, Spacing } from '../../types'\nimport { devWarning } from '../../utils/devWarning'\nimport { gapClassName, gapValue } from './gap'\nimport { GRID_COLUMNS, GRID_ROWS, hasPlacementClass, isCount } from './limits'\nimport { hasRowsClass, rowsTemplate } from './rows'\n\ntype GridItemStyle = CSSProperties & {\n  '--cx-grid-gap'?: string\n}\n\ntype GridItemOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Number of grid column tracks (of the parent `<Grid>`'s `columns`) this item spans, mapped to\n   * the `col-span-{n}` class, or `'full'` for every track of the row (`col-span-full`). An item\n   * with no `span` is one track wide.\n   *\n   * An object sets the span from a width up, as in `{ base: 'full', md: 6 }`, here and on\n   * `start`, `end`, `rowSpan`, `rowStart` and `rowEnd`. A breakpoint key (`md`) is a width of\n   * the viewport. A container key (`'@md'`) is the same width of the nearest query container\n   * (an ancestor with the `contains-inline` class), and wins over a breakpoint key where both\n   * apply. Without a query container above the grid, a container key never applies.\n   *\n   * @type { Responsive<number | 'full', Breakpoint | ContainerBreakpoint> }\n   */\n  span?: Responsive<number | 'full', Breakpoint | ContainerBreakpoint>\n  /**\n   * Grid column line to start this item at, mapped to the `col-start-{n}` class (1 to 12).\n   * `'auto'` (`col-start-auto`) returns the item to the flow, to undo a start line at a wider\n   * breakpoint: `{ base: 4, md: 'auto' }`.\n   *\n   * @type { Responsive<number | 'auto', Breakpoint | ContainerBreakpoint> }\n   */\n  start?: Responsive<number | 'auto', Breakpoint | ContainerBreakpoint>\n  /**\n   * Grid column line to end this item at, mapped to the `col-end-{n}` class (1 to 13, the line\n   * after the last of 12 columns). With `span`, it places the item against the end edge of the\n   * grid: `span={3} end={13}`. `'auto'` (`col-end-auto`) undoes an end line at a wider\n   * breakpoint: `{ base: 13, md: 'auto' }`.\n   *\n   * @type { Responsive<number | 'auto', Breakpoint | ContainerBreakpoint> }\n   */\n  end?: Responsive<number | 'auto', Breakpoint | ContainerBreakpoint>\n  /**\n   * Number of grid row tracks this item spans, mapped to the `row-span-{n}` class. Takes an\n   * object per width, as `span` does.\n   */\n  rowSpan?: Responsive<number, Breakpoint | ContainerBreakpoint>\n  /**\n   * Grid row line to start this item at, mapped to the `row-start-{n}` class (1 to 6), or\n   * `'auto'` (`row-start-auto`) to return it to the flow. Takes an object per width, as `span`\n   * does.\n   *\n   * @type { Responsive<number | 'auto', Breakpoint | ContainerBreakpoint> }\n   */\n  rowStart?: Responsive<number | 'auto', Breakpoint | ContainerBreakpoint>\n  /**\n   * Grid row line to end this item at, mapped to the `row-end-{n}` class (1 to 7, the line after\n   * the last of 6 rows), or `'auto'` (`row-end-auto`) to undo an end line at a wider breakpoint.\n   * Takes an object per width, as `span` does.\n   *\n   * @type { Responsive<number | 'auto', Breakpoint | ContainerBreakpoint> }\n   */\n  rowEnd?: Responsive<number | 'auto', Breakpoint | ContainerBreakpoint>\n  /**\n   * Turns this item into a nested subgrid: adds `.grid`/`.grid-cols-subgrid` alongside its\n   * `col-span-{n}`/`col-start-{n}` placement classes, so its own children inherit the parent\n   * `<Grid>`'s column tracks instead of defining new ones. Combine with `span` — a subgrid\n   * item must itself be a grid item of the parent for `grid-template-columns: subgrid` to take\n   * effect, which is why `subgrid` lives on `<GridItem>` (the element actually placed as a grid\n   * item) rather than on a `<Grid>` nested inside it.\n   */\n  subgrid?: boolean\n  /**\n   * Number of equal rows in the subgrid's own row template: the `grid-rows-{n}` class for a\n   * count from 1 to 6, the same `grid-template-rows` set inline for any other. Only relevant\n   * when `subgrid` is set — subgrid only inherits the parent's column tracks, not its rows.\n   */\n  rows?: number\n  /**\n   * Gap between the subgrid's children: a `Spacing` token (mapped to the `gap-{token}` class) or\n   * any raw CSS `gap` value (set via the `--cx-grid-gap` custom property). Only relevant when\n   * `subgrid` is set. A subgrid has the gap of its own: when the parent `<Grid>` takes a `gap`\n   * token, give the subgrid the same one, or its children are narrower than the parent's tracks.\n   *\n   * @type { Spacing | string }\n   */\n  gap?: Spacing | (string & {})\n}\n\nexport type GridItemProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  GridItemOwnProps<C>\n>\n\ntype GridItemComponent = (<C extends ElementType = 'div'>(\n  props: GridItemProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction GridItemRender<C extends ElementType = 'div'>(\n  {\n    children,\n    className,\n    component,\n    span,\n    start,\n    end,\n    rowSpan,\n    rowStart,\n    rowEnd,\n    subgrid,\n    rows,\n    gap,\n    style,\n    ...rest\n  }: GridItemProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  // `rows` and `gap` are the subgrid's own template and gap: on an item of the parent's grid\n  // they set nothing.\n  devWarning(\n    !subgrid && (rows !== undefined || gap !== undefined),\n    'GridItem: `rows` and `gap` apply to a `subgrid` alone; without it they do nothing.'\n  )\n  devWarning(\n    Boolean(subgrid) && rows !== undefined && !isCount(rows),\n    `GridItem: \\`rows\\` takes a whole number from 1 up, not ${JSON.stringify(rows)}, which sets ` +\n      'nothing.'\n  )\n  // A line is a track's edge: the one after the last track is a line too.\n  const has = (prop: string, value: number | string, base: string, max: number) =>\n    hasPlacementClass('GridItem', prop, value, base, max)\n  const _className = classNames(\n    responsiveClassNames(\n      [\n        responsiveProp(\n          span,\n          (value, prefix) =>\n            has('span', value, 'col-span', GRID_COLUMNS) && `${prefix}col-span-${value}`\n        ),\n        responsiveProp(\n          start,\n          (value, prefix) =>\n            has('start', value, 'col-start', GRID_COLUMNS) && `${prefix}col-start-${value}`\n        ),\n        responsiveProp(\n          end,\n          (value, prefix) =>\n            has('end', value, 'col-end', GRID_COLUMNS + 1) && `${prefix}col-end-${value}`\n        ),\n        responsiveProp(\n          rowSpan,\n          (value, prefix) =>\n            has('rowSpan', value, 'row-span', GRID_ROWS) && `${prefix}row-span-${value}`\n        ),\n        responsiveProp(\n          rowStart,\n          (value, prefix) =>\n            has('rowStart', value, 'row-start', GRID_ROWS) && `${prefix}row-start-${value}`\n        ),\n        responsiveProp(\n          rowEnd,\n          (value, prefix) =>\n            has('rowEnd', value, 'row-end', GRID_ROWS + 1) && `${prefix}row-end-${value}`\n        )\n      ],\n      GRID_BREAKPOINTS\n    ),\n    subgrid && 'grid grid-cols-subgrid',\n    subgrid && hasRowsClass(rows) && `grid-rows-${rows}`,\n    subgrid && gapClassName(gap),\n    className\n  )\n\n  const _style: GridItemStyle = { ...style }\n\n  if (subgrid) {\n    const _rows = rowsTemplate(rows)\n    if (_rows !== undefined) _style.gridTemplateRows = _rows\n    const _gap = gapValue(gap)\n    if (_gap !== undefined) _style['--cx-grid-gap'] = _gap\n  }\n\n  return (\n    <Component className={_className} style={_style} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const GridItem = createPolymorphicComponent<GridItemComponent>(\n  GridItemRender as ForwardRefRenderFunction<Element, GridItemProps<ElementType>>,\n  'GridItem'\n)\n"],"mappings":"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"}