@mitcsutt/kiln-ui 0.2.1 → 0.2.2

package/dist/components/overlays/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["PopoverPrimitive","styles","Popover","Popover_module_default","PopoverRoot","anchor","usePortalAnchorRef","PortalAnchorContext","Popover","props","PopoverTrigger","forwardRef","usePortalAnchor","composeRefs","ref","PopoverAnchor","ContentInner","rest","theme","usePortalTheme","container","cx","className","sideOffset","arrow","children","PopoverContent","PopoverClose","Popover$1"],"sources":["../../../../src/components/overlays/Popover/Popover.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ComponentRef } from 'react'\nimport { Popover as PopoverPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport {\n  PortalAnchorContext,\n  composeRefs,\n  usePortalAnchor,\n  usePortalAnchorRef,\n  usePortalTheme,\n} from '#components/overlays/usePortalTheme'\nimport styles from './Popover.module.css'\n\nexport type PopoverProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>\n\n/**\n * Non-modal floating panel anchored to a trigger: invoice details, a filter, a small\n * form. Opens on click, closes on Escape or an outside click, returns focus. For\n * hover-only hints use `Tooltip`; for a list of commands use `DropdownMenu`.\n *\n * <Popover>\n *   <Popover.Trigger asChild><Button>Invoice details</Button></Popover.Trigger>\n *   <Popover.Content aria-label=\"Invoice details\">…</Popover.Content>\n * </Popover>\n */\nfunction PopoverRoot(props: PopoverProps) {\n  const anchor = usePortalAnchorRef()\n  return (\n    <PortalAnchorContext.Provider value={anchor}>\n      <PopoverPrimitive.Root {...props} />\n    </PortalAnchorContext.Provider>\n  )\n}\n\nexport type PopoverTriggerProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>\n\nconst PopoverTrigger = forwardRef<\n  ComponentRef<typeof PopoverPrimitive.Trigger>,\n  PopoverTriggerProps\n>(function PopoverTrigger(props, ref) {\n  const anchor = usePortalAnchor()\n  return <PopoverPrimitive.Trigger ref={composeRefs(ref, anchor)} {...props} />\n})\n\nexport type PopoverAnchorProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>\n\n/** Position against something other than the trigger. Also becomes the theme source. */\nconst PopoverAnchor = forwardRef<ComponentRef<typeof PopoverPrimitive.Anchor>, PopoverAnchorProps>(\n  function PopoverAnchor(props, ref) {\n    const anchor = usePortalAnchor()\n    return <PopoverPrimitive.Anchor ref={composeRefs(ref, anchor)} {...props} />\n  },\n)\n\nexport interface PopoverContentProps extends ComponentPropsWithoutRef<\n  typeof PopoverPrimitive.Content\n> {\n  /** Draw a small pointer toward the trigger. Default `false`. */\n  arrow?: boolean\n  /** Portal target. Defaults to `document.body`; its theme scope is also used. */\n  container?: HTMLElement | null\n}\n\nconst ContentInner = forwardRef<HTMLDivElement, PopoverContentProps>(function ContentInner(\n  { arrow = false, container, sideOffset, className, children, ...rest },\n  ref,\n) {\n  const theme = usePortalTheme(container)\n  return (\n    <PopoverPrimitive.Content\n      ref={ref}\n      className={cx(styles.content, className)}\n      sideOffset={sideOffset ?? (arrow ? 4 : 6)}\n      collisionPadding={8}\n      {...theme}\n      {...rest}\n    >\n      {children}\n      {arrow ? (\n        <PopoverPrimitive.Arrow asChild width={18} height={9}>\n          <svg className={styles.arrow} viewBox=\"0 0 18 9\" aria-hidden>\n            <path className={styles.arrowFill} d=\"M0 0 L9 9 L18 0 Z\" />\n            <path className={styles.arrowEdge} d=\"M0 0 L9 9 L18 0\" />\n          </svg>\n        </PopoverPrimitive.Arrow>\n      ) : null}\n    </PopoverPrimitive.Content>\n  )\n})\n\n/** The floating panel. `side`, `align` and `sideOffset` follow Radix; it flips to stay on screen. */\nconst PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(function PopoverContent(\n  { container, forceMount, ...rest },\n  ref,\n) {\n  return (\n    <PopoverPrimitive.Portal container={container} forceMount={forceMount}>\n      <ContentInner ref={ref} container={container} forceMount={forceMount} {...rest} />\n    </PopoverPrimitive.Portal>\n  )\n})\n\nexport type PopoverCloseProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Close>\n\nconst PopoverClose = PopoverPrimitive.Close\n\nexport const Popover = Object.assign(PopoverRoot, {\n  Root: PopoverRoot,\n  Trigger: PopoverTrigger,\n  Anchor: PopoverAnchor,\n  Content: PopoverContent,\n  Close: PopoverClose,\n})\n"],"mappings":";;;;;;;AAwBA,SAASI,EAAY,GAAqB;CACxC,IAAMC,IAASC,EAAmB;CAClC,OACE,kBAACC,EAAoB,UAArB;EAA8B,OAAOF;EACnC,UAAA,kBAACL,EAAiB,MAAlB,EAAuB,GAAIS,EAAQ,CAAA;CACP,CAAA;AAElC;AAIA,IAAMC,IAAiBC,EAGrB,SAAwB,GAAO,GAAK;CACpC,IAAMN,IAASO,EAAgB;CAC/B,OAAO,kBAACZ,EAAiB,SAAlB;EAA0B,KAAKa,EAAYC,GAAKT,CAAM;EAAG,GAAII;CAAQ,CAAA;AAC9E,CAAC,GAKKM,IAAgBJ,EACpB,SAAuB,GAAO,GAAK;CACjC,IAAMN,IAASO,EAAgB;CAC/B,OAAO,kBAACZ,EAAiB,QAAlB;EAAyB,KAAKa,EAAYC,GAAKT,CAAM;EAAG,GAAII;CAAQ,CAAA;AAC7E,CACF,GAWMO,IAAeL,EAAgD,SACnE,EAAE,WAAQ,IAAO,cAAW,eAAY,cAAW,aAAU,GAAGM,KAChE,GACA;CACA,IAAMC,IAAQC,EAAeC,CAAS;CACtC,OACE,kBAACpB,EAAiB,SAAlB;EACO;EACL,WAAWqB,EAAGpB,EAAO,SAASqB,CAAS;EACvC,YAAYC,MAAeC,IAAQ,IAAI;EACvC,kBAAkB;EAClB,GAAIN;EACJ,GAAID;EANN,UAAA,CAQGQ,GACAD,IACC,kBAACxB,EAAiB,OAAlB;GAAwB,SAAA;GAAQ,OAAO;GAAI,QAAQ;GACjD,UAAA,kBAAC,OAAD;IAAK,WAAWC,EAAO;IAAO,SAAQ;IAAW,eAAA;IAAjD,UAAA,CACE,kBAAC,QAAD;KAAM,WAAWA,EAAO;KAAW,GAAE;IAAqB,CAAA,GAC1D,kBAAC,QAAD;KAAM,WAAWA,EAAO;KAAW,GAAE;IAAmB,CAAA,CACrD;;EACiB,CAAA,IACtB,IACoB;;AAE9B,CAAC,GAGKyB,IAAiBf,EAAgD,SACrE,EAAE,cAAW,eAAY,GAAGM,KAC5B,GACA;CACA,OACE,kBAACjB,EAAiB,QAAlB;EAAoC;EAAuB;EACzD,UAAA,kBAACgB,GAAD;GAAmB;GAAgB;GAAuB;GAAY,GAAIC;EAAO,CAAA;CAC1D,CAAA;AAE7B,CAAC,GAIKU,IAAe3B,EAAiB,OAEzBE,IAAU,OAAO,OAAOE,GAAa;CAChD,MAAMA;CACN,SAASM;CACT,QAAQK;CACR,SAASW;CACT,OAAOC;AACT,CAAC"}
+{"version":3,"file":"Popover.js","names":["PopoverPrimitive","styles","Popover","Popover_module_default","PopoverRoot","anchor","usePortalAnchorRef","PortalAnchorContext","Popover","props","PopoverTrigger","forwardRef","usePortalAnchor","composeRefs","ref","PopoverAnchor","ContentInner","rest","theme","usePortalTheme","container","cx","className","sideOffset","arrow","children","PopoverContent","PopoverClose","Popover$1"],"sources":["../../../../src/components/overlays/Popover/Popover.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ComponentRef } from 'react'\nimport { Popover as PopoverPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport {\n  PortalAnchorContext,\n  composeRefs,\n  usePortalAnchor,\n  usePortalAnchorRef,\n  usePortalTheme,\n} from '#components/overlays/usePortalTheme'\nimport styles from './Popover.module.css'\n\nexport type PopoverProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>\n\n/**\n * A non-modal panel anchored to its trigger, for details, a filter or a small form.\n *\n * @remarks\n * `Popover` opens a floating panel beside its trigger. It's non-modal: the rest of the page stays\n * usable, and it closes on Escape or a click outside, returning focus to the trigger.\n *\n * @privateRemarks\n * Non-modal floating panel anchored to a trigger: invoice details, a filter, a small\n * form. Opens on click, closes on Escape or an outside click, returns focus. For\n * hover-only hints use `Tooltip`; for a list of commands use `DropdownMenu`.\n *\n * <Popover>\n *   <Popover.Trigger asChild><Button>Invoice details</Button></Popover.Trigger>\n *   <Popover.Content aria-label=\"Invoice details\">…</Popover.Content>\n * </Popover>\n */\nfunction PopoverRoot(props: PopoverProps) {\n  const anchor = usePortalAnchorRef()\n  return (\n    <PortalAnchorContext.Provider value={anchor}>\n      <PopoverPrimitive.Root {...props} />\n    </PortalAnchorContext.Provider>\n  )\n}\n\nexport type PopoverTriggerProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>\n\nconst PopoverTrigger = forwardRef<\n  ComponentRef<typeof PopoverPrimitive.Trigger>,\n  PopoverTriggerProps\n>(function PopoverTrigger(props, ref) {\n  const anchor = usePortalAnchor()\n  return <PopoverPrimitive.Trigger ref={composeRefs(ref, anchor)} {...props} />\n})\n\nexport type PopoverAnchorProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>\n\n/** Position against something other than the trigger. Also becomes the theme source. */\nconst PopoverAnchor = forwardRef<ComponentRef<typeof PopoverPrimitive.Anchor>, PopoverAnchorProps>(\n  function PopoverAnchor(props, ref) {\n    const anchor = usePortalAnchor()\n    return <PopoverPrimitive.Anchor ref={composeRefs(ref, anchor)} {...props} />\n  },\n)\n\nexport interface PopoverContentProps extends ComponentPropsWithoutRef<\n  typeof PopoverPrimitive.Content\n> {\n  /** Draw a small pointer toward the trigger. Default `false`. */\n  arrow?: boolean\n  /** Portal target. Defaults to `document.body`; its theme scope is also used. */\n  container?: HTMLElement | null\n}\n\nconst ContentInner = forwardRef<HTMLDivElement, PopoverContentProps>(function ContentInner(\n  { arrow = false, container, sideOffset, className, children, ...rest },\n  ref,\n) {\n  const theme = usePortalTheme(container)\n  return (\n    <PopoverPrimitive.Content\n      ref={ref}\n      className={cx(styles.content, className)}\n      sideOffset={sideOffset ?? (arrow ? 4 : 6)}\n      collisionPadding={8}\n      {...theme}\n      {...rest}\n    >\n      {children}\n      {arrow ? (\n        <PopoverPrimitive.Arrow asChild width={18} height={9}>\n          <svg className={styles.arrow} viewBox=\"0 0 18 9\" aria-hidden>\n            <path className={styles.arrowFill} d=\"M0 0 L9 9 L18 0 Z\" />\n            <path className={styles.arrowEdge} d=\"M0 0 L9 9 L18 0\" />\n          </svg>\n        </PopoverPrimitive.Arrow>\n      ) : null}\n    </PopoverPrimitive.Content>\n  )\n})\n\n/** The floating panel. `side`, `align` and `sideOffset` follow Radix; it flips to stay on screen. */\nconst PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(function PopoverContent(\n  { container, forceMount, ...rest },\n  ref,\n) {\n  return (\n    <PopoverPrimitive.Portal container={container} forceMount={forceMount}>\n      <ContentInner ref={ref} container={container} forceMount={forceMount} {...rest} />\n    </PopoverPrimitive.Portal>\n  )\n})\n\nexport type PopoverCloseProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Close>\n\nconst PopoverClose = PopoverPrimitive.Close\n\nexport const Popover = Object.assign(PopoverRoot, {\n  Root: PopoverRoot,\n  Trigger: PopoverTrigger,\n  Anchor: PopoverAnchor,\n  Content: PopoverContent,\n  Close: PopoverClose,\n})\n"],"mappings":";;;;;;;AA+BA,SAASI,EAAY,GAAqB;CACxC,IAAMC,IAASC,EAAmB;CAClC,OACE,kBAACC,EAAoB,UAArB;EAA8B,OAAOF;EACnC,UAAA,kBAACL,EAAiB,MAAlB,EAAuB,GAAIS,EAAQ,CAAA;CACP,CAAA;AAElC;AAIA,IAAMC,IAAiBC,EAGrB,SAAwB,GAAO,GAAK;CACpC,IAAMN,IAASO,EAAgB;CAC/B,OAAO,kBAACZ,EAAiB,SAAlB;EAA0B,KAAKa,EAAYC,GAAKT,CAAM;EAAG,GAAII;CAAQ,CAAA;AAC9E,CAAC,GAKKM,IAAgBJ,EACpB,SAAuB,GAAO,GAAK;CACjC,IAAMN,IAASO,EAAgB;CAC/B,OAAO,kBAACZ,EAAiB,QAAlB;EAAyB,KAAKa,EAAYC,GAAKT,CAAM;EAAG,GAAII;CAAQ,CAAA;AAC7E,CACF,GAWMO,IAAeL,EAAgD,SACnE,EAAE,WAAQ,IAAO,cAAW,eAAY,cAAW,aAAU,GAAGM,KAChE,GACA;CACA,IAAMC,IAAQC,EAAeC,CAAS;CACtC,OACE,kBAACpB,EAAiB,SAAlB;EACO;EACL,WAAWqB,EAAGpB,EAAO,SAASqB,CAAS;EACvC,YAAYC,MAAeC,IAAQ,IAAI;EACvC,kBAAkB;EAClB,GAAIN;EACJ,GAAID;EANN,UAAA,CAQGQ,GACAD,IACC,kBAACxB,EAAiB,OAAlB;GAAwB,SAAA;GAAQ,OAAO;GAAI,QAAQ;GACjD,UAAA,kBAAC,OAAD;IAAK,WAAWC,EAAO;IAAO,SAAQ;IAAW,eAAA;IAAjD,UAAA,CACE,kBAAC,QAAD;KAAM,WAAWA,EAAO;KAAW,GAAE;IAAqB,CAAA,GAC1D,kBAAC,QAAD;KAAM,WAAWA,EAAO;KAAW,GAAE;IAAmB,CAAA,CACrD;;EACiB,CAAA,IACtB,IACoB;;AAE9B,CAAC,GAGKyB,IAAiBf,EAAgD,SACrE,EAAE,cAAW,eAAY,GAAGM,KAC5B,GACA;CACA,OACE,kBAACjB,EAAiB,QAAlB;EAAoC;EAAuB;EACzD,UAAA,kBAACgB,GAAD;GAAmB;GAAgB;GAAuB;GAAY,GAAIC;EAAO,CAAA;CAC1D,CAAA;AAE7B,CAAC,GAIKU,IAAe3B,EAAiB,OAEzBE,IAAU,OAAO,OAAOE,GAAa;CAChD,MAAMA;CACN,SAASM;CACT,QAAQK;CACR,SAASW;CACT,OAAOC;AACT,CAAC"}

package/dist/components/overlays/Sheet/Sheet.d.ts

@@ -10,6 +10,14 @@ export interface SheetResponsiveSide {
 }
 export type SheetProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
 /**
+ * A panel that slides in from an edge. A drawer on desktop, a bottom sheet on a phone.
+ *
+ * @remarks
+ * `Sheet` is a dialog that slides in from the side or the bottom. It's built on Radix Dialog, so
+ * it traps focus, closes on Escape or a tap on the scrim, locks page scroll and returns focus to
+ * its trigger.
+ *
+ * @privateRemarks
  * A panel that slides in from an edge: side drawers on desktop, a bottom sheet on a
  * phone. Built on the Radix Dialog, so it traps focus, closes on Escape or a scrim tap,
  * locks page scroll and returns focus to its trigger.

package/dist/components/overlays/Sheet/Sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.js","names":["DialogPrimitive","styles","Sheet_module_default","SheetRoot","anchor","usePortalAnchorRef","PortalAnchorContext","Dialog","props","SheetTrigger","forwardRef","usePortalAnchor","composeRefs","ref","Overlay","theme","usePortalTheme","container","ContentInner","rest","hasHeader","title","description","hideClose","sides","side","anyBottom","cx","className","size","OverlayClose","closeLabel","SheetContent","SheetFooter","SheetTitle","SheetDescription","SheetClose","Sheet"],"sources":["../../../../src/components/overlays/Sheet/Sheet.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ComponentRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { Dialog as DialogPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport {\n  PortalAnchorContext,\n  composeRefs,\n  usePortalAnchor,\n  usePortalAnchorRef,\n  usePortalTheme,\n} from '#components/overlays/usePortalTheme'\nimport { OverlayClose } from '#components/overlays/OverlayClose'\nimport styles from './Sheet.module.css'\n\nexport type SheetSide = 'right' | 'left' | 'bottom'\nexport type SheetSize = 'sm' | 'md' | 'lg'\n/** A side per breakpoint: `{ base: 'bottom', md: 'right' }` — a bottom sheet on phones, a drawer from 48em. */\nexport interface SheetResponsiveSide {\n  base: SheetSide\n  md?: SheetSide\n  lg?: SheetSide\n}\n\nexport type SheetProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Root>\n\n/**\n * A panel that slides in from an edge: side drawers on desktop, a bottom sheet on a\n * phone. Built on the Radix Dialog, so it traps focus, closes on Escape or a scrim tap,\n * locks page scroll and returns focus to its trigger.\n *\n * <Sheet>\n *   <Sheet.Trigger asChild><Button>Your order</Button></Sheet.Trigger>\n *   <Sheet.Content side={{ base: 'bottom', md: 'right' }} title=\"Your order\">…</Sheet.Content>\n * </Sheet>\n */\nfunction SheetRoot(props: SheetProps) {\n  const anchor = usePortalAnchorRef()\n  return (\n    <PortalAnchorContext.Provider value={anchor}>\n      <DialogPrimitive.Root {...props} />\n    </PortalAnchorContext.Provider>\n  )\n}\n\nexport type SheetTriggerProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>\n\nconst SheetTrigger = forwardRef<ComponentRef<typeof DialogPrimitive.Trigger>, SheetTriggerProps>(\n  function SheetTrigger(props, ref) {\n    const anchor = usePortalAnchor()\n    return <DialogPrimitive.Trigger ref={composeRefs(ref, anchor)} {...props} />\n  },\n)\n\nconst Overlay = forwardRef<HTMLDivElement, { container?: HTMLElement | null }>(function Overlay(\n  { container },\n  ref,\n) {\n  const theme = usePortalTheme(container)\n  return <DialogPrimitive.Overlay ref={ref} className={styles.overlay} {...theme} />\n})\n\nexport interface SheetContentProps extends Omit<\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n  'title'\n> {\n  /**\n   * Edge it slides from. `bottom` is the phone pattern and shows a grab handle. Default\n   * `right`. Responsive: `{ base: 'bottom', md: 'right' }` (breakpoints `md` 48em, `lg` 64em).\n   */\n  side?: SheetSide | SheetResponsiveSide\n  /** Width for side sheets, maximum height for bottom sheets. Default `md`. */\n  size?: SheetSize\n  /** Heading and accessible title. If omitted, render a `<Sheet.Title>` yourself. */\n  title?: ReactNode\n  /** Supporting sentence under the title, wired to `aria-describedby`. */\n  description?: ReactNode\n  /** Hide the corner close button. */\n  hideClose?: boolean\n  /** Accessible name of the corner close button. Default \"Close\". */\n  closeLabel?: string\n  /** Portal target. Defaults to `document.body`; its theme scope is also used. */\n  container?: HTMLElement | null\n}\n\nconst ContentInner = forwardRef<HTMLDivElement, SheetContentProps>(function ContentInner(\n  {\n    side = 'right',\n    size = 'md',\n    title,\n    description,\n    hideClose = false,\n    closeLabel,\n    container,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const theme = usePortalTheme(container)\n  const hasHeader = title !== undefined || description !== undefined || !hideClose\n  const sides: SheetResponsiveSide = typeof side === 'string' ? { base: side } : side\n  const anyBottom = sides.base === 'bottom' || sides.md === 'bottom' || sides.lg === 'bottom'\n  return (\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cx(styles.content, className)}\n      data-side={sides.base}\n      data-side-md={sides.md}\n      data-side-lg={sides.lg}\n      data-size={size}\n      {...theme}\n      {...rest}\n    >\n      {/* Rendered whenever any breakpoint is `bottom`; CSS shows it only where it is. */}\n      {anyBottom ? <div className={styles.handle} aria-hidden /> : null}\n      {hasHeader ? (\n        <div className={styles.header}>\n          <div className={styles.heading}>\n            {title !== undefined ? (\n              <DialogPrimitive.Title className={styles.title}>{title}</DialogPrimitive.Title>\n            ) : null}\n            {description !== undefined ? (\n              <DialogPrimitive.Description className={styles.description}>\n                {description}\n              </DialogPrimitive.Description>\n            ) : null}\n          </div>\n          {hideClose ? null : <OverlayClose label={closeLabel} />}\n        </div>\n      ) : null}\n      <div className={styles.body}>{children}</div>\n    </DialogPrimitive.Content>\n  )\n})\n\n/** The panel, its scrim and the portal. The body scrolls; header and footer stay put. */\nconst SheetContent = forwardRef<HTMLDivElement, SheetContentProps>(function SheetContent(\n  { container, forceMount, ...rest },\n  ref,\n) {\n  return (\n    <DialogPrimitive.Portal container={container} forceMount={forceMount}>\n      <Overlay container={container} />\n      <ContentInner ref={ref} container={container} forceMount={forceMount} {...rest} />\n    </DialogPrimitive.Portal>\n  )\n})\n\nexport type SheetFooterProps = HTMLAttributes<HTMLDivElement>\n\n/** Actions pinned to the bottom of the sheet (sticky inside the scrolling body). */\nconst SheetFooter = forwardRef<HTMLDivElement, SheetFooterProps>(function SheetFooter(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.footer, className)} {...rest} />\n})\n\nexport type SheetTitleProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n\nconst SheetTitle = forwardRef<ComponentRef<typeof DialogPrimitive.Title>, SheetTitleProps>(\n  function SheetTitle({ className, ...rest }, ref) {\n    return <DialogPrimitive.Title ref={ref} className={cx(styles.title, className)} {...rest} />\n  },\n)\n\nexport type SheetDescriptionProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n\nconst SheetDescription = forwardRef<\n  ComponentRef<typeof DialogPrimitive.Description>,\n  SheetDescriptionProps\n>(function SheetDescription({ className, ...rest }, ref) {\n  return (\n    <DialogPrimitive.Description\n      ref={ref}\n      className={cx(styles.description, className)}\n      {...rest}\n    />\n  )\n})\n\nexport type SheetCloseProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Close>\n\nconst SheetClose = DialogPrimitive.Close\n\nexport const Sheet = Object.assign(SheetRoot, {\n  Root: SheetRoot,\n  Trigger: SheetTrigger,\n  Content: SheetContent,\n  Footer: SheetFooter,\n  Title: SheetTitle,\n  Description: SheetDescription,\n  Close: SheetClose,\n})\n"],"mappings":";;;;;;;;AAwCA,SAASG,EAAU,GAAmB;CACpC,IAAMC,IAASC,EAAmB;CAClC,OACE,kBAACC,EAAoB,UAArB;EAA8B,OAAOF;EACnC,UAAA,kBAACJ,EAAgB,MAAjB,EAAsB,GAAIQ,EAAQ,CAAA;CACN,CAAA;AAElC;AAIA,IAAMC,IAAeC,EACnB,SAAsB,GAAO,GAAK;CAChC,IAAMN,IAASO,EAAgB;CAC/B,OAAO,kBAACX,EAAgB,SAAjB;EAAyB,KAAKY,EAAYC,GAAKT,CAAM;EAAG,GAAII;CAAQ,CAAA;AAC7E,CACF,GAEMM,IAAUJ,EAA+D,SAC7E,EAAE,gBACF,GACA;CACA,IAAMK,IAAQC,EAAeC,CAAS;CACtC,OAAO,kBAACjB,EAAgB,SAAjB;EAA8B;EAAK,WAAWC,EAAO;EAAS,GAAIc;CAAQ,CAAA;AACnF,CAAC,GAyBKG,IAAeR,EAA8C,SACjE,EACE,UAAO,SACP,UAAO,MACP,UACA,gBACA,eAAY,IACZ,eACA,cACA,cACA,aACA,GAAGS,KAEL,GACA;CACA,IAAMJ,IAAQC,EAAeC,CAAS,GAChCG,IAAYC,MAAU,KAAA,KAAaC,MAAgB,KAAA,KAAa,CAACC,GACjEC,IAA6B,OAAOC,KAAS,WAAW,EAAE,MAAMA,EAAK,IAAIA,GACzEC,IAAYF,EAAM,SAAS,YAAYA,EAAM,OAAO,YAAYA,EAAM,OAAO;CACnF,OACE,kBAACxB,EAAgB,SAAjB;EACO;EACL,WAAW2B,EAAG1B,EAAO,SAAS2B,CAAS;EACvC,aAAWJ,EAAM;EACjB,gBAAcA,EAAM;EACpB,gBAAcA,EAAM;EACpB,aAAWK;EACX,GAAId;EACJ,GAAII;EARN,UAAA;GAWGO,IAAY,kBAAC,OAAD;IAAK,WAAWzB,EAAO;IAAQ,eAAA;GAAa,CAAA,IAAI;GAC5DmB,IACC,kBAAC,OAAD;IAAK,WAAWnB,EAAO;IAAvB,UAAA,CACE,kBAAC,OAAD;KAAK,WAAWA,EAAO;KAAvB,UAAA,CACGoB,MAAU,KAAA,IAEP,OADF,kBAACrB,EAAgB,OAAjB;MAAuB,WAAWC,EAAO;MAAQ,UAAAoB;KAA6B,CAAA,GAE/EC,MAAgB,KAAA,IAIb,OAHF,kBAACtB,EAAgB,aAAjB;MAA6B,WAAWC,EAAO;MAC5C,UAAAqB;KAC0B,CAAA,CAE5B;IACJ,CAAA,GAAAC,IAAY,OAAO,kBAACO,GAAD,EAAc,OAAOC,EAAa,CAAA,CACnD;GACH,CAAA,IAAA;GACJ,kBAAC,OAAD;IAAK,WAAW9B,EAAO;IAAO;GAAc,CAAA;EACrB;;AAE7B,CAAC,GAGK+B,IAAetB,EAA8C,SACjE,EAAE,cAAW,eAAY,GAAGS,KAC5B,GACA;CACA,OACE,kBAACnB,EAAgB,QAAjB;EAAmC;EAAuB;EAA1D,UAAA,CACE,kBAACc,GAAD,EAAoB,aAAY,CAAA,GAChC,kBAACI,GAAD;GAAmB;GAAgB;GAAuB;GAAY,GAAIC;EAAO,CAAA,CAC3D;;AAE5B,CAAC,GAKKc,IAAcvB,EAA6C,SAC/D,EAAE,cAAW,GAAGS,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWQ,EAAG1B,EAAO,QAAQ2B,CAAS;EAAG,GAAIT;CAAO,CAAA;AAC5E,CAAC,GAIKe,IAAaxB,EACjB,SAAoB,EAAE,cAAW,GAAGS,KAAQ,GAAK;CAC/C,OAAO,kBAACnB,EAAgB,OAAjB;EAA4B;EAAK,WAAW2B,EAAG1B,EAAO,OAAO2B,CAAS;EAAG,GAAIT;CAAO,CAAA;AAC7F,CACF,GAIMgB,IAAmBzB,EAGvB,SAA0B,EAAE,cAAW,GAAGS,KAAQ,GAAK;CACvD,OACE,kBAACnB,EAAgB,aAAjB;EACO;EACL,WAAW2B,EAAG1B,EAAO,aAAa2B,CAAS;EAC3C,GAAIT;CACL,CAAA;AAEL,CAAC,GAIKiB,IAAapC,EAAgB,OAEtBqC,IAAQ,OAAO,OAAOlC,GAAW;CAC5C,MAAMA;CACN,SAASM;CACT,SAASuB;CACT,QAAQC;CACR,OAAOC;CACP,aAAaC;CACb,OAAOC;AACT,CAAC"}
+{"version":3,"file":"Sheet.js","names":["DialogPrimitive","styles","Sheet_module_default","SheetRoot","anchor","usePortalAnchorRef","PortalAnchorContext","Dialog","props","SheetTrigger","forwardRef","usePortalAnchor","composeRefs","ref","Overlay","theme","usePortalTheme","container","ContentInner","rest","hasHeader","title","description","hideClose","sides","side","anyBottom","cx","className","size","OverlayClose","closeLabel","SheetContent","SheetFooter","SheetTitle","SheetDescription","SheetClose","Sheet"],"sources":["../../../../src/components/overlays/Sheet/Sheet.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ComponentRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { Dialog as DialogPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport {\n  PortalAnchorContext,\n  composeRefs,\n  usePortalAnchor,\n  usePortalAnchorRef,\n  usePortalTheme,\n} from '#components/overlays/usePortalTheme'\nimport { OverlayClose } from '#components/overlays/OverlayClose'\nimport styles from './Sheet.module.css'\n\nexport type SheetSide = 'right' | 'left' | 'bottom'\nexport type SheetSize = 'sm' | 'md' | 'lg'\n/** A side per breakpoint: `{ base: 'bottom', md: 'right' }` — a bottom sheet on phones, a drawer from 48em. */\nexport interface SheetResponsiveSide {\n  base: SheetSide\n  md?: SheetSide\n  lg?: SheetSide\n}\n\nexport type SheetProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Root>\n\n/**\n * A panel that slides in from an edge. A drawer on desktop, a bottom sheet on a phone.\n *\n * @remarks\n * `Sheet` is a dialog that slides in from the side or the bottom. It's built on Radix Dialog, so\n * it traps focus, closes on Escape or a tap on the scrim, locks page scroll and returns focus to\n * its trigger.\n *\n * @privateRemarks\n * A panel that slides in from an edge: side drawers on desktop, a bottom sheet on a\n * phone. Built on the Radix Dialog, so it traps focus, closes on Escape or a scrim tap,\n * locks page scroll and returns focus to its trigger.\n *\n * <Sheet>\n *   <Sheet.Trigger asChild><Button>Your order</Button></Sheet.Trigger>\n *   <Sheet.Content side={{ base: 'bottom', md: 'right' }} title=\"Your order\">…</Sheet.Content>\n * </Sheet>\n */\nfunction SheetRoot(props: SheetProps) {\n  const anchor = usePortalAnchorRef()\n  return (\n    <PortalAnchorContext.Provider value={anchor}>\n      <DialogPrimitive.Root {...props} />\n    </PortalAnchorContext.Provider>\n  )\n}\n\nexport type SheetTriggerProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>\n\nconst SheetTrigger = forwardRef<ComponentRef<typeof DialogPrimitive.Trigger>, SheetTriggerProps>(\n  function SheetTrigger(props, ref) {\n    const anchor = usePortalAnchor()\n    return <DialogPrimitive.Trigger ref={composeRefs(ref, anchor)} {...props} />\n  },\n)\n\nconst Overlay = forwardRef<HTMLDivElement, { container?: HTMLElement | null }>(function Overlay(\n  { container },\n  ref,\n) {\n  const theme = usePortalTheme(container)\n  return <DialogPrimitive.Overlay ref={ref} className={styles.overlay} {...theme} />\n})\n\nexport interface SheetContentProps extends Omit<\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n  'title'\n> {\n  /**\n   * Edge it slides from. `bottom` is the phone pattern and shows a grab handle. Default\n   * `right`. Responsive: `{ base: 'bottom', md: 'right' }` (breakpoints `md` 48em, `lg` 64em).\n   */\n  side?: SheetSide | SheetResponsiveSide\n  /** Width for side sheets, maximum height for bottom sheets. Default `md`. */\n  size?: SheetSize\n  /** Heading and accessible title. If omitted, render a `<Sheet.Title>` yourself. */\n  title?: ReactNode\n  /** Supporting sentence under the title, wired to `aria-describedby`. */\n  description?: ReactNode\n  /** Hide the corner close button. */\n  hideClose?: boolean\n  /** Accessible name of the corner close button. Default \"Close\". */\n  closeLabel?: string\n  /** Portal target. Defaults to `document.body`; its theme scope is also used. */\n  container?: HTMLElement | null\n}\n\nconst ContentInner = forwardRef<HTMLDivElement, SheetContentProps>(function ContentInner(\n  {\n    side = 'right',\n    size = 'md',\n    title,\n    description,\n    hideClose = false,\n    closeLabel,\n    container,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const theme = usePortalTheme(container)\n  const hasHeader = title !== undefined || description !== undefined || !hideClose\n  const sides: SheetResponsiveSide = typeof side === 'string' ? { base: side } : side\n  const anyBottom = sides.base === 'bottom' || sides.md === 'bottom' || sides.lg === 'bottom'\n  return (\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cx(styles.content, className)}\n      data-side={sides.base}\n      data-side-md={sides.md}\n      data-side-lg={sides.lg}\n      data-size={size}\n      {...theme}\n      {...rest}\n    >\n      {/* Rendered whenever any breakpoint is `bottom`; CSS shows it only where it is. */}\n      {anyBottom ? <div className={styles.handle} aria-hidden /> : null}\n      {hasHeader ? (\n        <div className={styles.header}>\n          <div className={styles.heading}>\n            {title !== undefined ? (\n              <DialogPrimitive.Title className={styles.title}>{title}</DialogPrimitive.Title>\n            ) : null}\n            {description !== undefined ? (\n              <DialogPrimitive.Description className={styles.description}>\n                {description}\n              </DialogPrimitive.Description>\n            ) : null}\n          </div>\n          {hideClose ? null : <OverlayClose label={closeLabel} />}\n        </div>\n      ) : null}\n      <div className={styles.body}>{children}</div>\n    </DialogPrimitive.Content>\n  )\n})\n\n/** The panel, its scrim and the portal. The body scrolls; header and footer stay put. */\nconst SheetContent = forwardRef<HTMLDivElement, SheetContentProps>(function SheetContent(\n  { container, forceMount, ...rest },\n  ref,\n) {\n  return (\n    <DialogPrimitive.Portal container={container} forceMount={forceMount}>\n      <Overlay container={container} />\n      <ContentInner ref={ref} container={container} forceMount={forceMount} {...rest} />\n    </DialogPrimitive.Portal>\n  )\n})\n\nexport type SheetFooterProps = HTMLAttributes<HTMLDivElement>\n\n/** Actions pinned to the bottom of the sheet (sticky inside the scrolling body). */\nconst SheetFooter = forwardRef<HTMLDivElement, SheetFooterProps>(function SheetFooter(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.footer, className)} {...rest} />\n})\n\nexport type SheetTitleProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n\nconst SheetTitle = forwardRef<ComponentRef<typeof DialogPrimitive.Title>, SheetTitleProps>(\n  function SheetTitle({ className, ...rest }, ref) {\n    return <DialogPrimitive.Title ref={ref} className={cx(styles.title, className)} {...rest} />\n  },\n)\n\nexport type SheetDescriptionProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n\nconst SheetDescription = forwardRef<\n  ComponentRef<typeof DialogPrimitive.Description>,\n  SheetDescriptionProps\n>(function SheetDescription({ className, ...rest }, ref) {\n  return (\n    <DialogPrimitive.Description\n      ref={ref}\n      className={cx(styles.description, className)}\n      {...rest}\n    />\n  )\n})\n\nexport type SheetCloseProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Close>\n\nconst SheetClose = DialogPrimitive.Close\n\nexport const Sheet = Object.assign(SheetRoot, {\n  Root: SheetRoot,\n  Trigger: SheetTrigger,\n  Content: SheetContent,\n  Footer: SheetFooter,\n  Title: SheetTitle,\n  Description: SheetDescription,\n  Close: SheetClose,\n})\n"],"mappings":";;;;;;;;AAgDA,SAASG,EAAU,GAAmB;CACpC,IAAMC,IAASC,EAAmB;CAClC,OACE,kBAACC,EAAoB,UAArB;EAA8B,OAAOF;EACnC,UAAA,kBAACJ,EAAgB,MAAjB,EAAsB,GAAIQ,EAAQ,CAAA;CACN,CAAA;AAElC;AAIA,IAAMC,IAAeC,EACnB,SAAsB,GAAO,GAAK;CAChC,IAAMN,IAASO,EAAgB;CAC/B,OAAO,kBAACX,EAAgB,SAAjB;EAAyB,KAAKY,EAAYC,GAAKT,CAAM;EAAG,GAAII;CAAQ,CAAA;AAC7E,CACF,GAEMM,IAAUJ,EAA+D,SAC7E,EAAE,gBACF,GACA;CACA,IAAMK,IAAQC,EAAeC,CAAS;CACtC,OAAO,kBAACjB,EAAgB,SAAjB;EAA8B;EAAK,WAAWC,EAAO;EAAS,GAAIc;CAAQ,CAAA;AACnF,CAAC,GAyBKG,IAAeR,EAA8C,SACjE,EACE,UAAO,SACP,UAAO,MACP,UACA,gBACA,eAAY,IACZ,eACA,cACA,cACA,aACA,GAAGS,KAEL,GACA;CACA,IAAMJ,IAAQC,EAAeC,CAAS,GAChCG,IAAYC,MAAU,KAAA,KAAaC,MAAgB,KAAA,KAAa,CAACC,GACjEC,IAA6B,OAAOC,KAAS,WAAW,EAAE,MAAMA,EAAK,IAAIA,GACzEC,IAAYF,EAAM,SAAS,YAAYA,EAAM,OAAO,YAAYA,EAAM,OAAO;CACnF,OACE,kBAACxB,EAAgB,SAAjB;EACO;EACL,WAAW2B,EAAG1B,EAAO,SAAS2B,CAAS;EACvC,aAAWJ,EAAM;EACjB,gBAAcA,EAAM;EACpB,gBAAcA,EAAM;EACpB,aAAWK;EACX,GAAId;EACJ,GAAII;EARN,UAAA;GAWGO,IAAY,kBAAC,OAAD;IAAK,WAAWzB,EAAO;IAAQ,eAAA;GAAa,CAAA,IAAI;GAC5DmB,IACC,kBAAC,OAAD;IAAK,WAAWnB,EAAO;IAAvB,UAAA,CACE,kBAAC,OAAD;KAAK,WAAWA,EAAO;KAAvB,UAAA,CACGoB,MAAU,KAAA,IAEP,OADF,kBAACrB,EAAgB,OAAjB;MAAuB,WAAWC,EAAO;MAAQ,UAAAoB;KAA6B,CAAA,GAE/EC,MAAgB,KAAA,IAIb,OAHF,kBAACtB,EAAgB,aAAjB;MAA6B,WAAWC,EAAO;MAC5C,UAAAqB;KAC0B,CAAA,CAE5B;IACJ,CAAA,GAAAC,IAAY,OAAO,kBAACO,GAAD,EAAc,OAAOC,EAAa,CAAA,CACnD;GACH,CAAA,IAAA;GACJ,kBAAC,OAAD;IAAK,WAAW9B,EAAO;IAAO;GAAc,CAAA;EACrB;;AAE7B,CAAC,GAGK+B,IAAetB,EAA8C,SACjE,EAAE,cAAW,eAAY,GAAGS,KAC5B,GACA;CACA,OACE,kBAACnB,EAAgB,QAAjB;EAAmC;EAAuB;EAA1D,UAAA,CACE,kBAACc,GAAD,EAAoB,aAAY,CAAA,GAChC,kBAACI,GAAD;GAAmB;GAAgB;GAAuB;GAAY,GAAIC;EAAO,CAAA,CAC3D;;AAE5B,CAAC,GAKKc,IAAcvB,EAA6C,SAC/D,EAAE,cAAW,GAAGS,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWQ,EAAG1B,EAAO,QAAQ2B,CAAS;EAAG,GAAIT;CAAO,CAAA;AAC5E,CAAC,GAIKe,IAAaxB,EACjB,SAAoB,EAAE,cAAW,GAAGS,KAAQ,GAAK;CAC/C,OAAO,kBAACnB,EAAgB,OAAjB;EAA4B;EAAK,WAAW2B,EAAG1B,EAAO,OAAO2B,CAAS;EAAG,GAAIT;CAAO,CAAA;AAC7F,CACF,GAIMgB,IAAmBzB,EAGvB,SAA0B,EAAE,cAAW,GAAGS,KAAQ,GAAK;CACvD,OACE,kBAACnB,EAAgB,aAAjB;EACO;EACL,WAAW2B,EAAG1B,EAAO,aAAa2B,CAAS;EAC3C,GAAIT;CACL,CAAA;AAEL,CAAC,GAIKiB,IAAapC,EAAgB,OAEtBqC,IAAQ,OAAO,OAAOlC,GAAW;CAC5C,MAAMA;CACN,SAASM;CACT,SAASuB;CACT,QAAQC;CACR,OAAOC;CACP,aAAaC;CACb,OAAOC;AACT,CAAC"}

package/dist/components/overlays/Tooltip/Tooltip.d.ts

@@ -27,6 +27,14 @@ export interface TooltipProps extends Omit<ComponentPropsWithoutRef<typeof Toolt
     container?: HTMLElement | null;
 }
 /**
+ * A short label that appears on hover and keyboard focus. Never for anything interactive.
+ *
+ * @remarks
+ * `Tooltip` shows a short label beside its trigger on hover and on keyboard focus. It's portalled,
+ * so an `overflow: hidden` parent never clips it. Keep it to a few words, and never put anything
+ * interactive in it: use a {@link Popover | Popover} for that.
+ *
+ * @privateRemarks
  * A small label that appears on hover and on keyboard focus. Portalled, so it's never
  * clipped by an `overflow: hidden` card. Not for anything interactive — use `Popover`.
  *

package/dist/components/overlays/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["TooltipPrimitive","styles","Tooltip","Tooltip_module_default","HasProvider","createContext","TooltipProvider","rest","Tooltip","ContentInner","forwardRef","theme","usePortalTheme","container","cx","className","children","Tooltip$1","hasProvider","useContext","anchor","usePortalAnchorRef","tooltip","PortalAnchorContext","delay","composeRefs","content"],"sources":["../../../../src/components/overlays/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { Tooltip as TooltipPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport {\n  PortalAnchorContext,\n  composeRefs,\n  usePortalAnchorRef,\n  usePortalTheme,\n} from '#components/overlays/usePortalTheme'\nimport styles from './Tooltip.module.css'\n\nconst HasProvider = createContext(false)\n\nexport type TooltipProviderProps = ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>\n\n/**\n * Shares open/skip delays between tooltips, so moving along a toolbar shows each hint\n * instantly after the first. Put one near the app root. Tooltips work without it.\n */\nexport function TooltipProvider({\n  delayDuration = 500,\n  skipDelayDuration = 300,\n  ...rest\n}: TooltipProviderProps) {\n  return (\n    <HasProvider.Provider value>\n      <TooltipPrimitive.Provider\n        delayDuration={delayDuration}\n        skipDelayDuration={skipDelayDuration}\n        {...rest}\n      />\n    </HasProvider.Provider>\n  )\n}\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left'\nexport type TooltipAlign = 'start' | 'center' | 'end'\n\nexport interface TooltipProps extends Omit<\n  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n  'content' | 'side' | 'align' | 'children'\n> {\n  /** The hint. Short — a label or one sentence. It's announced as the trigger's description. */\n  content: ReactNode\n  /**\n   * The trigger: a single focusable element (a button or link). It receives the ref and\n   * event handlers, so custom components must forward both.\n   */\n  children: ReactElement\n  side?: TooltipSide\n  align?: TooltipAlign\n  /** Hover delay before opening, in ms. Keyboard focus opens immediately. */\n  delay?: number\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Portal target. Defaults to `document.body`; its theme scope is also used. */\n  container?: HTMLElement | null\n}\n\nconst ContentInner = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & { container?: HTMLElement | null }\n>(function ContentInner({ container, className, children, ...rest }, ref) {\n  const theme = usePortalTheme(container)\n  return (\n    <TooltipPrimitive.Content\n      ref={ref}\n      className={cx(styles.content, className)}\n      collisionPadding={8}\n      {...theme}\n      {...rest}\n    >\n      {children}\n      <TooltipPrimitive.Arrow className={styles.arrow} width={10} height={5} />\n    </TooltipPrimitive.Content>\n  )\n})\n\n/**\n * A small label that appears on hover and on keyboard focus. Portalled, so it's never\n * clipped by an `overflow: hidden` card. Not for anything interactive — use `Popover`.\n *\n * <Tooltip content=\"Copy link\"><IconButton … /></Tooltip>\n */\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  {\n    content,\n    children,\n    side = 'top',\n    align = 'center',\n    delay,\n    open,\n    defaultOpen,\n    onOpenChange,\n    container,\n    sideOffset = 6,\n    ...rest\n  },\n  ref,\n) {\n  const hasProvider = useContext(HasProvider)\n  const anchor = usePortalAnchorRef()\n  const tooltip = (\n    <PortalAnchorContext.Provider value={anchor}>\n      <TooltipPrimitive.Root\n        delayDuration={delay}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n      >\n        <TooltipPrimitive.Trigger asChild ref={composeRefs(anchor)}>\n          {children}\n        </TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={container}>\n          <ContentInner\n            ref={ref}\n            container={container}\n            side={side}\n            align={align}\n            sideOffset={sideOffset}\n            {...rest}\n          >\n            {content}\n          </ContentInner>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </PortalAnchorContext.Provider>\n  )\n  return hasProvider ? tooltip : <TooltipProvider>{tooltip}</TooltipProvider>\n})\n"],"mappings":";;;;;;;AAkBA,IAAMI,IAAcC,EAAc,EAAK;AAQvC,SAAgBC,EAAgB,EAC9B,mBAAgB,KAChB,uBAAoB,KACpB,GAAGC,KACoB;CACvB,OACE,kBAACH,EAAY,UAAb;EAAsB,OAAA;EACpB,UAAA,kBAACJ,EAAiB,UAAlB;GACiB;GACI;GACnB,GAAIO;EACL,CAAA;CACmB,CAAA;AAE1B;AA2BA,IAAME,IAAeC,EAGnB,SAAsB,EAAE,cAAW,cAAW,aAAU,GAAGH,KAAQ,GAAK;CACxE,IAAMI,IAAQC,EAAeC,CAAS;CACtC,OACE,kBAACb,EAAiB,SAAlB;EACO;EACL,WAAWc,EAAGb,EAAO,SAASc,CAAS;EACvC,kBAAkB;EAClB,GAAIJ;EACJ,GAAIJ;EALN,UAAA,CAOGS,GACD,kBAAChB,EAAiB,OAAlB;GAAwB,WAAWC,EAAO;GAAO,OAAO;GAAI,QAAQ;EAAI,CAAA,CAChD;;AAE9B,CAAC,GAQYC,IAAUQ,EAAyC,SAC9D,EACE,YACA,aACA,UAAO,OACP,WAAQ,UACR,UACA,SACA,gBACA,iBACA,cACA,gBAAa,GACb,GAAGH,KAEL,GACA;CACA,IAAMW,IAAcC,EAAWf,CAAW,GACpCgB,IAASC,EAAmB,GAC5BC,IACJ,kBAACC,EAAoB,UAArB;EAA8B,OAAOH;EACnC,UAAA,kBAACpB,EAAiB,MAAlB;GACE,eAAewB;GACT;GACO;GACC;GAJhB,UAAA,CAME,kBAACxB,EAAiB,SAAlB;IAA0B,SAAA;IAAQ,KAAKyB,EAAYL,CAAM;IACtD;GACuB,CAAA,GAC1B,kBAACpB,EAAiB,QAAlB;IAAoC;IAClC,UAAA,kBAACS,GAAD;KACO;KACM;KACL;KACC;KACK;KACZ,GAAIF;KAEH,UAAAmB;IACW,CAAA;GACS,CAAA,CACJ;;CACK,CAAA;CAEhC,OAAOR,IAAcI,IAAU,kBAAChB,GAAD,EAAA,UAAkBgB,EAAyB,CAAA;AAC5E,CAAC"}
+{"version":3,"file":"Tooltip.js","names":["TooltipPrimitive","styles","Tooltip","Tooltip_module_default","HasProvider","createContext","TooltipProvider","rest","Tooltip","ContentInner","forwardRef","theme","usePortalTheme","container","cx","className","children","Tooltip$1","hasProvider","useContext","anchor","usePortalAnchorRef","tooltip","PortalAnchorContext","delay","composeRefs","content"],"sources":["../../../../src/components/overlays/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { Tooltip as TooltipPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport {\n  PortalAnchorContext,\n  composeRefs,\n  usePortalAnchorRef,\n  usePortalTheme,\n} from '#components/overlays/usePortalTheme'\nimport styles from './Tooltip.module.css'\n\nconst HasProvider = createContext(false)\n\nexport type TooltipProviderProps = ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>\n\n/**\n * Shares open/skip delays between tooltips, so moving along a toolbar shows each hint\n * instantly after the first. Put one near the app root. Tooltips work without it.\n */\nexport function TooltipProvider({\n  delayDuration = 500,\n  skipDelayDuration = 300,\n  ...rest\n}: TooltipProviderProps) {\n  return (\n    <HasProvider.Provider value>\n      <TooltipPrimitive.Provider\n        delayDuration={delayDuration}\n        skipDelayDuration={skipDelayDuration}\n        {...rest}\n      />\n    </HasProvider.Provider>\n  )\n}\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left'\nexport type TooltipAlign = 'start' | 'center' | 'end'\n\nexport interface TooltipProps extends Omit<\n  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n  'content' | 'side' | 'align' | 'children'\n> {\n  /** The hint. Short — a label or one sentence. It's announced as the trigger's description. */\n  content: ReactNode\n  /**\n   * The trigger: a single focusable element (a button or link). It receives the ref and\n   * event handlers, so custom components must forward both.\n   */\n  children: ReactElement\n  side?: TooltipSide\n  align?: TooltipAlign\n  /** Hover delay before opening, in ms. Keyboard focus opens immediately. */\n  delay?: number\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Portal target. Defaults to `document.body`; its theme scope is also used. */\n  container?: HTMLElement | null\n}\n\nconst ContentInner = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & { container?: HTMLElement | null }\n>(function ContentInner({ container, className, children, ...rest }, ref) {\n  const theme = usePortalTheme(container)\n  return (\n    <TooltipPrimitive.Content\n      ref={ref}\n      className={cx(styles.content, className)}\n      collisionPadding={8}\n      {...theme}\n      {...rest}\n    >\n      {children}\n      <TooltipPrimitive.Arrow className={styles.arrow} width={10} height={5} />\n    </TooltipPrimitive.Content>\n  )\n})\n\n/**\n * A short label that appears on hover and keyboard focus. Never for anything interactive.\n *\n * @remarks\n * `Tooltip` shows a short label beside its trigger on hover and on keyboard focus. It's portalled,\n * so an `overflow: hidden` parent never clips it. Keep it to a few words, and never put anything\n * interactive in it: use a {@link Popover | Popover} for that.\n *\n * @privateRemarks\n * A small label that appears on hover and on keyboard focus. Portalled, so it's never\n * clipped by an `overflow: hidden` card. Not for anything interactive — use `Popover`.\n *\n * <Tooltip content=\"Copy link\"><IconButton … /></Tooltip>\n */\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  {\n    content,\n    children,\n    side = 'top',\n    align = 'center',\n    delay,\n    open,\n    defaultOpen,\n    onOpenChange,\n    container,\n    sideOffset = 6,\n    ...rest\n  },\n  ref,\n) {\n  const hasProvider = useContext(HasProvider)\n  const anchor = usePortalAnchorRef()\n  const tooltip = (\n    <PortalAnchorContext.Provider value={anchor}>\n      <TooltipPrimitive.Root\n        delayDuration={delay}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n      >\n        <TooltipPrimitive.Trigger asChild ref={composeRefs(anchor)}>\n          {children}\n        </TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={container}>\n          <ContentInner\n            ref={ref}\n            container={container}\n            side={side}\n            align={align}\n            sideOffset={sideOffset}\n            {...rest}\n          >\n            {content}\n          </ContentInner>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </PortalAnchorContext.Provider>\n  )\n  return hasProvider ? tooltip : <TooltipProvider>{tooltip}</TooltipProvider>\n})\n"],"mappings":";;;;;;;AAkBA,IAAMI,IAAcC,EAAc,EAAK;AAQvC,SAAgBC,EAAgB,EAC9B,mBAAgB,KAChB,uBAAoB,KACpB,GAAGC,KACoB;CACvB,OACE,kBAACH,EAAY,UAAb;EAAsB,OAAA;EACpB,UAAA,kBAACJ,EAAiB,UAAlB;GACiB;GACI;GACnB,GAAIO;EACL,CAAA;CACmB,CAAA;AAE1B;AA2BA,IAAME,IAAeC,EAGnB,SAAsB,EAAE,cAAW,cAAW,aAAU,GAAGH,KAAQ,GAAK;CACxE,IAAMI,IAAQC,EAAeC,CAAS;CACtC,OACE,kBAACb,EAAiB,SAAlB;EACO;EACL,WAAWc,EAAGb,EAAO,SAASc,CAAS;EACvC,kBAAkB;EAClB,GAAIJ;EACJ,GAAIJ;EALN,UAAA,CAOGS,GACD,kBAAChB,EAAiB,OAAlB;GAAwB,WAAWC,EAAO;GAAO,OAAO;GAAI,QAAQ;EAAI,CAAA,CAChD;;AAE9B,CAAC,GAgBYC,IAAUQ,EAAyC,SAC9D,EACE,YACA,aACA,UAAO,OACP,WAAQ,UACR,UACA,SACA,gBACA,iBACA,cACA,gBAAa,GACb,GAAGH,KAEL,GACA;CACA,IAAMW,IAAcC,EAAWf,CAAW,GACpCgB,IAASC,EAAmB,GAC5BC,IACJ,kBAACC,EAAoB,UAArB;EAA8B,OAAOH;EACnC,UAAA,kBAACpB,EAAiB,MAAlB;GACE,eAAewB;GACT;GACO;GACC;GAJhB,UAAA,CAME,kBAACxB,EAAiB,SAAlB;IAA0B,SAAA;IAAQ,KAAKyB,EAAYL,CAAM;IACtD;GACuB,CAAA,GAC1B,kBAACpB,EAAiB,QAAlB;IAAoC;IAClC,UAAA,kBAACS,GAAD;KACO;KACM;KACL;KACC;KACK;KACZ,GAAIF;KAEH,UAAAmB;IACW,CAAA;GACS,CAAA,CACJ;;CACK,CAAA;CAEhC,OAAOR,IAAcI,IAAU,kBAAChB,GAAD,EAAA,UAAkBgB,EAAyB,CAAA;AAC5E,CAAC"}

package/dist/components/typography/Amount/Amount.d.ts

@@ -18,6 +18,14 @@ export interface AmountProps extends Omit<NumeralProps, 'format' | 'signDisplay'
     format?: Intl.NumberFormatOptions;
 }
 /**
+ * Money, formatted for its currency and locale, in tabular figures, with an accounting style for
+ * negatives.
+ *
+ * @remarks
+ * `Amount` is a {@link Numeral | Numeral} for money. It formats the currency for the locale, uses
+ * tabular figures and a true minus sign, and can show negatives in parentheses like a ledger.
+ *
+ * @privateRemarks
  * Money. Built on <Numeral>: tabular figures in the theme's numeric face, a true minus,
  * en-AU / AUD by default. A currency the locale has no symbol for shows its narrow symbol
  * when that is unambiguous (GBP → £ in en-AU) and its ISO code otherwise (USD in en-AU).

package/dist/components/typography/Amount/Amount.js.map

@@ -1 +1 @@
-{"version":3,"file":"Amount.js","names":["styles","_Fragment","Amount_module_default","Fragment$1","SHARED_NARROW_SYMBOLS","defaultCurrencyDisplay","symbolOf","locale","display","part","currency","narrow","Amount","forwardRef","rest","digits","precision","compact","options","accounting","showSign","format","pad","signOf","value","resolvedTone","tone","Numeral","cx","className","suffix"],"sources":["../../../../src/components/typography/Amount/Amount.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { cx } from '#utils/cx'\nimport { Numeral, signOf, type NumeralProps } from '#components/typography/Numeral'\nimport styles from './Amount.module.css'\n\n/** Narrow symbols several common currencies share: showing one alone would misstate the currency. */\nconst SHARED_NARROW_SYMBOLS = new Set(['$', '¥', 'kr', 'Kr', '₩', '₱', 'Rs'])\n\n/**\n * `symbol` when the locale has a symbol for the currency (AUD in en-AU → \"$\", GBP in en-GB\n * → \"£\"); otherwise `narrowSymbol` (GBP in en-AU → \"£\", not \"GBP\"), unless that narrow\n * symbol is shared (USD in en-AU stays \"USD\", never a bare \"$\" that reads as AUD).\n */\nfunction defaultCurrencyDisplay(\n  locale: string,\n  currency: string,\n): Intl.NumberFormatOptions['currencyDisplay'] {\n  try {\n    const symbolOf = (display: 'symbol' | 'narrowSymbol') =>\n      new Intl.NumberFormat(locale, { style: 'currency', currency, currencyDisplay: display })\n        .formatToParts(1)\n        .find((part) => part.type === 'currency')?.value\n    if (symbolOf('symbol') !== currency.toUpperCase()) return 'symbol'\n    const narrow = symbolOf('narrowSymbol')\n    return narrow !== undefined && !SHARED_NARROW_SYMBOLS.has(narrow) ? 'narrowSymbol' : 'symbol'\n  } catch {\n    return 'symbol'\n  }\n}\n\nexport interface AmountProps extends Omit<NumeralProps, 'format' | 'signDisplay'> {\n  /** ISO 4217 code. Default `AUD`. */\n  currency?: string\n  /** Fraction digits. Default 2 (0 for compact unless set). */\n  precision?: number\n  /** Show `+` on positive amounts (and `−` on negatives, as always). */\n  showSign?: boolean\n  /**\n   * Accounting style: negatives in parentheses and in the critical tone. Non-negative\n   * amounts reserve the width of the \")\" (invisibly), so decimals line up with the\n   * bracketed negatives in a right-aligned column.\n   */\n  accounting?: boolean\n  /** Short form for big figures: `$1.2M`. */\n  compact?: boolean\n  /** Extra `Intl.NumberFormat` options (e.g. `currencyDisplay: 'code'`). Applied last. */\n  format?: Intl.NumberFormatOptions\n}\n\n/**\n * Money. Built on <Numeral>: tabular figures in the theme's numeric face, a true minus,\n * en-AU / AUD by default. A currency the locale has no symbol for shows its narrow symbol\n * when that is unambiguous (GBP → £ in en-AU) and its ISO code otherwise (USD in en-AU).\n *\n * <Amount value={-1234.5} accounting />  →  ($1,234.50) in the critical tone\n */\nexport const Amount = forwardRef<HTMLDataElement, AmountProps>(function Amount(\n  {\n    value,\n    currency = 'AUD',\n    locale = 'en-AU',\n    precision,\n    showSign = false,\n    accounting = false,\n    compact = false,\n    format,\n    tone,\n    suffix,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const digits = precision ?? (compact ? undefined : 2)\n  const options: Intl.NumberFormatOptions = {\n    style: 'currency',\n    currency,\n    currencyDisplay: defaultCurrencyDisplay(locale, currency),\n    ...(digits !== undefined\n      ? { minimumFractionDigits: digits, maximumFractionDigits: digits }\n      : {}),\n    ...(compact\n      ? { notation: 'compact', ...(digits === undefined ? { maximumFractionDigits: 1 } : {}) }\n      : {}),\n    ...(accounting ? { currencySign: 'accounting' } : {}),\n    ...(showSign ? { signDisplay: 'exceptZero' } : {}),\n    ...format,\n  }\n  // Reserve the \")\" of a negative so right-aligned decimals line up. An empty span whose\n  // ::after draws a hidden \")\": it takes the width but never reaches copy/paste or AT.\n  const pad = accounting && signOf(value) !== 'negative'\n  const resolvedTone =\n    accounting && signOf(value) === 'negative' && (tone === undefined || tone === 'default')\n      ? 'critical'\n      : tone\n  return (\n    <Numeral\n      ref={ref}\n      locale={locale}\n      className={cx(styles.amount, className)}\n      value={value}\n      format={options}\n      tone={resolvedTone}\n      suffix={\n        pad ? (\n          <>\n            <span className={styles.pad} data-accounting-pad=\"\" aria-hidden=\"true\" />\n            {suffix}\n          </>\n        ) : (\n          suffix\n        )\n      }\n      data-accounting={accounting || undefined}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;AAMA,IAAMI,oBAAwB,IAAI,IAAI;CAAC;CAAK;CAAK;CAAM;CAAM;CAAK;CAAK;AAAI,CAAC;AAO5E,SAASC,EACP,GACA,GAC6C;CAC7C,IAAI;EACF,IAAMC,KAAY,MAChB,IAAI,KAAK,aAAaC,GAAQ;GAAE,OAAO;GAAY;GAAU,iBAAiBC;EAAQ,CAAC,CAAC,CACrF,cAAc,CAAC,CAAC,CAChB,MAAM,MAASC,EAAK,SAAS,UAAU,CAAC,EAAE;EAC/C,IAAIH,EAAS,QAAQ,MAAMI,EAAS,YAAY,GAAG,OAAO;EAC1D,IAAMC,IAASL,EAAS,cAAc;EACtC,OAAOK,MAAW,KAAA,KAAa,CAACP,EAAsB,IAAIO,CAAM,IAAI,iBAAiB;CACvF,QAAQ;EACN,OAAO;CACT;AACF;AA4BA,IAAaC,IAASC,EAAyC,SAC7D,EACE,UACA,cAAW,OACX,YAAS,SACT,cACA,cAAW,IACX,gBAAa,IACb,aAAU,IACV,WACA,SACA,WACA,cACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAASC,MAAcC,IAAU,KAAA,IAAY,IAC7CC,IAAoC;EACxC,OAAO;EACP;EACA,iBAAiBb,EAAuBE,GAAQG,CAAQ;EACxD,GAAIK,MAAW,KAAA,IAEX,CAAC,IADD;GAAE,uBAAuBA;GAAQ,uBAAuBA;EAAO;EAEnE,GAAIE,IACA;GAAE,UAAU;GAAW,GAAIF,MAAW,KAAA,IAAY,EAAE,uBAAuB,EAAE,IAAI,CAAC;EAAG,IACrF,CAAC;EACL,GAAII,IAAa,EAAE,cAAc,aAAa,IAAI,CAAC;EACnD,GAAIC,IAAW,EAAE,aAAa,aAAa,IAAI,CAAC;EAChD,GAAGC;CACL,GAGMC,IAAMH,KAAcI,EAAOC,CAAK,MAAM,YACtCC,IACJN,KAAcI,EAAOC,CAAK,MAAM,eAAeE,MAAS,KAAA,KAAaA,MAAS,aAC1E,aACAA;CACN,OACE,kBAACC,GAAD;EACO;EACG;EACR,WAAWC,EAAG5B,EAAO,QAAQ6B,CAAS;EAC/B;EACP,QAAQX;EACR,MAAMO;EACN,QACEH,IACE,kBAAArB,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,WAAWD,EAAO;GAAK,uBAAoB;GAAG,eAAY;EAAQ,CAAA,GACvE8B,CACD,EAAA,CAAA,IAEFA;EAGJ,mBAAiBX,KAAc,KAAA;EAC/B,GAAIL;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"Amount.js","names":["styles","_Fragment","Amount_module_default","Fragment$1","SHARED_NARROW_SYMBOLS","defaultCurrencyDisplay","symbolOf","locale","display","part","currency","narrow","Amount","forwardRef","rest","digits","precision","compact","options","accounting","showSign","format","pad","signOf","value","resolvedTone","tone","Numeral","cx","className","suffix"],"sources":["../../../../src/components/typography/Amount/Amount.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { cx } from '#utils/cx'\nimport { Numeral, signOf, type NumeralProps } from '#components/typography/Numeral'\nimport styles from './Amount.module.css'\n\n/** Narrow symbols several common currencies share: showing one alone would misstate the currency. */\nconst SHARED_NARROW_SYMBOLS = new Set(['$', '¥', 'kr', 'Kr', '₩', '₱', 'Rs'])\n\n/**\n * `symbol` when the locale has a symbol for the currency (AUD in en-AU → \"$\", GBP in en-GB\n * → \"£\"); otherwise `narrowSymbol` (GBP in en-AU → \"£\", not \"GBP\"), unless that narrow\n * symbol is shared (USD in en-AU stays \"USD\", never a bare \"$\" that reads as AUD).\n */\nfunction defaultCurrencyDisplay(\n  locale: string,\n  currency: string,\n): Intl.NumberFormatOptions['currencyDisplay'] {\n  try {\n    const symbolOf = (display: 'symbol' | 'narrowSymbol') =>\n      new Intl.NumberFormat(locale, { style: 'currency', currency, currencyDisplay: display })\n        .formatToParts(1)\n        .find((part) => part.type === 'currency')?.value\n    if (symbolOf('symbol') !== currency.toUpperCase()) return 'symbol'\n    const narrow = symbolOf('narrowSymbol')\n    return narrow !== undefined && !SHARED_NARROW_SYMBOLS.has(narrow) ? 'narrowSymbol' : 'symbol'\n  } catch {\n    return 'symbol'\n  }\n}\n\nexport interface AmountProps extends Omit<NumeralProps, 'format' | 'signDisplay'> {\n  /** ISO 4217 code. Default `AUD`. */\n  currency?: string\n  /** Fraction digits. Default 2 (0 for compact unless set). */\n  precision?: number\n  /** Show `+` on positive amounts (and `−` on negatives, as always). */\n  showSign?: boolean\n  /**\n   * Accounting style: negatives in parentheses and in the critical tone. Non-negative\n   * amounts reserve the width of the \")\" (invisibly), so decimals line up with the\n   * bracketed negatives in a right-aligned column.\n   */\n  accounting?: boolean\n  /** Short form for big figures: `$1.2M`. */\n  compact?: boolean\n  /** Extra `Intl.NumberFormat` options (e.g. `currencyDisplay: 'code'`). Applied last. */\n  format?: Intl.NumberFormatOptions\n}\n\n/**\n * Money, formatted for its currency and locale, in tabular figures, with an accounting style for\n * negatives.\n *\n * @remarks\n * `Amount` is a {@link Numeral | Numeral} for money. It formats the currency for the locale, uses\n * tabular figures and a true minus sign, and can show negatives in parentheses like a ledger.\n *\n * @privateRemarks\n * Money. Built on <Numeral>: tabular figures in the theme's numeric face, a true minus,\n * en-AU / AUD by default. A currency the locale has no symbol for shows its narrow symbol\n * when that is unambiguous (GBP → £ in en-AU) and its ISO code otherwise (USD in en-AU).\n *\n * <Amount value={-1234.5} accounting />  →  ($1,234.50) in the critical tone\n */\nexport const Amount = forwardRef<HTMLDataElement, AmountProps>(function Amount(\n  {\n    value,\n    currency = 'AUD',\n    locale = 'en-AU',\n    precision,\n    showSign = false,\n    accounting = false,\n    compact = false,\n    format,\n    tone,\n    suffix,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const digits = precision ?? (compact ? undefined : 2)\n  const options: Intl.NumberFormatOptions = {\n    style: 'currency',\n    currency,\n    currencyDisplay: defaultCurrencyDisplay(locale, currency),\n    ...(digits !== undefined\n      ? { minimumFractionDigits: digits, maximumFractionDigits: digits }\n      : {}),\n    ...(compact\n      ? { notation: 'compact', ...(digits === undefined ? { maximumFractionDigits: 1 } : {}) }\n      : {}),\n    ...(accounting ? { currencySign: 'accounting' } : {}),\n    ...(showSign ? { signDisplay: 'exceptZero' } : {}),\n    ...format,\n  }\n  // Reserve the \")\" of a negative so right-aligned decimals line up. An empty span whose\n  // ::after draws a hidden \")\": it takes the width but never reaches copy/paste or AT.\n  const pad = accounting && signOf(value) !== 'negative'\n  const resolvedTone =\n    accounting && signOf(value) === 'negative' && (tone === undefined || tone === 'default')\n      ? 'critical'\n      : tone\n  return (\n    <Numeral\n      ref={ref}\n      locale={locale}\n      className={cx(styles.amount, className)}\n      value={value}\n      format={options}\n      tone={resolvedTone}\n      suffix={\n        pad ? (\n          <>\n            <span className={styles.pad} data-accounting-pad=\"\" aria-hidden=\"true\" />\n            {suffix}\n          </>\n        ) : (\n          suffix\n        )\n      }\n      data-accounting={accounting || undefined}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;AAMA,IAAMI,oBAAwB,IAAI,IAAI;CAAC;CAAK;CAAK;CAAM;CAAM;CAAK;CAAK;AAAI,CAAC;AAO5E,SAASC,EACP,GACA,GAC6C;CAC7C,IAAI;EACF,IAAMC,KAAY,MAChB,IAAI,KAAK,aAAaC,GAAQ;GAAE,OAAO;GAAY;GAAU,iBAAiBC;EAAQ,CAAC,CAAC,CACrF,cAAc,CAAC,CAAC,CAChB,MAAM,MAASC,EAAK,SAAS,UAAU,CAAC,EAAE;EAC/C,IAAIH,EAAS,QAAQ,MAAMI,EAAS,YAAY,GAAG,OAAO;EAC1D,IAAMC,IAASL,EAAS,cAAc;EACtC,OAAOK,MAAW,KAAA,KAAa,CAACP,EAAsB,IAAIO,CAAM,IAAI,iBAAiB;CACvF,QAAQ;EACN,OAAO;CACT;AACF;AAoCA,IAAaC,IAASC,EAAyC,SAC7D,EACE,UACA,cAAW,OACX,YAAS,SACT,cACA,cAAW,IACX,gBAAa,IACb,aAAU,IACV,WACA,SACA,WACA,cACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAASC,MAAcC,IAAU,KAAA,IAAY,IAC7CC,IAAoC;EACxC,OAAO;EACP;EACA,iBAAiBb,EAAuBE,GAAQG,CAAQ;EACxD,GAAIK,MAAW,KAAA,IAEX,CAAC,IADD;GAAE,uBAAuBA;GAAQ,uBAAuBA;EAAO;EAEnE,GAAIE,IACA;GAAE,UAAU;GAAW,GAAIF,MAAW,KAAA,IAAY,EAAE,uBAAuB,EAAE,IAAI,CAAC;EAAG,IACrF,CAAC;EACL,GAAII,IAAa,EAAE,cAAc,aAAa,IAAI,CAAC;EACnD,GAAIC,IAAW,EAAE,aAAa,aAAa,IAAI,CAAC;EAChD,GAAGC;CACL,GAGMC,IAAMH,KAAcI,EAAOC,CAAK,MAAM,YACtCC,IACJN,KAAcI,EAAOC,CAAK,MAAM,eAAeE,MAAS,KAAA,KAAaA,MAAS,aAC1E,aACAA;CACN,OACE,kBAACC,GAAD;EACO;EACG;EACR,WAAWC,EAAG5B,EAAO,QAAQ6B,CAAS;EAC/B;EACP,QAAQX;EACR,MAAMO;EACN,QACEH,IACE,kBAAArB,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,WAAWD,EAAO;GAAK,uBAAoB;GAAG,eAAY;EAAQ,CAAA,GACvE8B,CACD,EAAA,CAAA,IAEFA;EAGJ,mBAAiBX,KAAc,KAAA;EAC/B,GAAIL;CACL,CAAA;AAEL,CAAC"}

package/dist/components/typography/Code/Code.d.ts

@@ -5,6 +5,14 @@ export interface CodeProps extends HTMLAttributes<HTMLElement> {
     tone?: CodeTone;
 }
 /**
+ * Inline code. A command, a token or a file name, sized to sit on the line it's in.
+ *
+ * @remarks
+ * `Code` marks a short piece of code inside text. It's sized relative to its surroundings, so it
+ * sits on the same line in a heading or a caption. For blocks of code, use {@link CodeBlock |
+ * CodeBlock}.
+ *
+ * @privateRemarks
  * Inline code: a token, a command, a file name. Sized relative to the surrounding
  * text so it sits on the same line in a heading or a caption. For blocks, use CodeBlock.
  *

package/dist/components/typography/Code/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","names":["styles","Code_module_default","Code","forwardRef","rest","cx","className","tone"],"sources":["../../../../src/components/typography/Code/Code.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Code.module.css'\n\nexport type CodeTone = 'neutral' | 'accent'\n\nexport interface CodeProps extends HTMLAttributes<HTMLElement> {\n  /** `accent` only when the snippet is the thing being talked about. Default `neutral`. */\n  tone?: CodeTone\n}\n\n/**\n * Inline code: a token, a command, a file name. Sized relative to the surrounding\n * text so it sits on the same line in a heading or a caption. For blocks, use CodeBlock.\n *\n * Run <Code>pnpm --filter @mitcsutt/kiln-ui test</Code> before pushing.\n */\nexport const Code = forwardRef<HTMLElement, CodeProps>(function Code(\n  { tone = 'neutral', className, ...rest },\n  ref,\n) {\n  return (\n    <code\n      ref={ref}\n      className={cx(styles.code, className)}\n      data-kiln-component=\"\"\n      data-tone={tone}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;AAiBA,IAAaE,IAAOC,EAAmC,SACrD,EAAE,UAAO,WAAW,cAAW,GAAGC,KAClC,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGL,EAAO,MAAMM,CAAS;EACpC,uBAAoB;EACpB,aAAWC;EACX,GAAIH;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"Code.js","names":["styles","Code_module_default","Code","forwardRef","rest","cx","className","tone"],"sources":["../../../../src/components/typography/Code/Code.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Code.module.css'\n\nexport type CodeTone = 'neutral' | 'accent'\n\nexport interface CodeProps extends HTMLAttributes<HTMLElement> {\n  /** `accent` only when the snippet is the thing being talked about. Default `neutral`. */\n  tone?: CodeTone\n}\n\n/**\n * Inline code. A command, a token or a file name, sized to sit on the line it's in.\n *\n * @remarks\n * `Code` marks a short piece of code inside text. It's sized relative to its surroundings, so it\n * sits on the same line in a heading or a caption. For blocks of code, use {@link CodeBlock |\n * CodeBlock}.\n *\n * @privateRemarks\n * Inline code: a token, a command, a file name. Sized relative to the surrounding\n * text so it sits on the same line in a heading or a caption. For blocks, use CodeBlock.\n *\n * Run <Code>pnpm --filter @mitcsutt/kiln-ui test</Code> before pushing.\n */\nexport const Code = forwardRef<HTMLElement, CodeProps>(function Code(\n  { tone = 'neutral', className, ...rest },\n  ref,\n) {\n  return (\n    <code\n      ref={ref}\n      className={cx(styles.code, className)}\n      data-kiln-component=\"\"\n      data-tone={tone}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;AAyBA,IAAaE,IAAOC,EAAmC,SACrD,EAAE,UAAO,WAAW,cAAW,GAAGC,KAClC,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGL,EAAO,MAAMM,CAAS;EACpC,uBAAoB;EACpB,aAAWC;EACX,GAAIH;CACL,CAAA;AAEL,CAAC"}

package/dist/components/typography/Heading/Heading.d.ts

@@ -27,6 +27,14 @@ export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     as?: HeadingElement;
 }
 /**
+ * A heading whose level sets the document outline and whose size sets the look, independently.
+ *
+ * @remarks
+ * `Heading` keeps two things apart that HTML ties together: `level` is the outline (`h1` to `h6`,
+ * for screen readers and search), and `size` is how big it looks. A sidebar's `h2` can be small; a
+ * hero's `h1` can be a display step.
+ *
+ * @privateRemarks
  * A heading. `level` is the outline, `size` is the look — keep them independent.
  *
  * <Heading level={2} size={{ base: '2xl', md: 'display-sm' }}>Recent releases</Heading>

package/dist/components/typography/Heading/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","names":["styles","Heading_module_default","isDisplay","s","roleOf","HEADING_TAGS","roleAttrs","size","attrs","current","bp","BREAKPOINTS","v","Heading","forwardRef","rest","resolved","DEFAULT_HEADING_SIZE","level","base","baseValue","Comp","as","headingTag","needsRole","cx","className","tone","balance","measure","mergeStyles","responsiveVars","style"],"sources":["../../../../src/components/typography/Heading/Heading.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport {\n  BREAKPOINTS,\n  baseValue,\n  mergeStyles,\n  responsiveVars,\n  type Responsive,\n} from '#utils/responsive'\nimport { DEFAULT_HEADING_SIZE } from './sizes'\nimport styles from './Heading.module.css'\nimport type { HeadingLevel, HeadingSize } from './sizes'\nimport { headingTag } from '#utils/heading'\n\nexport type { HeadingLevel, HeadingSize }\nexport type HeadingTone = 'default' | 'muted' | 'accent'\n/** Line-length cap from the width tokens: `narrow` 32rem · `text` 42rem · `content` 68rem. */\nexport type HeadingMeasure = 'narrow' | 'text' | 'content'\nexport type HeadingElement =\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span' | 'legend'\n\nexport interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {\n  /** Document outline level. Picks the element (`h1`–`h6`) and the default size. */\n  level?: HeadingLevel\n  /**\n   * Visual size, independent of `level`. `display-*` steps use the theme's display role\n   * (Newsreader in Monograph, condensed caps in Fiesta, tight grotesk in Ledger); the rest\n   * use the heading role. Responsive.\n   */\n  size?: Responsive<HeadingSize>\n  tone?: HeadingTone\n  /** `text-wrap: balance` — even line lengths. Default `true`. */\n  balance?: boolean\n  /** Cap the line length with a `--width-*` token (`max-inline-size`). Default: none. */\n  measure?: HeadingMeasure\n  /**\n   * Render a different element. When it isn't `h1`–`h6` the heading semantics are kept\n   * with `role=\"heading\"` + `aria-level`.\n   */\n  as?: HeadingElement\n}\n\nconst isDisplay = (s: HeadingSize) => s.startsWith('display')\nconst roleOf = (s: HeadingSize) => (isDisplay(s) ? 'display' : 'heading')\nconst HEADING_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])\n\n/**\n * Per-breakpoint role attributes (`data-role-md=\"display\"`), cascaded upward like\n * `responsiveVars`, so CSS can switch family/weight/tracking at each breakpoint.\n */\nfunction roleAttrs(size: Responsive<HeadingSize>): Record<string, string> {\n  if (typeof size === 'string') return {}\n  const attrs: Record<string, string> = {}\n  let current: string | undefined\n  for (const bp of BREAKPOINTS) {\n    const v = size[bp]\n    if (v !== undefined) current = roleOf(v)\n    if (bp !== 'base' && current !== undefined) attrs[`data-role-${bp}`] = current\n  }\n  return attrs\n}\n\n/**\n * A heading. `level` is the outline, `size` is the look — keep them independent.\n *\n * <Heading level={2} size={{ base: '2xl', md: 'display-sm' }}>Recent releases</Heading>\n */\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\n  { level = 2, size, tone = 'default', balance = true, measure, as, className, style, ...rest },\n  ref,\n) {\n  const resolved = size ?? DEFAULT_HEADING_SIZE[level]\n  const base = baseValue(resolved) ?? DEFAULT_HEADING_SIZE[level]\n  const Comp = as ?? headingTag(level)\n  const needsRole = !HEADING_TAGS.has(Comp)\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.heading, className)}\n      data-size={base}\n      data-role={roleOf(base)}\n      data-tone={tone}\n      data-balance={balance ? undefined : 'false'}\n      data-measure={measure}\n      role={needsRole ? 'heading' : undefined}\n      aria-level={needsRole ? level : undefined}\n      {...roleAttrs(resolved)}\n      style={mergeStyles(\n        typeof resolved === 'string'\n          ? undefined\n          : responsiveVars('heading-size', resolved, (s) => `var(--text-${s})`),\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AA0CA,IAAME,KAAa,MAAmBC,EAAE,WAAW,SAAS,GACtDC,KAAU,MAAoBF,EAAUC,CAAC,IAAI,YAAY,WACzDE,oBAAe,IAAI,IAAI;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAI,CAAC;AAMjE,SAASC,EAAU,GAAuD;CACxE,IAAI,OAAOC,KAAS,UAAU,OAAO,CAAC;CACtC,IAAMC,IAAgC,CAAC,GACnCC;CACJ,KAAK,IAAMC,KAAMC,GAAa;EAC5B,IAAMC,IAAIL,EAAKG;EAEf,AADIE,MAAM,KAAA,MAAW,IAAUR,EAAOQ,CAAC,IACnCF,MAAO,UAAUD,MAAY,KAAA,MAAW,EAAM,aAAaC,OAAQD;CACzE;CACA,OAAOD;AACT;AAOA,IAAaK,IAAUC,EAA6C,SAClE,EAAE,WAAQ,GAAG,SAAM,UAAO,WAAW,aAAU,IAAM,YAAS,OAAI,cAAW,UAAO,GAAGC,KACvF,GACA;CACA,IAAMC,IAAWT,KAAQU,EAAqBC,IACxCC,IAAOC,EAAUJ,CAAQ,KAAKC,EAAqBC,IACnDG,IAAOC,KAAMC,EAAWL,CAAK,GAC7BM,IAAY,CAACnB,EAAa,IAAIgB,CAAI;CACxC,OACE,kBAACA,GAAD;EAEO;EACL,WAAWI,EAAGzB,EAAO,SAAS0B,CAAS;EACvC,aAAWP;EACX,aAAWf,EAAOe,CAAI;EACtB,aAAWQ;EACX,gBAAcC,IAAU,KAAA,IAAY;EACpC,gBAAcC;EACd,MAAML,IAAY,YAAY,KAAA;EAC9B,cAAYA,IAAYN,IAAQ,KAAA;EAChC,GAAIZ,EAAUU,CAAQ;EACtB,OAAOc,EACL,OAAOd,KAAa,WAChB,KAAA,IACAe,EAAe,gBAAgBf,IAAW,MAAM,cAAcb,EAAE,EAAE,GACtE6B,CACF;EACA,GAAIjB;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"Heading.js","names":["styles","Heading_module_default","isDisplay","s","roleOf","HEADING_TAGS","roleAttrs","size","attrs","current","bp","BREAKPOINTS","v","Heading","forwardRef","rest","resolved","DEFAULT_HEADING_SIZE","level","base","baseValue","Comp","as","headingTag","needsRole","cx","className","tone","balance","measure","mergeStyles","responsiveVars","style"],"sources":["../../../../src/components/typography/Heading/Heading.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport {\n  BREAKPOINTS,\n  baseValue,\n  mergeStyles,\n  responsiveVars,\n  type Responsive,\n} from '#utils/responsive'\nimport { DEFAULT_HEADING_SIZE } from './sizes'\nimport styles from './Heading.module.css'\nimport type { HeadingLevel, HeadingSize } from './sizes'\nimport { headingTag } from '#utils/heading'\n\nexport type { HeadingLevel, HeadingSize }\nexport type HeadingTone = 'default' | 'muted' | 'accent'\n/** Line-length cap from the width tokens: `narrow` 32rem · `text` 42rem · `content` 68rem. */\nexport type HeadingMeasure = 'narrow' | 'text' | 'content'\nexport type HeadingElement =\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span' | 'legend'\n\nexport interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {\n  /** Document outline level. Picks the element (`h1`–`h6`) and the default size. */\n  level?: HeadingLevel\n  /**\n   * Visual size, independent of `level`. `display-*` steps use the theme's display role\n   * (Newsreader in Monograph, condensed caps in Fiesta, tight grotesk in Ledger); the rest\n   * use the heading role. Responsive.\n   */\n  size?: Responsive<HeadingSize>\n  tone?: HeadingTone\n  /** `text-wrap: balance` — even line lengths. Default `true`. */\n  balance?: boolean\n  /** Cap the line length with a `--width-*` token (`max-inline-size`). Default: none. */\n  measure?: HeadingMeasure\n  /**\n   * Render a different element. When it isn't `h1`–`h6` the heading semantics are kept\n   * with `role=\"heading\"` + `aria-level`.\n   */\n  as?: HeadingElement\n}\n\nconst isDisplay = (s: HeadingSize) => s.startsWith('display')\nconst roleOf = (s: HeadingSize) => (isDisplay(s) ? 'display' : 'heading')\nconst HEADING_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])\n\n/**\n * Per-breakpoint role attributes (`data-role-md=\"display\"`), cascaded upward like\n * `responsiveVars`, so CSS can switch family/weight/tracking at each breakpoint.\n */\nfunction roleAttrs(size: Responsive<HeadingSize>): Record<string, string> {\n  if (typeof size === 'string') return {}\n  const attrs: Record<string, string> = {}\n  let current: string | undefined\n  for (const bp of BREAKPOINTS) {\n    const v = size[bp]\n    if (v !== undefined) current = roleOf(v)\n    if (bp !== 'base' && current !== undefined) attrs[`data-role-${bp}`] = current\n  }\n  return attrs\n}\n\n/**\n * A heading whose level sets the document outline and whose size sets the look, independently.\n *\n * @remarks\n * `Heading` keeps two things apart that HTML ties together: `level` is the outline (`h1` to `h6`,\n * for screen readers and search), and `size` is how big it looks. A sidebar's `h2` can be small; a\n * hero's `h1` can be a display step.\n *\n * @privateRemarks\n * A heading. `level` is the outline, `size` is the look — keep them independent.\n *\n * <Heading level={2} size={{ base: '2xl', md: 'display-sm' }}>Recent releases</Heading>\n */\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\n  { level = 2, size, tone = 'default', balance = true, measure, as, className, style, ...rest },\n  ref,\n) {\n  const resolved = size ?? DEFAULT_HEADING_SIZE[level]\n  const base = baseValue(resolved) ?? DEFAULT_HEADING_SIZE[level]\n  const Comp = as ?? headingTag(level)\n  const needsRole = !HEADING_TAGS.has(Comp)\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.heading, className)}\n      data-size={base}\n      data-role={roleOf(base)}\n      data-tone={tone}\n      data-balance={balance ? undefined : 'false'}\n      data-measure={measure}\n      role={needsRole ? 'heading' : undefined}\n      aria-level={needsRole ? level : undefined}\n      {...roleAttrs(resolved)}\n      style={mergeStyles(\n        typeof resolved === 'string'\n          ? undefined\n          : responsiveVars('heading-size', resolved, (s) => `var(--text-${s})`),\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AA0CA,IAAME,KAAa,MAAmBC,EAAE,WAAW,SAAS,GACtDC,KAAU,MAAoBF,EAAUC,CAAC,IAAI,YAAY,WACzDE,oBAAe,IAAI,IAAI;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAI,CAAC;AAMjE,SAASC,EAAU,GAAuD;CACxE,IAAI,OAAOC,KAAS,UAAU,OAAO,CAAC;CACtC,IAAMC,IAAgC,CAAC,GACnCC;CACJ,KAAK,IAAMC,KAAMC,GAAa;EAC5B,IAAMC,IAAIL,EAAKG;EAEf,AADIE,MAAM,KAAA,MAAW,IAAUR,EAAOQ,CAAC,IACnCF,MAAO,UAAUD,MAAY,KAAA,MAAW,EAAM,aAAaC,OAAQD;CACzE;CACA,OAAOD;AACT;AAeA,IAAaK,IAAUC,EAA6C,SAClE,EAAE,WAAQ,GAAG,SAAM,UAAO,WAAW,aAAU,IAAM,YAAS,OAAI,cAAW,UAAO,GAAGC,KACvF,GACA;CACA,IAAMC,IAAWT,KAAQU,EAAqBC,IACxCC,IAAOC,EAAUJ,CAAQ,KAAKC,EAAqBC,IACnDG,IAAOC,KAAMC,EAAWL,CAAK,GAC7BM,IAAY,CAACnB,EAAa,IAAIgB,CAAI;CACxC,OACE,kBAACA,GAAD;EAEO;EACL,WAAWI,EAAGzB,EAAO,SAAS0B,CAAS;EACvC,aAAWP;EACX,aAAWf,EAAOe,CAAI;EACtB,aAAWQ;EACX,gBAAcC,IAAU,KAAA,IAAY;EACpC,gBAAcC;EACd,MAAML,IAAY,YAAY,KAAA;EAC9B,cAAYA,IAAYN,IAAQ,KAAA;EAChC,GAAIZ,EAAUU,CAAQ;EACtB,OAAOc,EACL,OAAOd,KAAa,WAChB,KAAA,IACAe,EAAe,gBAAgBf,IAAW,MAAM,cAAcb,EAAE,EAAE,GACtE6B,CACF;EACA,GAAIjB;CACL,CAAA;AAEL,CAAC"}

package/dist/components/typography/Kbd/Kbd.d.ts

@@ -5,6 +5,12 @@ export interface KbdProps extends HTMLAttributes<HTMLElement> {
     size?: KbdSize;
 }
 /**
+ * A keyboard key, for shortcuts and instructions.
+ *
+ * @remarks
+ * `Kbd` renders one key. Write a combination as siblings, so each key is read separately.
+ *
+ * @privateRemarks
  * A keyboard key. One key per <Kbd>; write combos as siblings so each key reads
  * separately: <Kbd>⌘</Kbd> <Kbd>K</Kbd>.
  */

package/dist/components/typography/Kbd/Kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.js","names":["styles","Kbd_module_default","Kbd","forwardRef","rest","cx","className","size"],"sources":["../../../../src/components/typography/Kbd/Kbd.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Kbd.module.css'\n\nexport type KbdSize = 'sm' | 'md'\n\nexport interface KbdProps extends HTMLAttributes<HTMLElement> {\n  /** `sm` for menus and tooltips; `md` (default) inline with body text. */\n  size?: KbdSize\n}\n\n/**\n * A keyboard key. One key per <Kbd>; write combos as siblings so each key reads\n * separately: <Kbd>⌘</Kbd> <Kbd>K</Kbd>.\n */\nexport const Kbd = forwardRef<HTMLElement, KbdProps>(function Kbd(\n  { size = 'md', className, ...rest },\n  ref,\n) {\n  return (\n    <kbd\n      ref={ref}\n      className={cx(styles.kbd, className)}\n      data-kiln-component=\"\"\n      data-size={size}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;AAeA,IAAaE,IAAMC,EAAkC,SACnD,EAAE,UAAO,MAAM,cAAW,GAAGC,KAC7B,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,WAAWC,EAAGL,EAAO,KAAKM,CAAS;EACnC,uBAAoB;EACpB,aAAWC;EACX,GAAIH;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"Kbd.js","names":["styles","Kbd_module_default","Kbd","forwardRef","rest","cx","className","size"],"sources":["../../../../src/components/typography/Kbd/Kbd.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Kbd.module.css'\n\nexport type KbdSize = 'sm' | 'md'\n\nexport interface KbdProps extends HTMLAttributes<HTMLElement> {\n  /** `sm` for menus and tooltips; `md` (default) inline with body text. */\n  size?: KbdSize\n}\n\n/**\n * A keyboard key, for shortcuts and instructions.\n *\n * @remarks\n * `Kbd` renders one key. Write a combination as siblings, so each key is read separately.\n *\n * @privateRemarks\n * A keyboard key. One key per <Kbd>; write combos as siblings so each key reads\n * separately: <Kbd>⌘</Kbd> <Kbd>K</Kbd>.\n */\nexport const Kbd = forwardRef<HTMLElement, KbdProps>(function Kbd(\n  { size = 'md', className, ...rest },\n  ref,\n) {\n  return (\n    <kbd\n      ref={ref}\n      className={cx(styles.kbd, className)}\n      data-kiln-component=\"\"\n      data-size={size}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;AAqBA,IAAaE,IAAMC,EAAkC,SACnD,EAAE,UAAO,MAAM,cAAW,GAAGC,KAC7B,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,WAAWC,EAAGL,EAAO,KAAKM,CAAS;EACnC,uBAAoB;EACpB,aAAWC;EACX,GAAIH;CACL,CAAA;AAEL,CAAC"}

package/dist/components/typography/Link/Link.d.ts

@@ -18,6 +18,15 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     asChild?: boolean;
 }
 /**
+ * An inline text link. Hover thickens the underline instead of changing colour, so it reads in
+ * every theme.
+ *
+ * @remarks
+ * `Link` is for links inside text. It's always underlined by default, because colour alone doesn't
+ * tell people what's a link (and in Paper, links are ink). Hovering thickens the underline rather
+ * than changing the colour.
+ *
+ * @privateRemarks
  * Inline text link. Hover thickens the underline instead of changing colour, so the
  * link stays legible in every theme.
  *

package/dist/components/typography/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["styles","_Fragment","Link_module_default","Fragment$1","Link","forwardRef","rest","Comp","asChild","Slot","cx","className","tone","underline","external","target","rel","ArrowUpRightIcon"],"sources":["../../../../src/components/typography/Link/Link.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes } from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { ArrowUpRightIcon } from '#icons'\nimport styles from './Link.module.css'\n\nexport type LinkTone = 'default' | 'accent' | 'muted'\nexport type LinkUnderline = 'always' | 'hover'\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** `default` is ink with a quiet underline; `accent` for the one link that matters; `muted` for meta lines. */\n  tone?: LinkTone\n  /** `always` (default) for links inside prose; `hover` for links whose context already says \"link\" (nav, lists). */\n  underline?: LinkUnderline\n  /**\n   * Opens in a new tab: sets `target=\"_blank\"` + `rel=\"noopener noreferrer\"`, adds a small\n   * arrow and a visually-hidden \"(opens in new tab)\" for screen readers.\n   */\n  external?: boolean\n  /**\n   * Render the single child element instead of an <a>, merging props and styles.\n   * Use for router links: `<Link asChild><RouterLink to=\"/projects\">Projects</RouterLink></Link>`.\n   */\n  asChild?: boolean\n}\n\n/**\n * Inline text link. Hover thickens the underline instead of changing colour, so the\n * link stays legible in every theme.\n *\n * <Link href=\"https://github.com/mitcsutt/kiln\" external>GitHub</Link>\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    tone = 'default',\n    underline = 'always',\n    external = false,\n    asChild = false,\n    className,\n    children,\n    target,\n    rel,\n    ...rest\n  },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'a'\n  return (\n    <Comp\n      ref={ref}\n      className={cx(styles.link, className)}\n      data-tone={tone}\n      data-underline={underline}\n      data-external={external || undefined}\n      target={external ? (target ?? '_blank') : target}\n      rel={external ? (rel ?? 'noopener noreferrer') : rel}\n      {...rest}\n    >\n      <Slot.Slottable>{children}</Slot.Slottable>\n      {external ? (\n        <>\n          {/* The word joiner keeps the arrow from wrapping onto a line of its own */}\n          <span className={styles.iconWrap} aria-hidden=\"true\">\n            {'\\u2060'}\n            <ArrowUpRightIcon className={styles.icon} />\n          </span>\n          <span className={styles.srOnly}> (opens in new tab)</span>\n        </>\n      ) : null}\n    </Comp>\n  )\n})\n"],"mappings":";;;;;;;AAgCA,IAAaI,IAAOC,EAAyC,SAC3D,EACE,UAAO,WACP,eAAY,UACZ,cAAW,IACX,aAAU,IACV,cACA,aACA,WACA,QACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAOC,IAAUC,EAAK,OAAO;CACnC,OACE,kBAACF,GAAD;EACO;EACL,WAAWG,EAAGV,EAAO,MAAMW,CAAS;EACpC,aAAWC;EACX,kBAAgBC;EAChB,iBAAeC,KAAY,KAAA;EAC3B,QAAQA,IAAYC,KAAU,WAAYA;EAC1C,KAAKD,IAAYE,KAAO,wBAAyBA;EACjD,GAAIV;EARN,UAAA,CAUE,kBAACG,EAAK,WAAN,EAAiB,YAAyB,CAAA,GACzCK,IACC,kBAAAb,GAAA,EAAA,UAAA,CAEE,kBAAC,QAAD;GAAM,WAAWD,EAAO;GAAU,eAAY;GAA9C,UAAA,CACG,KACD,kBAACiB,GAAD,EAAkB,WAAWjB,EAAO,KAAO,CAAA,CACvC;EACN,CAAA,GAAA,kBAAC,QAAD;GAAM,WAAWA,EAAO;GAAQ,UAAA;EAAyB,CAAA,CACzD,EAAA,CAAA,IACA,IACA;;AAEV,CAAC"}
+{"version":3,"file":"Link.js","names":["styles","_Fragment","Link_module_default","Fragment$1","Link","forwardRef","rest","Comp","asChild","Slot","cx","className","tone","underline","external","target","rel","ArrowUpRightIcon"],"sources":["../../../../src/components/typography/Link/Link.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes } from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { ArrowUpRightIcon } from '#icons'\nimport styles from './Link.module.css'\n\nexport type LinkTone = 'default' | 'accent' | 'muted'\nexport type LinkUnderline = 'always' | 'hover'\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** `default` is ink with a quiet underline; `accent` for the one link that matters; `muted` for meta lines. */\n  tone?: LinkTone\n  /** `always` (default) for links inside prose; `hover` for links whose context already says \"link\" (nav, lists). */\n  underline?: LinkUnderline\n  /**\n   * Opens in a new tab: sets `target=\"_blank\"` + `rel=\"noopener noreferrer\"`, adds a small\n   * arrow and a visually-hidden \"(opens in new tab)\" for screen readers.\n   */\n  external?: boolean\n  /**\n   * Render the single child element instead of an <a>, merging props and styles.\n   * Use for router links: `<Link asChild><RouterLink to=\"/projects\">Projects</RouterLink></Link>`.\n   */\n  asChild?: boolean\n}\n\n/**\n * An inline text link. Hover thickens the underline instead of changing colour, so it reads in\n * every theme.\n *\n * @remarks\n * `Link` is for links inside text. It's always underlined by default, because colour alone doesn't\n * tell people what's a link (and in Paper, links are ink). Hovering thickens the underline rather\n * than changing the colour.\n *\n * @privateRemarks\n * Inline text link. Hover thickens the underline instead of changing colour, so the\n * link stays legible in every theme.\n *\n * <Link href=\"https://github.com/mitcsutt/kiln\" external>GitHub</Link>\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    tone = 'default',\n    underline = 'always',\n    external = false,\n    asChild = false,\n    className,\n    children,\n    target,\n    rel,\n    ...rest\n  },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'a'\n  return (\n    <Comp\n      ref={ref}\n      className={cx(styles.link, className)}\n      data-tone={tone}\n      data-underline={underline}\n      data-external={external || undefined}\n      target={external ? (target ?? '_blank') : target}\n      rel={external ? (rel ?? 'noopener noreferrer') : rel}\n      {...rest}\n    >\n      <Slot.Slottable>{children}</Slot.Slottable>\n      {external ? (\n        <>\n          {/* The word joiner keeps the arrow from wrapping onto a line of its own */}\n          <span className={styles.iconWrap} aria-hidden=\"true\">\n            {'\\u2060'}\n            <ArrowUpRightIcon className={styles.icon} />\n          </span>\n          <span className={styles.srOnly}> (opens in new tab)</span>\n        </>\n      ) : null}\n    </Comp>\n  )\n})\n"],"mappings":";;;;;;;AAyCA,IAAaI,IAAOC,EAAyC,SAC3D,EACE,UAAO,WACP,eAAY,UACZ,cAAW,IACX,aAAU,IACV,cACA,aACA,WACA,QACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAOC,IAAUC,EAAK,OAAO;CACnC,OACE,kBAACF,GAAD;EACO;EACL,WAAWG,EAAGV,EAAO,MAAMW,CAAS;EACpC,aAAWC;EACX,kBAAgBC;EAChB,iBAAeC,KAAY,KAAA;EAC3B,QAAQA,IAAYC,KAAU,WAAYA;EAC1C,KAAKD,IAAYE,KAAO,wBAAyBA;EACjD,GAAIV;EARN,UAAA,CAUE,kBAACG,EAAK,WAAN,EAAiB,YAAyB,CAAA,GACzCK,IACC,kBAAAb,GAAA,EAAA,UAAA,CAEE,kBAAC,QAAD;GAAM,WAAWD,EAAO;GAAU,eAAY;GAA9C,UAAA,CACG,KACD,kBAACiB,GAAD,EAAkB,WAAWjB,EAAO,KAAO,CAAA,CACvC;EACN,CAAA,GAAA,kBAAC,QAAD;GAAM,WAAWA,EAAO;GAAQ,UAAA;EAAyB,CAAA,CACzD,EAAA,CAAA,IACA,IACA;;AAEV,CAAC"}

package/dist/components/typography/Numeral/Numeral.d.ts

@@ -19,6 +19,14 @@ export interface NumeralProps extends Omit<DataHTMLAttributes<HTMLDataElement>,
     suffix?: ReactNode;
 }
 /**
+ * A formatted number in tabular figures, with its machine-readable value attached.
+ *
+ * @remarks
+ * `Numeral` formats a number with `Intl.NumberFormat` and sets it in the theme's numeric face with
+ * tabular, lining figures, so a column of them lines up and a changing value doesn't jitter. It
+ * renders a `<data value>` element, so the raw value travels with the formatted text.
+ *
+ * @privateRemarks
  * A formatted number. Always tabular, lining figures in the theme's numeric face, and
  * wrapped in <data value> so the machine-readable value travels with it. Separators
  * and symbols are set proportionally: some faces (Schibsted) make a tabular comma as

package/dist/components/typography/Numeral/Numeral.js.map

@@ -1 +1 @@
-{"version":3,"file":"Numeral.js","names":["styles","Numeral_module_default","Numeral","forwardRef","rest","sign","signOf","value","parts","formatNumeralParts","locale","signDisplay","format","resolvedTone","tone","cx","className","size","prefix","part","i","Fragment","suffix"],"sources":["../../../../src/components/typography/Numeral/Numeral.tsx"],"sourcesContent":["import { Fragment, forwardRef, type DataHTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport { formatNumeralParts, signOf } from './format'\nimport styles from './Numeral.module.css'\n\nexport type NumeralTone =\n  'auto' | 'default' | 'muted' | 'accent' | 'positive' | 'caution' | 'critical'\nexport type NumeralSize =\n  'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'display-sm' | 'display-md' | 'display-lg'\n\nexport interface NumeralProps extends Omit<\n  DataHTMLAttributes<HTMLDataElement>,\n  'value' | 'children' | 'prefix'\n> {\n  value: number\n  /** Passed straight to `Intl.NumberFormat` (percent, units, fraction digits, compact…). */\n  format?: Intl.NumberFormatOptions\n  /** BCP 47 locale. Default `en-AU`. */\n  locale?: string\n  /** Shorthand for `format.signDisplay`. `exceptZero` shows +/− on everything but zero. */\n  signDisplay?: Intl.NumberFormatOptions['signDisplay']\n  /** `auto` colours by sign: positive → positive tone, negative → critical. Omit to inherit. */\n  tone?: NumeralTone\n  /** Step on the type scale. Omit to inherit — figures usually sit inside other text. */\n  size?: NumeralSize\n  /** Set before the figures, proportional (not tabular): \"≈\", \"#\", \"Rank \". Add your own spacing. */\n  prefix?: ReactNode\n  /** Set after the figures, proportional: \" seats\", \"×\", \" km\". Add your own spacing. */\n  suffix?: ReactNode\n}\n\n/**\n * A formatted number. Always tabular, lining figures in the theme's numeric face, and\n * wrapped in <data value> so the machine-readable value travels with it. Separators\n * and symbols are set proportionally: some faces (Schibsted) make a tabular comma as\n * wide as a digit, which reads as \"1 , 017\". Right-aligned columns still line up.\n *\n * <Numeral value={0.184} format={{ style: 'percent', maximumFractionDigits: 1 }} signDisplay=\"exceptZero\" tone=\"auto\" />\n */\nexport const Numeral = forwardRef<HTMLDataElement, NumeralProps>(function Numeral(\n  { value, format, locale = 'en-AU', signDisplay, tone, size, prefix, suffix, className, ...rest },\n  ref,\n) {\n  const sign = signOf(value)\n  const parts = formatNumeralParts(value, locale, signDisplay ? { ...format, signDisplay } : format)\n  const resolvedTone =\n    tone === 'auto'\n      ? sign === 'positive'\n        ? 'positive'\n        : sign === 'negative'\n          ? 'critical'\n          : undefined\n      : tone\n  return (\n    <data\n      ref={ref}\n      value={String(value)}\n      className={cx(styles.numeral, className)}\n      data-sign={sign}\n      data-tone={resolvedTone}\n      data-size={size}\n      {...rest}\n    >\n      {prefix != null && prefix !== false ? (\n        <span className={styles.mark} data-affix=\"prefix\">\n          {prefix}\n        </span>\n      ) : null}\n      {parts.map((part, i) =>\n        part.kind === 'mark' ? (\n          <span key={i} className={styles.mark}>\n            {part.value}\n          </span>\n        ) : (\n          <Fragment key={i}>{part.value}</Fragment>\n        ),\n      )}\n      {suffix != null && suffix !== false ? (\n        <span className={styles.mark} data-affix=\"suffix\">\n          {suffix}\n        </span>\n      ) : null}\n    </data>\n  )\n})\n"],"mappings":";;;;;;AAuCA,IAAaE,IAAUC,EAA0C,SAC/D,EAAE,UAAO,WAAQ,YAAS,SAAS,gBAAa,SAAM,SAAM,WAAQ,WAAQ,cAAW,GAAGC,KAC1F,GACA;CACA,IAAMC,IAAOC,EAAOC,CAAK,GACnBC,IAAQC,EAAmBF,GAAOG,GAAQC,IAAc;EAAE,GAAGC;EAAQ;CAAY,IAAIA,CAAM,GAC3FC,IACJC,MAAS,SACLT,MAAS,aACP,aACAA,MAAS,aACP,aACA,KAAA,IACJS;CACN,OACE,kBAAC,QAAD;EACO;EACL,OAAO,OAAOP,CAAK;EACnB,WAAWQ,EAAGf,EAAO,SAASgB,CAAS;EACvC,aAAWX;EACX,aAAWQ;EACX,aAAWI;EACX,GAAIb;EAPN,UAAA;GASGc,KAAU,QAAQA,MAAW,KAC5B,kBAAC,QAAD;IAAM,WAAWlB,EAAO;IAAM,cAAW;IACtC,UAAAkB;GACG,CAAA,IACJ;GACHV,EAAM,KAAK,GAAM,MAChBW,EAAK,SAAS,SACZ,kBAAC,QAAD;IAAc,WAAWnB,EAAO;IAC7B,UAAAmB,EAAK;GACF,GAFKC,CAEL,IAEN,kBAACC,GAAD,EAAA,UAAmBF,EAAK,MAAgB,GAAzBC,CAAyB,CAE5C;GACCE,KAAU,QAAQA,MAAW,KAC5B,kBAAC,QAAD;IAAM,WAAWtB,EAAO;IAAM,cAAW;IACtC,UAAAsB;GACG,CAAA,IACJ;EACA;;AAEV,CAAC"}
+{"version":3,"file":"Numeral.js","names":["styles","Numeral_module_default","Numeral","forwardRef","rest","sign","signOf","value","parts","formatNumeralParts","locale","signDisplay","format","resolvedTone","tone","cx","className","size","prefix","part","i","Fragment","suffix"],"sources":["../../../../src/components/typography/Numeral/Numeral.tsx"],"sourcesContent":["import { Fragment, forwardRef, type DataHTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport { formatNumeralParts, signOf } from './format'\nimport styles from './Numeral.module.css'\n\nexport type NumeralTone =\n  'auto' | 'default' | 'muted' | 'accent' | 'positive' | 'caution' | 'critical'\nexport type NumeralSize =\n  'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'display-sm' | 'display-md' | 'display-lg'\n\nexport interface NumeralProps extends Omit<\n  DataHTMLAttributes<HTMLDataElement>,\n  'value' | 'children' | 'prefix'\n> {\n  value: number\n  /** Passed straight to `Intl.NumberFormat` (percent, units, fraction digits, compact…). */\n  format?: Intl.NumberFormatOptions\n  /** BCP 47 locale. Default `en-AU`. */\n  locale?: string\n  /** Shorthand for `format.signDisplay`. `exceptZero` shows +/− on everything but zero. */\n  signDisplay?: Intl.NumberFormatOptions['signDisplay']\n  /** `auto` colours by sign: positive → positive tone, negative → critical. Omit to inherit. */\n  tone?: NumeralTone\n  /** Step on the type scale. Omit to inherit — figures usually sit inside other text. */\n  size?: NumeralSize\n  /** Set before the figures, proportional (not tabular): \"≈\", \"#\", \"Rank \". Add your own spacing. */\n  prefix?: ReactNode\n  /** Set after the figures, proportional: \" seats\", \"×\", \" km\". Add your own spacing. */\n  suffix?: ReactNode\n}\n\n/**\n * A formatted number in tabular figures, with its machine-readable value attached.\n *\n * @remarks\n * `Numeral` formats a number with `Intl.NumberFormat` and sets it in the theme's numeric face with\n * tabular, lining figures, so a column of them lines up and a changing value doesn't jitter. It\n * renders a `<data value>` element, so the raw value travels with the formatted text.\n *\n * @privateRemarks\n * A formatted number. Always tabular, lining figures in the theme's numeric face, and\n * wrapped in <data value> so the machine-readable value travels with it. Separators\n * and symbols are set proportionally: some faces (Schibsted) make a tabular comma as\n * wide as a digit, which reads as \"1 , 017\". Right-aligned columns still line up.\n *\n * <Numeral value={0.184} format={{ style: 'percent', maximumFractionDigits: 1 }} signDisplay=\"exceptZero\" tone=\"auto\" />\n */\nexport const Numeral = forwardRef<HTMLDataElement, NumeralProps>(function Numeral(\n  { value, format, locale = 'en-AU', signDisplay, tone, size, prefix, suffix, className, ...rest },\n  ref,\n) {\n  const sign = signOf(value)\n  const parts = formatNumeralParts(value, locale, signDisplay ? { ...format, signDisplay } : format)\n  const resolvedTone =\n    tone === 'auto'\n      ? sign === 'positive'\n        ? 'positive'\n        : sign === 'negative'\n          ? 'critical'\n          : undefined\n      : tone\n  return (\n    <data\n      ref={ref}\n      value={String(value)}\n      className={cx(styles.numeral, className)}\n      data-sign={sign}\n      data-tone={resolvedTone}\n      data-size={size}\n      {...rest}\n    >\n      {prefix != null && prefix !== false ? (\n        <span className={styles.mark} data-affix=\"prefix\">\n          {prefix}\n        </span>\n      ) : null}\n      {parts.map((part, i) =>\n        part.kind === 'mark' ? (\n          <span key={i} className={styles.mark}>\n            {part.value}\n          </span>\n        ) : (\n          <Fragment key={i}>{part.value}</Fragment>\n        ),\n      )}\n      {suffix != null && suffix !== false ? (\n        <span className={styles.mark} data-affix=\"suffix\">\n          {suffix}\n        </span>\n      ) : null}\n    </data>\n  )\n})\n"],"mappings":";;;;;;AA+CA,IAAaE,IAAUC,EAA0C,SAC/D,EAAE,UAAO,WAAQ,YAAS,SAAS,gBAAa,SAAM,SAAM,WAAQ,WAAQ,cAAW,GAAGC,KAC1F,GACA;CACA,IAAMC,IAAOC,EAAOC,CAAK,GACnBC,IAAQC,EAAmBF,GAAOG,GAAQC,IAAc;EAAE,GAAGC;EAAQ;CAAY,IAAIA,CAAM,GAC3FC,IACJC,MAAS,SACLT,MAAS,aACP,aACAA,MAAS,aACP,aACA,KAAA,IACJS;CACN,OACE,kBAAC,QAAD;EACO;EACL,OAAO,OAAOP,CAAK;EACnB,WAAWQ,EAAGf,EAAO,SAASgB,CAAS;EACvC,aAAWX;EACX,aAAWQ;EACX,aAAWI;EACX,GAAIb;EAPN,UAAA;GASGc,KAAU,QAAQA,MAAW,KAC5B,kBAAC,QAAD;IAAM,WAAWlB,EAAO;IAAM,cAAW;IACtC,UAAAkB;GACG,CAAA,IACJ;GACHV,EAAM,KAAK,GAAM,MAChBW,EAAK,SAAS,SACZ,kBAAC,QAAD;IAAc,WAAWnB,EAAO;IAC7B,UAAAmB,EAAK;GACF,GAFKC,CAEL,IAEN,kBAACC,GAAD,EAAA,UAAmBF,EAAK,MAAgB,GAAzBC,CAAyB,CAE5C;GACCE,KAAU,QAAQA,MAAW,KAC5B,kBAAC,QAAD;IAAM,WAAWtB,EAAO;IAAM,cAAW;IACtC,UAAAsB;GACG,CAAA,IACJ;EACA;;AAEV,CAAC"}

package/dist/components/typography/Prose/Prose.d.ts

@@ -7,6 +7,15 @@ export interface ProseProps extends HTMLAttributes<HTMLElement> {
     as?: ProseElement;
 }
 /**
+ * Styles long-form writing from plain HTML or Markdown, in the theme's prose face, at a reading
+ * measure.
+ *
+ * @remarks
+ * `Prose` styles the raw elements inside it (headings, paragraphs, lists, quotes, code, tables,
+ * figures) with a comfortable measure and a vertical rhythm from the space scale. Use it around
+ * rendered Markdown or MDX, or any HTML you don't control. These docs' pages are `Prose`.
+ *
+ * @privateRemarks
  * Long-form writing. Styles raw HTML/MDX children — headings, lists, quotes, code,
  * figures, tables — in the theme's prose face with a comfortable measure and a
  * vertical rhythm from the space scale.

package/dist/components/typography/Prose/Prose.js.map

@@ -1 +1 @@
-{"version":3,"file":"Prose.js","names":["styles","Prose_module_default","Prose","forwardRef","Comp","rest","cx","className","size"],"sources":["../../../../src/components/typography/Prose/Prose.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Prose.module.css'\n\nexport type ProseSize = 'sm' | 'md' | 'lg'\nexport type ProseElement = 'div' | 'article' | 'section'\n\nexport interface ProseProps extends HTMLAttributes<HTMLElement> {\n  /** `md` (default) is the theme's `--prose-size`; `sm` for notes and sidebars, `lg` for essays. */\n  size?: ProseSize\n  as?: ProseElement\n}\n\n/**\n * Long-form writing. Styles raw HTML/MDX children — headings, lists, quotes, code,\n * figures, tables — in the theme's prose face with a comfortable measure and a\n * vertical rhythm from the space scale.\n *\n * <Prose as=\"article\"><MDXContent /></Prose>\n */\nexport const Prose = forwardRef<HTMLElement, ProseProps>(function Prose(\n  { size = 'md', as: Comp = 'div', className, ...rest },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.prose, className)}\n      data-size={size}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;AAoBA,IAAaE,IAAQC,EAAoC,SACvD,EAAE,UAAO,MAAM,IAAIC,IAAO,OAAO,cAAW,GAAGC,KAC/C,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGN,EAAO,OAAOO,CAAS;EACrC,aAAWC;EACX,GAAIH;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"Prose.js","names":["styles","Prose_module_default","Prose","forwardRef","Comp","rest","cx","className","size"],"sources":["../../../../src/components/typography/Prose/Prose.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Prose.module.css'\n\nexport type ProseSize = 'sm' | 'md' | 'lg'\nexport type ProseElement = 'div' | 'article' | 'section'\n\nexport interface ProseProps extends HTMLAttributes<HTMLElement> {\n  /** `md` (default) is the theme's `--prose-size`; `sm` for notes and sidebars, `lg` for essays. */\n  size?: ProseSize\n  as?: ProseElement\n}\n\n/**\n * Styles long-form writing from plain HTML or Markdown, in the theme's prose face, at a reading\n * measure.\n *\n * @remarks\n * `Prose` styles the raw elements inside it (headings, paragraphs, lists, quotes, code, tables,\n * figures) with a comfortable measure and a vertical rhythm from the space scale. Use it around\n * rendered Markdown or MDX, or any HTML you don't control. These docs' pages are `Prose`.\n *\n * @privateRemarks\n * Long-form writing. Styles raw HTML/MDX children — headings, lists, quotes, code,\n * figures, tables — in the theme's prose face with a comfortable measure and a\n * vertical rhythm from the space scale.\n *\n * <Prose as=\"article\"><MDXContent /></Prose>\n */\nexport const Prose = forwardRef<HTMLElement, ProseProps>(function Prose(\n  { size = 'md', as: Comp = 'div', className, ...rest },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.prose, className)}\n      data-size={size}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;AA6BA,IAAaE,IAAQC,EAAoC,SACvD,EAAE,UAAO,MAAM,IAAIC,IAAO,OAAO,cAAW,GAAGC,KAC/C,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGN,EAAO,OAAOO,CAAS;EACrC,aAAWC;EACX,GAAIH;CACL,CAAA;AAEL,CAAC"}

package/dist/components/typography/Quote/Quote.d.ts

@@ -12,6 +12,13 @@ export interface QuoteProps extends HTMLAttributes<HTMLElement> {
     size?: QuoteSize;
 }
 /**
+ * A pull quote or testimonial, with a hanging opening mark and an attribution.
+ *
+ * @remarks
+ * `Quote` sets the opening mark in its own column in the display face, the way a typographer hangs
+ * punctuation, rather than drawing a coloured bar down the side.
+ *
+ * @privateRemarks
  * A pull quote or testimonial. The opening mark hangs in its own column in the display
  * face — the typographer's treatment, not a coloured bar down the side.
  *

package/dist/components/typography/Quote/Quote.js.map

@@ -1 +1 @@
-{"version":3,"file":"Quote.js","names":["styles","Quote_module_default","Quote","forwardRef","rest","cx","className","size","citeUrl","cite"],"sources":["../../../../src/components/typography/Quote/Quote.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Quote.module.css'\n\nexport type QuoteSize = 'sm' | 'md' | 'lg'\n\nexport interface QuoteProps extends HTMLAttributes<HTMLElement> {\n  /** Who said it. A name, or a name plus role: `<>Rosa Nguyen<br />Head of design</>`. */\n  cite?: ReactNode\n  /** URL of the source, set on the <blockquote cite> attribute. */\n  citeUrl?: string\n  /**\n   * `sm` a testimonial in the prose face; `md` (default) a pull quote in the display\n   * face; `lg` the one quote a page is built around.\n   */\n  size?: QuoteSize\n}\n\n/**\n * A pull quote or testimonial. The opening mark hangs in its own column in the display\n * face — the typographer's treatment, not a coloured bar down the side.\n *\n * <Quote cite=\"Ada Okafor\">Software should stay out of the way.</Quote>\n */\nexport const Quote = forwardRef<HTMLElement, QuoteProps>(function Quote(\n  { cite, citeUrl, size = 'md', className, children, ...rest },\n  ref,\n) {\n  return (\n    <figure\n      ref={ref}\n      className={cx(styles.quote, className)}\n      data-kiln-component=\"\"\n      data-size={size}\n      {...rest}\n    >\n      <span className={styles.mark} aria-hidden=\"true\">\n        {'“'}\n      </span>\n      <blockquote className={styles.body} cite={citeUrl}>\n        {children}\n      </blockquote>\n      {cite ? <figcaption className={styles.cite}>{cite}</figcaption> : null}\n    </figure>\n  )\n})\n"],"mappings":";;;;;AAwBA,IAAaE,IAAQC,EAAoC,SACvD,EAAE,SAAM,YAAS,UAAO,MAAM,cAAW,aAAU,GAAGC,KACtD,GACA;CACA,OACE,kBAAC,UAAD;EACO;EACL,WAAWC,EAAGL,EAAO,OAAOM,CAAS;EACrC,uBAAoB;EACpB,aAAWC;EACX,GAAIH;EALN,UAAA;GAOE,kBAAC,QAAD;IAAM,WAAWJ,EAAO;IAAM,eAAY;IACvC,UAAA;GACG,CAAA;GACN,kBAAC,cAAD;IAAY,WAAWA,EAAO;IAAM,MAAMQ;IACvC;GACS,CAAA;GACXC,IAAO,kBAAC,cAAD;IAAY,WAAWT,EAAO;IAAO,UAAAS;GAAiB,CAAA,IAAI;EAC5D;;AAEZ,CAAC"}
+{"version":3,"file":"Quote.js","names":["styles","Quote_module_default","Quote","forwardRef","rest","cx","className","size","citeUrl","cite"],"sources":["../../../../src/components/typography/Quote/Quote.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Quote.module.css'\n\nexport type QuoteSize = 'sm' | 'md' | 'lg'\n\nexport interface QuoteProps extends HTMLAttributes<HTMLElement> {\n  /** Who said it. A name, or a name plus role: `<>Rosa Nguyen<br />Head of design</>`. */\n  cite?: ReactNode\n  /** URL of the source, set on the <blockquote cite> attribute. */\n  citeUrl?: string\n  /**\n   * `sm` a testimonial in the prose face; `md` (default) a pull quote in the display\n   * face; `lg` the one quote a page is built around.\n   */\n  size?: QuoteSize\n}\n\n/**\n * A pull quote or testimonial, with a hanging opening mark and an attribution.\n *\n * @remarks\n * `Quote` sets the opening mark in its own column in the display face, the way a typographer hangs\n * punctuation, rather than drawing a coloured bar down the side.\n *\n * @privateRemarks\n * A pull quote or testimonial. The opening mark hangs in its own column in the display\n * face — the typographer's treatment, not a coloured bar down the side.\n *\n * <Quote cite=\"Ada Okafor\">Software should stay out of the way.</Quote>\n */\nexport const Quote = forwardRef<HTMLElement, QuoteProps>(function Quote(\n  { cite, citeUrl, size = 'md', className, children, ...rest },\n  ref,\n) {\n  return (\n    <figure\n      ref={ref}\n      className={cx(styles.quote, className)}\n      data-kiln-component=\"\"\n      data-size={size}\n      {...rest}\n    >\n      <span className={styles.mark} aria-hidden=\"true\">\n        {'“'}\n      </span>\n      <blockquote className={styles.body} cite={citeUrl}>\n        {children}\n      </blockquote>\n      {cite ? <figcaption className={styles.cite}>{cite}</figcaption> : null}\n    </figure>\n  )\n})\n"],"mappings":";;;;;AA+BA,IAAaE,IAAQC,EAAoC,SACvD,EAAE,SAAM,YAAS,UAAO,MAAM,cAAW,aAAU,GAAGC,KACtD,GACA;CACA,OACE,kBAAC,UAAD;EACO;EACL,WAAWC,EAAGL,EAAO,OAAOM,CAAS;EACrC,uBAAoB;EACpB,aAAWC;EACX,GAAIH;EALN,UAAA;GAOE,kBAAC,QAAD;IAAM,WAAWJ,EAAO;IAAM,eAAY;IACvC,UAAA;GACG,CAAA;GACN,kBAAC,cAAD;IAAY,WAAWA,EAAO;IAAM,MAAMQ;IACvC;GACS,CAAA;GACXC,IAAO,kBAAC,cAAD;IAAY,WAAWT,EAAO;IAAO,UAAAS;GAAiB,CAAA,IAAI;EAC5D;;AAEZ,CAAC"}

package/dist/components/typography/SectionHeader/SectionHeader.d.ts

@@ -25,6 +25,14 @@ export interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 't
     titleId?: string;
 }
 /**
+ * The title block for a page or section. Heading, description and actions in one aligned row.
+ *
+ * @remarks
+ * `SectionHeader` puts a section's title, an optional kicker and description, and its actions in
+ * one component, so they align with each other and wrap together on a phone. The title, kicker and
+ * description are grouped in an `<hgroup>`.
+ *
+ * @privateRemarks
  * The title block for a page or section: optional kicker, heading, description and
  * actions. Title, kicker and description are grouped in an <hgroup>.
  *

package/dist/components/typography/SectionHeader/SectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.js","names":["styles","SectionHeader_module_default","SectionHeader","forwardRef","Comp","rest","cx","className","divider","actions","kicker","Heading","titleId","title","description"],"sources":["../../../../src/components/typography/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport type { Responsive } from '#utils/responsive'\nimport { Heading, type HeadingLevel, type HeadingSize } from '#components/typography/Heading'\nimport styles from './SectionHeader.module.css'\n\nexport type SectionHeaderElement = 'div' | 'header'\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** The section or page title. Rendered as a <Heading>. */\n  title: ReactNode\n  /** Heading level. Default 2 (use 1 for a page header). */\n  level?: HeadingLevel\n  /** Heading size; defaults from `level`. Responsive. */\n  size?: Responsive<HeadingSize>\n  /** A sentence or two under the title. */\n  description?: ReactNode\n  /** Buttons or links. Right of the title from `md` up; below it on small screens. */\n  actions?: ReactNode\n  /**\n   * Small context above the title — only when it tells the reader something\n   * (\"2025–26 financial year\", \"Sprint 2\"). Plain muted text, never a tracked-caps eyebrow.\n   */\n  kicker?: ReactNode\n  /** A hairline under the header. */\n  divider?: boolean\n  as?: SectionHeaderElement\n  /** Id for the heading, so a surrounding <section aria-labelledby> can point at it. */\n  titleId?: string\n}\n\n/**\n * The title block for a page or section: optional kicker, heading, description and\n * actions. Title, kicker and description are grouped in an <hgroup>.\n *\n * <SectionHeader title=\"September invoices\" description=\"$4,182.60 of $5,200 target\" actions={<Button>Export CSV</Button>} />\n */\nexport const SectionHeader = forwardRef<HTMLElement, SectionHeaderProps>(function SectionHeader(\n  {\n    title,\n    level = 2,\n    size,\n    description,\n    actions,\n    kicker,\n    divider = false,\n    as: Comp = 'div',\n    titleId,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-divider={divider || undefined}\n      data-has-actions={actions ? true : undefined}\n      {...rest}\n    >\n      <hgroup className={styles.titles}>\n        {kicker ? <p className={styles.kicker}>{kicker}</p> : null}\n        <Heading id={titleId} level={level} size={size} className={styles.title}>\n          {title}\n        </Heading>\n        {description ? <div className={styles.description}>{description}</div> : null}\n      </hgroup>\n      {actions ? <div className={styles.actions}>{actions}</div> : null}\n    </Comp>\n  )\n})\n"],"mappings":";;;;;;AAqCA,IAAaE,IAAgBC,EAA4C,SACvE,EACE,UACA,WAAQ,GACR,SACA,gBACA,YACA,WACA,aAAU,IACV,IAAIC,IAAO,OACX,YACA,cACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGN,EAAO,QAAQO,CAAS;EACtC,gBAAcC,KAAW,KAAA;EACzB,oBAAkBC,IAAU,KAAO,KAAA;EACnC,GAAIJ;EANN,UAAA,CAQE,kBAAC,UAAD;GAAQ,WAAWL,EAAO;GAA1B,UAAA;IACGU,IAAS,kBAAC,KAAD;KAAG,WAAWV,EAAO;KAAS,UAAAU;IAAU,CAAA,IAAI;IACtD,kBAACC,GAAD;KAAS,IAAIC;KAAgB;KAAa;KAAM,WAAWZ,EAAO;KAC/D,UAAAa;IACM,CAAA;IACRC,IAAc,kBAAC,OAAD;KAAK,WAAWd,EAAO;KAAc,UAAAc;IAAiB,CAAA,IAAI;GACnE;EACP,CAAA,GAAAL,IAAU,kBAAC,OAAD;GAAK,WAAWT,EAAO;GAAU,UAAAS;EAAa,CAAA,IAAI,IACzD;;AAEV,CAAC"}
+{"version":3,"file":"SectionHeader.js","names":["styles","SectionHeader_module_default","SectionHeader","forwardRef","Comp","rest","cx","className","divider","actions","kicker","Heading","titleId","title","description"],"sources":["../../../../src/components/typography/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport type { Responsive } from '#utils/responsive'\nimport { Heading, type HeadingLevel, type HeadingSize } from '#components/typography/Heading'\nimport styles from './SectionHeader.module.css'\n\nexport type SectionHeaderElement = 'div' | 'header'\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** The section or page title. Rendered as a <Heading>. */\n  title: ReactNode\n  /** Heading level. Default 2 (use 1 for a page header). */\n  level?: HeadingLevel\n  /** Heading size; defaults from `level`. Responsive. */\n  size?: Responsive<HeadingSize>\n  /** A sentence or two under the title. */\n  description?: ReactNode\n  /** Buttons or links. Right of the title from `md` up; below it on small screens. */\n  actions?: ReactNode\n  /**\n   * Small context above the title — only when it tells the reader something\n   * (\"2025–26 financial year\", \"Sprint 2\"). Plain muted text, never a tracked-caps eyebrow.\n   */\n  kicker?: ReactNode\n  /** A hairline under the header. */\n  divider?: boolean\n  as?: SectionHeaderElement\n  /** Id for the heading, so a surrounding <section aria-labelledby> can point at it. */\n  titleId?: string\n}\n\n/**\n * The title block for a page or section. Heading, description and actions in one aligned row.\n *\n * @remarks\n * `SectionHeader` puts a section's title, an optional kicker and description, and its actions in\n * one component, so they align with each other and wrap together on a phone. The title, kicker and\n * description are grouped in an `<hgroup>`.\n *\n * @privateRemarks\n * The title block for a page or section: optional kicker, heading, description and\n * actions. Title, kicker and description are grouped in an <hgroup>.\n *\n * <SectionHeader title=\"September invoices\" description=\"$4,182.60 of $5,200 target\" actions={<Button>Export CSV</Button>} />\n */\nexport const SectionHeader = forwardRef<HTMLElement, SectionHeaderProps>(function SectionHeader(\n  {\n    title,\n    level = 2,\n    size,\n    description,\n    actions,\n    kicker,\n    divider = false,\n    as: Comp = 'div',\n    titleId,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-divider={divider || undefined}\n      data-has-actions={actions ? true : undefined}\n      {...rest}\n    >\n      <hgroup className={styles.titles}>\n        {kicker ? <p className={styles.kicker}>{kicker}</p> : null}\n        <Heading id={titleId} level={level} size={size} className={styles.title}>\n          {title}\n        </Heading>\n        {description ? <div className={styles.description}>{description}</div> : null}\n      </hgroup>\n      {actions ? <div className={styles.actions}>{actions}</div> : null}\n    </Comp>\n  )\n})\n"],"mappings":";;;;;;AA6CA,IAAaE,IAAgBC,EAA4C,SACvE,EACE,UACA,WAAQ,GACR,SACA,gBACA,YACA,WACA,aAAU,IACV,IAAIC,IAAO,OACX,YACA,cACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGN,EAAO,QAAQO,CAAS;EACtC,gBAAcC,KAAW,KAAA;EACzB,oBAAkBC,IAAU,KAAO,KAAA;EACnC,GAAIJ;EANN,UAAA,CAQE,kBAAC,UAAD;GAAQ,WAAWL,EAAO;GAA1B,UAAA;IACGU,IAAS,kBAAC,KAAD;KAAG,WAAWV,EAAO;KAAS,UAAAU;IAAU,CAAA,IAAI;IACtD,kBAACC,GAAD;KAAS,IAAIC;KAAgB;KAAa;KAAM,WAAWZ,EAAO;KAC/D,UAAAa;IACM,CAAA;IACRC,IAAc,kBAAC,OAAD;KAAK,WAAWd,EAAO;KAAc,UAAAc;IAAiB,CAAA,IAAI;GACnE;EACP,CAAA,GAAAL,IAAU,kBAAC,OAAD;GAAK,WAAWT,EAAO;GAAU,UAAAS;EAAa,CAAA,IAAI,IACzD;;AAEV,CAAC"}

package/dist/components/typography/Text/Text.d.ts

@@ -28,6 +28,14 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
     dateTime?: string;
 }
 /**
+ * Body text in the theme's text face, with a size, tone and weight from the scale.
+ *
+ * @remarks
+ * `Text` is a paragraph by default and any inline element with `as` (`span`, `strong`, `em`,
+ * `small`, `label`, `time`). Size, tone, weight and measure are props, so text never needs a
+ * class.
+ *
+ * @privateRemarks
  * Body text. Paragraphs by default; any inline role via `as`.
  *
  * <Text size="sm" tone="muted">Updated 3 minutes ago</Text>

package/dist/components/typography/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["styles","Text_module_default","Text","forwardRef","Comp","rest","lines","truncate","responsive","size","cx","className","baseValue","tone","weight","numeric","align","measure","mergeStyles","responsiveVars","s","style"],"sources":["../../../../src/components/typography/Text/Text.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { baseValue, mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport styles from './Text.module.css'\n\nexport type TextSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nexport type TextTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'positive' | 'caution' | 'critical' | 'inverse'\nexport type TextWeight = 'regular' | 'medium' | 'strong'\nexport type TextAlign = 'start' | 'center' | 'end'\n/** Line-length cap from the width tokens: `narrow` 32rem · `text` 42rem · `content` 68rem. */\nexport type TextMeasure = 'narrow' | 'text' | 'content'\nexport type TextElement = 'p' | 'span' | 'div' | 'label' | 'strong' | 'em' | 'small' | 'time'\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  /** Step on the type scale. Omit to inherit the surrounding size. Responsive. */\n  size?: Responsive<TextSize>\n  /** Colour role. Omit to inherit. Status tones use the AA-safe `-text` variants. */\n  tone?: TextTone\n  /** Omit to inherit (so `as=\"strong\"` stays bold). */\n  weight?: TextWeight\n  /** Tabular lining figures in the theme's numeric face — for anything that aligns or updates. */\n  numeric?: boolean\n  /** `true` clips to one line with an ellipsis; a number clamps to that many lines. */\n  truncate?: boolean | number\n  align?: TextAlign\n  /** Cap the line length with a `--width-*` token (`max-inline-size`). Default: none. */\n  measure?: TextMeasure\n  as?: TextElement\n  /** For `as=\"label\"`. */\n  htmlFor?: string\n  /** For `as=\"time\"`. */\n  dateTime?: string\n}\n\n/**\n * Body text. Paragraphs by default; any inline role via `as`.\n *\n * <Text size=\"sm\" tone=\"muted\">Updated 3 minutes ago</Text>\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(function Text(\n  {\n    size,\n    tone,\n    weight,\n    numeric = false,\n    truncate,\n    align,\n    measure,\n    as: Comp = 'p',\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const lines =\n    truncate === true ? 1 : typeof truncate === 'number' && truncate > 0 ? truncate : undefined\n  const responsive = size !== undefined && typeof size !== 'string'\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.text, className)}\n      data-size={baseValue(size)}\n      data-responsive={responsive || undefined}\n      data-tone={tone}\n      data-weight={weight}\n      data-numeric={numeric || undefined}\n      data-truncate={lines === undefined ? undefined : lines === 1 ? 'line' : 'lines'}\n      data-align={align}\n      data-measure={measure}\n      style={mergeStyles(\n        responsive ? responsiveVars('text-size', size, (s) => `var(--text-${s})`) : undefined,\n        lines !== undefined && lines > 1 ? ({ '--text-lines': lines } as CSSProperties) : undefined,\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;AAwCA,IAAaE,IAAOC,EAAmC,SACrD,EACE,SACA,SACA,WACA,aAAU,IACV,aACA,UACA,YACA,IAAIC,IAAO,KACX,cACA,UACA,GAAGC,KAEL,GACA;CACA,IAAMC,IACJC,MAAa,KAAO,IAAI,OAAOA,KAAa,YAAYA,IAAW,IAAIA,IAAW,KAAA,GAC9EC,IAAaC,MAAS,KAAA,KAAa,OAAOA,KAAS;CACzD,OACE,kBAACL,GAAD;EAEO;EACL,WAAWM,EAAGV,EAAO,MAAMW,CAAS;EACpC,aAAWC,EAAUH,CAAI;EACzB,mBAAiBD,KAAc,KAAA;EAC/B,aAAWK;EACX,eAAaC;EACb,gBAAcC,KAAW,KAAA;EACzB,iBAAeT,MAAU,KAAA,IAAY,KAAA,IAAYA,MAAU,IAAI,SAAS;EACxE,cAAYU;EACZ,gBAAcC;EACd,OAAOC,EACLV,IAAaW,EAAe,aAAaV,IAAO,MAAM,cAAcW,EAAE,EAAE,IAAI,KAAA,GAC5Ed,MAAU,KAAA,KAAaA,IAAQ,IAAK,EAAE,gBAAgBA,EAAM,IAAsB,KAAA,GAClFe,CACF;EACA,GAAIhB;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"Text.js","names":["styles","Text_module_default","Text","forwardRef","Comp","rest","lines","truncate","responsive","size","cx","className","baseValue","tone","weight","numeric","align","measure","mergeStyles","responsiveVars","s","style"],"sources":["../../../../src/components/typography/Text/Text.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { baseValue, mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport styles from './Text.module.css'\n\nexport type TextSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nexport type TextTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'positive' | 'caution' | 'critical' | 'inverse'\nexport type TextWeight = 'regular' | 'medium' | 'strong'\nexport type TextAlign = 'start' | 'center' | 'end'\n/** Line-length cap from the width tokens: `narrow` 32rem · `text` 42rem · `content` 68rem. */\nexport type TextMeasure = 'narrow' | 'text' | 'content'\nexport type TextElement = 'p' | 'span' | 'div' | 'label' | 'strong' | 'em' | 'small' | 'time'\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  /** Step on the type scale. Omit to inherit the surrounding size. Responsive. */\n  size?: Responsive<TextSize>\n  /** Colour role. Omit to inherit. Status tones use the AA-safe `-text` variants. */\n  tone?: TextTone\n  /** Omit to inherit (so `as=\"strong\"` stays bold). */\n  weight?: TextWeight\n  /** Tabular lining figures in the theme's numeric face — for anything that aligns or updates. */\n  numeric?: boolean\n  /** `true` clips to one line with an ellipsis; a number clamps to that many lines. */\n  truncate?: boolean | number\n  align?: TextAlign\n  /** Cap the line length with a `--width-*` token (`max-inline-size`). Default: none. */\n  measure?: TextMeasure\n  as?: TextElement\n  /** For `as=\"label\"`. */\n  htmlFor?: string\n  /** For `as=\"time\"`. */\n  dateTime?: string\n}\n\n/**\n * Body text in the theme's text face, with a size, tone and weight from the scale.\n *\n * @remarks\n * `Text` is a paragraph by default and any inline element with `as` (`span`, `strong`, `em`,\n * `small`, `label`, `time`). Size, tone, weight and measure are props, so text never needs a\n * class.\n *\n * @privateRemarks\n * Body text. Paragraphs by default; any inline role via `as`.\n *\n * <Text size=\"sm\" tone=\"muted\">Updated 3 minutes ago</Text>\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(function Text(\n  {\n    size,\n    tone,\n    weight,\n    numeric = false,\n    truncate,\n    align,\n    measure,\n    as: Comp = 'p',\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const lines =\n    truncate === true ? 1 : typeof truncate === 'number' && truncate > 0 ? truncate : undefined\n  const responsive = size !== undefined && typeof size !== 'string'\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.text, className)}\n      data-size={baseValue(size)}\n      data-responsive={responsive || undefined}\n      data-tone={tone}\n      data-weight={weight}\n      data-numeric={numeric || undefined}\n      data-truncate={lines === undefined ? undefined : lines === 1 ? 'line' : 'lines'}\n      data-align={align}\n      data-measure={measure}\n      style={mergeStyles(\n        responsive ? responsiveVars('text-size', size, (s) => `var(--text-${s})`) : undefined,\n        lines !== undefined && lines > 1 ? ({ '--text-lines': lines } as CSSProperties) : undefined,\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;AAgDA,IAAaE,IAAOC,EAAmC,SACrD,EACE,SACA,SACA,WACA,aAAU,IACV,aACA,UACA,YACA,IAAIC,IAAO,KACX,cACA,UACA,GAAGC,KAEL,GACA;CACA,IAAMC,IACJC,MAAa,KAAO,IAAI,OAAOA,KAAa,YAAYA,IAAW,IAAIA,IAAW,KAAA,GAC9EC,IAAaC,MAAS,KAAA,KAAa,OAAOA,KAAS;CACzD,OACE,kBAACL,GAAD;EAEO;EACL,WAAWM,EAAGV,EAAO,MAAMW,CAAS;EACpC,aAAWC,EAAUH,CAAI;EACzB,mBAAiBD,KAAc,KAAA;EAC/B,aAAWK;EACX,eAAaC;EACb,gBAAcC,KAAW,KAAA;EACzB,iBAAeT,MAAU,KAAA,IAAY,KAAA,IAAYA,MAAU,IAAI,SAAS;EACxE,cAAYU;EACZ,gBAAcC;EACd,OAAOC,EACLV,IAAaW,EAAe,aAAaV,IAAO,MAAM,cAAcW,EAAE,EAAE,IAAI,KAAA,GAC5Ed,MAAU,KAAA,KAAaA,IAAQ,IAAK,EAAE,gBAAgBA,EAAM,IAAsB,KAAA,GAClFe,CACF;EACA,GAAIhB;CACL,CAAA;AAEL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mitcsutt/kiln-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Kiln: a themeable React design system on Radix primitives, plain CSS and design tokens",
   "keywords": [
     "kiln",