@pearpages/pulp-react 0.2.1 → 0.2.2

package/dist/chunk-55QUKGK2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dialog/Dialog.module.css","../src/dialog/Dialog.tsx"],"names":["root","VendorSystem","VendorModal"],"mappings":";;;;;;;AAAA,IAAA,cAAA,GAAA;AAAA,EASG,IAAA,EAAAA;AAAA,CAAA;AC2BI,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-55QUKGK2.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 reset, tokens, vendor, base, components, utilities;\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-TGMDOQCL.js → chunk-5PYLJQJX.js}

@@ -1,4 +1,4 @@
-import { Field } from './chunk-2PXTVZ7H.js';
+import { Field } from './chunk-M5VL22MY.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -49,5 +49,5 @@ function Textarea({
 Textarea.displayName = "Textarea";
 
 export { Textarea };
-//# sourceMappingURL=chunk-TGMDOQCL.js.map
-//# sourceMappingURL=chunk-TGMDOQCL.js.map
+//# sourceMappingURL=chunk-5PYLJQJX.js.map
+//# sourceMappingURL=chunk-5PYLJQJX.js.map

package/dist/chunk-5PYLJQJX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/textarea/Textarea.module.css","../src/textarea/Textarea.tsx"],"names":["field","textarea"],"mappings":";;;;;AAAA,IAAA,gBAAA,GAAA;AAAA,EAKG,KAAA,EAAAA,gBAAAA;AAAA,EAIA,QAAA,EAAAC;AAAA,CAAA;AC6BI,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-5PYLJQJX.js","sourcesContent":["/* Every value is a token (--textarea-*). Label, description and error come from Field. */\n\n@layer reset, tokens, vendor, base, components, utilities;\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-VSDEQHG4.js → chunk-5TTYVQ6Q.js}

@@ -1,6 +1,6 @@
-import { Spinner } from './chunk-I4KC4V6A.js';
+import { Spinner } from './chunk-ZL5MMRLG.js';
 import { renderAsChild } from './chunk-ZVDN3GRI.js';
-import { Icon } from './chunk-ASNTNTJW.js';
+import { Icon } from './chunk-O5LII5XP.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { Children, isValidElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -73,5 +73,5 @@ function Button({
 Button.displayName = "Button";
 
 export { Button };
-//# sourceMappingURL=chunk-VSDEQHG4.js.map
-//# sourceMappingURL=chunk-VSDEQHG4.js.map
+//# sourceMappingURL=chunk-5TTYVQ6Q.js.map
+//# sourceMappingURL=chunk-5TTYVQ6Q.js.map

package/dist/chunk-5TTYVQ6Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button/Button.module.css","../src/button/Button.tsx"],"names":["button","label"],"mappings":"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","file":"chunk-5TTYVQ6Q.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 reset, tokens, vendor, base, components, utilities;\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-BBV4L5WO.js → chunk-6BIEW4WJ.js}

@@ -1,4 +1,4 @@
-import { Field } from './chunk-2PXTVZ7H.js';
+import { Field } from './chunk-M5VL22MY.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -39,5 +39,5 @@ function ToggleField({
 }
 
 export { ToggleField };
-//# sourceMappingURL=chunk-BBV4L5WO.js.map
-//# sourceMappingURL=chunk-BBV4L5WO.js.map
+//# sourceMappingURL=chunk-6BIEW4WJ.js.map
+//# sourceMappingURL=chunk-6BIEW4WJ.js.map

package/dist/{chunk-BBV4L5WO.js.map → chunk-6BIEW4WJ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/internal/ToggleField.tsx"],"names":[],"mappings":";;;;AA0BO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,kBAAA,EAAoB;AACtB,CAAA,EAAqB;AACnB,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,aAAA,EAAe,SAAS,CAAA;AAAA,MAC3C,WAAA,EAAW,IAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,EACd,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,CAAM,OAAA,EAAN,EAAc,kBAAA,EAAkB,aAAc,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,0BACvD,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EACtB,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","file":"chunk-BBV4L5WO.js","sourcesContent":["import type { ReactNode } from 'react';\nimport { Field } from '../field';\nimport { classes } from './classes';\n\nexport type ToggleSize = 'sm' | 'md' | 'lg';\n\nexport interface ToggleFieldProps {\n  /** Visible inline label. */\n  label: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  size: ToggleSize;\n  disabled?: boolean;\n  required?: boolean;\n  id?: string;\n  className?: string;\n  /** The Field root class of the concrete control (checkbox, switch). */\n  rootClassName: string | undefined;\n  /** The class of the row holding the control and its label. */\n  rowClassName: string | undefined;\n  /** The single `<input>` element; Field.Control wires it. */\n  control: ReactNode;\n  'aria-describedby'?: string;\n}\n\n/** Field wiring for a control whose label sits beside it: Checkbox, Switch. */\nexport function ToggleField({\n  label,\n  description,\n  error,\n  size,\n  disabled,\n  required,\n  id,\n  className,\n  rootClassName,\n  rowClassName,\n  control,\n  'aria-describedby': describedBy,\n}: ToggleFieldProps) {\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(rootClassName, className)}\n      data-size={size}\n    >\n      <div className={rowClassName}>\n        <Field.Control aria-describedby={describedBy}>{control}</Field.Control>\n        <Field.Label>{label}</Field.Label>\n      </div>\n      {description && <Field.Description>{description}</Field.Description>}\n      {invalid && <Field.Error>{error}</Field.Error>}\n    </Field>\n  );\n}\n"]}
+{"version":3,"sources":["../src/internal/ToggleField.tsx"],"names":[],"mappings":";;;;AA0BO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,kBAAA,EAAoB;AACtB,CAAA,EAAqB;AACnB,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,aAAA,EAAe,SAAS,CAAA;AAAA,MAC3C,WAAA,EAAW,IAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,EACd,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,CAAM,OAAA,EAAN,EAAc,kBAAA,EAAkB,aAAc,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,0BACvD,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EACtB,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","file":"chunk-6BIEW4WJ.js","sourcesContent":["import type { ReactNode } from 'react';\nimport { Field } from '../field';\nimport { classes } from './classes';\n\nexport type ToggleSize = 'sm' | 'md' | 'lg';\n\nexport interface ToggleFieldProps {\n  /** Visible inline label. */\n  label: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  size: ToggleSize;\n  disabled?: boolean;\n  required?: boolean;\n  id?: string;\n  className?: string;\n  /** The Field root class of the concrete control (checkbox, switch). */\n  rootClassName: string | undefined;\n  /** The class of the row holding the control and its label. */\n  rowClassName: string | undefined;\n  /** The single `<input>` element; Field.Control wires it. */\n  control: ReactNode;\n  'aria-describedby'?: string;\n}\n\n/** Field wiring for a control whose label sits beside it: Checkbox, Switch. */\nexport function ToggleField({\n  label,\n  description,\n  error,\n  size,\n  disabled,\n  required,\n  id,\n  className,\n  rootClassName,\n  rowClassName,\n  control,\n  'aria-describedby': describedBy,\n}: ToggleFieldProps) {\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(rootClassName, className)}\n      data-size={size}\n    >\n      <div className={rowClassName}>\n        <Field.Control aria-describedby={describedBy}>{control}</Field.Control>\n        <Field.Label>{label}</Field.Label>\n      </div>\n      {description && <Field.Description>{description}</Field.Description>}\n      {invalid && <Field.Error>{error}</Field.Error>}\n    </Field>\n  );\n}\n"]}

package/dist/{chunk-6I26MMQF.js → chunk-737GQSOB.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-ASNTNTJW.js';
+import { Icon } from './chunk-O5LII5XP.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -15,5 +15,5 @@ function Badge({ tone = "neutral", variant = "subtle", size = "md", icon, classN
 Badge.displayName = "Badge";
 
 export { Badge };
-//# sourceMappingURL=chunk-6I26MMQF.js.map
-//# sourceMappingURL=chunk-6I26MMQF.js.map
+//# sourceMappingURL=chunk-737GQSOB.js.map
+//# sourceMappingURL=chunk-737GQSOB.js.map

package/dist/chunk-737GQSOB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/badge/Badge.module.css","../src/badge/Badge.tsx"],"names":["badge"],"mappings":";;;;;AAAA,IAAA,aAAA,GAAA;AAAA,EAKG,KAAA,EAAAA;AAAA,CAAA;AC+BI,SAAS,KAAA,CAAM,EAAE,IAAA,GAAO,SAAA,EAAW,UAAU,QAAA,EAAU,IAAA,GAAO,IAAA,EAAM,IAAA,EAAM,SAAA,EAAW,GAAA,EAAK,QAAA,EAAU,GAAG,MAAK,EAAe;AAChI,EAAA,4BACG,MAAA,EAAA,EAAM,GAAG,IAAA,EAAM,GAAA,EAAU,WAAW,OAAA,CAAQ,aAAA,CAAO,KAAA,EAAO,SAAS,GAAG,WAAA,EAAW,IAAA,EAAM,cAAA,EAAc,OAAA,EAAS,aAAW,IAAA,EACvH,QAAA,EAAA;AAAA,IAAA,IAAA,oBAAQ,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,SAAA,EAAW,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,IACnC;AAAA,GAAA,EACH,CAAA;AAEJ;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-737GQSOB.js","sourcesContent":["/* Every value is a token (--badge-*). Tone × variant resolve into private custom properties. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .badge {\n    --_bg: var(--badge-neutral-subtle-bg);\n    --_fg: var(--badge-neutral-subtle-fg);\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--badge-gap);\n    padding-block: var(--badge-padding-block);\n    padding-inline: var(--badge-padding-inline-md);\n    border-radius: var(--badge-radius);\n    background-color: var(--_bg);\n    color: var(--_fg);\n    font-size: var(--badge-font-size-md);\n    font-weight: var(--badge-font-weight);\n    line-height: var(--badge-line-height);\n    white-space: nowrap;\n\n    &[data-size=\"sm\"] {\n      padding-inline: var(--badge-padding-inline-sm);\n      font-size: var(--badge-font-size-sm);\n    }\n\n    &[data-tone=\"neutral\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-neutral-solid-bg);\n      --_fg: var(--badge-neutral-solid-fg);\n    }\n\n    &[data-tone=\"neutral\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-neutral-subtle-bg);\n      --_fg: var(--badge-neutral-subtle-fg);\n    }\n\n    &[data-tone=\"info\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-info-solid-bg);\n      --_fg: var(--badge-info-solid-fg);\n    }\n\n    &[data-tone=\"info\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-info-subtle-bg);\n      --_fg: var(--badge-info-subtle-fg);\n    }\n\n    &[data-tone=\"success\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-success-solid-bg);\n      --_fg: var(--badge-success-solid-fg);\n    }\n\n    &[data-tone=\"success\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-success-subtle-bg);\n      --_fg: var(--badge-success-subtle-fg);\n    }\n\n    &[data-tone=\"warning\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-warning-solid-bg);\n      --_fg: var(--badge-warning-solid-fg);\n    }\n\n    &[data-tone=\"warning\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-warning-subtle-bg);\n      --_fg: var(--badge-warning-subtle-fg);\n    }\n\n    &[data-tone=\"error\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-error-solid-bg);\n      --_fg: var(--badge-error-solid-fg);\n    }\n\n    &[data-tone=\"error\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-error-subtle-bg);\n      --_fg: var(--badge-error-subtle-fg);\n    }\n  }\n}\n","import type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport { Icon } from '../icon';\nimport { classes } from '../internal/classes';\nimport styles from './Badge.module.css';\n\nexport type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';\nexport type BadgeVariant = 'solid' | 'subtle';\nexport type BadgeSize = 'sm' | 'md';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Meaning, not colour: `neutral` for counts and tags. @default 'neutral' */\n  tone?: BadgeTone;\n  /** `solid` fills with the tone; `subtle` tints and uses the tone as text. @default 'subtle' */\n  variant?: BadgeVariant;\n  /** @default 'md' */\n  size?: BadgeSize;\n  /** Leading glyph, decorative. */\n  icon?: ReactNode;\n  ref?: Ref<HTMLSpanElement>;\n  children: ReactNode;\n}\n\n/**\n * A small label for status, counts and tags. Tone and variant resolve\n * through `--badge-*` onto the status tokens, whose contrast is proven by\n * the token tests. Not interactive: for a removable chip, compose with a\n * Button.\n *\n * @status stable\n * @category Feedback\n * @accessibility Plain text: no role, no interaction. Every tone × variant pair meets WCAG AA, proven by the token tests. Tone is reinforced by the text, not only by colour.\n * @do Keep the text to one or two words.\n * Pair a leading icon with text, never alone.\n * @dont Make it clickable; compose a Button for a removable chip.\n * Use tone alone to convey meaning; say it in the text.\n */\nexport function Badge({ tone = 'neutral', variant = 'subtle', size = 'md', icon, className, ref, children, ...rest }: BadgeProps) {\n  return (\n    <span {...rest} ref={ref} className={classes(styles.badge, className)} data-tone={tone} data-variant={variant} data-size={size}>\n      {icon && <Icon size=\"inherit\">{icon}</Icon>}\n      {children}\n    </span>\n  );\n}\n\nBadge.displayName = 'Badge';\n"]}

package/dist/{chunk-WDWTQKIJ.js → chunk-BAPNIZDV.js}

@@ -1,6 +1,6 @@
-import { renderOption, renderEmpty, listClass } from './chunk-T76YSNTZ.js';
-import { isPresent, AriaFieldLabel, AriaFieldDescription, AriaFieldError, ariaFieldClass } from './chunk-4HRNRTXI.js';
-import { Icon } from './chunk-ASNTNTJW.js';
+import { renderOption, renderEmpty, listClass } from './chunk-EDTA65L5.js';
+import { isPresent, AriaFieldLabel, AriaFieldDescription, AriaFieldError, ariaFieldClass } from './chunk-IRNTXAA7.js';
+import { Icon } from './chunk-O5LII5XP.js';
 import { Select, Button, SelectValue, Popover, ListBox } from 'react-aria-components';
 import { ChevronDown } from '@pearpages/pulp-icons';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -63,5 +63,5 @@ function Picker({
 Picker.displayName = "Picker";
 
 export { Picker };
-//# sourceMappingURL=chunk-WDWTQKIJ.js.map
-//# sourceMappingURL=chunk-WDWTQKIJ.js.map
+//# sourceMappingURL=chunk-BAPNIZDV.js.map
+//# sourceMappingURL=chunk-BAPNIZDV.js.map

package/dist/chunk-BAPNIZDV.js.map

@@ -0,0 +1 @@
+{"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,EASG,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;AChCI,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-BAPNIZDV.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 reset, tokens, vendor, base, components, utilities;\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-ASOQ2MVR.js → chunk-BR2EH4TK.js}

@@ -15,5 +15,5 @@ function Skeleton({ shape = "text", lines = 1, size = "md", className, ref, ...r
 Skeleton.displayName = "Skeleton";
 
 export { Skeleton };
-//# sourceMappingURL=chunk-ASOQ2MVR.js.map
-//# sourceMappingURL=chunk-ASOQ2MVR.js.map
+//# sourceMappingURL=chunk-BR2EH4TK.js.map
+//# sourceMappingURL=chunk-BR2EH4TK.js.map

package/dist/chunk-BR2EH4TK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton/Skeleton.module.css","../src/skeleton/Skeleton.tsx"],"names":["skeleton","lines"],"mappings":";;;;AAAA,IAAA,gBAAA,GAAA;AAAA,EAKG,QAAA,EAAAA,mBAAAA;AAAA,EAiCA,KAAA,EAAAC;AAAA,CAAA;ACPI,SAAS,QAAA,CAAS,EAAE,KAAA,GAAQ,MAAA,EAAQ,KAAA,GAAQ,CAAA,EAAG,IAAA,GAAO,IAAA,EAAM,SAAA,EAAW,GAAA,EAAK,GAAG,IAAA,EAAK,EAAkB;AAC3G,EAAA,IAAI,KAAA,KAAU,MAAA,IAAU,KAAA,GAAQ,CAAA,EAAG;AACjC,IAAA,2BACG,MAAA,EAAA,EAAM,GAAG,IAAA,EAAM,GAAA,EAAU,eAAY,MAAA,EAAO,SAAA,EAAW,OAAA,CAAQ,gBAAA,CAAO,OAAO,SAAS,CAAA,EAAG,cAAW,MAAA,EAClG,QAAA,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,KAAA,EAAM,EAAG,CAAC,CAAA,EAAG,KAAA,yBAChC,MAAA,EAAA,EAAiB,SAAA,EAAW,iBAAO,QAAA,EAAU,YAAA,EAAW,MAAA,EAAO,WAAA,EAAW,UAAU,KAAA,GAAQ,CAAA,GAAI,KAAK,MAAA,EAAA,EAA3F,KAAsG,CAClH,CAAA,EACH,CAAA;AAAA,EAEJ;AACA,EAAA,2BAAQ,MAAA,EAAA,EAAM,GAAG,IAAA,EAAM,GAAA,EAAU,eAAY,MAAA,EAAO,SAAA,EAAW,OAAA,CAAQ,gBAAA,CAAO,UAAU,SAAS,CAAA,EAAG,YAAA,EAAY,KAAA,EAAO,aAAW,IAAA,EAAM,CAAA;AAC1I;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-BR2EH4TK.js","sourcesContent":["/* Every value is a token (--skeleton-*). Shimmer is a moving background-image; off under reduced motion. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .skeleton {\n    --_size: var(--skeleton-circle-md);\n\n    display: block;\n    inline-size: 100%;\n    border-radius: var(--skeleton-radius);\n    background-color: var(--skeleton-base);\n    background-image: linear-gradient(90deg, var(--skeleton-base), var(--skeleton-highlight), var(--skeleton-base));\n    background-size: 200% 100%;\n    animation: shimmer calc(6 * var(--skeleton-duration)) linear infinite;\n\n    &[data-shape=\"text\"] {\n      block-size: var(--skeleton-text-height);\n    }\n\n    &[data-shape=\"rect\"] {\n      block-size: var(--skeleton-circle-lg);\n    }\n\n    &[data-shape=\"circle\"] {\n      inline-size: var(--_size);\n      block-size: var(--_size);\n      border-radius: var(--radius-full);\n    }\n\n    &[data-size=\"sm\"] { --_size: var(--skeleton-circle-sm); }\n    &[data-size=\"lg\"] { --_size: var(--skeleton-circle-lg); }\n\n    &[data-last] {\n      inline-size: 60%;\n    }\n  }\n\n  .lines {\n    display: flex;\n    flex-direction: column;\n    gap: var(--skeleton-gap);\n    inline-size: 100%;\n  }\n\n  @keyframes shimmer {\n    from {\n      background-position: 200% 0;\n    }\n\n    to {\n      background-position: -200% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .skeleton {\n      animation: none;\n      background-image: none;\n    }\n  }\n}\n","import type { HTMLAttributes, Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport styles from './Skeleton.module.css';\n\nexport type SkeletonShape = 'text' | 'rect' | 'circle';\nexport type SkeletonSize = 'sm' | 'md' | 'lg';\n\nexport interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {\n  /** @default 'text' */\n  shape?: SkeletonShape;\n  /** Number of text lines; the last is shorter. @default 1 */\n  lines?: number;\n  /** Circle diameter, from the control scale. @default 'md' */\n  size?: SkeletonSize;\n  ref?: Ref<HTMLSpanElement>;\n}\n\n/**\n * A placeholder for content that is loading. Decorative: hidden from\n * assistive technology, so mark the *container* `aria-busy` and announce\n * the loaded state there. Width for text and rect is the consumer's (pass\n * a `className`); the shimmer runs only when motion is allowed.\n *\n * @status stable\n * @category Feedback\n * @accessibility `aria-hidden`: a placeholder has nothing to announce. Mark the container `aria-busy` while loading and clear it when content arrives; the shimmer stops under reduced motion.\n * @do Match the shape of the content it stands in for.\n * Set `aria-busy` on the region, not on the skeleton.\n * @dont Show it for content that arrives in under a few hundred milliseconds.\n * Animate it when the user prefers reduced motion; the CSS already stops it.\n */\nexport function Skeleton({ shape = 'text', lines = 1, size = 'md', className, ref, ...rest }: SkeletonProps) {\n  if (shape === 'text' && lines > 1) {\n    return (\n      <span {...rest} ref={ref} aria-hidden=\"true\" className={classes(styles.lines, className)} data-shape=\"text\">\n        {Array.from({ length: lines }, (_, index) => (\n          <span key={index} className={styles.skeleton} data-shape=\"text\" data-last={index === lines - 1 ? '' : undefined} />\n        ))}\n      </span>\n    );\n  }\n  return <span {...rest} ref={ref} aria-hidden=\"true\" className={classes(styles.skeleton, className)} data-shape={shape} data-size={size} />;\n}\n\nSkeleton.displayName = 'Skeleton';\n"]}

package/dist/{chunk-YUHS5S5Y.js → chunk-DGIXNUNI.js}

@@ -8,5 +8,5 @@ var AriaField_default = {
 };
 
 export { AriaField_default };
-//# sourceMappingURL=chunk-YUHS5S5Y.js.map
-//# sourceMappingURL=chunk-YUHS5S5Y.js.map
+//# sourceMappingURL=chunk-DGIXNUNI.js.map
+//# sourceMappingURL=chunk-DGIXNUNI.js.map

package/dist/chunk-DGIXNUNI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/AriaField.module.css"],"names":["field","label","required","description","error"],"mappings":";AAAA,IAAA,iBAAA,GAAA;AAAA,EAKG,KAAA,EAAAA,iBAAAA;AAAA,EAOA,KAAA,EAAAC,iBAAAA;AAAA,EAMA,QAAA,EAAAC,oBAAAA;AAAA,EAKA,WAAA,EAAAC,uBAAAA;AAAA,EAMA,KAAA,EAAAC;AAAA","file":"chunk-DGIXNUNI.js","sourcesContent":["/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n    font-family: var(--font-family-body);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n"]}

package/dist/{chunk-OUFAFINB.js → chunk-DVZ46GQN.js}

@@ -1,4 +1,4 @@
-import { ToggleField } from './chunk-BBV4L5WO.js';
+import { ToggleField } from './chunk-6BIEW4WJ.js';
 import { jsx } from 'react/jsx-runtime';
 
 // src/switch/Switch.module.css
@@ -41,5 +41,5 @@ function Switch({
 Switch.displayName = "Switch";
 
 export { Switch };
-//# sourceMappingURL=chunk-OUFAFINB.js.map
-//# sourceMappingURL=chunk-OUFAFINB.js.map
+//# sourceMappingURL=chunk-DVZ46GQN.js.map
+//# sourceMappingURL=chunk-DVZ46GQN.js.map

package/dist/chunk-DVZ46GQN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/switch/Switch.module.css","../src/switch/Switch.tsx"],"names":["switch","row","input"],"mappings":";;;;AAAA,IAAA,cAAA,GAAA;AAAA,EASG,MAAA,EAAAA,eAAAA;AAAA,EAWA,GAAA,EAAAC,YAAAA;AAAA,EAMA,KAAA,EAAAC;AAAA,CAAA;ACKI,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-DVZ46GQN.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 reset, tokens, vendor, base, components, utilities;\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-T76YSNTZ.js → chunk-EDTA65L5.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-ASNTNTJW.js';
+import { Icon } from './chunk-O5LII5XP.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { ListBoxItem, Text } from 'react-aria-components';
 import { Check } from '@pearpages/pulp-icons';
@@ -29,5 +29,5 @@ function renderEmpty(message) {
 var listClass = (...extra) => classes(Listbox_default.list, ...extra);
 
 export { listClass, renderEmpty, renderOption };
-//# sourceMappingURL=chunk-T76YSNTZ.js.map
-//# sourceMappingURL=chunk-T76YSNTZ.js.map
+//# sourceMappingURL=chunk-EDTA65L5.js.map
+//# sourceMappingURL=chunk-EDTA65L5.js.map

package/dist/chunk-EDTA65L5.js.map

@@ -0,0 +1 @@
+{"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,EAUG,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;AC5DI,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-EDTA65L5.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 reset, tokens, vendor, base, components, utilities;\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-3GWESUGD.js → chunk-F3S5BHX2.js}

@@ -24,5 +24,5 @@ function Heading({ level, size, tone = "default", className, ref, children, ...r
 Heading.displayName = "Heading";
 
 export { Heading };
-//# sourceMappingURL=chunk-3GWESUGD.js.map
-//# sourceMappingURL=chunk-3GWESUGD.js.map
+//# sourceMappingURL=chunk-F3S5BHX2.js.map
+//# sourceMappingURL=chunk-F3S5BHX2.js.map

package/dist/chunk-F3S5BHX2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/heading/Heading.module.css","../src/heading/Heading.tsx"],"names":["heading"],"mappings":";;;;AAAA,IAAA,eAAA,GAAA;AAAA,EAKG,OAAA,EAAAA;AAAA,CAAA;;;ACcH,IAAM,aAAA,GAAmD,EAAE,CAAA,EAAG,KAAA,EAAO,CAAA,EAAG,IAAA,EAAM,CAAA,EAAG,IAAA,EAAM,CAAA,EAAG,IAAA,EAAM,CAAA,EAAG,IAAA,EAAM,GAAG,IAAA,EAAK;AAa1G,SAAS,OAAA,CAAQ,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,GAAO,SAAA,EAAW,SAAA,EAAW,GAAA,EAAK,QAAA,EAAU,GAAG,IAAA,EAAK,EAAiB;AAC1G,EAAA,OAAO,aAAA;AAAA,IACL,IAAI,KAAK,CAAA,CAAA;AAAA,IACT;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAA;AAAA,MACA,SAAA,EAAW,OAAA,CAAQ,eAAA,CAAO,OAAA,EAAS,SAAS,CAAA;AAAA,MAC5C,WAAA,EAAa,IAAA,IAAQ,aAAA,CAAc,KAAK,CAAA;AAAA,MACxC,WAAA,EAAa;AAAA,KACf;AAAA,IACA;AAAA,GACF;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-F3S5BHX2.js","sourcesContent":["/* Every value is a token (--heading-*). Size is a data attribute, independent of the level. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .heading {\n    margin: 0;\n    font-family: var(--heading-font-family);\n    font-weight: var(--heading-font-weight);\n    line-height: var(--heading-line-height);\n    color: var(--heading-tone-default);\n    text-wrap: balance;\n\n    &[data-size=\"sm\"] { font-size: var(--heading-size-sm); }\n    &[data-size=\"md\"] { font-size: var(--heading-size-md); }\n    &[data-size=\"lg\"] { font-size: var(--heading-size-lg); }\n    &[data-size=\"xl\"] { font-size: var(--heading-size-xl); }\n    &[data-size=\"2xl\"] { font-size: var(--heading-size-2xl); }\n    &[data-tone=\"muted\"] { color: var(--heading-tone-muted); }\n  }\n}\n","import { createElement, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport styles from './Heading.module.css';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';\nexport type HeadingTone = 'default' | 'muted';\n\nexport interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {\n  /** The document outline level; sets the element (`h1`–`h6`). */\n  level: HeadingLevel;\n  /** Visual size, decoupled from the level. Defaults by level: 1→2xl, 2→xl, 3→lg, 4→md, 5 and 6→sm. */\n  size?: HeadingSize;\n  /** @default 'default' */\n  tone?: HeadingTone;\n  ref?: Ref<HTMLHeadingElement>;\n  children: ReactNode;\n}\n\nconst SIZE_BY_LEVEL: Record<HeadingLevel, HeadingSize> = { 1: '2xl', 2: 'xl', 3: 'lg', 4: 'md', 5: 'sm', 6: 'sm' };\n\n/**\n * A heading whose outline level and visual size are separate decisions, so\n * the document structure stays honest while the design stays flexible.\n * Display family and tight leading from `--heading-*` tokens.\n *\n * @status stable\n * @category Typography\n * @accessibility Renders the `h1`–`h6` element of `level`; `size` changes only the look, so the outline stays truthful.\n * @do Pick `level` from the outline, then `size` from the design.\n * @dont Skip heading levels to get a smaller size; change `size` instead.\n */\nexport function Heading({ level, size, tone = 'default', className, ref, children, ...rest }: HeadingProps) {\n  return createElement(\n    `h${level}`,\n    {\n      ...rest,\n      ref,\n      className: classes(styles.heading, className),\n      'data-size': size ?? SIZE_BY_LEVEL[level],\n      'data-tone': tone,\n    },\n    children,\n  );\n}\n\nHeading.displayName = 'Heading';\n"]}

package/dist/{chunk-Z4PN6B2C.js → chunk-IB5UUE3S.js}

@@ -13,5 +13,5 @@ function VisuallyHidden({ as = "span", className, ref, children, ...rest }) {
 VisuallyHidden.displayName = "VisuallyHidden";
 
 export { VisuallyHidden };
-//# sourceMappingURL=chunk-Z4PN6B2C.js.map
-//# sourceMappingURL=chunk-Z4PN6B2C.js.map
+//# sourceMappingURL=chunk-IB5UUE3S.js.map
+//# sourceMappingURL=chunk-IB5UUE3S.js.map

package/dist/chunk-IB5UUE3S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/visually-hidden/VisuallyHidden.module.css","../src/visually-hidden/VisuallyHidden.tsx"],"names":["root"],"mappings":";;;;AAAA,IAAA,sBAAA,GAAA;AAAA,EAKG,IAAA,EAAAA;AAAA,CAAA;;;ACkBI,SAAS,cAAA,CAAe,EAAE,EAAA,GAAK,MAAA,EAAQ,WAAW,GAAA,EAAK,QAAA,EAAU,GAAG,IAAA,EAAK,EAAwB;AACtG,EAAA,OAAO,aAAA,CAAc,EAAA,EAAI,EAAE,GAAG,IAAA,EAAM,GAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,sBAAA,CAAO,IAAA,EAAM,SAAS,CAAA,IAAK,QAAQ,CAAA;AACjG;AAEA,cAAA,CAAe,WAAA,GAAc,gBAAA","file":"chunk-IB5UUE3S.js","sourcesContent":["/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","import { createElement, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport styles from './VisuallyHidden.module.css';\n\nexport interface VisuallyHiddenProps extends HTMLAttributes<HTMLElement> {\n  /** @default 'span' */\n  as?: 'span' | 'div';\n  ref?: Ref<HTMLElement>;\n  children: ReactNode;\n}\n\n/**\n * Content for assistive technology only: read by screen readers, invisible\n * on screen, still in the accessibility tree (unlike `display: none`). Use\n * it to give icon-only controls a name or to add context a sighted user\n * gets from layout.\n *\n * @status stable\n * @category Utilities\n * @accessibility In the accessibility tree, out of the layout (clip-path, not `display: none`).\n * @do Use it for context a sighted user gets from layout (\"Sort by\", \"Step 2 of 4\").\n * @dont Hide instructions that sighted users also need.\n */\nexport function VisuallyHidden({ as = 'span', className, ref, children, ...rest }: VisuallyHiddenProps) {\n  return createElement(as, { ...rest, ref, className: classes(styles.root, className) }, children);\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden';\n"]}

package/dist/{chunk-MXWXJZFS.js → chunk-IFIQLIA3.js}

@@ -1,4 +1,4 @@
-import { Field } from './chunk-2PXTVZ7H.js';
+import { Field } from './chunk-M5VL22MY.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -44,5 +44,5 @@ function TextField({
 TextField.displayName = "TextField";
 
 export { TextField };
-//# sourceMappingURL=chunk-MXWXJZFS.js.map
-//# sourceMappingURL=chunk-MXWXJZFS.js.map
+//# sourceMappingURL=chunk-IFIQLIA3.js.map
+//# sourceMappingURL=chunk-IFIQLIA3.js.map

package/dist/chunk-IFIQLIA3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/text-field/TextField.module.css","../src/text-field/TextField.tsx"],"names":["field","input"],"mappings":";;;;;AAAA,IAAA,iBAAA,GAAA;AAAA,EASG,KAAA,EAAAA,iBAAAA;AAAA,EAIA,KAAA,EAAAC;AAAA,CAAA;AC4BI,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-IFIQLIA3.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 reset, tokens, vendor, base, components, utilities;\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-4HRNRTXI.js → chunk-IRNTXAA7.js}

@@ -1,4 +1,4 @@
-import { AriaField_default } from './chunk-YUHS5S5Y.js';
+import { AriaField_default } from './chunk-DGIXNUNI.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { Label, Text, FieldError } from 'react-aria-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -21,5 +21,5 @@ var ariaFieldClass = (...extra) => classes(AriaField_default.field, ...extra);
 var isPresent = (error) => error !== void 0 && error !== null && error !== false && error !== "";
 
 export { AriaFieldDescription, AriaFieldError, AriaFieldLabel, ariaFieldClass, isPresent };
-//# sourceMappingURL=chunk-4HRNRTXI.js.map
-//# sourceMappingURL=chunk-4HRNRTXI.js.map
+//# sourceMappingURL=chunk-IRNTXAA7.js.map
+//# sourceMappingURL=chunk-IRNTXAA7.js.map

package/dist/{chunk-4HRNRTXI.js.map → chunk-IRNTXAA7.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/internal/AriaField.tsx"],"names":[],"mappings":";;;;;AAYO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAU,QAAA,EAAS,EAAgD;AAClG,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAW,iBAAA,CAAO,KAAA,EACtB,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,QAAA,wBACE,MAAA,EAAA,EAAK,SAAA,EAAW,kBAAO,QAAA,EAAU,aAAA,EAAY,QAAO,QAAA,EAAA,GAAA,EAErD;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAS,EAA6B;AAC3E,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AACtB,EAAA,2BACG,IAAA,EAAA,EAAK,IAAA,EAAK,eAAc,SAAA,EAAW,iBAAA,CAAO,aACxC,QAAA,EACH,CAAA;AAEJ;AAGO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAS,EAA6B;AACrE,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AACtB,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,iBAAA,CAAO,OAAQ,QAAA,EAAS,CAAA;AACxD;AAGO,IAAM,iBAAiB,CAAA,GAAI,KAAA,KAAoD,QAAQ,iBAAA,CAAO,KAAA,EAAO,GAAG,KAAK;AAG7G,IAAM,SAAA,GAAY,CAAC,KAAA,KAA8B,KAAA,KAAU,UAAa,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,KAAA,IAAS,KAAA,KAAU","file":"chunk-4HRNRTXI.js","sourcesContent":["import type { ReactNode } from 'react';\nimport { FieldError, Label, Text } from 'react-aria-components';\nimport { classes } from './classes';\nimport styles from './AriaField.module.css';\n\n/**\n * Label, description and error for controls built on React Aria (decision\n * record 001). React Aria wires `htmlFor`, `aria-labelledby` and\n * `aria-describedby` itself through its contexts, so these are the vendor's\n * parts with pulp's `--field-*` tokens: they look exactly like `Field`'s.\n * `Field` stays the wrapper for native controls, where pulp does the wiring.\n */\nexport function AriaFieldLabel({ required, children }: { required?: boolean; children: ReactNode }) {\n  return (\n    <Label className={styles.label}>\n      {children}\n      {required && (\n        <span className={styles.required} aria-hidden=\"true\">\n          *\n        </span>\n      )}\n    </Label>\n  );\n}\n\nexport function AriaFieldDescription({ children }: { children?: ReactNode }) {\n  if (!children) return null;\n  return (\n    <Text slot=\"description\" className={styles.description}>\n      {children}\n    </Text>\n  );\n}\n\n/** Rendered by React Aria only while the control is invalid. */\nexport function AriaFieldError({ children }: { children?: ReactNode }) {\n  if (!children) return null;\n  return <FieldError className={styles.error}>{children}</FieldError>;\n}\n\n/** The vertical field layout class, for the vendor root element. */\nexport const ariaFieldClass = (...extra: Array<string | false | null | undefined>) => classes(styles.field, ...extra);\n\n/** `error` is \"present\" the way Field defines it: not undefined, null, false or empty. */\nexport const isPresent = (error: ReactNode): boolean => error !== undefined && error !== null && error !== false && error !== '';\n"]}
+{"version":3,"sources":["../src/internal/AriaField.tsx"],"names":[],"mappings":";;;;;AAYO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAU,QAAA,EAAS,EAAgD;AAClG,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAW,iBAAA,CAAO,KAAA,EACtB,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,QAAA,wBACE,MAAA,EAAA,EAAK,SAAA,EAAW,kBAAO,QAAA,EAAU,aAAA,EAAY,QAAO,QAAA,EAAA,GAAA,EAErD;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAS,EAA6B;AAC3E,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AACtB,EAAA,2BACG,IAAA,EAAA,EAAK,IAAA,EAAK,eAAc,SAAA,EAAW,iBAAA,CAAO,aACxC,QAAA,EACH,CAAA;AAEJ;AAGO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAS,EAA6B;AACrE,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AACtB,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,iBAAA,CAAO,OAAQ,QAAA,EAAS,CAAA;AACxD;AAGO,IAAM,iBAAiB,CAAA,GAAI,KAAA,KAAoD,QAAQ,iBAAA,CAAO,KAAA,EAAO,GAAG,KAAK;AAG7G,IAAM,SAAA,GAAY,CAAC,KAAA,KAA8B,KAAA,KAAU,UAAa,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,KAAA,IAAS,KAAA,KAAU","file":"chunk-IRNTXAA7.js","sourcesContent":["import type { ReactNode } from 'react';\nimport { FieldError, Label, Text } from 'react-aria-components';\nimport { classes } from './classes';\nimport styles from './AriaField.module.css';\n\n/**\n * Label, description and error for controls built on React Aria (decision\n * record 001). React Aria wires `htmlFor`, `aria-labelledby` and\n * `aria-describedby` itself through its contexts, so these are the vendor's\n * parts with pulp's `--field-*` tokens: they look exactly like `Field`'s.\n * `Field` stays the wrapper for native controls, where pulp does the wiring.\n */\nexport function AriaFieldLabel({ required, children }: { required?: boolean; children: ReactNode }) {\n  return (\n    <Label className={styles.label}>\n      {children}\n      {required && (\n        <span className={styles.required} aria-hidden=\"true\">\n          *\n        </span>\n      )}\n    </Label>\n  );\n}\n\nexport function AriaFieldDescription({ children }: { children?: ReactNode }) {\n  if (!children) return null;\n  return (\n    <Text slot=\"description\" className={styles.description}>\n      {children}\n    </Text>\n  );\n}\n\n/** Rendered by React Aria only while the control is invalid. */\nexport function AriaFieldError({ children }: { children?: ReactNode }) {\n  if (!children) return null;\n  return <FieldError className={styles.error}>{children}</FieldError>;\n}\n\n/** The vertical field layout class, for the vendor root element. */\nexport const ariaFieldClass = (...extra: Array<string | false | null | undefined>) => classes(styles.field, ...extra);\n\n/** `error` is \"present\" the way Field defines it: not undefined, null, false or empty. */\nexport const isPresent = (error: ReactNode): boolean => error !== undefined && error !== null && error !== false && error !== '';\n"]}

package/dist/{chunk-OXYP34CG.js → chunk-JOGIN4SS.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-ASNTNTJW.js';
+import { Icon } from './chunk-O5LII5XP.js';
 import { parseDate } from '@internationalized/date';
 import { Button, Heading, CalendarGrid as CalendarGrid$1, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell } from 'react-aria-components';
 import { ChevronLeft, ChevronRight } from '@pearpages/pulp-icons';
@@ -39,5 +39,5 @@ function CalendarGrid() {
 var calendarRootClass = Calendar_default.root;
 
 export { CalendarGrid, calendarRootClass, fromDate, toDate };
-//# sourceMappingURL=chunk-OXYP34CG.js.map
-//# sourceMappingURL=chunk-OXYP34CG.js.map
+//# sourceMappingURL=chunk-JOGIN4SS.js.map
+//# sourceMappingURL=chunk-JOGIN4SS.js.map

package/dist/chunk-JOGIN4SS.js.map

@@ -0,0 +1 @@
+{"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,EASG,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;ACvDI,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-JOGIN4SS.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 reset, tokens, vendor, base, components, utilities;\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-MRQWUCBA.js → chunk-LA3YBXCR.js}

@@ -53,5 +53,5 @@ Card.Body = CardBody;
 Card.Footer = CardFooter;
 
 export { Card };
-//# sourceMappingURL=chunk-MRQWUCBA.js.map
-//# sourceMappingURL=chunk-MRQWUCBA.js.map
+//# sourceMappingURL=chunk-LA3YBXCR.js.map
+//# sourceMappingURL=chunk-LA3YBXCR.js.map

package/dist/chunk-LA3YBXCR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/card/Card.module.css","../src/card/Card.tsx"],"names":["card","header","body","footer"],"mappings":";;;;;AAAA,IAAA,YAAA,GAAA;AAAA,EAKG,IAAA,EAAAA,WAAAA;AAAA,EAmDA,MAAA,EAAAC,aAAAA;AAAA,EACA,IAAA,EAAAC,WAAAA;AAAA,EACA,MAAA,EAAAC;AAAA,CAAA;ACLI,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-LA3YBXCR.js","sourcesContent":["/* Every value is a token (--card-*). Slots carry padding and dividers; the root is the surface. */\n\n@layer reset, tokens, vendor, base, components, utilities;\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-2ZP4ZBI5.js → chunk-LKWZZIRZ.js}

@@ -39,5 +39,5 @@ function Text({
 Text.displayName = "Text";
 
 export { Text };
-//# sourceMappingURL=chunk-2ZP4ZBI5.js.map
-//# sourceMappingURL=chunk-2ZP4ZBI5.js.map
+//# sourceMappingURL=chunk-LKWZZIRZ.js.map
+//# sourceMappingURL=chunk-LKWZZIRZ.js.map

package/dist/chunk-LKWZZIRZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/text/Text.module.css","../src/text/Text.tsx"],"names":["text"],"mappings":";;;;AAAA,IAAA,YAAA,GAAA;AAAA,EAKG,IAAA,EAAAA;AAAA,CAAA;;;ACoCI,SAAS,IAAA,CAAK;AAAA,EACnB,EAAA,GAAK,GAAA;AAAA,EACL,IAAA,GAAO,IAAA;AAAA,EACP,MAAA,GAAS,SAAA;AAAA,EACT,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,MAAA;AAAA,EACT,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAc;AACZ,EAAA,OAAO,aAAA;AAAA,IACL,EAAA;AAAA,IACA;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAA;AAAA,MACA,SAAA,EAAW,OAAA,CAAQ,YAAA,CAAO,IAAA,EAAM,SAAS,CAAA;AAAA,MACzC,WAAA,EAAa,IAAA;AAAA,MACb,aAAA,EAAe,MAAA;AAAA,MACf,WAAA,EAAa,IAAA;AAAA,MACb,aAAA,EAAe,MAAA;AAAA,MACf,YAAA,EAAc,KAAA;AAAA,MACd,eAAA,EAAiB,WAAW,EAAA,GAAK;AAAA,KACnC;AAAA,IACA;AAAA,GACF;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"chunk-LKWZZIRZ.js","sourcesContent":["/* Every value is a token (--text-*). Variants are data attributes. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .text {\n    margin: 0;\n    font-family: var(--text-font-family-body);\n    font-size: var(--text-size-md);\n    font-weight: var(--text-weight-regular);\n    line-height: var(--text-line-height);\n    color: var(--text-tone-default);\n\n    &[data-size=\"xs\"] { font-size: var(--text-size-xs); }\n    &[data-size=\"sm\"] { font-size: var(--text-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--text-size-lg); }\n    &[data-size=\"xl\"] { font-size: var(--text-size-xl); }\n    &[data-weight=\"medium\"] { font-weight: var(--text-weight-medium); }\n    &[data-weight=\"semibold\"] { font-weight: var(--text-weight-semibold); }\n    &[data-tone=\"muted\"] { color: var(--text-tone-muted); }\n    &[data-tone=\"faint\"] { color: var(--text-tone-faint); }\n    &[data-family=\"mono\"] { font-family: var(--text-font-family-mono); }\n    &[data-align=\"start\"] { text-align: start; }\n    &[data-align=\"center\"] { text-align: center; }\n    &[data-align=\"end\"] { text-align: end; }\n\n    &[data-truncate] {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n}\n","import { createElement, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport styles from './Text.module.css';\n\nexport type TextElement = 'p' | 'span' | 'div' | 'strong' | 'em' | 'small';\nexport type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type TextWeight = 'regular' | 'medium' | 'semibold';\nexport type TextTone = 'default' | 'muted' | 'faint';\nexport type TextFamily = 'body' | 'mono';\nexport type TextAlign = 'start' | 'center' | 'end';\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  /** The element to render. For a label use `Field.Label`. @default 'p' */\n  as?: TextElement;\n  /** @default 'md' */\n  size?: TextSize;\n  /** @default 'regular' */\n  weight?: TextWeight;\n  /** Emphasis: `muted` for secondary text, `faint` for the least important. @default 'default' */\n  tone?: TextTone;\n  /** @default 'body' */\n  family?: TextFamily;\n  align?: TextAlign;\n  /** Single line with an ellipsis. @default false */\n  truncate?: boolean;\n  ref?: Ref<HTMLElement>;\n  children: ReactNode;\n}\n\n/**\n * The type scale as a component. Every combination of size, weight, tone and\n * family resolves through `--text-*` tokens, so body copy never carries its\n * own font declarations. State on the DOM: `data-size`, `data-weight`,\n * `data-tone`, `data-family`, `data-align`, `data-truncate`.\n *\n * @status stable\n * @category Typography\n * @accessibility Plain text with no role beyond the element chosen by `as`; `truncate` clips visually while the full text stays in the accessibility tree.\n * @do Use `tone=\"faint\"` only on base and raised surfaces (its contrast is promised there).\n * @dont Use `as=\"label\"`; labels belong to Field.\n */\nexport function Text({\n  as = 'p',\n  size = 'md',\n  weight = 'regular',\n  tone = 'default',\n  family = 'body',\n  align,\n  truncate = false,\n  className,\n  ref,\n  children,\n  ...rest\n}: TextProps) {\n  return createElement(\n    as,\n    {\n      ...rest,\n      ref,\n      className: classes(styles.text, className),\n      'data-size': size,\n      'data-weight': weight,\n      'data-tone': tone,\n      'data-family': family,\n      'data-align': align,\n      'data-truncate': truncate ? '' : undefined,\n    },\n    children,\n  );\n}\n\nText.displayName = 'Text';\n"]}

package/dist/{chunk-2PXTVZ7H.js → chunk-M5VL22MY.js}

@@ -91,5 +91,5 @@ Field.Description = FieldDescription;
 Field.Error = FieldError;
 
 export { Field, useField };
-//# sourceMappingURL=chunk-2PXTVZ7H.js.map
-//# sourceMappingURL=chunk-2PXTVZ7H.js.map
+//# sourceMappingURL=chunk-M5VL22MY.js.map
+//# sourceMappingURL=chunk-M5VL22MY.js.map

package/dist/chunk-M5VL22MY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/field/Field.module.css","../src/field/Field.tsx"],"names":["field","label","required","description","error"],"mappings":"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","file":"chunk-M5VL22MY.js","sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","import {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useLayoutEffect,\n  useState,\n  type HTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { renderAsChild } from '../internal/asChild';\nimport { classes } from '../internal/classes';\nimport styles from './Field.module.css';\n\ntype Part = 'description' | 'error';\n\nexport interface FieldContextValue {\n  /** The control's id; the label points at it. */\n  id: string;\n  /** The label's id, for controls that are labelled by reference (`aria-labelledby`), such as a radio group. */\n  labelId: string;\n  invalid: boolean;\n  disabled: boolean;\n  required: boolean;\n  /** ids of the description and error that are actually mounted, space separated. */\n  describedBy: string | undefined;\n  /** Registers a mounted part; returns the unregister function. */\n  register: (part: Part) => () => void;\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null);\n\nconst DEV = typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';\n\n/** The field's ids and state, for controls that wire themselves instead of using `Field.Control`. */\nexport function useField(): FieldContextValue {\n  const context = useContext(FieldContext);\n  if (!context) throw new Error('useField must be used inside <Field>');\n  return context;\n}\n\nexport interface FieldProps extends HTMLAttributes<HTMLDivElement> {\n  /** The control's id. Generated when omitted. */\n  id?: string;\n  /** @default false */\n  invalid?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  required?: boolean;\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\n/**\n * The wiring every form control shares: a label pointing at the control, a\n * description and an error exposed through `aria-describedby`, and invalid,\n * disabled and required state in one place. Only parts that are mounted end\n * up in `aria-describedby`, so no id ever dangles. Compose with\n * `Field.Label`, `Field.Control`, `Field.Description` and `Field.Error`\n * (one of each); state on the DOM as `data-invalid`, `data-disabled`,\n * `data-required`.\n *\n * Known limitation: parts register in a layout effect, so server-rendered\n * HTML carries no `aria-describedby` until hydration. The relationship is\n * complete for every interactive use; static HTML consumers should not rely\n * on it yet.\n *\n * @status stable\n * @category Forms\n * @accessibility Wires `label[for]`, `aria-describedby` (only mounted parts), `aria-invalid`, `aria-required` and `disabled` onto the control. Server-rendered HTML has no `aria-describedby` until hydration (a test pins the gap).\n * @do Use `Field.Label as=\"span\"` with `useField().labelId` for groups that cannot be labelled by `for`.\n * @dont Mount two `Field.Description` or two `Field.Error`; ids would collide (development warns).\n */\nexport function Field({ id, invalid = false, disabled = false, required = false, className, ref, children, ...rest }: FieldProps) {\n  const autoId = useId();\n  const controlId = id ?? autoId;\n  // Counts, not booleans: a second instance of a part is a bug (duplicate ids)\n  // and is reported in development instead of silently colliding.\n  const [parts, setParts] = useState<Record<Part, number>>({ description: 0, error: 0 });\n\n  const register = useCallback((part: Part) => {\n    setParts((current) => {\n      const next = current[part] + 1;\n      if (DEV && next === 2) console.warn(`Field: more than one Field.${part === 'error' ? 'Error' : 'Description'} is mounted; their ids collide.`);\n      return { ...current, [part]: next };\n    });\n    return () => setParts((current) => ({ ...current, [part]: Math.max(0, current[part] - 1) }));\n  }, []);\n\n  const describedBy =\n    [parts.description > 0 && `${controlId}-description`, parts.error > 0 && `${controlId}-error`].filter(Boolean).join(' ') ||\n    undefined;\n\n  return (\n    <FieldContext.Provider value={{ id: controlId, labelId: `${controlId}-label`, invalid, disabled, required, describedBy, register }}>\n      <div\n        {...rest}\n        ref={ref}\n        className={classes(styles.field, className)}\n        data-invalid={invalid ? '' : undefined}\n        data-disabled={disabled ? '' : undefined}\n        data-required={required ? '' : undefined}\n      >\n        {children}\n      </div>\n    </FieldContext.Provider>\n  );\n}\n\ninterface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /**\n   * `label` points at the control with `for`. `span` is for controls that are\n   * not labelable (a radio group, a fieldset): it carries `labelId` and the\n   * control references it with `aria-labelledby`.\n   * @default 'label'\n   */\n  as?: 'label' | 'span';\n  ref?: Ref<HTMLLabelElement>;\n  children: ReactNode;\n}\n\nfunction FieldLabel({ as = 'label', className, ref, children, ...rest }: FieldLabelProps) {\n  const field = useField();\n  const marker = field.required && (\n    <span className={styles.required} aria-hidden=\"true\">\n      *\n    </span>\n  );\n  if (as === 'span') {\n    return (\n      <span {...rest} id={field.labelId} className={classes(styles.label, className)}>\n        {children}\n        {marker}\n      </span>\n    );\n  }\n  return (\n    <label {...rest} ref={ref} htmlFor={field.id} className={classes(styles.label, className)}>\n      {children}\n      {marker}\n    </label>\n  );\n}\n\ninterface FieldControlProps {\n  /** Extra ids to describe the control by, kept alongside the field's own. */\n  'aria-describedby'?: string;\n  /** The single control element; the field's wiring is merged into it. */\n  children: ReactNode;\n}\n\nfunction FieldControl({ 'aria-describedby': extra, children }: FieldControlProps) {\n  const field = useField();\n  return renderAsChild('Field.Control', children, {\n    id: field.id,\n    'aria-describedby': [extra, field.describedBy].filter(Boolean).join(' ') || undefined,\n    'aria-invalid': field.invalid || undefined,\n    disabled: field.disabled || undefined,\n    required: field.required || undefined,\n  });\n}\n\ninterface FieldTextProps extends HTMLAttributes<HTMLParagraphElement> {\n  ref?: Ref<HTMLParagraphElement>;\n  children?: ReactNode;\n}\n\nfunction FieldDescription({ className, ref, children, ...rest }: FieldTextProps) {\n  const field = useField();\n  const { register } = field;\n  useLayoutEffect(() => register('description'), [register]);\n  return (\n    <p {...rest} ref={ref} id={`${field.id}-description`} className={classes(styles.description, className)}>\n      {children}\n    </p>\n  );\n}\n\nfunction FieldError({ className, ref, children, ...rest }: FieldTextProps) {\n  const field = useField();\n  const { register } = field;\n  useLayoutEffect(() => register('error'), [register]);\n  return (\n    <p {...rest} ref={ref} id={`${field.id}-error`} role=\"alert\" className={classes(styles.error, className)}>\n      {children}\n    </p>\n  );\n}\n\nField.displayName = 'Field';\nFieldLabel.displayName = 'Field.Label';\nFieldControl.displayName = 'Field.Control';\nFieldDescription.displayName = 'Field.Description';\nFieldError.displayName = 'Field.Error';\n\nField.Label = FieldLabel;\nField.Control = FieldControl;\nField.Description = FieldDescription;\nField.Error = FieldError;\n"]}

package/dist/{chunk-DVM37MEK.js → chunk-MF66ICX6.js}

@@ -1,5 +1,5 @@
-import { Button } from './chunk-VSDEQHG4.js';
-import { Icon } from './chunk-ASNTNTJW.js';
+import { Button } from './chunk-5TTYVQ6Q.js';
+import { Icon } from './chunk-O5LII5XP.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { isValidElement, cloneElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
@@ -34,5 +34,5 @@ function IconButton({
 IconButton.displayName = "IconButton";
 
 export { IconButton };
-//# sourceMappingURL=chunk-DVM37MEK.js.map
-//# sourceMappingURL=chunk-DVM37MEK.js.map
+//# sourceMappingURL=chunk-MF66ICX6.js.map
+//# sourceMappingURL=chunk-MF66ICX6.js.map

package/dist/chunk-MF66ICX6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon-button/IconButton.module.css","../src/icon-button/IconButton.tsx"],"names":["iconButton"],"mappings":";;;;;;;AAAA,IAAA,kBAAA,GAAA;AAAA,EAKG,UAAA,EAAAA;AAAA,CAAA;ACsBI,SAAS,UAAA,CAAsD;AAAA,EACpE,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,KAAA,mBAAQ,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,WAAW,QAAA,EAAA,IAAA,EAAK,CAAA;AACzC,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,OAAA;AAAA,MACA,YAAA,EAAY,KAAA;AAAA,MACZ,OAAO,KAAA,IAAS,KAAA;AAAA,MAChB,gBAAA,EAAe,EAAA;AAAA,MACf,SAAA,EAAW,OAAA,CAAQ,kBAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AAAA,MAE9C,QAAA,EAAA,OAAA,IAAW,eAAe,QAAQ,CAAA,GAAI,aAAa,QAAA,EAAU,MAAA,EAAW,KAAK,CAAA,GAAI;AAAA;AAAA,GACpF;AAEJ;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-MF66ICX6.js","sourcesContent":["/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .iconButton[data-icon-only] {\n    gap: 0;\n    inline-size: var(--icon-button-size-md);\n    padding-inline: 0;\n\n    &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n    &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n  }\n}\n","import { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';\nimport { Button, type ButtonProps } from '../button';\nimport { Icon } from '../icon';\nimport { classes } from '../internal/classes';\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps<E extends HTMLElement = HTMLButtonElement>\n  extends Omit<ButtonProps<E>, 'children' | 'iconStart' | 'iconEnd'> {\n  /** The accessible name. Required: an icon alone is not a name. Also used as the tooltip unless `title` is given. */\n  label: string;\n  /** The glyph, for instance from `@pearpages/pulp-icons`. */\n  icon: ReactNode;\n  /** With `asChild`: the element to render (a link, for instance). Its own children are replaced by the icon. */\n  children?: ReactElement;\n}\n\n/**\n * A square Button that shows only an icon and therefore *requires* a name.\n * Everything else (variants, sizes, loading, asChild) is Button's; the\n * `--icon-button-size-*` tokens make it square.\n *\n * @status stable\n * @category Actions\n * @accessibility A Button with `aria-label` from the required `label`; `title` shows it as a tooltip. Everything else is Button's.\n * @do Write the label as the action (\"Close\", \"Add item\").\n * @dont Use the icon's name as the label.\n */\nexport function IconButton<E extends HTMLElement = HTMLButtonElement>({\n  label,\n  icon,\n  title,\n  className,\n  asChild = false,\n  children,\n  ...rest\n}: IconButtonProps<E>) {\n  const glyph = <Icon size=\"inherit\">{icon}</Icon>;\n  return (\n    <Button\n      {...rest}\n      asChild={asChild}\n      aria-label={label}\n      title={title ?? label}\n      data-icon-only=\"\"\n      className={classes(styles.iconButton, className)}\n    >\n      {asChild && isValidElement(children) ? cloneElement(children, undefined, glyph) : glyph}\n    </Button>\n  );\n}\n\nIconButton.displayName = 'IconButton';\n"]}

package/dist/{chunk-XXC34COT.js → chunk-N4C3NQIN.js}

@@ -1,5 +1,5 @@
-import { IconButton } from './chunk-DVM37MEK.js';
-import { Icon } from './chunk-ASNTNTJW.js';
+import { IconButton } from './chunk-MF66ICX6.js';
+import { Icon } from './chunk-O5LII5XP.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { Close, Warning, Check, Info } from '@pearpages/pulp-icons';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -49,5 +49,5 @@ function Alert({
 Alert.displayName = "Alert";
 
 export { Alert };
-//# sourceMappingURL=chunk-XXC34COT.js.map
-//# sourceMappingURL=chunk-XXC34COT.js.map
+//# sourceMappingURL=chunk-N4C3NQIN.js.map
+//# sourceMappingURL=chunk-N4C3NQIN.js.map