@pearpages/pulp-react 0.2.1 → 0.3.0

package/dist/chunk-GTTXRDXV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/menu/Menu.module.css","../src/menu/Menu.tsx"],"names":["content","item","label","separator"],"mappings":"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","file":"chunk-GTTXRDXV.js","sourcesContent":["/* Every value is a token (--menu-*). Position comes in as --_x/--_y from the floating hook. */\n\n@layer components {\n  .content {\n    --_gap: var(--menu-gap);\n\n    position: fixed;\n    z-index: var(--menu-layer);\n    inset-block-start: var(--_y);\n    inset-inline-start: var(--_x);\n    display: flex;\n    flex-direction: column;\n    min-inline-size: var(--menu-min-width);\n    max-inline-size: calc(100vw - 2 * var(--space-4));\n    padding: var(--menu-padding);\n    border: var(--size-hairline) solid var(--menu-border);\n    border-radius: var(--menu-radius);\n    background-color: var(--menu-bg);\n    color: var(--menu-fg);\n    font-family: var(--font-family-body);\n    box-shadow: var(--menu-shadow);\n    animation: fade var(--menu-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--menu-focus-ring-width) solid var(--menu-focus-ring);\n      outline-offset: var(--menu-focus-ring-offset);\n    }\n  }\n\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    inline-size: 100%;\n    padding-block: var(--menu-item-padding-block);\n    padding-inline: var(--menu-item-padding-inline);\n    border: none;\n    border-radius: var(--menu-item-radius);\n    background-color: transparent;\n    color: var(--menu-item-fg);\n    font-size: var(--menu-item-font-size);\n    text-align: start;\n    cursor: pointer;\n\n    &[data-tone=\"danger\"] {\n      color: var(--menu-item-fg-danger);\n    }\n\n    &[data-disabled] {\n      color: var(--menu-item-fg-muted);\n      cursor: not-allowed;\n    }\n\n    &:focus-visible {\n      outline: none;\n      background-color: var(--menu-item-bg-active);\n    }\n\n    &:hover:not([data-disabled]) {\n      background-color: var(--menu-item-bg-active);\n    }\n  }\n\n  .label {\n    flex: 1;\n  }\n\n  .separator {\n    block-size: var(--size-hairline);\n    margin-block: var(--menu-padding);\n    background-color: var(--menu-separator);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .content {\n      animation: none;\n    }\n  }\n}\n","import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { Icon } from '../icon';\nimport { renderAsChild } from '../internal/asChild';\nimport { classes } from '../internal/classes';\nimport { useFloatingPosition, type FloatingPlacement } from '../internal/floating';\nimport { useDismiss } from '../internal/useDismiss';\nimport { useRovingFocus } from '../internal/useRovingFocus';\nimport styles from './Menu.module.css';\n\nexport type MenuPlacement = FloatingPlacement;\ntype FocusTarget = 'first' | 'last' | null;\n\ninterface MenuContextValue {\n  open: boolean;\n  setOpen: (open: boolean, focus?: FocusTarget) => void;\n  focusTarget: FocusTarget;\n  triggerId: string;\n  contentId: string;\n  floating: ReturnType<typeof useFloatingPosition>;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nfunction useMenu(part: string): MenuContextValue {\n  const context = useContext(MenuContext);\n  if (!context) throw new Error(`${part} must be rendered inside <Menu>`);\n  return context;\n}\n\nexport interface MenuProps {\n  open?: boolean;\n  /** @default false */\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** @default 'bottom-start' */\n  placement?: MenuPlacement;\n  children: ReactNode;\n}\n\n/**\n * A list of actions opened from a button, following the WAI-ARIA menu\n * button pattern: Down/Up arrow on the trigger opens and focuses the first\n * or last item, arrows move with wraparound, Home and End jump, typing\n * jumps to the next item starting with that letter, Enter, Space or click\n * selects and closes, Escape and Tab close and return focus. Compose with\n * `Menu.Trigger`, `Menu.Content`, `Menu.Item` and `Menu.Separator`.\n *\n * @status stable\n * @category Overlays\n * @accessibility The WAI-ARIA menu button pattern: the trigger has `aria-haspopup=\"menu\"` and `aria-expanded`; the popup is `role=\"menu\"` named by the trigger with `menuitem` children. Down/Up opens to the first/last item, arrows wrap, Home/End jump, typing jumps, Enter/Space/click select and close, Escape and Tab close and return focus.\n * @do Use `tone=\"danger\"` for destructive items and put them after a separator.\n * @dont Put form controls or links that navigate inside a menu; those want Popover or a navigation list.\n * Use it for navigation between pages.\n */\nexport function Menu({ open, defaultOpen = false, onOpenChange, placement = 'bottom-start', children }: MenuProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const [focusTarget, setFocusTarget] = useState<FocusTarget>(null);\n  const controlled = open !== undefined;\n  const isOpen = controlled ? open : uncontrolled;\n  const setOpen = useCallback(\n    (next: boolean, focus: FocusTarget = null) => {\n      setFocusTarget(next ? focus : null);\n      if (!controlled) setUncontrolled(next);\n      onOpenChange?.(next);\n    },\n    [controlled, onOpenChange],\n  );\n  const id = useId();\n  const floating = useFloatingPosition({ open: isOpen, placement });\n\n  return (\n    <MenuContext.Provider value={{ open: isOpen, setOpen, focusTarget, triggerId: `${id}-trigger`, contentId: `${id}-menu`, floating }}>\n      {children}\n    </MenuContext.Provider>\n  );\n}\n\nfunction mergeRefs<T>(a: Ref<T> | undefined, b: (node: T | null) => void) {\n  return (node: T | null) => {\n    b(node);\n    if (typeof a === 'function') a(node);\n    else if (a) a.current = node;\n  };\n}\n\ninterface MenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n  children: ReactNode;\n}\n\nfunction MenuTrigger({ asChild = false, onClick, onKeyDown, ref, children, ...rest }: MenuTriggerProps) {\n  const menu = useMenu('Menu.Trigger');\n  const props = {\n    ...rest,\n    id: menu.triggerId,\n    'aria-haspopup': 'menu' as const,\n    'aria-expanded': menu.open,\n    'aria-controls': menu.open ? menu.contentId : undefined,\n    onClick: (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      if (!event.defaultPrevented) menu.setOpen(!menu.open, 'first');\n    },\n    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(event);\n      if (event.defaultPrevented) return;\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        event.preventDefault();\n        menu.setOpen(true, event.key === 'ArrowDown' ? 'first' : 'last');\n      }\n    },\n  };\n  const setRef = mergeRefs(ref, menu.floating.refs.setReference);\n  // eslint-disable-next-line react-hooks/refs -- forwarded to the reference element, not read\n  if (asChild) return renderAsChild('Menu.Trigger', children, { ...props, ref: setRef });\n  return (\n    <button type=\"button\" {...props} ref={setRef}>\n      {children}\n    </button>\n  );\n}\n\ninterface MenuContentProps extends HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\nfunction MenuContent({ className, onKeyDown, ref, children, ...rest }: MenuContentProps) {\n  const menu = useMenu('Menu.Content');\n  const { refs, positionStyle, placement } = menu.floating;\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const rove = useRovingFocus({ orientation: 'vertical', selector: '[role=\"menuitem\"]' });\n\n  useDismiss({\n    open: menu.open,\n    onDismiss: () => menu.setOpen(false),\n    inside: () => [refs.reference.current as Element | null, refs.floating.current],\n  });\n\n  useEffect(() => {\n    if (!menu.open) return;\n    const content = contentRef.current;\n    if (!content) return;\n    const items = Array.from(content.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])'));\n    const target = menu.focusTarget === 'last' ? items.at(-1) : items[0];\n    (target ?? content).focus();\n    return () => {\n      const reference = refs.reference.current as HTMLElement | null;\n      if (content.contains(document.activeElement) || document.activeElement === document.body) reference?.focus();\n    };\n  }, [menu.open, menu.focusTarget, refs.reference]);\n\n  const typeahead = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) return false;\n    const items = Array.from(event.currentTarget.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])'));\n    const current = items.indexOf(document.activeElement as HTMLElement);\n    const ordered = [...items.slice(current + 1), ...items.slice(0, current + 1)];\n    const match = ordered.find((item) => item.textContent?.trim().toLowerCase().startsWith(event.key.toLowerCase()));\n    if (!match) return false;\n    event.preventDefault();\n    match.focus();\n    return true;\n  };\n\n  if (!menu.open) return null;\n  return createPortal(\n    <div\n      {...rest}\n      ref={mergeRefs(ref, (node) => {\n        contentRef.current = node;\n        refs.setFloating(node);\n      })}\n      id={menu.contentId}\n      role=\"menu\"\n      aria-labelledby={menu.triggerId}\n      tabIndex={-1}\n      className={classes(styles.content, className)}\n      data-placement={placement}\n      // eslint-disable-next-line react/forbid-dom-props -- per-instance position (--_x/--_y), see internal/floating.ts\n      style={positionStyle}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        if (event.defaultPrevented) return;\n        if (event.key === 'Tab') {\n          menu.setOpen(false);\n          return;\n        }\n        if (typeahead(event)) return;\n        rove(event);\n      }}\n    >\n      {children}\n    </div>,\n    document.body,\n  );\n}\n\nexport type MenuItemTone = 'default' | 'danger';\n\ninterface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {\n  /** Called when the item is chosen; the menu closes afterwards. */\n  onSelect?: () => void;\n  /** @default 'default' */\n  tone?: MenuItemTone;\n  /** Leading glyph, decorative. */\n  icon?: ReactNode;\n  ref?: Ref<HTMLButtonElement>;\n  children: ReactNode;\n}\n\nfunction MenuItem({ onSelect, tone = 'default', icon, disabled, className, onClick, ref, children, ...rest }: MenuItemProps) {\n  const menu = useMenu('Menu.Item');\n  return (\n    <button\n      {...rest}\n      ref={ref}\n      type=\"button\"\n      role=\"menuitem\"\n      tabIndex={-1}\n      aria-disabled={disabled || undefined}\n      className={classes(styles.item, className)}\n      data-tone={tone}\n      data-disabled={disabled ? '' : undefined}\n      onClick={(event) => {\n        onClick?.(event);\n        if (event.defaultPrevented || disabled) return;\n        onSelect?.();\n        menu.setOpen(false);\n      }}\n    >\n      {icon && <Icon size=\"inherit\">{icon}</Icon>}\n      <span className={styles.label}>{children}</span>\n    </button>\n  );\n}\n\nfunction MenuSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {\n  return <div {...rest} role=\"separator\" className={classes(styles.separator, className)} />;\n}\n\nMenu.displayName = 'Menu';\nMenuTrigger.displayName = 'Menu.Trigger';\nMenuContent.displayName = 'Menu.Content';\nMenuItem.displayName = 'Menu.Item';\nMenuSeparator.displayName = 'Menu.Separator';\n\nMenu.Trigger = MenuTrigger;\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.Separator = MenuSeparator;\n"]}

package/dist/chunk-GUZMLYST.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/combobox/Combobox.module.css","../src/combobox/Combobox.tsx"],"names":["root","control","input","button","popover","list","AriaComboBox","AriaInput","AriaButton","AriaPopover","AriaListBox"],"mappings":"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","file":"chunk-GUZMLYST.js","sourcesContent":["/*\n * Every value is a token (--combobox-*); the options read --listbox-*. Size\n * and invalid state resolve into private custom properties on the root. The\n * popover is positioned by React Aria; the gap to the control is its own\n * padding, so no offset number lives in code, and --trigger-width (set by\n * the vendor) makes it as wide as the control.\n */\n\n@layer components {\n  .root {\n    --_height: var(--combobox-height-md);\n    --_font-size: var(--combobox-font-size-md);\n    --_border: var(--combobox-border-default);\n\n    font-family: var(--combobox-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--combobox-height-sm);\n      --_font-size: var(--combobox-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--combobox-height-lg);\n      --_font-size: var(--combobox-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--combobox-border-invalid); }\n  }\n\n  .control {\n    display: grid;\n    align-items: center;\n\n    & > * {\n      grid-area: 1 / 1;\n    }\n  }\n\n  .input {\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--combobox-padding-inline) var(--combobox-icon-size);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--combobox-radius);\n    background-color: var(--combobox-bg);\n    color: var(--combobox-fg);\n    font-size: var(--_font-size);\n    transition: border-color var(--combobox-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--combobox-placeholder);\n    }\n\n    &[data-focused] {\n      border-color: var(--combobox-border-focus);\n      outline: var(--combobox-focus-ring-width) solid var(--combobox-focus-ring);\n      outline-offset: var(--combobox-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-hovered]:not([data-focused], [data-disabled]) {\n      border-color: var(--combobox-border-hover);\n    }\n  }\n\n  .button {\n    display: grid;\n    place-items: center;\n    inline-size: var(--combobox-icon-size);\n    block-size: var(--_height);\n    padding: 0;\n    border: none;\n    border-radius: var(--combobox-radius);\n    background-color: transparent;\n    color: var(--combobox-icon);\n    justify-self: end;\n    cursor: pointer;\n\n    &[data-focus-visible] {\n      outline: var(--combobox-focus-ring-width) solid var(--combobox-focus-ring);\n      outline-offset: calc(-1 * var(--combobox-focus-ring-width));\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .popover {\n    inline-size: var(--trigger-width);\n    padding-block-start: var(--combobox-gap);\n    animation: fade var(--combobox-popover-duration) var(--motion-easing-standard);\n\n    &[data-placement=\"top\"] {\n      padding-block: 0 var(--combobox-gap);\n    }\n  }\n\n  .list {\n    box-shadow: var(--combobox-popover-shadow);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popover {\n      animation: none;\n    }\n  }\n}\n","import type { ReactNode, Ref } from 'react';\nimport {\n  Button as AriaButton,\n  ComboBox as AriaComboBox,\n  Input as AriaInput,\n  ListBox as AriaListBox,\n  Popover as AriaPopover,\n  useFilter,\n} from 'react-aria-components';\nimport { ChevronDown } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport { AriaFieldDescription, AriaFieldError, AriaFieldLabel, ariaFieldClass, isPresent } from '../internal/AriaField';\nimport { listClass, renderEmpty, renderOption, type ListboxItem } from '../listbox/ListboxOptions';\nimport { Spinner } from '../spinner';\nimport styles from './Combobox.module.css';\n\nexport type ComboboxItem = ListboxItem;\nexport type ComboboxSize = 'sm' | 'md' | 'lg';\n/** `contains` and `startsWith` filter `items` as the user types; `none` shows `items` as given (you filtered them, typically after a fetch). */\nexport type ComboboxFilter = 'contains' | 'startsWith' | 'none';\n\nexport interface ComboboxProps {\n  /** Visible label. Always rendered. */\n  label: ReactNode;\n  description?: ReactNode;\n  /** Presence marks the control invalid and announces the message. */\n  error?: ReactNode;\n  /** The options. With `filter=\"none\"` they are shown as given. */\n  items: readonly ComboboxItem[];\n  /** Selected id (controlled). `null` is \"nothing selected\". */\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n  /** The text in the input (controlled). Pair with `onInputChange` to fetch options as the user types. */\n  inputValue?: string;\n  defaultInputValue?: string;\n  onInputChange?: (text: string) => void;\n  /** @default 'contains' */\n  filter?: ComboboxFilter;\n  /** Keeps the list open with a spinner in the control while options load. @default false */\n  loading?: boolean;\n  /** Shown in the open list when no option matches. @default 'No results' */\n  emptyMessage?: ReactNode;\n  /** Announced while `loading`. @default 'Loading…' */\n  loadingMessage?: ReactNode;\n  /** Let the typed text stand as the value even when it matches no option. @default false */\n  allowsCustomValue?: boolean;\n  /** When the list opens: on focus, on typing, or only from the button and arrow keys. @default 'input' */\n  menuTrigger?: 'focus' | 'input' | 'manual';\n  placeholder?: string;\n  /** @default 'md' */\n  size?: ComboboxSize;\n  /** @default false */\n  required?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  readOnly?: boolean;\n  /** Submitted with a form: the selected id (or the text with `allowsCustomValue`). */\n  name?: string;\n  autoFocus?: boolean;\n  /** Applied to the field wrapper, not the input. */\n  className?: string;\n  /** The `<input>` element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * A text input that suggests options as the user types, on React Aria's\n * combobox (decision record 001): the list is announced through\n * `aria-activedescendant`, arrows move, Enter selects, Escape closes and\n * then clears. Static lists filter themselves; for async options, control\n * `inputValue`, fetch, and pass the results with `filter=\"none\"` and\n * `loading` while they arrive. Options look the same as Listbox's.\n *\n * @status experimental\n * @category Forms\n * @accessibility A `combobox` input with `aria-autocomplete=\"list\"`; the open list is a `listbox` announced through `aria-activedescendant`, so focus stays in the input. Arrows move, Enter selects, Escape closes and then clears. Loading and empty states are announced from inside the list.\n * @do Use `filter=\"none\"` with controlled `inputValue` for server-side search.\n * Keep `loading` true until the results for the current text arrive.\n * @dont Use it for fewer than five fixed options; use Picker or the native Select.\n * Set `menuTrigger=\"focus\"` on a long list; opening on every focus is noisy.\n */\nexport function Combobox({\n  label,\n  description,\n  error,\n  items,\n  value,\n  defaultValue,\n  onChange,\n  inputValue,\n  defaultInputValue,\n  onInputChange,\n  filter = 'contains',\n  loading = false,\n  emptyMessage = 'No results',\n  loadingMessage = 'Loading…',\n  allowsCustomValue = false,\n  menuTrigger = 'input',\n  placeholder,\n  size = 'md',\n  required = false,\n  disabled = false,\n  readOnly = false,\n  name,\n  autoFocus,\n  className,\n  ref,\n}: ComboboxProps) {\n  const { contains, startsWith } = useFilter({ sensitivity: 'base' });\n  const invalid = isPresent(error);\n  // `items` means \"already filtered\"; `defaultItems` lets React Aria filter.\n  const collection = filter === 'none' ? { items } : { defaultItems: items, defaultFilter: filter === 'startsWith' ? startsWith : contains };\n\n  return (\n    <AriaComboBox\n      {...collection}\n      className={ariaFieldClass(styles.root, className)}\n      data-size={size}\n      data-loading={loading ? '' : undefined}\n      selectedKey={value}\n      defaultSelectedKey={defaultValue}\n      onSelectionChange={(key) => onChange?.(key === null ? null : String(key))}\n      inputValue={inputValue}\n      defaultInputValue={defaultInputValue}\n      onInputChange={onInputChange}\n      allowsCustomValue={allowsCustomValue}\n      allowsEmptyCollection\n      menuTrigger={menuTrigger}\n      isRequired={required}\n      isDisabled={disabled}\n      isReadOnly={readOnly}\n      isInvalid={invalid}\n      name={name}\n    >\n      <AriaFieldLabel required={required}>{label}</AriaFieldLabel>\n      <div className={styles.control}>\n        <AriaInput ref={ref} className={styles.input} placeholder={placeholder} autoFocus={autoFocus} />\n        <AriaButton className={styles.button}>\n          {loading ? (\n            <Spinner size=\"inherit\" tone=\"inherit\" decorative />\n          ) : (\n            <Icon size=\"inherit\">\n              <ChevronDown />\n            </Icon>\n          )}\n        </AriaButton>\n      </div>\n      <AriaFieldDescription>{description}</AriaFieldDescription>\n      <AriaFieldError>{error}</AriaFieldError>\n      <AriaPopover className={styles.popover} placement=\"bottom start\">\n        <AriaListBox className={listClass(styles.list)} renderEmptyState={() => renderEmpty(loading ? loadingMessage : emptyMessage)}>\n          {renderOption}\n        </AriaListBox>\n      </AriaPopover>\n    </AriaComboBox>\n  );\n}\n\nCombobox.displayName = 'Combobox';\n"]}

package/dist/chunk-I4KC4V6A.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/spinner/Spinner.module.css","../src/spinner/Spinner.tsx"],"names":["spinner","ring"],"mappings":";;;;;AAAA,IAAA,eAAA,GAAA;AAAA,EAGG,OAAA,EAAAA,iBAAAA;AAAA,EAqBA,IAAA,EAAAC,cAMY,CAAA;ACER,SAAS,OAAA,CAAQ,EAAE,IAAA,GAAO,IAAA,EAAM,OAAO,SAAA,EAAW,KAAA,GAAQ,SAAA,EAAW,UAAA,GAAa,KAAA,EAAO,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,EAAiB;AACvI,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAA,EAAW,OAAA,CAAQ,eAAA,CAAO,OAAA,EAAS,SAAS,CAAA;AAAA,MAC5C,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,IAAA;AAAA,MACX,IAAA,EAAM,aAAa,MAAA,GAAY,QAAA;AAAA,MAC/B,eAAa,UAAA,IAAc,MAAA;AAAA,MAE3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,eAAA,CAAO,IAAA,EAAM,eAAY,MAAA,EAAO,CAAA;AAAA,QAChD,CAAC,UAAA,oBAAc,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GACzC;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-I4KC4V6A.js","sourcesContent":["/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","import type { HTMLAttributes, Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport { VisuallyHidden } from '../visually-hidden';\nimport styles from './Spinner.module.css';\n\nexport type SpinnerSize = 'sm' | 'md' | 'lg' | 'inherit';\nexport type SpinnerTone = 'default' | 'inherit';\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  /** `inherit` follows the surrounding font size, for spinners inside controls. @default 'md' */\n  size?: SpinnerSize;\n  /** `inherit` draws with the surrounding text colour, for coloured controls. @default 'default' */\n  tone?: SpinnerTone;\n  /** Announced to assistive technology (`role=\"status\"`). @default 'Loading' */\n  label?: string;\n  /** Hide from assistive technology: the parent already announces busy. @default false */\n  decorative?: boolean;\n  ref?: Ref<HTMLSpanElement>;\n}\n\n/**\n * An indeterminate progress indicator. Announces its label as a status\n * unless `decorative`, in which case the parent is responsible (Button sets\n * `aria-busy`). Under reduced motion the ring stops but keeps its coloured\n * quarter, so it still reads as \"in progress\".\n *\n * @status stable\n * @category Feedback\n * @accessibility `role=\"status\"` with a visually hidden label (\"Loading\" by default) unless `decorative`, in which case the parent announces busy. Under reduced motion the ring stops but keeps its coloured quarter.\n * @do Use `decorative` inside a control that already sets `aria-busy`.\n * @dont Show several spinners for one operation.\n */\nexport function Spinner({ size = 'md', tone = 'default', label = 'Loading', decorative = false, className, ref, ...rest }: SpinnerProps) {\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      className={classes(styles.spinner, className)}\n      data-size={size}\n      data-tone={tone}\n      role={decorative ? undefined : 'status'}\n      aria-hidden={decorative || undefined}\n    >\n      <span className={styles.ring} aria-hidden=\"true\" />\n      {!decorative && <VisuallyHidden>{label}</VisuallyHidden>}\n    </span>\n  );\n}\n\nSpinner.displayName = 'Spinner';\n"]}

package/dist/chunk-IDNGNQNV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/dialog/Dialog.module.css","../src/dialog/Dialog.tsx"],"names":["root","VendorSystem","VendorModal"],"mappings":";;;;;;;AAAA,IAAA,cAAA,GAAA;AAAA,EAOG,IAAA,EAAAA;AAAA,CAAA;AC6BI,SAAS,YAAA,CAAa,EAAE,QAAA,EAAU,GAAG,MAAK,EAAsB;AAIrE,EAAA,MAAM,CAAC,SAAS,CAAA,GAAI,QAAA,CAAqC,MAAM;AAC7D,IAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,MAAA;AAC5C,IAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAC5C,IAAA,OAAA,CAAQ,SAAA,GAAY,eAAO,IAAQ;AACnC,IAAA,OAAA,CAAQ,QAAQ,WAAA,GAAc,EAAA;AAC9B,IAAA,OAAO,OAAA;AAAA,EACT,CAAC,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,SAAA,EAAW;AAChB,IAAA,QAAA,CAAS,IAAA,CAAK,OAAO,SAAS,CAAA;AAC9B,IAAA,OAAO,MAAM,UAAU,MAAA,EAAO;AAAA,EAChC,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,uBACE,GAAA,CAACC,WAAA,EAAA,EAAc,GAAG,IAAA,EAAM,WACrB,QAAA,EACH,CAAA;AAEJ;AAoBO,SAAS,OAAO,KAAA,EAAoB;AACzC,EAAA,uBAAO,GAAA,CAACC,KAAA,EAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AACjC;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;AACrB,MAAA,CAAO,OAAA,GAAU,YAAA;AACjB,MAAA,CAAO,OAAA,GAAU,YAAA;AACjB,MAAA,CAAO,MAAA,GAAS,WAAA;AAChB,MAAA,CAAO,KAAA,GAAQ,UAAA;AACf,MAAA,CAAO,WAAA,GAAc,gBAAA;AACrB,MAAA,CAAO,KAAA,GAAQ,UAAA;AACf,MAAA,CAAO,IAAA,GAAO,SAAA;AACd,MAAA,CAAO,MAAA,GAAS,WAAA","file":"chunk-IDNGNQNV.js","sourcesContent":["/*\n * The vendor (@pearpages/modals) reads --modal-* custom properties. This class\n * goes on the portal element pulp owns, so every dialog inherits pulp's\n * --dialog-* tokens and the vendor's :root defaults never apply.\n */\n\n@layer components {\n  .root {\n    --modal-bg: var(--dialog-surface);\n    --modal-surface-elevated: var(--dialog-surface);\n    --modal-surface-subtle: var(--dialog-surface-subtle);\n    --modal-color: var(--dialog-fg);\n    --modal-text-secondary: var(--dialog-fg-muted);\n    --modal-text-muted: var(--dialog-fg-muted);\n    --modal-backdrop-bg: var(--dialog-backdrop);\n    --modal-border-primary-color: var(--dialog-border);\n    --modal-border-hover-color: var(--dialog-border-hover);\n    --modal-border-focus-color: var(--dialog-focus);\n    --modal-border-accent-color: var(--dialog-border);\n    --modal-radius: var(--dialog-radius);\n    --modal-radius-md: var(--dialog-radius);\n    --modal-radius-sm: var(--radius-control);\n    --modal-button-radius: var(--radius-control);\n    --modal-shadow: var(--dialog-shadow);\n    --modal-padding: var(--dialog-padding);\n    --modal-spacing-xs: var(--space-1);\n    --modal-spacing-sm: var(--space-2);\n    --modal-spacing-md: var(--dialog-gap);\n    --modal-spacing-lg: var(--space-4);\n    --modal-spacing-xl: var(--space-5);\n    --modal-font-family: var(--dialog-font-family);\n    --modal-font-family-mono: var(--font-family-mono);\n    --modal-font-size-title: var(--dialog-title-font-size);\n    --modal-font-size-title-mobile: var(--dialog-title-font-size);\n    --modal-font-weight-title: var(--dialog-title-font-weight);\n    --modal-font-size-description: var(--dialog-description-font-size);\n    --modal-font-size-description-mobile: var(--dialog-description-font-size);\n    --modal-font-size-button: var(--font-size-sm);\n    --modal-close-bg: var(--dialog-close-bg);\n    --modal-close-hover-bg: var(--dialog-close-bg-hover);\n    --modal-close-text: var(--dialog-close-fg);\n    --modal-close-hover-text: var(--dialog-close-fg-hover);\n    --modal-interactive-hover: var(--color-action-secondary-hover);\n    --modal-interactive-active: var(--color-action-secondary-hover);\n    --modal-interactive-focus: var(--color-action-primary-quiet);\n    --modal-transition-duration: var(--dialog-motion-duration);\n    --modal-transition-easing: var(--dialog-motion-easing);\n    --modal-outline-width: var(--focus-ring-width);\n    --modal-outline-offset: var(--focus-ring-offset);\n    --modal-button-focus-color: var(--dialog-focus);\n    --modal-button-primary-bg: var(--color-action-primary);\n    --modal-button-primary-border: var(--color-action-primary);\n    --modal-button-primary-color: var(--color-text-on-action);\n    --modal-button-primary-hover-bg: var(--color-action-primary-hover);\n    --modal-button-primary-hover-border: var(--color-action-primary-hover);\n    --modal-button-primary-active-bg: var(--color-action-primary-active);\n    --modal-button-primary-active-border: var(--color-action-primary-active);\n    --modal-button-secondary-bg: var(--color-action-secondary);\n    --modal-button-secondary-border: var(--color-border-default);\n    --modal-button-secondary-color: var(--color-text-default);\n    --modal-button-secondary-hover-bg: var(--color-action-secondary-hover);\n    --modal-button-secondary-hover-border: var(--color-border-strong);\n    --modal-button-secondary-active-bg: var(--color-action-secondary-hover);\n    --modal-button-secondary-active-border: var(--color-border-strong);\n  }\n}\n","import { useEffect, useState, type ComponentProps, type ReactNode } from 'react';\nimport {\n  Modal as VendorModal,\n  ModalBody,\n  ModalClose,\n  ModalContent,\n  ModalDescription,\n  ModalFooter,\n  ModalHeader,\n  ModalSystem as VendorSystem,\n  ModalTitle,\n  ModalTrigger,\n  type ModalProps,\n} from '@pearpages/modals';\nimport styles from './Dialog.module.css';\n\nexport type DialogProps = ModalProps;\n\nexport interface DialogSystemProps extends Omit<ComponentProps<typeof VendorSystem>, 'container'> {\n  children: ReactNode;\n}\n\n/**\n * Mount once near the app root. Owns the portal element every dialog renders\n * into and sets the vendor's `--modal-*` variables on it from pulp's\n * `--dialog-*` tokens, so backdrop, surface, type and motion follow the\n * current brand and scheme. Because the variables sit on an ancestor of the\n * dialog, they win over the vendor stylesheet regardless of cascade layers\n * or import order.\n *\n * @status stable\n * @category Overlays\n * @accessibility Renders nothing visible itself; the portal element it owns is where every dialog mounts, so the vendor's focus trap and `inert` handling apply to the rest of the page.\n * @do Mount it once, near the app root, inside any providers dialogs need.\n * @dont Nest it; one system serves every dialog.\n */\nexport function DialogSystem({ children, ...rest }: DialogSystemProps) {\n  // Created detached during the first render (no DOM mutation yet, so it is\n  // safe to do here and needs no state update); attached and removed in the\n  // effect. Undefined on the server, where the vendor falls back to its default.\n  const [container] = useState<HTMLDivElement | undefined>(() => {\n    if (typeof document === 'undefined') return undefined;\n    const element = document.createElement('div');\n    element.className = styles.root ?? '';\n    element.dataset.pulpDialogs = '';\n    return element;\n  });\n\n  useEffect(() => {\n    if (!container) return;\n    document.body.append(container);\n    return () => container.remove();\n  }, [container]);\n\n  return (\n    <VendorSystem {...rest} container={container}>\n      {children}\n    </VendorSystem>\n  );\n}\n\n/**\n * An accessible modal dialog: focus trap, inert page, Escape and backdrop\n * dismissal, stacking. Built on `@pearpages/modals`; pulp adds the theming and\n * the compound API (`Dialog.Trigger`, `Dialog.Content`, `Dialog.Header`,\n * `Dialog.Title`, `Dialog.Description`, `Dialog.Close`, `Dialog.Body`,\n * `Dialog.Footer`). The trigger is a sibling of the dialog, not a child: a\n * dialog's children render only while it is open. Use pulp's `Button` for\n * actions. Requires `DialogSystem` above it and the vendor stylesheet\n * `@pearpages/modals/styles.css`.\n *\n * @status stable\n * @category Overlays\n * @accessibility `role=\"dialog\"` with `aria-modal`, named by `Dialog.Title` and described by `Dialog.Description`; focus moves in on open and back to the trigger on close; the page behind is inert; Escape and the backdrop close it. Provided by `@pearpages/modals`.\n * @do Always render a `Dialog.Title`.\n * Put the destructive action last in `Dialog.Footer` and make the safe one the default focus.\n * @dont Open a dialog from inside a Menu or Popover that stays open.\n * Use it for content that does not need the page blocked; use Popover.\n */\nexport function Dialog(props: DialogProps) {\n  return <VendorModal {...props} />;\n}\n\nDialog.displayName = 'Dialog';\nDialog.Trigger = ModalTrigger;\nDialog.Content = ModalContent;\nDialog.Header = ModalHeader;\nDialog.Title = ModalTitle;\nDialog.Description = ModalDescription;\nDialog.Close = ModalClose;\nDialog.Body = ModalBody;\nDialog.Footer = ModalFooter;\n"]}

package/dist/chunk-MRQWUCBA.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/card/Card.module.css","../src/card/Card.tsx"],"names":["card","header","body","footer"],"mappings":";;;;;AAAA,IAAA,YAAA,GAAA;AAAA,EAGG,IAAA,EAAAA,WAAAA;AAAA,EAmDA,MAAA,EAAAC,aAAAA;AAAA,EACA,IAAA,EAAAC,WAAAA;AAAA,EACA,MAAA,EAAAC;AAAA,CAAA;ACHI,SAAS,IAAA,CAA0C;AAAA,EACxD,OAAA,GAAU,QAAA;AAAA,EACV,OAAA,GAAU,IAAA;AAAA,EACV,WAAA,GAAc,KAAA;AAAA,EACd,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,GAAG,IAAA;AAAA,IACH,GAAA;AAAA,IACA,SAAA,EAAW,OAAA,CAAQ,YAAA,CAAO,IAAA,EAAM,SAAS,CAAA;AAAA,IACzC,cAAA,EAAgB,OAAA;AAAA,IAChB,cAAA,EAAgB,OAAA;AAAA,IAChB,kBAAA,EAAoB,cAAc,EAAA,GAAK,MAAA;AAAA;AAAA,IAEvC,QAAA,EAAU,QAAA,KAAa,WAAA,IAAe,CAAC,UAAU,CAAA,GAAI,MAAA;AAAA,GACvD;AAEA,EAAA,IAAI,OAAA,EAAS;AAGX,IAAA,OAAO,aAAA,CAAc,MAAA,EAAQ,QAAA,EAAU,KAAK,CAAA;AAAA,EAC9C;AAEA,EAAA,uBAAO,GAAA,CAAC,SAAA,EAAA,EAAS,GAAI,KAAA,EAAwC,QAAA,EAAS,CAAA;AACxE;AAEA,SAAS,WAAW,EAAE,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,EAAc;AAC1D,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,GAAA,EAAU,WAAW,OAAA,CAAQ,YAAA,CAAO,MAAA,EAAQ,SAAS,CAAA,EAAG,CAAA;AAChF;AAEA,SAAS,SAAS,EAAE,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,EAAc;AACxD,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,GAAA,EAAU,WAAW,OAAA,CAAQ,YAAA,CAAO,IAAA,EAAM,SAAS,CAAA,EAAG,CAAA;AAC9E;AAEA,SAAS,WAAW,EAAE,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,EAAc;AAC1D,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,GAAA,EAAU,WAAW,OAAA,CAAQ,YAAA,CAAO,MAAA,EAAQ,SAAS,CAAA,EAAG,CAAA;AAChF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;AACnB,UAAA,CAAW,WAAA,GAAc,aAAA;AACzB,QAAA,CAAS,WAAA,GAAc,WAAA;AACvB,UAAA,CAAW,WAAA,GAAc,aAAA;AAEzB,IAAA,CAAK,MAAA,GAAS,UAAA;AACd,IAAA,CAAK,IAAA,GAAO,QAAA;AACZ,IAAA,CAAK,MAAA,GAAS,UAAA","file":"chunk-MRQWUCBA.js","sourcesContent":["/* Every value is a token (--card-*). Slots carry padding and dividers; the root is the surface. */\n\n@layer components {\n  .card {\n    --_pad: var(--card-padding-md);\n\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n    border: 1px solid transparent;\n    border-radius: var(--card-radius);\n    background-color: var(--card-bg);\n    color: var(--card-fg);\n    text-decoration: none;\n    transition:\n      border-color var(--card-motion-duration) var(--motion-easing-standard),\n      box-shadow var(--card-motion-duration) var(--motion-easing-standard),\n      translate var(--card-motion-duration) var(--motion-easing-standard);\n\n    &[data-padding=\"sm\"] {\n      --_pad: var(--card-padding-sm);\n    }\n\n    &[data-padding=\"lg\"] {\n      --_pad: var(--card-padding-lg);\n    }\n\n    &[data-variant=\"raised\"] {\n      box-shadow: var(--card-shadow);\n    }\n\n    &[data-variant=\"outlined\"] {\n      border-color: var(--card-border);\n    }\n\n    &[data-variant=\"sunken\"] {\n      background-color: var(--card-bg-sunken);\n    }\n\n    &[data-interactive] {\n      cursor: pointer;\n\n      &:hover {\n        border-color: var(--card-border-hover);\n        translate: 0 -1px;\n      }\n\n      &:focus-visible {\n        outline: var(--card-focus-ring-width) solid var(--card-focus-ring);\n        outline-offset: var(--card-focus-ring-offset);\n      }\n    }\n  }\n\n  .header,\n  .body,\n  .footer {\n    padding: var(--_pad);\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--card-gap);\n    border-block-end: 1px solid var(--card-divider);\n  }\n\n  .body {\n    flex: 1;\n  }\n\n  .footer {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--card-gap);\n    border-block-start: 1px solid var(--card-divider);\n  }\n}\n","import type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport { renderAsChild } from '../internal/asChild';\nimport { classes } from '../internal/classes';\nimport styles from './Card.module.css';\n\nexport type CardVariant = 'raised' | 'outlined' | 'sunken';\nexport type CardPadding = 'sm' | 'md' | 'lg';\n\nexport interface CardProps<E extends HTMLElement = HTMLElement> extends HTMLAttributes<HTMLElement> {\n  /**\n   * How the card separates from the page: `raised` by shadow, `outlined` by\n   * border, `sunken` by a recessed surface.\n   * @default 'raised'\n   */\n  variant?: CardVariant;\n  /** One knob for every slot's inner spacing. @default 'md' */\n  padding?: CardPadding;\n  /**\n   * Hover and focus affordances for a card that is itself a target. Pair it\n   * with `asChild` and a link, or supply your own role and handlers.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * Render the single child element as the card (an `<a>` for a link card),\n   * merging the card's props into it.\n   * @default false\n   */\n  asChild?: boolean;\n  /** The rendered element; a `<section>` unless `asChild`. */\n  ref?: Ref<E>;\n  children: ReactNode;\n}\n\ninterface SlotProps extends HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n  children?: ReactNode;\n}\n\n/**\n * A surface that groups related content. Compose with `Card.Header`,\n * `Card.Body` and `Card.Footer`; the slots carry the padding and dividers so\n * the root stays a plain surface. Every value comes from `--card-*` tokens;\n * state is exposed as `data-variant`, `data-padding` and `data-interactive`.\n *\n * @status stable\n * @category Layout\n * @accessibility A `section` by default (a `region` when it has an accessible name); with `asChild` the child element's own semantics apply. `interactive` adds a focus ring and a tab stop only when the element is not already focusable.\n * @do Give a card an `aria-label` or a heading in `Card.Header` when it is a landmark worth naming.\n * Use `asChild` with an `a` for a whole-card link.\n * @dont Put more than one primary action inside an interactive card.\n * Nest interactive cards.\n */\nexport function Card<E extends HTMLElement = HTMLElement>({\n  variant = 'raised',\n  padding = 'md',\n  interactive = false,\n  asChild = false,\n  className,\n  tabIndex,\n  ref,\n  children,\n  ...rest\n}: CardProps<E>) {\n  const props = {\n    ...rest,\n    ref,\n    className: classes(styles.card, className),\n    'data-variant': variant,\n    'data-padding': padding,\n    'data-interactive': interactive ? '' : undefined,\n    // An interactive section must be reachable; a link or button already is.\n    tabIndex: tabIndex ?? (interactive && !asChild ? 0 : undefined),\n  };\n\n  if (asChild) {\n    // The helper merges the forwarded ref with the child's; nothing reads it.\n    // eslint-disable-next-line react-hooks/refs -- forwarded, not read\n    return renderAsChild('Card', children, props);\n  }\n\n  return <section {...(props as HTMLAttributes<HTMLElement>)}>{children}</section>;\n}\n\nfunction CardHeader({ className, ref, ...rest }: SlotProps) {\n  return <div {...rest} ref={ref} className={classes(styles.header, className)} />;\n}\n\nfunction CardBody({ className, ref, ...rest }: SlotProps) {\n  return <div {...rest} ref={ref} className={classes(styles.body, className)} />;\n}\n\nfunction CardFooter({ className, ref, ...rest }: SlotProps) {\n  return <div {...rest} ref={ref} className={classes(styles.footer, className)} />;\n}\n\nCard.displayName = 'Card';\nCardHeader.displayName = 'Card.Header';\nCardBody.displayName = 'Card.Body';\nCardFooter.displayName = 'Card.Footer';\n\nCard.Header = CardHeader;\nCard.Body = CardBody;\nCard.Footer = CardFooter;\n"]}

package/dist/chunk-MXWXJZFS.js

@@ -1,48 +0,0 @@
-import { Field } from './chunk-2PXTVZ7H.js';
-import { classes } from './chunk-MI4QUKQS.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-// src/text-field/TextField.module.css
-var TextField_default = {
-  field: "TextField_field",
-  input: "TextField_input"
-};
-function TextField({
-  label,
-  description,
-  error,
-  size = "md",
-  required,
-  disabled,
-  readOnly,
-  id,
-  className,
-  ref,
-  "aria-describedby": describedBy,
-  ...rest
-}) {
-  const invalid = error !== void 0 && error !== null && error !== false && error !== "";
-  return /* @__PURE__ */ jsxs(
-    Field,
-    {
-      id,
-      invalid,
-      disabled: Boolean(disabled),
-      required: Boolean(required),
-      className: classes(TextField_default.field, className),
-      "data-size": size,
-      "data-readonly": readOnly ? "" : void 0,
-      children: [
-        /* @__PURE__ */ jsx(Field.Label, { children: label }),
-        /* @__PURE__ */ jsx(Field.Control, { "aria-describedby": describedBy, children: /* @__PURE__ */ jsx("input", { ...rest, ref, className: TextField_default.input, readOnly }) }),
-        description && /* @__PURE__ */ jsx(Field.Description, { children: description }),
-        invalid && /* @__PURE__ */ jsx(Field.Error, { children: error })
-      ]
-    }
-  );
-}
-TextField.displayName = "TextField";
-
-export { TextField };
-//# sourceMappingURL=chunk-MXWXJZFS.js.map
-//# sourceMappingURL=chunk-MXWXJZFS.js.map

package/dist/chunk-MXWXJZFS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/text-field/TextField.module.css","../src/text-field/TextField.tsx"],"names":["field","input"],"mappings":";;;;;AAAA,IAAA,iBAAA,GAAA;AAAA,EAOG,KAAA,EAAAA,iBAAAA;AAAA,EAIA,KAAA,EAAAC;AAAA,CAAA;AC8BI,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,kBAAA,EAAoB,WAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,MAAM,UAAU,KAAA,KAAU,MAAA,IAAa,UAAU,IAAA,IAAQ,KAAA,KAAU,SAAS,KAAA,KAAU,EAAA;AAEtF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,SAAA,EAAW,OAAA,CAAQ,iBAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MACX,eAAA,EAAe,WAAW,EAAA,GAAK,MAAA;AAAA,MAE/B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACpB,GAAA,CAAC,KAAA,CAAM,OAAA,EAAN,EAAc,oBAAkB,WAAA,EAC/B,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAO,GAAG,MAAM,GAAA,EAAU,SAAA,EAAW,iBAAA,CAAO,KAAA,EAAO,UAAoB,CAAA,EAC1E,CAAA;AAAA,QACC,WAAA,oBAAe,GAAA,CAAC,KAAA,CAAM,WAAA,EAAN,EAAmB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QAC/C,OAAA,oBAAW,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAClC;AAEJ;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-MXWXJZFS.js","sourcesContent":["/*\n * The input's own styles (--text-field-*). Label, description and error come\n * from Field. State lives on the wrapper as data attributes and on the input\n * as native pseudo-classes.\n */\n\n@layer components {\n  .field {\n    font-family: var(--text-field-font-family);\n  }\n\n  .input {\n    min-block-size: var(--text-field-height-md);\n    padding-block: 0;\n    padding-inline: var(--text-field-padding-inline);\n    border: 1px solid var(--text-field-border-default);\n    border-radius: var(--text-field-radius);\n    background-color: var(--text-field-bg);\n    color: var(--text-field-fg);\n    font-size: var(--text-field-font-size-md);\n    transition:\n      border-color var(--text-field-motion-duration) var(--motion-easing-standard),\n      background-color var(--text-field-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--text-field-placeholder);\n    }\n\n    &:focus-visible {\n      border-color: var(--text-field-border-focus);\n      outline: var(--text-field-focus-ring-width) solid var(--text-field-focus-ring);\n      outline-offset: var(--text-field-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:read-only:not(:disabled) {\n      background-color: var(--color-surface-sunken);\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--text-field-border-hover);\n    }\n  }\n\n  .field[data-size=\"sm\"] .input {\n    min-block-size: var(--text-field-height-sm);\n    font-size: var(--text-field-font-size-sm);\n  }\n\n  .field[data-size=\"lg\"] .input {\n    min-block-size: var(--text-field-height-lg);\n    font-size: var(--text-field-font-size-lg);\n  }\n\n  .field[data-invalid] .input {\n    border-color: var(--text-field-border-invalid);\n  }\n}\n","import type { InputHTMLAttributes, ReactNode, Ref } from 'react';\nimport { Field } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './TextField.module.css';\n\nexport type TextFieldSize = 'sm' | 'md' | 'lg';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /** Visible label. Always rendered: a placeholder is not a label. */\n  label: ReactNode;\n  /** Help text under the field, exposed as the input's accessible description. */\n  description?: ReactNode;\n  /**\n   * Error message. Its presence marks the input invalid (`aria-invalid`,\n   * `data-invalid`) and the message is announced as an alert.\n   */\n  error?: ReactNode;\n  /** @default 'md' */\n  size?: TextFieldSize;\n  /** The `<input>` element. */\n  ref?: Ref<HTMLInputElement>;\n  /** Applied to the wrapper, not the input. */\n  className?: string;\n}\n\n/**\n * A single-line text input on top of `Field`: label, description and error\n * wired for assistive technology. Controlled and uncontrolled behave exactly\n * like the native input (`value`/`onChange` or `defaultValue`). Every value\n * comes from `--text-field-*` and `--field-*` tokens; state is exposed as\n * `data-size`, `data-invalid`, `data-disabled` and `data-readonly` on the\n * wrapper.\n *\n * @status stable\n * @category Forms\n * @accessibility A native text `input` wired through Field: `label[for]`, `aria-describedby` for description and error, `aria-invalid` and `aria-required`. Everything the browser gives a native input (autofill, IME, forms) applies.\n * @do Always pass `label`; use a visible one.\n * Prefer `error` text that says how to fix the value.\n * @dont Use `placeholder` as the label.\n * Use it for multi-line text; use Textarea.\n */\nexport function TextField({\n  label,\n  description,\n  error,\n  size = 'md',\n  required,\n  disabled,\n  readOnly,\n  id,\n  className,\n  ref,\n  'aria-describedby': describedBy,\n  ...rest\n}: TextFieldProps) {\n  const invalid = error !== undefined && error !== null && error !== false && error !== '';\n\n  return (\n    <Field\n      id={id}\n      invalid={invalid}\n      disabled={Boolean(disabled)}\n      required={Boolean(required)}\n      className={classes(styles.field, className)}\n      data-size={size}\n      data-readonly={readOnly ? '' : undefined}\n    >\n      <Field.Label>{label}</Field.Label>\n      <Field.Control aria-describedby={describedBy}>\n        <input {...rest} ref={ref} className={styles.input} readOnly={readOnly} />\n      </Field.Control>\n      {description && <Field.Description>{description}</Field.Description>}\n      {invalid && <Field.Error>{error}</Field.Error>}\n    </Field>\n  );\n}\n\nTextField.displayName = 'TextField';\n"]}

package/dist/chunk-N7L66GMG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/popover/Popover.module.css","../src/popover/Popover.tsx"],"names":["content","title"],"mappings":"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","file":"chunk-N7L66GMG.js","sourcesContent":["/* Every value is a token (--popover-*). Position comes in as --_x/--_y from the floating hook. */\n\n@layer components {\n  .content {\n    --_gap: var(--popover-gap);\n\n    position: fixed;\n    z-index: var(--popover-layer);\n    inset-block-start: var(--_y);\n    inset-inline-start: var(--_x);\n    display: flex;\n    flex-direction: column;\n    gap: var(--popover-gap);\n    inline-size: var(--popover-width);\n    max-inline-size: calc(100vw - 2 * var(--space-4));\n    padding: var(--popover-padding);\n    border: var(--size-hairline) solid var(--popover-border);\n    border-radius: var(--popover-radius);\n    background-color: var(--popover-bg);\n    color: var(--popover-fg);\n    font-family: var(--font-family-body);\n    box-shadow: var(--popover-shadow);\n    animation: fade var(--popover-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--popover-focus-ring-width) solid var(--popover-focus-ring);\n      outline-offset: var(--popover-focus-ring-offset);\n    }\n  }\n\n  .title {\n    margin: 0;\n    font-family: var(--font-family-display);\n    font-size: var(--font-size-md);\n    font-weight: var(--font-weight-semibold);\n    line-height: var(--font-line-height-tight);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .content {\n      animation: none;\n    }\n  }\n}\n","import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderAsChild } from '../internal/asChild';\nimport { classes } from '../internal/classes';\nimport { useFloatingPosition, type FloatingPlacement } from '../internal/floating';\nimport { useDismiss } from '../internal/useDismiss';\nimport styles from './Popover.module.css';\n\nexport type PopoverPlacement = FloatingPlacement;\n\ninterface PopoverContextValue {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  contentId: string;\n  titleId: string;\n  placement: PopoverPlacement;\n  floating: ReturnType<typeof useFloatingPosition>;\n}\n\nconst PopoverContext = createContext<PopoverContextValue | null>(null);\n\nfunction usePopover(part: string): PopoverContextValue {\n  const context = useContext(PopoverContext);\n  if (!context) throw new Error(`${part} must be rendered inside <Popover>`);\n  return context;\n}\n\nexport interface PopoverProps {\n  /** Controlled open state. */\n  open?: boolean;\n  /** @default false */\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Preferred side; flips when there is no room. @default 'bottom-start' */\n  placement?: PopoverPlacement;\n  children: ReactNode;\n}\n\n/**\n * A non-modal layer anchored to its trigger: a small form, a filter, a\n * detail panel. The page stays interactive; Escape, a click outside or\n * `Popover.Close` dismiss it and focus returns to the trigger. Compose with\n * `Popover.Trigger`, `Popover.Content` and `Popover.Close`. For anything that\n * must block the page, use Dialog.\n *\n * @status stable\n * @category Overlays\n * @accessibility A non-modal `role=\"dialog\"` named by `title` (or `aria-label`); the trigger has `aria-haspopup=\"dialog\"` and `aria-expanded`. Focus moves to the first focusable element on open and back to the trigger on close; Escape and a click outside dismiss it.\n * @do Give it a `title` or `aria-label`.\n * Use `Popover.Close` inside forms so a keyboard user has a clear exit.\n * @dont Put a long form or a destructive confirmation in it; use Dialog.\n * Open it on hover; that is Tooltip.\n */\nexport function Popover({ open, defaultOpen = false, onOpenChange, placement = 'bottom-start', children }: PopoverProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const controlled = open !== undefined;\n  const isOpen = controlled ? open : uncontrolled;\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!controlled) setUncontrolled(next);\n      onOpenChange?.(next);\n    },\n    [controlled, onOpenChange],\n  );\n  const id = useId();\n  const floating = useFloatingPosition({ open: isOpen, placement });\n\n  return (\n    <PopoverContext.Provider value={{ open: isOpen, setOpen, contentId: `${id}-content`, titleId: `${id}-title`, placement, floating }}>\n      {children}\n    </PopoverContext.Provider>\n  );\n}\n\ninterface PopoverTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Render the child element as the trigger instead of a plain button. @default false */\n  asChild?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n  children: ReactNode;\n}\n\nfunction PopoverTrigger({ asChild = false, onClick, ref, children, ...rest }: PopoverTriggerProps) {\n  const popover = usePopover('Popover.Trigger');\n  const props = {\n    ...rest,\n    ref: popover.floating.refs.setReference,\n    'aria-haspopup': 'dialog' as const,\n    'aria-expanded': popover.open,\n    'aria-controls': popover.open ? popover.contentId : undefined,\n    onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      if (!event.defaultPrevented) popover.setOpen(!popover.open);\n    },\n  };\n  if (asChild) {\n    // eslint-disable-next-line react-hooks/refs -- forwarded to the reference element, not read\n    return renderAsChild('Popover.Trigger', children, { ...props, ref: mergeRefs(ref, popover.floating.refs.setReference) });\n  }\n  return (\n    <button type=\"button\" {...props} ref={mergeRefs(ref, popover.floating.refs.setReference)}>\n      {children}\n    </button>\n  );\n}\n\nfunction mergeRefs<T>(a: Ref<T> | undefined, b: (node: T | null) => void) {\n  return (node: T | null) => {\n    b(node);\n    if (typeof a === 'function') a(node);\n    else if (a) a.current = node;\n  };\n}\n\ninterface PopoverContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Rendered as the dialog's heading and used as its accessible name. Otherwise pass `aria-label`. */\n  title?: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\nfunction PopoverContent({ title, className, ref, children, ...rest }: PopoverContentProps) {\n  const popover = usePopover('Popover.Content');\n  const { refs, positionStyle, placement } = popover.floating;\n  const contentRef = useRef<HTMLDivElement | null>(null);\n\n  useDismiss({\n    open: popover.open,\n    onDismiss: () => popover.setOpen(false),\n    inside: () => [refs.reference.current as Element | null, refs.floating.current],\n  });\n\n  // Move focus in on open; give it back to the trigger on close.\n  useEffect(() => {\n    if (popover.open) {\n      const content = contentRef.current;\n      if (!content) return;\n      const first = content.querySelector<HTMLElement>('input, select, textarea, button, a[href], [tabindex]:not([tabindex=\"-1\"])');\n      (first ?? content).focus();\n      return () => {\n        const reference = refs.reference.current as HTMLElement | null;\n        if (content.contains(document.activeElement) || document.activeElement === document.body) reference?.focus();\n      };\n    }\n  }, [popover.open, refs.reference]);\n\n  if (!popover.open) return null;\n  return createPortal(\n    <div\n      {...rest}\n      ref={mergeRefs(ref, (node) => {\n        contentRef.current = node;\n        refs.setFloating(node);\n      })}\n      id={popover.contentId}\n      role=\"dialog\"\n      aria-labelledby={title ? popover.titleId : undefined}\n      tabIndex={-1}\n      className={classes(styles.content, className)}\n      data-placement={placement}\n      // eslint-disable-next-line react/forbid-dom-props -- per-instance position (--_x/--_y), see internal/floating.ts\n      style={positionStyle}\n    >\n      {title && (\n        <h2 id={popover.titleId} className={styles.title}>\n          {title}\n        </h2>\n      )}\n      {children}\n    </div>,\n    document.body,\n  );\n}\n\ninterface PopoverCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean;\n  children: ReactNode;\n}\n\nfunction PopoverClose({ asChild = false, onClick, children, ...rest }: PopoverCloseProps) {\n  const popover = usePopover('Popover.Close');\n  const props = {\n    ...rest,\n    onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      if (!event.defaultPrevented) popover.setOpen(false);\n    },\n  };\n  if (asChild) return renderAsChild('Popover.Close', children, props);\n  return (\n    <button type=\"button\" {...props}>\n      {children}\n    </button>\n  );\n}\n\nPopover.displayName = 'Popover';\nPopoverTrigger.displayName = 'Popover.Trigger';\nPopoverContent.displayName = 'Popover.Content';\nPopoverClose.displayName = 'Popover.Close';\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\nPopover.Close = PopoverClose;\n"]}

package/dist/chunk-O6OBFL3Q.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/accordion/Accordion.module.css","../src/accordion/Accordion.tsx"],"names":["accordion","item","heading","trigger","label","chevron","panel"],"mappings":"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","file":"chunk-O6OBFL3Q.js","sourcesContent":["/* Every value is a token (--accordion-*). Open state is a data attribute; the chevron rotates on it. */\n\n@layer components {\n  .accordion {\n    display: flex;\n    flex-direction: column;\n    border: var(--size-hairline) solid var(--accordion-border);\n    border-radius: var(--accordion-radius);\n    font-family: var(--font-family-body);\n  }\n\n  .item {\n    border-block-end: var(--size-hairline) solid var(--accordion-border);\n\n    &:last-child {\n      border-block-end: none;\n    }\n  }\n\n  .heading {\n    margin: 0;\n    font-size: inherit;\n    font-weight: inherit;\n  }\n\n  .trigger {\n    display: flex;\n    gap: var(--accordion-trigger-gap);\n    align-items: center;\n    inline-size: 100%;\n    padding-block: var(--accordion-trigger-padding-block);\n    padding-inline: var(--accordion-trigger-padding-inline);\n    border: none;\n    background-color: transparent;\n    color: var(--accordion-trigger-fg);\n    font-size: var(--accordion-trigger-font-size);\n    font-weight: var(--accordion-trigger-font-weight);\n    text-align: start;\n    cursor: pointer;\n    transition: background-color var(--accordion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--accordion-focus-ring-width) solid var(--accordion-focus-ring);\n      outline-offset: calc(-1 * var(--accordion-focus-ring-offset));\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled) {\n      background-color: var(--accordion-trigger-bg-hover);\n    }\n  }\n\n  .label {\n    flex: 1;\n  }\n\n  .chevron {\n    color: var(--accordion-trigger-chevron);\n    transition: rotate var(--accordion-duration) var(--motion-easing-standard);\n  }\n\n  .trigger[data-state=\"open\"] .chevron {\n    rotate: 180deg;\n  }\n\n  .panel {\n    padding-block: var(--accordion-panel-padding-block);\n    padding-inline: var(--accordion-panel-padding-inline);\n    color: var(--accordion-panel-fg);\n    font-size: var(--accordion-panel-font-size);\n  }\n}\n","import {\n  createContext,\n  createElement,\n  useCallback,\n  useContext,\n  useId,\n  useState,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { ChevronDown } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport { classes } from '../internal/classes';\nimport { useRovingFocus } from '../internal/useRovingFocus';\nimport styles from './Accordion.module.css';\n\nexport type AccordionType = 'single' | 'multiple';\nexport type AccordionHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\ninterface AccordionContextValue {\n  openValues: ReadonlySet<string>;\n  toggle: (value: string) => void;\n  headingLevel: AccordionHeadingLevel;\n  baseId: string;\n}\n\ninterface ItemContextValue {\n  value: string;\n  open: boolean;\n  disabled: boolean;\n}\n\nconst AccordionContext = createContext<AccordionContextValue | null>(null);\nconst ItemContext = createContext<ItemContextValue | null>(null);\n\nfunction useAccordion(part: string): AccordionContextValue {\n  const context = useContext(AccordionContext);\n  if (!context) throw new Error(`${part} must be rendered inside <Accordion>`);\n  return context;\n}\n\nfunction useItem(part: string): ItemContextValue {\n  const context = useContext(ItemContext);\n  if (!context) throw new Error(`${part} must be rendered inside <Accordion.Item>`);\n  return context;\n}\n\nexport interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {\n  /** `single` keeps one item open; `multiple` allows any number. @default 'single' */\n  type?: AccordionType;\n  /** Controlled open item(s): a string for `single`, an array for `multiple`. */\n  value?: string | string[];\n  defaultValue?: string | string[];\n  onValueChange?: (value: string | string[]) => void;\n  /** In `single` mode, whether the open item can be closed again. @default true */\n  collapsible?: boolean;\n  /** The heading level of every trigger, for the document outline. @default 3 */\n  headingLevel?: AccordionHeadingLevel;\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\nconst toSet = (value: string | string[] | undefined): Set<string> =>\n  new Set(value === undefined ? [] : Array.isArray(value) ? value : [value]);\n\n/**\n * Vertically stacked sections that expand one at a time or independently.\n * Each trigger is a button inside a real heading, each panel a labelled\n * region; arrows, Home and End move between triggers. Controlled or\n * uncontrolled by `value`. Compose with `Accordion.Item`,\n * `Accordion.Trigger` and `Accordion.Panel`.\n *\n * @status stable\n * @category Navigation\n * @accessibility Each trigger is a `button` inside a heading of the given `headingLevel`; each panel is a `region` labelled by its trigger. Arrows, Home and End move between triggers; Enter or Space toggles.\n * @do Set `headingLevel` to fit the page outline.\n * Use `multiple` when sections are independent reference material.\n * @dont Nest interactive content in the trigger; it is one button.\n * Use it for a single show-more; use Popover or plain content instead.\n */\nexport function Accordion({\n  type = 'single',\n  value,\n  defaultValue,\n  onValueChange,\n  collapsible = true,\n  headingLevel = 3,\n  className,\n  onKeyDown,\n  ref,\n  children,\n  ...rest\n}: AccordionProps) {\n  const [uncontrolled, setUncontrolled] = useState<Set<string>>(() => toSet(defaultValue));\n  const controlled = value !== undefined;\n  const openValues = controlled ? toSet(value) : uncontrolled;\n\n  const toggle = useCallback(\n    (item: string) => {\n      const next = new Set(openValues);\n      if (next.has(item)) {\n        if (type === 'single' && !collapsible) return;\n        next.delete(item);\n      } else {\n        if (type === 'single') next.clear();\n        next.add(item);\n      }\n      if (!controlled) setUncontrolled(next);\n      onValueChange?.(type === 'single' ? (next.values().next().value ?? '') : Array.from(next));\n    },\n    [openValues, type, collapsible, controlled, onValueChange],\n  );\n\n  const baseId = useId();\n  const rove = useRovingFocus({ orientation: 'vertical', selector: '[data-accordion-trigger]' });\n\n  return (\n    <AccordionContext.Provider value={{ openValues, toggle, headingLevel, baseId }}>\n      <div\n        {...rest}\n        ref={ref}\n        className={classes(styles.accordion, className)}\n        data-type={type}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (!event.defaultPrevented) rove(event);\n        }}\n      >\n        {children}\n      </div>\n    </AccordionContext.Provider>\n  );\n}\n\ninterface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n  disabled?: boolean;\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\nfunction AccordionItem({ value, disabled = false, className, ref, children, ...rest }: AccordionItemProps) {\n  const accordion = useAccordion('Accordion.Item');\n  const open = accordion.openValues.has(value);\n  return (\n    <ItemContext.Provider value={{ value, open, disabled }}>\n      <div\n        {...rest}\n        ref={ref}\n        className={classes(styles.item, className)}\n        data-state={open ? 'open' : 'closed'}\n        data-disabled={disabled ? '' : undefined}\n      >\n        {children}\n      </div>\n    </ItemContext.Provider>\n  );\n}\n\ninterface AccordionTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ref?: Ref<HTMLButtonElement>;\n  children: ReactNode;\n}\n\nfunction AccordionTrigger({ className, onClick, ref, children, ...rest }: AccordionTriggerProps) {\n  const accordion = useAccordion('Accordion.Trigger');\n  const item = useItem('Accordion.Trigger');\n  const triggerId = `${accordion.baseId}-${item.value}-trigger`;\n  const panelId = `${accordion.baseId}-${item.value}-panel`;\n  return createElement(\n    `h${accordion.headingLevel}`,\n    { className: styles.heading },\n    <button\n      {...rest}\n      ref={ref}\n      type=\"button\"\n      id={triggerId}\n      aria-expanded={item.open}\n      aria-controls={panelId}\n      disabled={item.disabled}\n      className={classes(styles.trigger, className)}\n      data-accordion-trigger=\"\"\n      data-state={item.open ? 'open' : 'closed'}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) accordion.toggle(item.value);\n      }}\n    >\n      <span className={styles.label}>{children}</span>\n      <Icon size=\"inherit\" className={styles.chevron}>\n        <ChevronDown />\n      </Icon>\n    </button>,\n  );\n}\n\ninterface AccordionPanelProps extends HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\nfunction AccordionPanel({ className, ref, children, ...rest }: AccordionPanelProps) {\n  const accordion = useAccordion('Accordion.Panel');\n  const item = useItem('Accordion.Panel');\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      id={`${accordion.baseId}-${item.value}-panel`}\n      role=\"region\"\n      aria-labelledby={`${accordion.baseId}-${item.value}-trigger`}\n      hidden={!item.open}\n      className={classes(styles.panel, className)}\n      data-state={item.open ? 'open' : 'closed'}\n    >\n      {children}\n    </div>\n  );\n}\n\nAccordion.displayName = 'Accordion';\nAccordionItem.displayName = 'Accordion.Item';\nAccordionTrigger.displayName = 'Accordion.Trigger';\nAccordionPanel.displayName = 'Accordion.Panel';\n\nAccordion.Item = AccordionItem;\nAccordion.Trigger = AccordionTrigger;\nAccordion.Panel = AccordionPanel;\n"]}

package/dist/chunk-OGIQRHNF.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/select/Select.module.css","../src/select/Select.tsx"],"names":["field","control","select"],"mappings":";;;;;AAAA,IAAA,cAAA,GAAA;AAAA,EAOG,KAAA,EAAAA,cAAAA;AAAA,EAoBA,OAAA,EAAAC,gBAAAA;AAAA,EAuBA,MAAA,EAAAC;AAAA,CAAA;ACbI,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,WAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,kBAAA,EAAoB,WAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,UAAU,KAAA,KAAU,MAAA,IAAa,UAAU,IAAA,IAAQ,KAAA,KAAU,SAAS,KAAA,KAAU,EAAA;AACtF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,SAAA,EAAW,OAAA,CAAQ,cAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,4BACnB,MAAA,EAAA,EAAK,SAAA,EAAW,eAAO,OAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,MAAM,OAAA,EAAN,EAAc,kBAAA,EAAkB,WAAA,EAC/B,+BAAC,QAAA,EAAA,EAAQ,GAAG,MAAM,GAAA,EAAU,SAAA,EAAW,eAAO,MAAA,EAC3C,QAAA,EAAA;AAAA,UAAA,WAAA,KAAgB,0BACf,GAAA,CAAC,QAAA,EAAA,EAAO,OAAM,EAAA,EAAG,QAAA,EAAU,UACxB,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAED;AAAA,SAAA,EACH,GACF,CAAA,EACF,CAAA;AAAA,QACC,WAAA,oBAAe,GAAA,CAAC,KAAA,CAAM,WAAA,EAAN,EAAmB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QAC/C,OAAA,oBAAW,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAClC;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-OGIQRHNF.js","sourcesContent":["/*\n * Every value is a token (--select-*). The chevron is the wrapper's ::after,\n * sharing the select's grid cell. Size and invalid state resolve into private\n * custom properties on the root.\n */\n\n@layer components {\n  .field {\n    --_height: var(--select-height-md);\n    --_font-size: var(--select-font-size-md);\n    --_border: var(--select-border-default);\n\n    font-family: var(--select-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--select-height-sm);\n      --_font-size: var(--select-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--select-height-lg);\n      --_font-size: var(--select-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--select-border-invalid); }\n  }\n\n  .control {\n    display: grid;\n    align-items: center;\n\n    & > * {\n      grid-area: 1 / 1;\n    }\n\n    &::after {\n      content: \"\";\n      inline-size: var(--space-2);\n      block-size: var(--space-2);\n      margin-inline-end: var(--select-chevron-inset);\n      border-inline-end: var(--select-chevron-width) solid var(--select-chevron);\n      border-block-end: var(--select-chevron-width) solid var(--select-chevron);\n      justify-self: end;\n      rotate: 45deg;\n      translate: 0 -25%;\n      pointer-events: none;\n      grid-area: 1 / 1;\n    }\n  }\n\n  .select {\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--select-padding-inline) var(--select-chevron-gap);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--select-radius);\n    background-color: var(--select-bg);\n    color: var(--select-fg);\n    font-size: var(--_font-size);\n    appearance: none;\n    cursor: pointer;\n    transition: border-color var(--select-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      border-color: var(--select-border-focus);\n      outline: var(--select-focus-ring-width) solid var(--select-focus-ring);\n      outline-offset: var(--select-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--select-border-hover);\n    }\n\n    &:has(option[value=\"\"]:checked) {\n      color: var(--select-placeholder);\n    }\n  }\n}\n","import type { ReactNode, Ref, SelectHTMLAttributes } from 'react';\nimport { Field } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './Select.module.css';\n\nexport type SelectSize = 'sm' | 'md' | 'lg';\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n  /** Visible label. Always rendered. */\n  label: ReactNode;\n  description?: ReactNode;\n  /** Presence marks the control invalid and announces the message. */\n  error?: ReactNode;\n  /** @default 'md' */\n  size?: SelectSize;\n  /** An empty first option shown until a value is chosen. */\n  placeholder?: string;\n  /** The `<select>` element. */\n  ref?: Ref<HTMLSelectElement>;\n  /** Applied to the wrapper, not the select. */\n  className?: string;\n  /** `<option>` and `<optgroup>` elements. */\n  children: ReactNode;\n}\n\n/**\n * A native `<select>` on top of Field: the browser's own popup, keyboard and\n * assistive-technology support, with the closed control drawn from\n * `--select-*` tokens. For rich options or multi-select, a listbox component\n * comes later on a headless layer; this one stays native on purpose.\n *\n * @status stable\n * @category Forms\n * @accessibility A native `select` on top of Field: the browser's own popup, keyboard and screen-reader behaviour; the placeholder is a disabled empty option when `required`.\n * @do Use it for a plain list of words; it is the most robust choice on every platform.\n * @dont Use it for options that need a description or an icon; use Picker.\n */\nexport function Select({\n  label,\n  description,\n  error,\n  size = 'md',\n  placeholder,\n  required,\n  disabled,\n  id,\n  className,\n  ref,\n  children,\n  'aria-describedby': describedBy,\n  ...rest\n}: SelectProps) {\n  const invalid = error !== undefined && error !== null && error !== false && error !== '';\n  return (\n    <Field\n      id={id}\n      invalid={invalid}\n      disabled={Boolean(disabled)}\n      required={Boolean(required)}\n      className={classes(styles.field, className)}\n      data-size={size}\n    >\n      <Field.Label>{label}</Field.Label>\n      <span className={styles.control}>\n        <Field.Control aria-describedby={describedBy}>\n          <select {...rest} ref={ref} className={styles.select}>\n            {placeholder !== undefined && (\n              <option value=\"\" disabled={required}>\n                {placeholder}\n              </option>\n            )}\n            {children}\n          </select>\n        </Field.Control>\n      </span>\n      {description && <Field.Description>{description}</Field.Description>}\n      {invalid && <Field.Error>{error}</Field.Error>}\n    </Field>\n  );\n}\n\nSelect.displayName = 'Select';\n"]}

package/dist/chunk-OUFAFINB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/switch/Switch.module.css","../src/switch/Switch.tsx"],"names":["switch","row","input"],"mappings":";;;;AAAA,IAAA,cAAA,GAAA;AAAA,EAOG,MAAA,EAAAA,eAAAA;AAAA,EAWA,GAAA,EAAAC,YAAAA;AAAA,EAMA,KAAA,EAAAC;AAAA,CAAA;ACOI,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,kBAAA,EAAoB,WAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,EAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAe,cAAA,CAAO,MAAA;AAAA,MACtB,cAAc,cAAA,CAAO,GAAA;AAAA,MACrB,kBAAA,EAAkB,WAAA;AAAA,MAClB,OAAA,kBAAS,GAAA,CAAC,OAAA,EAAA,EAAO,GAAG,IAAA,EAAM,GAAA,EAAU,IAAA,EAAK,UAAA,EAAW,IAAA,EAAK,QAAA,EAAS,SAAA,EAAW,cAAA,CAAO,KAAA,EAAO;AAAA;AAAA,GAC7F;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-OUFAFINB.js","sourcesContent":["/*\n * Every value is a token (--switch-*). The input is the track; its ::before\n * is the thumb. Size and invalid state resolve into private custom\n * properties on the root.\n */\n\n@layer components {\n  .switch {\n    --_size: var(--switch-size-md);\n    --_track: var(--switch-track-bg);\n\n    font-family: var(--font-family-body);\n\n    &[data-size=\"sm\"] { --_size: var(--switch-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--switch-size-lg); }\n    &[data-invalid] { --_track: var(--switch-track-invalid); }\n  }\n\n  .row {\n    display: flex;\n    align-items: center;\n    gap: var(--switch-gap);\n  }\n\n  .input {\n    --_inset: calc(2 * var(--switch-thumb-inset));\n\n    position: relative;\n    flex: none;\n    inline-size: calc(2 * var(--_size));\n    block-size: var(--_size);\n    margin: 0;\n    border: none;\n    border-radius: var(--switch-radius);\n    background-color: var(--_track);\n    appearance: none;\n    cursor: pointer;\n    transition: background-color var(--switch-motion-duration) var(--motion-easing-standard);\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      inset-block-start: var(--_inset);\n      inset-inline-start: var(--_inset);\n      inline-size: calc(var(--_size) - 2 * var(--_inset));\n      block-size: calc(var(--_size) - 2 * var(--_inset));\n      border-radius: var(--switch-radius);\n      background-color: var(--switch-thumb);\n      transition: translate var(--switch-motion-duration) var(--motion-easing-standard);\n    }\n\n    &:checked {\n      background-color: var(--switch-track-bg-checked);\n\n      &::before {\n        translate: var(--_size) 0;\n        background-color: var(--switch-thumb-checked);\n      }\n    }\n\n    &:focus-visible {\n      outline: var(--switch-focus-ring-width) solid var(--switch-focus-ring);\n      outline-offset: var(--switch-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :checked) {\n      background-color: var(--switch-track-bg-hover);\n    }\n\n    &:hover:not(:disabled):checked {\n      background-color: var(--switch-track-bg-checked-hover);\n    }\n  }\n}\n","import type { InputHTMLAttributes, ReactNode, Ref } from 'react';\nimport { ToggleField, type ToggleSize } from '../internal/ToggleField';\nimport styles from './Switch.module.css';\n\nexport type SwitchSize = ToggleSize;\n\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\n  /** Visible label beside the switch. */\n  label: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  /** @default 'md' */\n  size?: SwitchSize;\n  /** The `<input>` element. */\n  ref?: Ref<HTMLInputElement>;\n  /** Applied to the wrapper, not the input. */\n  className?: string;\n}\n\n/**\n * An on/off control: a native checkbox with `role=\"switch\"`, so assistive\n * technology announces on and off, and the browser handles keyboard, forms\n * and state. Use it for settings that take effect immediately; use Checkbox\n * for choices submitted with a form. Drawn with `--switch-*` tokens.\n *\n * @status stable\n * @category Forms\n * @accessibility A native checkbox with `role=\"switch\"`, so on and off are announced; Space toggles; label, description and error wire through Field.\n * @do Use it for settings that apply immediately.\n * @dont Use it inside a form that needs a submit; use Checkbox.\n */\nexport function Switch({\n  label,\n  description,\n  error,\n  size = 'md',\n  required,\n  disabled,\n  id,\n  className,\n  ref,\n  'aria-describedby': describedBy,\n  ...rest\n}: SwitchProps) {\n  return (\n    <ToggleField\n      label={label}\n      description={description}\n      error={error}\n      size={size}\n      required={required}\n      disabled={disabled}\n      id={id}\n      className={className}\n      rootClassName={styles.switch}\n      rowClassName={styles.row}\n      aria-describedby={describedBy}\n      control={<input {...rest} ref={ref} type=\"checkbox\" role=\"switch\" className={styles.input} />}\n    />\n  );\n}\n\nSwitch.displayName = 'Switch';\n"]}

package/dist/chunk-OXYP34CG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/internal/dates.ts","../src/calendar/Calendar.module.css","../src/calendar/CalendarGrid.tsx"],"names":["root","header","heading","nav","grid","weekday","cell","AriaButton","AriaHeading","AriaCalendarGrid","AriaCalendarGridHeader","AriaCalendarHeaderCell","AriaCalendarGridBody","AriaCalendarCell"],"mappings":";;;;;;AAOO,SAAS,OAAO,GAAA,EAAiE;AACtF,EAAA,IAAI,GAAA,KAAQ,QAAW,OAAO,MAAA;AAC9B,EAAA,IAAI,GAAA,KAAQ,IAAA,IAAQ,GAAA,KAAQ,EAAA,EAAI,OAAO,IAAA;AACvC,EAAA,OAAO,UAAU,GAAG,CAAA;AACtB;AAEO,SAAS,SAAS,IAAA,EAAuC;AAC9D,EAAA,OAAO,OAAO,IAAA,CAAK,QAAA,GAAW,KAAA,CAAM,CAAA,EAAG,EAAE,CAAA,GAAI,IAAA;AAC/C;;;ACfA,IAAA,gBAAA,GAAA;AAAA,EAOG,IAAA,EAAAA,eAAAA;AAAA,EAWA,MAAA,EAAAC,iBAAAA;AAAA,EAOA,OAAA,EAAAC,kBAAAA;AAAA,EAMA,GAAA,EAAAC,cAAAA;AAAA,EA6BA,IAAA,EAAAC,eAAAA;AAAA,EAKA,OAAA,EAAAC,kBAAAA;AAAA,EASA,IAAA,EAAAC;AAAA,CAAA;ACrDI,SAAS,YAAA,GAAe;AAC7B,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,gBAAA,CAAO,MAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAACC,MAAA,EAAA,EAAW,IAAA,EAAK,UAAA,EAAW,SAAA,EAAW,gBAAA,CAAO,GAAA,EAC5C,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,SAAA,EACT,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,GACf,CAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAACC,OAAA,EAAA,EAAY,SAAA,EAAW,gBAAA,CAAO,OAAA,EAAS,CAAA;AAAA,sBACxC,GAAA,CAACD,MAAA,EAAA,EAAW,IAAA,EAAK,MAAA,EAAO,WAAW,gBAAA,CAAO,GAAA,EACxC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,SAAA,EACT,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,GAChB,CAAA,EACF;AAAA,KAAA,EACF,CAAA;AAAA,yBACCE,cAAA,EAAA,EAAiB,SAAA,EAAW,gBAAA,CAAO,IAAA,EAAM,cAAa,OAAA,EACrD,QAAA,EAAA;AAAA,sBAAA,GAAA,CAACC,kBAAA,EAAA,EAAwB,WAAC,GAAA,qBAAQ,GAAA,CAACC,sBAAuB,SAAA,EAAW,gBAAA,CAAO,OAAA,EAAU,QAAA,EAAA,GAAA,EAAI,CAAA,EAA0B,CAAA;AAAA,sBACpH,GAAA,CAACC,gBAAA,EAAA,EAAsB,QAAA,EAAA,CAAC,IAAA,qBAAS,GAAA,CAACC,gBAAiB,IAAA,EAAY,SAAA,EAAW,gBAAA,CAAO,IAAA,EAAM,CAAA,EAAG;AAAA,KAAA,EAC5F;AAAA,GAAA,EACF,CAAA;AAEJ;AAGO,IAAM,oBAAoB,gBAAA,CAAO","file":"chunk-OXYP34CG.js","sourcesContent":["import { parseDate, type CalendarDate, type DateValue } from '@internationalized/date';\n\n/**\n * pulp's date contract is an ISO calendar date string (`YYYY-MM-DD`); the\n * vendor's date objects stay behind this boundary (decision record 001).\n * `undefined` stays `undefined` so uncontrolled props remain uncontrolled.\n */\nexport function toDate(iso: string | null | undefined): CalendarDate | null | undefined {\n  if (iso === undefined) return undefined;\n  if (iso === null || iso === '') return null;\n  return parseDate(iso);\n}\n\nexport function fromDate(date: DateValue | null): string | null {\n  return date ? date.toString().slice(0, 10) : null;\n}\n","/*\n * Every value is a token (--calendar-*). React Aria writes the cell state:\n * data-selected, data-focused, data-focus-visible, data-hovered,\n * data-disabled, data-unavailable, data-today, data-outside-month.\n */\n\n@layer components {\n  .root {\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--calendar-gap);\n    padding: var(--calendar-padding);\n    background-color: var(--calendar-bg);\n    color: var(--calendar-fg);\n    font-family: var(--calendar-font-family);\n    font-size: var(--calendar-font-size);\n  }\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--calendar-gap);\n  }\n\n  .heading {\n    margin: 0;\n    font-size: var(--calendar-heading-font-size);\n    font-weight: var(--calendar-heading-font-weight);\n  }\n\n  .nav {\n    display: grid;\n    place-items: center;\n    inline-size: var(--calendar-nav-size);\n    block-size: var(--calendar-nav-size);\n    padding: 0;\n    border: none;\n    border-radius: var(--calendar-nav-radius);\n    background-color: transparent;\n    color: var(--calendar-nav-fg);\n    cursor: pointer;\n    transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n    &[data-hovered] {\n      background-color: var(--calendar-nav-bg-hover);\n      color: var(--calendar-nav-fg-hover);\n    }\n\n    &[data-focus-visible] {\n      outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n      outline-offset: var(--calendar-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n  }\n\n  .grid {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n\n  .weekday {\n    inline-size: var(--calendar-cell-size);\n    padding: 0;\n    color: var(--calendar-weekday-fg);\n    font-size: var(--calendar-weekday-font-size);\n    font-weight: var(--calendar-weekday-font-weight);\n    text-align: center;\n  }\n\n  .cell {\n    display: grid;\n    place-items: center;\n    inline-size: var(--calendar-cell-size);\n    block-size: var(--calendar-cell-size);\n    border-radius: var(--calendar-cell-radius);\n    color: var(--calendar-cell-fg);\n    cursor: pointer;\n    outline: none;\n    transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n    &[data-outside-month] {\n      display: none;\n    }\n\n    &[data-today] {\n      color: var(--calendar-cell-fg-today);\n      font-weight: var(--calendar-heading-font-weight);\n    }\n\n    &[data-hovered] {\n      background-color: var(--calendar-cell-bg-hover);\n    }\n\n    &[data-selected] {\n      background-color: var(--calendar-cell-bg-selected);\n      color: var(--calendar-cell-fg-selected);\n\n      &[data-hovered] {\n        background-color: var(--calendar-cell-bg-selected-hover);\n      }\n    }\n\n    &[data-focus-visible] {\n      outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n      outline-offset: var(--calendar-focus-ring-offset);\n    }\n\n    &[data-unavailable] {\n      color: var(--calendar-cell-fg-unavailable);\n      text-decoration: line-through;\n      cursor: not-allowed;\n    }\n\n    /* Disabled dims the days, not the month name, so the visible text keeps its contrast. */\n    &[data-disabled] {\n      color: var(--calendar-cell-fg-unavailable);\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Button as AriaButton,\n  CalendarCell as AriaCalendarCell,\n  CalendarGrid as AriaCalendarGrid,\n  CalendarGridBody as AriaCalendarGridBody,\n  CalendarGridHeader as AriaCalendarGridHeader,\n  CalendarHeaderCell as AriaCalendarHeaderCell,\n  Heading as AriaHeading,\n} from 'react-aria-components';\nimport { ChevronLeft, ChevronRight } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport styles from './Calendar.module.css';\n\n/**\n * The month view shared by Calendar and DatePicker: navigation, the visible\n * month name, weekday header and the day grid. It reads its state from the\n * vendor's calendar context, so it works inside either root. The vendor\n * names the grid for assistive technology through a visually hidden `h2`;\n * the visible month name is decorative (`aria-hidden`), which is why it is\n * a plain div and not a heading level of pulp's choosing.\n */\nexport function CalendarGrid() {\n  return (\n    <>\n      <div className={styles.header}>\n        <AriaButton slot=\"previous\" className={styles.nav}>\n          <Icon size=\"inherit\">\n            <ChevronLeft />\n          </Icon>\n        </AriaButton>\n        <AriaHeading className={styles.heading} />\n        <AriaButton slot=\"next\" className={styles.nav}>\n          <Icon size=\"inherit\">\n            <ChevronRight />\n          </Icon>\n        </AriaButton>\n      </div>\n      <AriaCalendarGrid className={styles.grid} weekdayStyle=\"short\">\n        <AriaCalendarGridHeader>{(day) => <AriaCalendarHeaderCell className={styles.weekday}>{day}</AriaCalendarHeaderCell>}</AriaCalendarGridHeader>\n        <AriaCalendarGridBody>{(date) => <AriaCalendarCell date={date} className={styles.cell} />}</AriaCalendarGridBody>\n      </AriaCalendarGrid>\n    </>\n  );\n}\n\n/** The root class, for DatePicker to style the vendor calendar inside its popover. */\nexport const calendarRootClass = styles.root;\n"]}

package/dist/chunk-P5C2U5ZF.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/slider/Slider.module.css","../src/slider/Slider.tsx"],"names":["root","header","hidden","output","track","rail","fill","thumb","AriaSlider","AriaLabel","AriaSliderOutput","AriaSliderTrack","AriaSliderFill","AriaSliderThumb","AriaText"],"mappings":"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","file":"chunk-P5C2U5ZF.js","sourcesContent":["/*\n * Every value is a token (--slider-*); the label and description read\n * --field-*. React Aria positions the thumbs and the fill (its inline\n * values); the rail is the visible track inside a larger pointer target.\n * State: data-orientation and data-disabled on the root; data-dragging,\n * data-hovered, data-focus-visible on a thumb.\n */\n\n@layer components {\n  .root {\n    --_thumb: var(--slider-thumb-size);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--slider-gap);\n    inline-size: 100%;\n    font-family: var(--slider-font-family);\n\n    &[data-orientation=\"vertical\"] {\n      inline-size: auto;\n      block-size: var(--slider-track-length);\n    }\n\n  }\n\n  .header {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--slider-gap);\n  }\n\n  .hidden {\n    position: absolute;\n    inline-size: var(--size-hairline);\n    block-size: var(--size-hairline);\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  .output {\n    color: var(--slider-output-fg);\n    font-family: var(--slider-output-font-family);\n    font-size: var(--slider-output-font-size);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .track {\n    position: relative;\n    block-size: var(--slider-track-hit-size);\n\n    .root[data-orientation=\"vertical\"] & {\n      inline-size: var(--slider-track-hit-size);\n      block-size: 100%;\n    }\n  }\n\n  /* Disabled dims the track, not the label and output, so the text keeps its contrast. */\n  .root[data-disabled] .track {\n    opacity: 0.55;\n  }\n\n  .rail {\n    position: absolute;\n    inset-block-start: 50%;\n    inline-size: 100%;\n    block-size: var(--slider-track-size);\n    overflow: hidden;\n    border-radius: var(--slider-track-radius);\n    background-color: var(--slider-track-bg);\n    translate: 0 -50%;\n\n    .root[data-orientation=\"vertical\"] & {\n      inset-block-start: 0;\n      inset-inline-start: 50%;\n      inline-size: var(--slider-track-size);\n      block-size: 100%;\n      translate: -50% 0;\n    }\n  }\n\n  .fill {\n    position: absolute;\n    block-size: 100%;\n    background-color: var(--slider-fill);\n\n    .root[data-orientation=\"vertical\"] & {\n      inline-size: 100%;\n    }\n  }\n\n  .thumb {\n    inset-block-start: 50%;\n    inline-size: var(--_thumb);\n    block-size: var(--_thumb);\n    border: var(--slider-thumb-border-width) solid var(--slider-thumb-border);\n    border-radius: var(--slider-thumb-radius);\n    background-color: var(--slider-thumb-bg);\n    box-shadow: var(--slider-thumb-shadow);\n    cursor: grab;\n    transition: border-color var(--slider-motion-duration) var(--motion-easing-standard);\n\n    .root[data-orientation=\"vertical\"] & {\n      inset-block-start: auto;\n      inset-inline-start: 50%;\n    }\n\n    &[data-hovered],\n    &[data-dragging] {\n      border-color: var(--slider-thumb-border-hover);\n    }\n\n    &[data-dragging] {\n      cursor: grabbing;\n    }\n\n    &[data-focus-visible] {\n      outline: var(--slider-focus-ring-width) solid var(--slider-focus-ring);\n      outline-offset: var(--slider-focus-ring-offset);\n    }\n  }\n}\n","import type { ReactNode, Ref } from 'react';\nimport {\n  Label as AriaLabel,\n  Slider as AriaSlider,\n  SliderFill as AriaSliderFill,\n  SliderOutput as AriaSliderOutput,\n  SliderThumb as AriaSliderThumb,\n  SliderTrack as AriaSliderTrack,\n  Text as AriaText,\n} from 'react-aria-components';\nimport { classes } from '../internal/classes';\nimport fieldStyles from '../internal/AriaField.module.css';\nimport styles from './Slider.module.css';\n\nexport type SliderValue = number | [number, number];\nexport type SliderOrientation = 'horizontal' | 'vertical';\n\nexport interface SliderProps<T extends SliderValue = number> {\n  /** Visible label. Always rendered; `hideLabel` keeps it for assistive technology only. */\n  label: ReactNode;\n  /** @default false */\n  hideLabel?: boolean;\n  description?: ReactNode;\n  /** One number, or a `[start, end]` pair for a range with two thumbs. */\n  value?: T;\n  defaultValue?: T;\n  /** Called on every change while dragging or pressing arrows. */\n  onChange?: (value: T) => void;\n  /** Called once when the drag ends or the key is released. */\n  onChangeEnd?: (value: T) => void;\n  /** @default 0 */\n  min?: number;\n  /** @default 100 */\n  max?: number;\n  /** @default 1 */\n  step?: number;\n  /** How the value reads in the output and to assistive technology, for instance `{ style: 'percent' }` or `{ style: 'currency', currency: 'EUR' }`. */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** Names for the two thumbs of a range. @default ['Minimum', 'Maximum'] */\n  thumbLabels?: readonly [string, string];\n  /** Show the formatted value next to the label. @default true */\n  showOutput?: boolean;\n  /** @default 'horizontal' */\n  orientation?: SliderOrientation;\n  /** @default false */\n  disabled?: boolean;\n  /** Submitted with a form; a range submits two inputs with this name. */\n  name?: string;\n  className?: string;\n  /** The group element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Picks a number, or a range, on a track: React Aria's slider (decision\n * record 001) provides the hidden range inputs, arrow, Page Up/Down, Home and\n * End keys, drag with a thumb that stays under the pointer, and\n * `aria-valuetext` in the formatted form. The output element shows the\n * same text, so what a screen reader hears is what sighted users see.\n *\n * @status experimental\n * @category Forms\n * @accessibility A `group` named by the label containing one hidden `input type=\"range\"` per thumb (named by `thumbLabels` for a range) with `aria-valuetext` in the formatted form; the `output` element shows the same text. Arrows step, Page Up/Down step by ten, Home/End jump; thumbs drag with mouse or touch.\n * @do Set `formatOptions` so the spoken value matches the unit (\"40%\", \"€200\").\n * Use `hideLabel` only when a visible heading already names it.\n * @dont Use it for precise values; provide a numeric field alongside.\n * Use a `step` so small the keyboard cannot reach the ends in reasonable time.\n */\nexport function Slider<T extends SliderValue = number>({\n  label,\n  hideLabel = false,\n  description,\n  value,\n  defaultValue,\n  onChange,\n  onChangeEnd,\n  min = 0,\n  max = 100,\n  step = 1,\n  formatOptions,\n  thumbLabels = ['Minimum', 'Maximum'],\n  showOutput = true,\n  orientation = 'horizontal',\n  disabled = false,\n  name,\n  className,\n  ref,\n}: SliderProps<T>) {\n  const range = Array.isArray(value ?? defaultValue);\n  return (\n    <AriaSlider\n      ref={ref}\n      className={classes(styles.root, className)}\n      data-range={range ? '' : undefined}\n      value={value as number | number[] | undefined}\n      defaultValue={(defaultValue ?? (range ? [min, max] : min)) as number | number[]}\n      onChange={onChange as ((value: number | number[]) => void) | undefined}\n      onChangeEnd={onChangeEnd as ((value: number | number[]) => void) | undefined}\n      minValue={min}\n      maxValue={max}\n      step={step}\n      formatOptions={formatOptions}\n      orientation={orientation}\n      isDisabled={disabled}\n    >\n      <div className={styles.header}>\n        <AriaLabel className={classes(fieldStyles.label, hideLabel && styles.hidden)}>{label}</AriaLabel>\n        {showOutput && <AriaSliderOutput className={styles.output} />}\n      </div>\n      <AriaSliderTrack className={styles.track}>\n        <span className={styles.rail} aria-hidden=\"true\">\n          <AriaSliderFill className={styles.fill} />\n        </span>\n        <AriaSliderThumb index={0} className={styles.thumb} aria-label={range ? thumbLabels[0] : undefined} name={name} />\n        {range && <AriaSliderThumb index={1} className={styles.thumb} aria-label={thumbLabels[1]} name={name} />}\n      </AriaSliderTrack>\n      {description && (\n        <AriaText slot=\"description\" className={fieldStyles.description}>\n          {description}\n        </AriaText>\n      )}\n    </AriaSlider>\n  );\n}\n\nSlider.displayName = 'Slider';\n"]}

package/dist/chunk-T76YSNTZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/listbox/Listbox.module.css","../src/listbox/ListboxOptions.tsx"],"names":["list","check","item","itemBody","itemLabel","itemDescription","empty","AriaListBoxItem","AriaText"],"mappings":";;;;;;;AAAA,IAAA,eAAA,GAAA;AAAA,EAQG,IAAA,EAAAA,cAAAA;AAAA,EAoBA,KAAA,EAAAC,eAAAA;AAAA,EAMA,IAAA,EAAAC,cAAAA;AAAA,EA8BA,QAAA,EAAAC,kBAAAA;AAAA,EAMA,SAAA,EAAAC,mBAAAA;AAAA,EAMA,eAAA,EAAAC,yBAAAA;AAAA,EAKA,KAAA,EAAAC;AAAA,CAAA;AC1DI,SAAS,aAAa,IAAA,EAAmB;AAC9C,EAAA,uBACE,IAAA,CAACC,WAAA,EAAA,EAAgB,EAAA,EAAI,IAAA,CAAK,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,KAAA,EAAO,UAAA,EAAY,IAAA,CAAK,QAAA,EAAU,SAAA,EAAW,gBAAO,IAAA,EAChG,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,MAAK,SAAA,EAAU,SAAA,EAAW,gBAAO,KAAA,EACrC,QAAA,kBAAA,GAAA,CAAC,SAAM,CAAA,EACT,CAAA;AAAA,oBACA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,eAAA,CAAO,QAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAACC,QAAS,IAAA,EAAK,OAAA,EAAQ,WAAW,eAAA,CAAO,SAAA,EACtC,eAAK,KAAA,EACR,CAAA;AAAA,MACC,IAAA,CAAK,WAAA,oBACJ,GAAA,CAACA,IAAA,EAAA,EAAS,IAAA,EAAK,eAAc,SAAA,EAAW,eAAA,CAAO,eAAA,EAC5C,QAAA,EAAA,IAAA,CAAK,WAAA,EACR;AAAA,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ;AAEO,SAAS,YAAY,OAAA,EAAoB;AAC9C,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,eAAA,CAAO,OAAQ,QAAA,EAAA,OAAA,EAAQ,CAAA;AAChD;AAGO,IAAM,YAAY,CAAA,GAAI,KAAA,KAAoD,QAAQ,eAAA,CAAO,IAAA,EAAM,GAAG,KAAK","file":"chunk-T76YSNTZ.js","sourcesContent":["/*\n * Every value is a token (--listbox-*). React Aria writes the state:\n * data-focused (real or virtual focus), data-selected, data-disabled,\n * data-hovered, data-focus-visible, data-empty. The tick is in the DOM for\n * every option and revealed by data-selected.\n */\n\n@layer components {\n  .list {\n    display: flex;\n    flex-direction: column;\n    max-block-size: var(--listbox-max-height);\n    padding: var(--listbox-padding);\n    overflow: auto;\n    border: var(--size-hairline) solid var(--listbox-border);\n    border-radius: var(--listbox-radius);\n    background-color: var(--listbox-bg);\n    color: var(--listbox-fg);\n    font-family: var(--listbox-font-family);\n    font-size: var(--listbox-font-size);\n    outline: none;\n\n    &[data-focus-visible] {\n      outline: var(--listbox-focus-ring-width) solid var(--listbox-focus-ring);\n      outline-offset: var(--listbox-focus-ring-offset);\n    }\n  }\n\n  .check {\n    flex: none;\n    visibility: hidden;\n    color: var(--listbox-item-check);\n  }\n\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--listbox-item-gap);\n    padding-block: var(--listbox-item-padding-block);\n    padding-inline: var(--listbox-item-padding-inline);\n    border-radius: var(--listbox-item-radius);\n    color: var(--listbox-item-fg);\n    cursor: default;\n    outline: none;\n\n    &[data-hovered],\n    &[data-focused] {\n      background-color: var(--listbox-item-bg-focus);\n    }\n\n    &[data-selected] {\n      background-color: var(--listbox-item-bg-selected);\n\n      .check {\n        visibility: visible;\n      }\n    }\n\n    &[data-disabled] {\n      color: var(--listbox-item-fg-disabled);\n      cursor: not-allowed;\n    }\n  }\n\n  .itemBody {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .itemLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .itemDescription {\n    color: var(--listbox-item-fg-muted);\n    font-size: var(--listbox-item-description-font-size);\n  }\n\n  .empty {\n    padding: var(--listbox-empty-padding);\n    color: var(--listbox-empty-fg);\n  }\n}\n","import type { ReactNode } from 'react';\nimport { ListBoxItem as AriaListBoxItem, Text as AriaText } from 'react-aria-components';\nimport { Check } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport { classes } from '../internal/classes';\nimport styles from './Listbox.module.css';\n\n/** One option. `id` is the value; `label` is what the user sees and types against. */\nexport interface ListboxItem {\n  id: string;\n  label: string;\n  /** A second, muted line under the label. */\n  description?: string;\n  /** @default false */\n  disabled?: boolean;\n}\n\n/**\n * The option renderer shared by Listbox, Combobox and Picker, so the three\n * agree on what an option looks like and read the same `--listbox-item-*`\n * tokens. React Aria adds the state (`data-selected`, `data-focused`,\n * `data-disabled`); the tick is always in the DOM and shown by CSS.\n */\nexport function renderOption(item: ListboxItem) {\n  return (\n    <AriaListBoxItem id={item.id} textValue={item.label} isDisabled={item.disabled} className={styles.item}>\n      <Icon size=\"inherit\" className={styles.check}>\n        <Check />\n      </Icon>\n      <span className={styles.itemBody}>\n        <AriaText slot=\"label\" className={styles.itemLabel}>\n          {item.label}\n        </AriaText>\n        {item.description && (\n          <AriaText slot=\"description\" className={styles.itemDescription}>\n            {item.description}\n          </AriaText>\n        )}\n      </span>\n    </AriaListBoxItem>\n  );\n}\n\nexport function renderEmpty(message: ReactNode) {\n  return <div className={styles.empty}>{message}</div>;\n}\n\n/** The list class, for Combobox and Picker to put the list inside their popovers. */\nexport const listClass = (...extra: Array<string | false | null | undefined>) => classes(styles.list, ...extra);\n"]}

package/dist/chunk-TGMDOQCL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/textarea/Textarea.module.css","../src/textarea/Textarea.tsx"],"names":["field","textarea"],"mappings":";;;;;AAAA,IAAA,gBAAA,GAAA;AAAA,EAGG,KAAA,EAAAA,gBAAAA;AAAA,EAIA,QAAA,EAAAC;AAAA,CAAA;AC+BI,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,MAAA,GAAS,UAAA;AAAA,EACT,QAAA,GAAW,KAAA;AAAA,EACX,IAAA,GAAO,CAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,kBAAA,EAAoB,WAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,UAAU,KAAA,KAAU,MAAA,IAAa,UAAU,IAAA,IAAQ,KAAA,KAAU,SAAS,KAAA,KAAU,EAAA;AACtF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,SAAA,EAAW,OAAA,CAAQ,gBAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA;AAAA,MACb,gBAAA,EAAgB,WAAW,EAAA,GAAK,MAAA;AAAA,MAChC,eAAA,EAAe,WAAW,EAAA,GAAK,MAAA;AAAA,MAE/B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,4BACnB,KAAA,CAAM,OAAA,EAAN,EAAc,kBAAA,EAAkB,aAC/B,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAU,GAAG,IAAA,EAAM,KAAU,IAAA,EAAY,QAAA,EAAoB,SAAA,EAAW,gBAAA,CAAO,UAAU,CAAA,EAC5F,CAAA;AAAA,QACC,WAAA,oBAAe,GAAA,CAAC,KAAA,CAAM,WAAA,EAAN,EAAmB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QAC/C,OAAA,oBAAW,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAClC;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-TGMDOQCL.js","sourcesContent":["/* Every value is a token (--textarea-*). Label, description and error come from Field. */\n\n@layer components {\n  .field {\n    font-family: var(--textarea-font-family);\n  }\n\n  .textarea {\n    min-block-size: var(--textarea-min-height);\n    padding-block: var(--textarea-padding-block);\n    padding-inline: var(--textarea-padding-inline);\n    border: var(--size-hairline) solid var(--textarea-border-default);\n    border-radius: var(--textarea-radius);\n    background-color: var(--textarea-bg);\n    color: var(--textarea-fg);\n    font-size: var(--textarea-font-size-md);\n    line-height: var(--textarea-line-height);\n    resize: vertical;\n    transition:\n      border-color var(--textarea-motion-duration) var(--motion-easing-standard),\n      background-color var(--textarea-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--textarea-placeholder);\n    }\n\n    &:focus-visible {\n      border-color: var(--textarea-border-focus);\n      outline: var(--textarea-focus-ring-width) solid var(--textarea-focus-ring);\n      outline-offset: var(--textarea-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:read-only:not(:disabled) {\n      background-color: var(--color-surface-sunken);\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--textarea-border-hover);\n    }\n  }\n\n  .field[data-size=\"sm\"] .textarea { font-size: var(--textarea-font-size-sm); }\n  .field[data-size=\"lg\"] .textarea { font-size: var(--textarea-font-size-lg); }\n  .field[data-resize=\"none\"] .textarea { resize: none; }\n  .field[data-resize=\"both\"] .textarea { resize: both; }\n  .field[data-auto-grow] .textarea { field-sizing: content; }\n  .field[data-invalid] .textarea { border-color: var(--textarea-border-invalid); }\n}\n","import type { ReactNode, Ref, TextareaHTMLAttributes } from 'react';\nimport { Field } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './Textarea.module.css';\n\nexport type TextareaSize = 'sm' | 'md' | 'lg';\nexport type TextareaResize = 'vertical' | 'none' | 'both';\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Visible label. Always rendered. */\n  label: ReactNode;\n  description?: ReactNode;\n  /** Presence marks the control invalid and announces the message. */\n  error?: ReactNode;\n  /** @default 'md' */\n  size?: TextareaSize;\n  /** @default 'vertical' */\n  resize?: TextareaResize;\n  /** Grow with the content (`field-sizing: content`, where supported). @default false */\n  autoGrow?: boolean;\n  /** The `<textarea>` element. */\n  ref?: Ref<HTMLTextAreaElement>;\n  /** Applied to the wrapper, not the textarea. */\n  className?: string;\n}\n\n/**\n * A multi-line text input on top of Field. Same contract as TextField;\n * its own `--textarea-*` tokens so it can diverge. `rows` sets the initial\n * height; `autoGrow` follows the content in browsers that support\n * `field-sizing`, and falls back to `rows` elsewhere.\n *\n * @status stable\n * @category Forms\n * @accessibility A native `textarea` wired through Field; `autoGrow` uses `field-sizing: content` where supported and falls back to `rows`.\n * @do Set `rows` to the typical length of the answer.\n * @dont Disable `resize` without giving the field enough rows.\n */\nexport function Textarea({\n  label,\n  description,\n  error,\n  size = 'md',\n  resize = 'vertical',\n  autoGrow = false,\n  rows = 3,\n  required,\n  disabled,\n  readOnly,\n  id,\n  className,\n  ref,\n  'aria-describedby': describedBy,\n  ...rest\n}: TextareaProps) {\n  const invalid = error !== undefined && error !== null && error !== false && error !== '';\n  return (\n    <Field\n      id={id}\n      invalid={invalid}\n      disabled={Boolean(disabled)}\n      required={Boolean(required)}\n      className={classes(styles.field, className)}\n      data-size={size}\n      data-resize={resize}\n      data-auto-grow={autoGrow ? '' : undefined}\n      data-readonly={readOnly ? '' : undefined}\n    >\n      <Field.Label>{label}</Field.Label>\n      <Field.Control aria-describedby={describedBy}>\n        <textarea {...rest} ref={ref} rows={rows} readOnly={readOnly} className={styles.textarea} />\n      </Field.Control>\n      {description && <Field.Description>{description}</Field.Description>}\n      {invalid && <Field.Error>{error}</Field.Error>}\n    </Field>\n  );\n}\n\nTextarea.displayName = 'Textarea';\n"]}

package/dist/chunk-UX42PQLT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/date-picker/DatePicker.module.css","../src/date-picker/DatePicker.tsx"],"names":["root","control","input","segment","button","popover","dialog","AriaDatePicker","AriaGroup","AriaDateInput","AriaDateSegment","AriaButton","CalendarIcon","AriaPopover","AriaDialog","AriaCalendar"],"mappings":"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","file":"chunk-UX42PQLT.js","sourcesContent":["/*\n * Every value is a token (--date-picker-*); the calendar reads --calendar-*.\n * The control is a group drawn like a text field around the date segments.\n * React Aria writes the state: data-focus-within, data-hovered,\n * data-disabled, data-invalid on the group; data-placeholder, data-focused\n * on each segment.\n */\n\n@layer components {\n  .root {\n    --_height: var(--date-picker-height-md);\n    --_font-size: var(--date-picker-font-size-md);\n    --_border: var(--date-picker-border-default);\n\n    font-family: var(--date-picker-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--date-picker-height-sm);\n      --_font-size: var(--date-picker-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--date-picker-height-lg);\n      --_font-size: var(--date-picker-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--date-picker-border-invalid); }\n  }\n\n  .control {\n    display: flex;\n    align-items: center;\n    min-block-size: var(--_height);\n    padding-inline-start: var(--date-picker-padding-inline);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--date-picker-radius);\n    background-color: var(--date-picker-bg);\n    color: var(--date-picker-fg);\n    font-size: var(--_font-size);\n    transition: border-color var(--date-picker-motion-duration) var(--motion-easing-standard);\n\n    &[data-focus-within] {\n      border-color: var(--date-picker-border-focus);\n      outline: var(--date-picker-focus-ring-width) solid var(--date-picker-focus-ring);\n      outline-offset: var(--date-picker-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-hovered]:not([data-focus-within], [data-disabled]) {\n      border-color: var(--date-picker-border-hover);\n    }\n  }\n\n  .input {\n    display: flex;\n    flex: 1;\n    align-items: center;\n  }\n\n  .segment {\n    padding-inline: var(--date-picker-segment-padding-inline);\n    border-radius: var(--date-picker-segment-radius);\n    font-variant-numeric: tabular-nums;\n    outline: none;\n    caret-color: transparent;\n\n    &[data-type=\"literal\"] {\n      padding-inline: 0;\n    }\n\n    &[data-placeholder] {\n      color: var(--date-picker-segment-fg-placeholder);\n    }\n\n    &[data-focused] {\n      background-color: var(--date-picker-segment-bg-focus);\n      color: var(--date-picker-fg);\n    }\n  }\n\n  .button {\n    display: grid;\n    place-items: center;\n    inline-size: var(--date-picker-icon-size);\n    block-size: calc(var(--_height) - 2 * var(--size-hairline));\n    padding: 0;\n    border: none;\n    border-radius: var(--date-picker-radius);\n    background-color: transparent;\n    color: var(--date-picker-icon);\n    cursor: pointer;\n\n    &[data-focus-visible] {\n      outline: var(--date-picker-focus-ring-width) solid var(--date-picker-focus-ring);\n      outline-offset: calc(-1 * var(--date-picker-focus-ring-width));\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .popover {\n    padding-block-start: var(--date-picker-gap);\n    animation: fade var(--date-picker-popover-duration) var(--motion-easing-standard);\n\n    &[data-placement=\"top\"] {\n      padding-block: 0 var(--date-picker-gap);\n    }\n  }\n\n  .dialog {\n    border: var(--size-hairline) solid var(--date-picker-dialog-border);\n    border-radius: var(--date-picker-dialog-radius);\n    background-color: var(--date-picker-dialog-bg);\n    box-shadow: var(--date-picker-popover-shadow);\n    outline: none;\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popover {\n      animation: none;\n    }\n  }\n}\n","import type { ReactNode, Ref } from 'react';\nimport {\n  Button as AriaButton,\n  Calendar as AriaCalendar,\n  DateInput as AriaDateInput,\n  DatePicker as AriaDatePicker,\n  DateSegment as AriaDateSegment,\n  Dialog as AriaDialog,\n  Group as AriaGroup,\n  I18nProvider,\n  Popover as AriaPopover,\n} from 'react-aria-components';\nimport { Calendar as CalendarIcon } from '@pearpages/pulp-icons';\nimport { CalendarGrid, calendarRootClass } from '../calendar/CalendarGrid';\nimport { Icon } from '../icon';\nimport { AriaFieldDescription, AriaFieldError, AriaFieldLabel, ariaFieldClass, isPresent } from '../internal/AriaField';\nimport { fromDate, toDate } from '../internal/dates';\nimport styles from './DatePicker.module.css';\n\nexport type DatePickerSize = 'sm' | 'md' | 'lg';\n\nexport interface DatePickerProps {\n  /** Visible label. Always rendered. */\n  label: ReactNode;\n  description?: ReactNode;\n  /** Presence marks the control invalid and announces the message. */\n  error?: ReactNode;\n  /** The date as `YYYY-MM-DD` (controlled). `null` is \"none\". */\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n  /** Earliest selectable date, `YYYY-MM-DD`. */\n  min?: string;\n  /** Latest selectable date, `YYYY-MM-DD`. */\n  max?: string;\n  /** Marks single dates as unavailable in the calendar. */\n  isDateUnavailable?: (date: string) => boolean;\n  /** BCP 47 tag. Segment order, month names and the first weekday follow it; defaults to the browser's. */\n  locale?: string;\n  /** @default 'md' */\n  size?: DatePickerSize;\n  /** @default false */\n  required?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  readOnly?: boolean;\n  /** Submitted with a form as `YYYY-MM-DD` through a hidden input. */\n  name?: string;\n  autoFocus?: boolean;\n  /** Applied to the field wrapper. */\n  className?: string;\n  /** The wrapper element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A date field with a calendar popover, on React Aria's date picker\n * (decision record 001): the date is typed segment by segment in the\n * user's locale order (arrows and digits, no free text to parse), and the\n * button opens the same month grid as Calendar. Dates cross the API as\n * ISO strings.\n *\n * @status experimental\n * @category Forms\n * @accessibility A `group` named by the label holding one `spinbutton` per date segment (day, month, year in the locale's order), a button that opens a `dialog` containing the Calendar grid, and a hidden input for forms. Arrows step a segment, digits type it, Escape closes the dialog and returns focus.\n * @do Pass `locale` when the app's language is not the browser's.\n * Use `min`/`max` for ranges the user cannot choose outside of.\n * @dont Parse the value yourself; it is always `YYYY-MM-DD`.\n * Use it for a date of birth decades away; the segments are faster than the calendar.\n */\nexport function DatePicker({\n  label,\n  description,\n  error,\n  value,\n  defaultValue,\n  onChange,\n  min,\n  max,\n  isDateUnavailable,\n  locale,\n  size = 'md',\n  required = false,\n  disabled = false,\n  readOnly = false,\n  name,\n  autoFocus,\n  className,\n  ref,\n}: DatePickerProps) {\n  const invalid = isPresent(error);\n  const picker = (\n    <AriaDatePicker\n      ref={ref}\n      className={ariaFieldClass(styles.root, className)}\n      data-size={size}\n      value={toDate(value)}\n      defaultValue={toDate(defaultValue)}\n      onChange={(date) => onChange?.(fromDate(date))}\n      minValue={toDate(min) ?? undefined}\n      maxValue={toDate(max) ?? undefined}\n      isDateUnavailable={isDateUnavailable && ((date) => isDateUnavailable(fromDate(date) ?? ''))}\n      isRequired={required}\n      isDisabled={disabled}\n      isReadOnly={readOnly}\n      isInvalid={invalid}\n      name={name}\n      autoFocus={autoFocus}\n      granularity=\"day\"\n    >\n      <AriaFieldLabel required={required}>{label}</AriaFieldLabel>\n      <AriaGroup className={styles.control}>\n        <AriaDateInput className={styles.input}>{(segment) => <AriaDateSegment segment={segment} className={styles.segment} />}</AriaDateInput>\n        <AriaButton className={styles.button}>\n          <Icon size=\"inherit\">\n            <CalendarIcon />\n          </Icon>\n        </AriaButton>\n      </AriaGroup>\n      <AriaFieldDescription>{description}</AriaFieldDescription>\n      <AriaFieldError>{error}</AriaFieldError>\n      <AriaPopover className={styles.popover} placement=\"bottom start\">\n        <AriaDialog className={styles.dialog}>\n          <AriaCalendar className={calendarRootClass}>\n            <CalendarGrid />\n          </AriaCalendar>\n        </AriaDialog>\n      </AriaPopover>\n    </AriaDatePicker>\n  );\n  return locale ? <I18nProvider locale={locale}>{picker}</I18nProvider> : picker;\n}\n\nDatePicker.displayName = 'DatePicker';\n"]}

package/dist/chunk-VSDEQHG4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button/Button.module.css","../src/button/Button.tsx"],"names":["button","label"],"mappings":"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","file":"chunk-VSDEQHG4.js","sourcesContent":["/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--button-gap);\n    min-block-size: var(--button-height-md);\n    padding-block: 0;\n    padding-inline: var(--button-padding-inline-md);\n    border: 1px solid transparent;\n    border-radius: var(--button-radius);\n    font-family: var(--button-font-family);\n    font-size: var(--button-font-size-md);\n    font-weight: var(--button-font-weight);\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    -webkit-user-select: none;\n    user-select: none;\n    transition:\n      background-color var(--button-motion-duration) var(--motion-easing-standard),\n      border-color var(--button-motion-duration) var(--motion-easing-standard),\n      color var(--button-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n      outline-offset: var(--button-focus-ring-offset);\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-loading] {\n      cursor: progress;\n    }\n\n    &[data-size=\"sm\"] {\n      min-block-size: var(--button-height-sm);\n      padding-inline: var(--button-padding-inline-sm);\n      font-size: var(--button-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      min-block-size: var(--button-height-lg);\n      padding-inline: var(--button-padding-inline-lg);\n      font-size: var(--button-font-size-lg);\n    }\n\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-primary-bg);\n      color: var(--button-primary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-active);\n      }\n    }\n\n    &[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-bg);\n      border-color: var(--button-secondary-border);\n      color: var(--button-secondary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-secondary-bg-hover);\n      }\n    }\n\n    &[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--button-ghost-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-ghost-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n","import { Children, isValidElement, type ButtonHTMLAttributes, type MouseEvent, type ReactNode, type Ref } from 'react';\nimport { Icon } from '../icon';\nimport { renderAsChild } from '../internal/asChild';\nimport { Spinner } from '../spinner';\nimport { classes } from '../internal/classes';\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps<E extends HTMLElement = HTMLButtonElement> extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Visual emphasis. One `primary` per view; `secondary` for the rest;\n   * `ghost` for actions that sit inside other content.\n   * @default 'primary'\n   */\n  variant?: ButtonVariant;\n  /** @default 'md' */\n  size?: ButtonSize;\n  /**\n   * Shows a spinner, sets `aria-busy` and `aria-disabled`, and blocks\n   * activation. The element stays focusable so focus is not lost mid-action,\n   * and the label stays in place so the button keeps its width.\n   * @default false\n   */\n  loading?: boolean;\n  /** Decorative element before the label. Hidden from assistive technology. */\n  iconStart?: ReactNode;\n  /** Decorative element after the label. Hidden from assistive technology. */\n  iconEnd?: ReactNode;\n  /**\n   * Render the single child element instead of a `<button>`, merging the\n   * button's props into it. Use it to style a router `<Link>` or an `<a>` as a\n   * button. Disabled and loading states then use `aria-disabled`, and the\n   * child's own `onClick` does not run while the control is inert.\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * The rendered element. With `asChild` that is the child's element, so pass\n   * the type parameter: `<Button<HTMLAnchorElement> asChild ref={anchorRef}>`.\n   */\n  ref?: Ref<E>;\n  children: ReactNode;\n}\n\nconst BLOCK = (event: MouseEvent) => event.preventDefault();\n\nconst DEV = typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';\n\n/** True when some text exists anywhere in the children tree. */\nfunction hasText(node: ReactNode): boolean {\n  return Children.toArray(node).some((child) => {\n    if (typeof child === 'string') return child.trim().length > 0;\n    if (typeof child === 'number') return true;\n    if (isValidElement<{ children?: ReactNode }>(child)) return hasText(child.props.children);\n    return false;\n  });\n}\n\n/**\n * The one action component. Variants map to emphasis, not colour: one\n * `primary` per view, `secondary` for the rest, `ghost` inside other content.\n * Every value comes from `--button-*` tokens, so a brand restyles it without\n * touching the component. State is exposed as `data-variant`, `data-size` and\n * `data-loading` for styling, tests and agents alike.\n *\n * @status stable\n * @category Actions\n * @accessibility A native `button` (or the child element with `asChild`). `loading` sets `aria-disabled` and `aria-busy` and keeps focus; only `disabled` removes it from the tab order. Icon-only use warns in development: use IconButton, which requires a name.\n * @do One `primary` per view.\n * Use `asChild` for links that look like buttons, keeping the `a` semantics.\n * @dont Use `loading` on a button that is not the one that started the work.\n * Rely on colour to tell variants apart; the label carries the meaning.\n */\nexport function Button<E extends HTMLElement = HTMLButtonElement>({\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  iconStart,\n  iconEnd,\n  asChild = false,\n  className,\n  disabled = false,\n  type,\n  onClick,\n  ref,\n  children,\n  ...rest\n}: ButtonProps<E>) {\n  // Inert: must not activate. `disabled` on a real <button> also removes it\n  // from the tab order, which is right for \"disabled\" and wrong for \"loading\":\n  // the element the user just pressed must keep focus. So loading (and every\n  // asChild state) uses aria-disabled and blocks activation in the handler.\n  const inert = disabled || loading;\n  const nativeDisabled = !asChild && disabled;\n\n  if (DEV && !hasText(asChild ? (children as { props?: { children?: ReactNode } }).props?.children : children)) {\n    if (!rest['aria-label'] && !rest['aria-labelledby']) {\n      console.warn('Button: no text content and no aria-label. Icon-only buttons need an accessible name.');\n    }\n  }\n\n  const props = {\n    ...rest,\n    ref,\n    className: classes(styles.button, className),\n    'data-variant': variant,\n    'data-size': size,\n    'data-loading': loading ? '' : undefined,\n    'aria-busy': loading || undefined,\n    disabled: nativeDisabled || undefined,\n    'aria-disabled': inert && !nativeDisabled ? true : undefined,\n    type: asChild ? undefined : (type ?? 'button'),\n    onClick: inert ? BLOCK : onClick,\n  };\n\n  const decorate = (label: ReactNode) => (\n    <>\n      {loading && <Spinner decorative size=\"inherit\" tone=\"inherit\" />}\n      {iconStart && <Icon size=\"inherit\">{iconStart}</Icon>}\n      <span className={styles.label}>{label}</span>\n      {iconEnd && <Icon size=\"inherit\">{iconEnd}</Icon>}\n    </>\n  );\n\n  if (asChild) {\n    const child = children as { props?: { children?: ReactNode } };\n    // The helper merges the forwarded ref with the child's; nothing reads it.\n    // eslint-disable-next-line react-hooks/refs -- forwarded, not read\n    return renderAsChild('Button', children, { ...props, children: decorate(child.props?.children) }, {\n      // An inert control must not run the child's handler either.\n      replace: inert ? ['onClick'] : [],\n    });\n  }\n\n  return <button {...(props as ButtonHTMLAttributes<HTMLButtonElement>)}>{decorate(children)}</button>;\n}\n\nButton.displayName = 'Button';\n"]}

package/dist/chunk-WDWTQKIJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/picker/Picker.module.css","../src/picker/Picker.tsx"],"names":["root","trigger","value","chevron","popover","list","AriaSelect","AriaButton","AriaSelectValue","AriaPopover","AriaListBox"],"mappings":";;;;;;;;AAAA,IAAA,cAAA,GAAA;AAAA,EAOG,IAAA,EAAAA,aAAAA;AAAA,EAoBA,OAAA,EAAAC,gBAAAA;AAAA,EAkCA,KAAA,EAAAC,cAAAA;AAAA,EAWA,OAAA,EAAAC,gBAAAA;AAAA,EAKA,OAAA,EAAAC,gBAAAA;AAAA,EAUA,IAAA,EAAAC;AAAA,CAAA;AC9BI,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,cAAA;AAAA,EACd,YAAA,GAAe,YAAA;AAAA,EACf,IAAA,GAAO,IAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,OAAA,GAAU,UAAU,KAAK,CAAA;AAC/B,EAAA,uBACE,IAAA;AAAA,IAACC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,cAAA,CAAe,cAAA,CAAO,IAAA,EAAM,SAAS,CAAA;AAAA,MAChD,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAa,KAAA;AAAA,MACb,kBAAA,EAAoB,YAAA;AAAA,MACpB,iBAAA,EAAmB,CAAC,GAAA,KAAQ,QAAA,GAAW,QAAQ,IAAA,GAAO,IAAA,GAAO,MAAA,CAAO,GAAG,CAAC,CAAA;AAAA,MACxE,WAAA;AAAA,MACA,UAAA,EAAY,QAAA;AAAA,MACZ,UAAA,EAAY,QAAA;AAAA,MACZ,SAAA,EAAW,OAAA;AAAA,MACX,IAAA;AAAA,MACA,SAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,UAAqB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBAC3C,IAAA,CAACC,MAAA,EAAA,EAAW,GAAA,EAAU,SAAA,EAAW,eAAO,OAAA,EACtC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAACC,WAAA,EAAA,EAAgB,SAAA,EAAW,cAAA,CAAO,KAAA,EAAO,CAAA;AAAA,0BAC1C,GAAA,CAAC,QAAK,IAAA,EAAK,SAAA,EAAU,WAAW,cAAA,CAAO,OAAA,EACrC,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,CAAA,EACf;AAAA,SAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,wBAAsB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,wBACnC,GAAA,CAAC,kBAAgB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACvB,GAAA,CAACC,WAAY,SAAA,EAAW,cAAA,CAAO,SAAS,SAAA,EAAU,cAAA,EAChD,8BAACC,OAAA,EAAA,EAAY,SAAA,EAAW,UAAU,cAAA,CAAO,IAAI,GAAG,KAAA,EAAc,gBAAA,EAAkB,MAAM,WAAA,CAAY,YAAY,CAAA,EAC3G,QAAA,EAAA,YAAA,EACH,CAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-WDWTQKIJ.js","sourcesContent":["/*\n * Every value is a token (--picker-*); the options read --listbox-*. The\n * trigger is a button drawn like a text field. The popover is positioned by\n * React Aria; the gap is its own padding and --trigger-width (vendor) sizes it.\n */\n\n@layer components {\n  .root {\n    --_height: var(--picker-height-md);\n    --_font-size: var(--picker-font-size-md);\n    --_border: var(--picker-border-default);\n\n    font-family: var(--picker-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--picker-height-sm);\n      --_font-size: var(--picker-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--picker-height-lg);\n      --_font-size: var(--picker-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--picker-border-invalid); }\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    gap: var(--picker-gap);\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--picker-padding-inline);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--picker-radius);\n    background-color: var(--picker-bg);\n    color: var(--picker-fg);\n    font-family: inherit;\n    font-size: var(--_font-size);\n    text-align: start;\n    cursor: pointer;\n    transition: border-color var(--picker-motion-duration) var(--motion-easing-standard);\n\n    &[data-focus-visible] {\n      border-color: var(--picker-border-focus);\n      outline: var(--picker-focus-ring-width) solid var(--picker-focus-ring);\n      outline-offset: var(--picker-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-hovered]:not([data-focus-visible], [data-disabled]) {\n      border-color: var(--picker-border-hover);\n    }\n  }\n\n  .value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    &[data-placeholder] {\n      color: var(--picker-placeholder);\n    }\n  }\n\n  .chevron {\n    flex: none;\n    color: var(--picker-icon);\n  }\n\n  .popover {\n    inline-size: var(--trigger-width);\n    padding-block-start: var(--picker-gap);\n    animation: fade var(--picker-popover-duration) var(--motion-easing-standard);\n\n    &[data-placement=\"top\"] {\n      padding-block: 0 var(--picker-gap);\n    }\n  }\n\n  .list {\n    box-shadow: var(--picker-popover-shadow);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popover {\n      animation: none;\n    }\n  }\n}\n","import type { ReactNode, Ref } from 'react';\nimport { Button as AriaButton, ListBox as AriaListBox, Popover as AriaPopover, Select as AriaSelect, SelectValue as AriaSelectValue } from 'react-aria-components';\nimport { ChevronDown } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport { AriaFieldDescription, AriaFieldError, AriaFieldLabel, ariaFieldClass, isPresent } from '../internal/AriaField';\nimport { listClass, renderEmpty, renderOption, type ListboxItem } from '../listbox/ListboxOptions';\nimport styles from './Picker.module.css';\n\nexport type PickerItem = ListboxItem;\nexport type PickerSize = 'sm' | 'md' | 'lg';\n\nexport interface PickerProps {\n  /** Visible label. Always rendered. */\n  label: ReactNode;\n  description?: ReactNode;\n  /** Presence marks the control invalid and announces the message. */\n  error?: ReactNode;\n  /** The options. Ids are the values. */\n  items: readonly PickerItem[];\n  /** Selected id (controlled). `null` is \"nothing selected\". */\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n  /** Shown in the control until a value is chosen. @default 'Select…' */\n  placeholder?: string;\n  /** Shown when `items` is empty. @default 'No options' */\n  emptyMessage?: ReactNode;\n  /** @default 'md' */\n  size?: PickerSize;\n  /** @default false */\n  required?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** Submitted with a form through a hidden native select. */\n  name?: string;\n  autoFocus?: boolean;\n  /** Applied to the field wrapper, not the button. */\n  className?: string;\n  /** The trigger `<button>`. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * A single-choice select with rich options (a description line, consistent\n * styling in every browser), on React Aria's select (decision record 001):\n * a button opens a listbox, arrows and typing move, Enter chooses, Escape\n * closes, and a hidden native select carries the value in forms. For a\n * plain list of words, the native `Select` is the default; for several\n * choices at once, use Listbox.\n *\n * @status experimental\n * @category Forms\n * @accessibility A `button` named by the label with `aria-haspopup=\"listbox\"` and `aria-expanded`; the popup is a `listbox` with selected and disabled options; a hidden native select carries `name` and value for forms. Arrows open and move, typing jumps, Enter chooses, Escape closes and returns focus.\n * @do Use a `description` line on options when the label alone is ambiguous.\n * Prefer the native Select for a plain list of words.\n * @dont Use `placeholder` as the only label.\n */\nexport function Picker({\n  label,\n  description,\n  error,\n  items,\n  value,\n  defaultValue,\n  onChange,\n  placeholder = 'Select…',\n  emptyMessage = 'No options',\n  size = 'md',\n  required = false,\n  disabled = false,\n  name,\n  autoFocus,\n  className,\n  ref,\n}: PickerProps) {\n  const invalid = isPresent(error);\n  return (\n    <AriaSelect\n      className={ariaFieldClass(styles.root, className)}\n      data-size={size}\n      selectedKey={value}\n      defaultSelectedKey={defaultValue}\n      onSelectionChange={(key) => onChange?.(key === null ? null : String(key))}\n      placeholder={placeholder}\n      isRequired={required}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      name={name}\n      autoFocus={autoFocus}\n    >\n      <AriaFieldLabel required={required}>{label}</AriaFieldLabel>\n      <AriaButton ref={ref} className={styles.trigger}>\n        <AriaSelectValue className={styles.value} />\n        <Icon size=\"inherit\" className={styles.chevron}>\n          <ChevronDown />\n        </Icon>\n      </AriaButton>\n      <AriaFieldDescription>{description}</AriaFieldDescription>\n      <AriaFieldError>{error}</AriaFieldError>\n      <AriaPopover className={styles.popover} placement=\"bottom start\">\n        <AriaListBox className={listClass(styles.list)} items={items} renderEmptyState={() => renderEmpty(emptyMessage)}>\n          {renderOption}\n        </AriaListBox>\n      </AriaPopover>\n    </AriaSelect>\n  );\n}\n\nPicker.displayName = 'Picker';\n"]}

package/dist/chunk-XDVS7HX7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/radio/Radio.module.css","../src/radio/Radio.tsx"],"names":["group","items","radio","label","input"],"mappings":"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","file":"chunk-XDVS7HX7.js","sourcesContent":["/* Every value is a token (--radio-*). The input draws itself; the dot is its ::after. */\n\n@layer components {\n  .group {\n    --_size: var(--radio-size-md);\n    --_border: var(--radio-border);\n\n    font-family: var(--font-family-body);\n\n    &[data-size=\"sm\"] { --_size: var(--radio-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--radio-size-lg); }\n    &[data-invalid] { --_border: var(--radio-border-invalid); }\n  }\n\n  .items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--radio-group-gap);\n\n    &[data-orientation=\"horizontal\"] {\n      flex-flow: row wrap;\n      gap: var(--radio-group-gap) var(--space-4);\n    }\n  }\n\n  .radio {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--radio-gap);\n    cursor: pointer;\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    color: var(--field-label-fg);\n  }\n\n  .input {\n    display: grid;\n    flex: none;\n    place-content: center;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    margin: 0;\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--radio-radius);\n    background-color: var(--radio-bg);\n    appearance: none;\n    cursor: inherit;\n    transition: border-color var(--radio-motion-duration) var(--motion-easing-standard);\n\n    /* Sized from the box, not in percent: a grid item's percentage resolves against an auto area and collapses. */\n    &::after {\n      content: \"\";\n      inline-size: calc(var(--_size) / 2);\n      block-size: calc(var(--_size) / 2);\n      border-radius: var(--radio-radius);\n      background-color: var(--radio-dot);\n      scale: 0;\n      transition: scale var(--radio-motion-duration) var(--motion-easing-standard);\n    }\n\n    &:checked {\n      border-color: var(--radio-border-checked);\n\n      &::after {\n        scale: 1;\n      }\n    }\n\n    &:focus-visible {\n      outline: var(--radio-focus-ring-width) solid var(--radio-focus-ring);\n      outline-offset: var(--radio-focus-ring-offset);\n    }\n\n    &:disabled {\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :checked) {\n      border-color: var(--radio-border-hover);\n    }\n  }\n}\n","import {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { Field, useField } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './Radio.module.css';\n\nexport type RadioSize = 'sm' | 'md' | 'lg';\nexport type RadioGroupOrientation = 'vertical' | 'horizontal';\n\ninterface RadioGroupContextValue {\n  name: string;\n  value: string | undefined;\n  setValue: (value: string) => void;\n  size: RadioSize;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {\n  /** Visible group label. */\n  label: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  /** Form field name shared by the radios. Generated when omitted. */\n  name?: string;\n  /** Controlled selected value. */\n  value?: string;\n  /** Initially selected value when uncontrolled. */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** @default 'vertical' */\n  orientation?: RadioGroupOrientation;\n  /** @default 'md' */\n  size?: RadioSize;\n  disabled?: boolean;\n  required?: boolean;\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\n/**\n * A set of native radios under one label. The group is labelled by\n * reference (`aria-labelledby`) and described through Field, so description\n * and error apply to the whole set. Keyboard is the browser's own: arrows\n * move and select within the group. Controlled or uncontrolled by `value`.\n *\n * @status stable\n * @category Forms\n * @accessibility A `radiogroup` labelled by reference through Field and described by its description and error. Native radios: arrows move and select within the group, Tab leaves it.\n * @do Use it for two to five exclusive options that should all be visible.\n * @dont Preselect a consequential choice; leave the group empty and mark it required.\n */\nexport function RadioGroup({\n  label,\n  description,\n  error,\n  name,\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = 'vertical',\n  size = 'md',\n  disabled = false,\n  required = false,\n  id,\n  className,\n  ref,\n  children,\n  ...rest\n}: RadioGroupProps) {\n  const autoName = useId();\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const controlled = value !== undefined;\n  const current = controlled ? value : uncontrolled;\n  const setValue = useCallback(\n    (next: string) => {\n      if (!controlled) setUncontrolled(next);\n      onValueChange?.(next);\n    },\n    [controlled, onValueChange],\n  );\n  const invalid = error !== undefined && error !== null && error !== false && error !== '';\n\n  return (\n    <RadioGroupContext.Provider value={{ name: name ?? autoName, value: current, setValue, size }}>\n      <Field id={id} invalid={invalid} disabled={disabled} required={required} className={classes(styles.group, className)} data-size={size}>\n        <Field.Label as=\"span\">{label}</Field.Label>\n        <RadioGroupItems {...rest} ref={ref} orientation={orientation}>\n          {children}\n        </RadioGroupItems>\n        {description && <Field.Description>{description}</Field.Description>}\n        {invalid && <Field.Error>{error}</Field.Error>}\n      </Field>\n    </RadioGroupContext.Provider>\n  );\n}\n\ninterface RadioGroupItemsProps extends HTMLAttributes<HTMLDivElement> {\n  orientation: RadioGroupOrientation;\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\nfunction RadioGroupItems({ orientation, className, ref, children, ...rest }: RadioGroupItemsProps) {\n  const field = useField();\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      id={field.id}\n      role=\"radiogroup\"\n      aria-labelledby={field.labelId}\n      aria-describedby={field.describedBy}\n      aria-invalid={field.invalid || undefined}\n      aria-required={field.required || undefined}\n      className={classes(styles.items, className)}\n      data-orientation={orientation}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface RadioProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'name' | 'checked' | 'defaultChecked' | 'onChange'> {\n  /** The value this radio contributes to the group. */\n  value: string;\n  /** Visible label beside the radio. */\n  label: ReactNode;\n  /** The `<input>` element. */\n  ref?: Ref<HTMLInputElement>;\n  /** Applied to the wrapping label, not the input. */\n  className?: string;\n}\n\n/** One option of a RadioGroup. Must be rendered inside `RadioGroup`. */\n/**\n * One option of a RadioGroup: a native radio with its own visible label.\n *\n * @status stable\n * @category Forms\n * @accessibility A native `input type=\"radio\"` labelled by its visible text; the group semantics, description and error come from RadioGroup.\n * @do Render it only inside RadioGroup.\n * @dont Disable a single radio without saying why in its label or the group description.\n */\nexport function Radio({ value, label, disabled, className, ref, ...rest }: RadioProps) {\n  const group = useContext(RadioGroupContext);\n  const field = useField();\n  if (!group) throw new Error('Radio must be rendered inside <RadioGroup>');\n  const checked = group.value === value;\n  return (\n    <label className={classes(styles.radio, className)} data-checked={checked ? '' : undefined} data-disabled={disabled || field.disabled ? '' : undefined}>\n      <input\n        {...rest}\n        ref={ref}\n        type=\"radio\"\n        className={styles.input}\n        name={group.name}\n        value={value}\n        checked={checked}\n        onChange={() => group.setValue(value)}\n        disabled={disabled || field.disabled}\n        required={field.required}\n      />\n      <span className={styles.label}>{label}</span>\n    </label>\n  );\n}\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"]}

package/dist/chunk-XUROYTJ7.js

@@ -1,28 +0,0 @@
-import { Dialog } from './chunk-IDNGNQNV.js';
-import { classes } from './chunk-MI4QUKQS.js';
-import { jsx } from 'react/jsx-runtime';
-
-// src/sheet/Sheet.module.css
-var Sheet_default = {
-  content: "Sheet_content"
-};
-function Sheet(props) {
-  return /* @__PURE__ */ jsx(Dialog, { ...props });
-}
-function SheetContent({ placement = "end", className, ...rest }) {
-  return /* @__PURE__ */ jsx(Dialog.Content, { ...rest, placement, className: classes(Sheet_default.content, className) });
-}
-Sheet.displayName = "Sheet";
-SheetContent.displayName = "Sheet.Content";
-Sheet.Trigger = Dialog.Trigger;
-Sheet.Content = SheetContent;
-Sheet.Header = Dialog.Header;
-Sheet.Title = Dialog.Title;
-Sheet.Description = Dialog.Description;
-Sheet.Close = Dialog.Close;
-Sheet.Body = Dialog.Body;
-Sheet.Footer = Dialog.Footer;
-
-export { Sheet };
-//# sourceMappingURL=chunk-XUROYTJ7.js.map
-//# sourceMappingURL=chunk-XUROYTJ7.js.map

package/dist/chunk-XUROYTJ7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/sheet/Sheet.module.css","../src/sheet/Sheet.tsx"],"names":["content"],"mappings":";;;;;AAAA,IAAA,aAAA,GAAA;AAAA,EASG,OAAA,EAAAA;AAAA,CAAA;AC8BI,SAAS,MAAM,KAAA,EAAmB;AACvC,EAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAQ,GAAG,KAAA,EAAO,CAAA;AAC5B;AAMA,SAAS,aAAa,EAAE,SAAA,GAAY,OAAO,SAAA,EAAW,GAAG,MAAK,EAAsB;AAClF,EAAA,uBAAO,GAAA,CAAC,MAAA,CAAO,OAAA,EAAP,EAAgB,GAAG,IAAA,EAAM,SAAA,EAAsB,SAAA,EAAW,OAAA,CAAQ,aAAA,CAAO,OAAA,EAAS,SAAS,CAAA,EAAG,CAAA;AACxG;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA;AACpB,YAAA,CAAa,WAAA,GAAc,eAAA;AAC3B,KAAA,CAAM,UAAU,MAAA,CAAO,OAAA;AACvB,KAAA,CAAM,OAAA,GAAU,YAAA;AAChB,KAAA,CAAM,SAAS,MAAA,CAAO,MAAA;AACtB,KAAA,CAAM,QAAQ,MAAA,CAAO,KAAA;AACrB,KAAA,CAAM,cAAc,MAAA,CAAO,WAAA;AAC3B,KAAA,CAAM,QAAQ,MAAA,CAAO,KAAA;AACrB,KAAA,CAAM,OAAO,MAAA,CAAO,IAAA;AACpB,KAAA,CAAM,SAAS,MAAA,CAAO,MAAA","file":"chunk-XUROYTJ7.js","sourcesContent":["/*\n * The vendor (@pearpages/modals) docks the dialog and sizes it from three variables it declares on\n * :root. This class sits on the dialog element itself, so its own declarations beat the inherited\n * :root defaults whatever the cascade layer or import order: no specificity fight with the\n * vendor's unlayered rules, which only *read* these. Colour, type and motion timing come from\n * Dialog's mapping on the portal root.\n */\n\n@layer components {\n  .content {\n    --modal-width-sheet: var(--sheet-width);\n    --modal-height-sheet: var(--sheet-height);\n    --modal-animation-translate-sheet: var(--sheet-motion-translate);\n  }\n}\n","import type { ComponentProps } from 'react';\nimport { Dialog, type DialogProps } from '../dialog';\nimport { classes } from '../internal/classes';\nimport styles from './Sheet.module.css';\n\nexport type SheetProps = DialogProps;\n\n/** The edge a sheet docks to. `start` and `end` follow the writing direction. */\nexport type SheetPlacement = 'start' | 'end' | 'top' | 'bottom';\n\nexport interface SheetContentProps extends Omit<ComponentProps<typeof Dialog.Content>, 'placement'> {\n  /**\n   * The edge the sheet docks to. `start` and `end` take `--sheet-width` and the full height;\n   * `top` and `bottom` take the full width and `--sheet-height`. There is no `center`: a centred\n   * sheet is a Dialog.\n   * @default 'end'\n   */\n  placement?: SheetPlacement;\n}\n\n/**\n * A dialog docked to an edge of the viewport: a side panel for detail or settings that keeps the\n * page in view, or a bottom sheet on a phone. It is Dialog with a `placement`: the same parts\n * (`Sheet.Trigger`, `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Description`,\n * `Sheet.Close`, `Sheet.Body`, `Sheet.Footer`), the same focus trap, stacking and dismissal, and\n * the same colours and type, from Dialog's tokens. Only the size is Sheet's: `--sheet-width`,\n * `--sheet-height` and `--sheet-motion-translate`, the distance it slides in from its edge.\n *\n * It needs what Dialog needs: `DialogSystem` mounted once near the app root, and\n * `@pearpages/modals/styles.css` imported into the `vendor` layer.\n *\n * @status experimental\n * @category Overlays\n * @accessibility Dialog's: `role=\"dialog\"` with `aria-modal`, named by `Sheet.Title` and described by `Sheet.Description`; focus moves in on open, is trapped, and returns to the trigger on close; Escape and the backdrop dismiss it; the page behind is inert. Docking changes the layout only, never the semantics.\n * @do Always render a `Sheet.Title`.\n * @do Dock to `end` for detail and settings beside the page, and to `bottom` for choices on a narrow screen.\n * @dont Use it for a short confirmation; a centred Dialog reads as more urgent and takes less room.\n * @dont Put the page's primary content in a sheet: it is modal, so everything behind it is out of reach.\n */\nexport function Sheet(props: SheetProps) {\n  return <Dialog {...props} />;\n}\n\n/**\n * The docked dialog element. Dialog's `Content`, with `placement` and the class that maps pulp's\n * `--sheet-*` tokens onto the vendor's sheet variables.\n */\nfunction SheetContent({ placement = 'end', className, ...rest }: SheetContentProps) {\n  return <Dialog.Content {...rest} placement={placement} className={classes(styles.content, className)} />;\n}\n\nSheet.displayName = 'Sheet';\nSheetContent.displayName = 'Sheet.Content';\nSheet.Trigger = Dialog.Trigger;\nSheet.Content = SheetContent;\nSheet.Header = Dialog.Header;\nSheet.Title = Dialog.Title;\nSheet.Description = Dialog.Description;\nSheet.Close = Dialog.Close;\nSheet.Body = Dialog.Body;\nSheet.Footer = Dialog.Footer;\n"]}

package/dist/chunk-XXC34COT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/alert/Alert.module.css","../src/alert/Alert.tsx"],"names":["alert","icon","body","title","content","action","dismiss"],"mappings":";;;;;;;AAAA,IAAA,aAAA,GAAA;AAAA,EAGG,KAAA,EAAAA,aAAAA;AAAA,EAyCA,IAAA,EAAAC,YAAAA;AAAA,EAKA,IAAA,EAAAC,YAAAA;AAAA,EAQA,KAAA,EAAAC,aAAAA;AAAA,EAMA,OAAA,EAAAC,eAAAA;AAAA,EAIA,MAAA,EAAAC,cAAAA;AAAA,EAOA,OAAA,EAAAC;AAAA,CAAA;ACzCH,IAAM,YAAA,GAA6C;AAAA,EACjD,IAAA,sBAAO,IAAA,EAAA,EAAK,CAAA;AAAA,EACZ,OAAA,sBAAU,KAAA,EAAA,EAAM,CAAA;AAAA,EAChB,OAAA,sBAAU,OAAA,EAAA,EAAQ,CAAA;AAAA,EAClB,KAAA,sBAAQ,OAAA,EAAA,EAAQ;AAClB,CAAA;AAeO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAA,GAAO,MAAA;AAAA,EACP,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,IAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAe;AACb,EAAA,MAAM,IAAA,GAAO,IAAA,KAAS,IAAA,KAAS,OAAA,GAAU,WAAA,GAAc,QAAA,CAAA;AACvD,EAAA,MAAM,OAAO,IAAA,KAAS,KAAA,GAAQ,MAAA,GAAY,IAAA,KAAS,cAAc,OAAA,GAAU,QAAA;AAC3E,EAAA,MAAM,KAAA,GAAQ,IAAA,KAAS,MAAA,GAAY,YAAA,CAAa,IAAI,CAAA,GAAI,IAAA;AAExD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,GAAA,EAAU,IAAA,EAAY,SAAA,EAAW,OAAA,CAAQ,aAAA,CAAO,KAAA,EAAO,SAAS,CAAA,EAAG,aAAW,IAAA,EAC1F,QAAA,EAAA;AAAA,IAAA,KAAA,wBACE,IAAA,EAAA,EAAK,IAAA,EAAK,MAAK,SAAA,EAAW,aAAA,CAAO,MAC/B,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,oBAEF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,CAAO,IAAA,EACpB,QAAA,EAAA;AAAA,MAAA,KAAA,oBAAS,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAW,aAAA,CAAO,OAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC5C,4BAAY,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,CAAO,SAAU,QAAA,EAAS,CAAA;AAAA,MACtD,0BAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,CAAO,QAAS,QAAA,EAAA,MAAA,EAAO;AAAA,KAAA,EACpD,CAAA;AAAA,IACC,6BACC,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,MAAK,IAAA,EAAK,KAAA,EAAO,YAAA,EAAc,IAAA,sBAAO,KAAA,EAAA,EAAM,CAAA,EAAI,SAAS,SAAA,EAAW,SAAA,EAAW,cAAO,OAAA,EAAS;AAAA,GAAA,EAE/H,CAAA;AAEJ;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-XXC34COT.js","sourcesContent":["/* Every value is a token (--alert-*). Tone resolves into private custom properties. */\n\n@layer components {\n  .alert {\n    --_bg: var(--alert-info-bg);\n    --_accent: var(--alert-info-accent);\n    --_title: var(--alert-info-title);\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--alert-gap);\n    padding: var(--alert-padding);\n    border: var(--alert-border-width) solid var(--_accent);\n    border-inline-start-width: var(--alert-accent-width);\n    border-radius: var(--alert-radius);\n    background-color: var(--_bg);\n    color: var(--alert-fg);\n    font-size: var(--alert-font-size);\n\n    &[data-tone=\"info\"] {\n      --_bg: var(--alert-info-bg);\n      --_accent: var(--alert-info-accent);\n      --_title: var(--alert-info-title);\n    }\n\n    &[data-tone=\"success\"] {\n      --_bg: var(--alert-success-bg);\n      --_accent: var(--alert-success-accent);\n      --_title: var(--alert-success-title);\n    }\n\n    &[data-tone=\"warning\"] {\n      --_bg: var(--alert-warning-bg);\n      --_accent: var(--alert-warning-accent);\n      --_title: var(--alert-warning-title);\n    }\n\n    &[data-tone=\"error\"] {\n      --_bg: var(--alert-error-bg);\n      --_accent: var(--alert-error-accent);\n      --_title: var(--alert-error-title);\n    }\n  }\n\n  .icon {\n    flex: none;\n    color: var(--_accent);\n  }\n\n  .body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--space-1);\n    min-inline-size: 0;\n  }\n\n  .title {\n    margin: 0;\n    color: var(--_title);\n    font-weight: var(--alert-title-font-weight);\n  }\n\n  .content {\n    overflow-wrap: anywhere;\n  }\n\n  .action {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-2);\n    margin-block-start: var(--space-1);\n  }\n\n  .dismiss {\n    flex: none;\n    margin-block: calc(-1 * var(--space-1));\n    margin-inline-end: calc(-1 * var(--space-2));\n  }\n}\n","import type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport { Check, Close, Info, Warning } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\nimport { classes } from '../internal/classes';\nimport styles from './Alert.module.css';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'error';\nexport type AlertLive = 'polite' | 'assertive' | 'off';\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** @default 'info' */\n  tone?: AlertTone;\n  title?: ReactNode;\n  /** Replaces the tone's default glyph; `null` shows none. */\n  icon?: ReactNode | null;\n  /** Buttons or links placed under the body. */\n  action?: ReactNode;\n  /** Renders a dismiss button that calls this. */\n  onDismiss?: () => void;\n  /** @default 'Dismiss' */\n  dismissLabel?: string;\n  /**\n   * How assistive technology announces it: `assertive` (`role=\"alert\"`),\n   * `polite` (`role=\"status\"`) or `off` (no live role, for content present at\n   * page load or inside another live region). Defaults to assertive for\n   * `error`, polite otherwise.\n   */\n  live?: AlertLive;\n  ref?: Ref<HTMLDivElement>;\n  children?: ReactNode;\n}\n\nconst DEFAULT_ICON: Record<AlertTone, ReactNode> = {\n  info: <Info />,\n  success: <Check />,\n  warning: <Warning />,\n  error: <Warning />,\n};\n\n/**\n * An inline message with a tone. Tint, accent and title colour come from\n * the status tokens; the body keeps the default text colour so long\n * messages stay readable. Toast renders one Alert per notification.\n *\n * @status stable\n * @category Feedback\n * @accessibility `role=\"alert\"` for `tone=\"error\"` (assertive), `role=\"status\"` otherwise (polite); `live=\"off\"` opts out. The glyph is decorative; the tone is carried by the title and text, never by colour alone.\n * @do Give it a `title` when the body is more than one sentence.\n * Use `onDismiss` for messages the user can act on and clear.\n * @dont Announce errors through both an Alert and a Toast.\n * Use it as a page-level banner for marketing copy.\n */\nexport function Alert({\n  tone = 'info',\n  title,\n  icon,\n  action,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  live,\n  className,\n  ref,\n  children,\n  ...rest\n}: AlertProps) {\n  const mode = live ?? (tone === 'error' ? 'assertive' : 'polite');\n  const role = mode === 'off' ? undefined : mode === 'assertive' ? 'alert' : 'status';\n  const glyph = icon === undefined ? DEFAULT_ICON[tone] : icon;\n\n  return (\n    <div {...rest} ref={ref} role={role} className={classes(styles.alert, className)} data-tone={tone}>\n      {glyph && (\n        <Icon size=\"md\" className={styles.icon}>\n          {glyph}\n        </Icon>\n      )}\n      <div className={styles.body}>\n        {title && <p className={styles.title}>{title}</p>}\n        {children && <div className={styles.content}>{children}</div>}\n        {action && <div className={styles.action}>{action}</div>}\n      </div>\n      {onDismiss && (\n        <IconButton variant=\"ghost\" size=\"sm\" label={dismissLabel} icon={<Close />} onClick={onDismiss} className={styles.dismiss} />\n      )}\n    </div>\n  );\n}\n\nAlert.displayName = 'Alert';\n"]}