@kanso-labs/kanso-ui 0.40.2 → 0.40.3

package/dist/components/snackbar/index.js

@@ -151,7 +151,7 @@ function Snackbar(t0) {
 		T0 = UNSTABLE_ToastRegion;
 		t1 = queue.rac;
 		t2 = props;
-		t3 = mergeStatefulStyles({ className: "x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1u7mh7p xi7mcox xbpsoft xq5vm52 x47corl xixxii4 xfo81ep" }, props);
+		t3 = mergeStatefulStyles({ className: "x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1u7mh7p xi7mcox xbpsoft xq5vm52 x47corl xixxii4 x1bk8fjm" }, props);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = closeLabel;

package/dist/components/snackbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","MESSAGE_MS","UNTIL_CLOSED","WIDE","rise","FORCED_COLORS","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","controlFocused","controlHovered","controlPressed","SnackbarAction","label","onPress","SnackbarMessage","message","showCloseButton","SnackbarOptions","onClose","timeout","SnackbarProps","className","closeLabel","queue","SnackbarQueue","style","Omit","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","controlClassName","StyleXStyles","state","isFocusVisible","isHovered","isPressed","props","Snackbar","t0","$","T0","t1","t2","t3","t4","t5","snackbarContent","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps","RACToastQueue","stylex.props","_c","RACToastRegion","RACButton","RACToastContent","RACToast"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container, and\n// `src/components/portal-container.test.tsx` is what keeps that true.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// How long a message is shown when the call site names no `timeout`. The\n// specs page gives no duration, so these come from the snackbar's guidelines\n// and accessibility pages.\n//\n// A message alone leaves after five seconds. The pages allow four to ten, and\n// React Aria's toast docs set five as the least a reader should be given.\n//\n// A message with an action stays until the action is taken or something\n// closes it, as the pages ask of every actionable snackbar. No timer can know\n// how long a reader needs to act: a screen reader user hears the message\n// first and has to reach the region before the action is any use, and the\n// pause while the region is hovered or focused only starts once they have.\n// Android's snackbar can keep shorter defaults because the platform lengthens\n// them from each user's accessibility settings, and the web has no such\n// setting to read.\nconst MESSAGE_MS = 5000;\nconst UNTIL_CLOSED = 0;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xbg5kjn\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"xoqf9c6\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  controlFocused: {\n    kWkggS: \"x1mbb5iu\",\n    $$css: true\n  },\n  controlHovered: {\n    kWkggS: \"x930l3l\",\n    $$css: true\n  },\n  controlPressed: {\n    kWkggS: \"xsykwg8\",\n    $$css: true\n  }\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  message: ReactNode;\n  showCloseButton: boolean;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /** Run when the snackbar closes, however it was closed. */\n  onClose?: () => void;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   *\n   * Named for what it draws rather than `isDismissable`, which on `Sheet`,\n   * `Dialog` and React Aria's modals is whether a press outside them closes\n   * them — a snackbar has no outside to press.\n   * @default false\n   */\n  showCloseButton?: boolean;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to five seconds\n   * for a message alone. A message with an action defaults to `0` and stays\n   * until the action is taken or something closes it, as Material Design asks\n   * of an actionable snackbar, since a reader may need longer to reach the\n   * action than any timer allows. The timer is paused while the region is\n   * hovered or focused, so a message never expires while it is being read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `showCloseButton`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = {\n  /**\n   * What a screen reader calls the region holding the snackbar. Left out,\n   * React Aria names the region itself: a count of the messages it holds, in\n   * the reader's own locale — \"1 notification.\" in English, and one of some\n   * thirty languages otherwise. Pass a name only to replace that, and pass a\n   * translated one, since whatever is passed is read as written.\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /**\n   * What a screen reader calls the button that dismisses a snackbar. It sits\n   * here rather than on a message's own options because it does not vary by\n   * message, so putting it there would make every `add` call repeat it. Left\n   * out, React Aria names it in the reader's locale — \"Close\" in English.\n   */\n  closeLabel?: string;\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n} & Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'>;\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      onClose,\n      showCloseButton = false,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      message,\n      showCloseButton\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? MESSAGE_MS : UNTIL_CLOSED)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n// A control's classes, from its own render state — see `controlFocused`.\nfunction controlClassName(style: stylex.StyleXStyles) {\n  return (state: {\n    isFocusVisible: boolean;\n    isHovered: boolean;\n    isPressed: boolean;\n  }) => stylex.props(styles.control, style, state.isHovered && styles.controlHovered, state.isFocusVisible && styles.controlFocused, state.isPressed && styles.controlPressed).className ?? '';\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n */\nfunction Snackbar({\n  closeLabel,\n  queue,\n  ...props\n}: RefAttributes<HTMLDivElement> & SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1u7mh7p xi7mcox xbpsoft xq5vm52 x47corl xixxii4 xfo81ep\"\n  }, props)}>\n      {snackbarContent(queue, closeLabel)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} className={controlClassName(style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue, closeLabel: string | undefined) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} closeLabel={closeLabel} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  closeLabel,\n  showCloseButton\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  closeLabel: string | undefined;\n  showCloseButton: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {showCloseButton ? <SnackbarButton aria-label={closeLabel} slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  closeLabel,\n  toast\n}: {\n  close: () => void;\n  closeLabel: string | undefined;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    message,\n    showCloseButton\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1w1tqly x1tfhd1 xx61lck x13rsnn2 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} closeLabel={closeLabel} showCloseButton={showCloseButton} />\n    </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":";;;;;;;;;AAuEA,MAAM+B,aAAa;AACnB,MAAMC,eAAe;AAgBrB,MAAMI,SAAS;CACbC,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,OAAO;EACLC,QAAQ;EACRV,QAAQ;EACRW,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAK,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRpB,OAAO;CACT;CACAqB,gBAAgB;EACdd,QAAQ;EACRP,OAAO;CACT;CACAsB,gBAAgB;EACdf,QAAQ;EACRP,OAAO;CACT;CACAuB,gBAAgB;EACdhB,QAAQ;EACRP,OAAO;CACT;AACF;;;;;;;;;;;;;;AAwFA,IAAMqC,gBAAN,MAAoB;;;;;CAKlB;CACAK,cAAc;EAGZ,KAAKD,MAAM,IAAIvE,oBAA+B,EAC5CyE,kBAAkB,EACpB,CAAC;CACH;;;;CAKAC,IAAIhB,SAAoBiB,UAA2B,CAAC,GAAG;EACrD,MAAM,EACJtD,QACAwC,SACAF,kBAAkB,OAClBG,YACEa;EACJ,OAAO,KAAKJ,IAAIG,IAAI;GAClBrD;GACAqC;GACAC;EACF,GAAG;GACDE;GACAC,SAASA,YAAYzC,WAAWuD,KAAAA,IAAY7D,aAAaC;EAC3D,CAAC;CACH;;CAGA6D,QAAQ;EACN,KAAKN,IAAIM,MAAM;CACjB;;CAGA9C,MAAM+C,KAAa;EACjB,KAAKP,IAAIxC,MAAM+C,GAAG;CACpB;AACF;AAMA,SAASC,YAAY1D,QAAwBU,OAAmB;CAC9D,aAAa;EACXV,OAAOmC,QAAQ;EACfzB,MAAM;CACR;AACF;AACA,SAASiD,WAAWd,OAAsBY,KAAa;CACrD,aAAa;EACXZ,MAAMnC,MAAM+C,GAAG;CACjB;AACF;AAGA,SAASG,iBAAiBb,OAA4B;CACpD,QAAQe,UAIF3F,MAAa4B,OAAOe,SAASiC,OAAOe,MAAME,aAAajE,OAAOgC,gBAAgB+B,MAAMC,kBAAkBhE,OAAO+B,gBAAgBgC,MAAMG,aAAalE,OAAOiC,cAAc,CAAC,CAACW,aAAa;AAC5L;;;;;;;;;;;;;;;;;;;AAoBA,SAAAwB,SAAAC,IAAA;CAAA,MAAAC,IAAAzG,EAAA,EAAA;CAAA,IAAA0G;CAAA,IAAA1B;CAAA,IAAAC;CAAA,IAAA0B;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAkB,MAAA,EAAAxB,YAAA8B,IAAA7B,OAAA8B,IAAA,GAAAT,UAAAE;EAAAxB,aAAA8B;EAAA7B,QAAA8B;EAKRL,KAAAzF;EAAuC0F,KAAA1B,MAAKK;EAAUgB,KAAAA;EAAWO,KAAAxF,oBAAoB,EAAA0D,WAChF,8HACb,GAAGuB,KAAK;EAACG,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAzB;EAAAyB,EAAA,KAAAxB;EAAAwB,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAH,KAAAD,EAAA;EAAAzB,aAAAyB,EAAA;EAAAxB,QAAAwB,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAzB,cAAAyB,EAAA,OAAAxB,OAAA;EACJ6B,KAAAE,gBAAgB/B,OAAOD,UAAU;EAACyB,EAAA,KAAAzB;EAAAyB,EAAA,KAAAxB;EAAAwB,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,QAAAC,MAAAD,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAHhCC,KAAA,oBAAC,IAAD;GAAwC,OAAAJ;GAAS,GAAML;GAAK,GAAMO;GAGpEC,UAAAA;EAHiB,CAAA;EAIHL,EAAA,MAAAC;EAAAD,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAJZM;AAIY;;;;;;;AASrB,SAAAE,eAAAT,IAAA;CAAA,MAAAC,IAAAzG,EAAA,EAAA;CAAA,IAAAkH;CAAA,IAAAZ;CAAA,IAAAnB;CAAA,IAAAsB,EAAA,OAAAD,IAAA;EAAwB,CAAA,CAAAU,UAAA/B,OAAA,GAAAmB,SAAAE;EAUvBC,EAAA,KAAAD;EAAAC,EAAA,KAAAS;EAAAT,EAAA,KAAAH;EAAAG,EAAA,KAAAtB;CAAA,OAAA;EAAA+B,WAAAT,EAAA;EAAAH,QAAAG,EAAA;EAAAtB,QAAAsB,EAAA;CAAA;CACC,MAAAU,SAAe/F,UAA4B;CACrB,MAAAuF,KAAAQ,OAAMC;CAAS,IAAAR;CAAA,IAAAH,EAAA,OAAAtB,OAAA;EAAwByB,KAAAZ,iBAAiBb,KAAK;EAACsB,EAAA,KAAAtB;EAAAsB,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAS,YAAAT,EAAA,OAAAH,SAAAG,EAAA,OAAAU,OAAAC,YAAAX,EAAA,OAAAU,OAAAE,WAAAZ,EAAA,QAAAG,IAAA;EAA7EC,KAAA,qBAACmB,QAAD;GAAU,GAAKrB;GAAe,GAAML;GAAkB,WAAAM;GAAtD,UAAA,CACFM,UACAC,OAAME,OAFM;;EAGHZ,EAAA,KAAAS;EAAAT,EAAA,KAAAH;EAAAG,EAAA,KAAAU,OAAAC;EAAAX,EAAA,KAAAU,OAAAE;EAAAZ,EAAA,MAAAG;EAAAH,EAAA,MAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAHPI;AAGO;AAEhB,SAASG,gBAAgB/B,OAAsBD,YAAgC;CAC7E,QAAQ,EACNsC,YAGI,oBAAC,eAAD;EAAe,OAAOvB,WAAWd,OAAOqC,MAAMzB,GAAG;EAAeb;EAAmBsC;CAAM,CAAA;AACjG;;AAGA,SAAAC,iBAAAf,IAAA;CAAA,MAAAC,IAAAzG,EAAA,CAAA;CAA0B,MAAA,EAAAoC,QAAAU,OAAAkC,YAAAN,oBAAA8B;CAUzB,IAAAG;CAAA,IAAAF,EAAA,OAAArE,UAAAqE,EAAA,OAAA3D,OAAA;EAEM6D,KAAAvE,WAAWuD,KAAAA,IAAX,OAA8B,oBAAC,gBAAD;GAAyB,SAAAG,YAAY1D,QAAQU,KAAK;GAAU,OAAAX,OAAMC;GAC5FA,UAAAA,OAAMkC;EADmC,CAAA;EAE3BmC,EAAA,KAAArE;EAAAqE,EAAA,KAAA3D;EAAA2D,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAzB,cAAAyB,EAAA,OAAA/B,iBAAA;EAClBkC,KAAAlC,kBAAkB,oBAAC,gBAAD;GAA4BM,cAAAA;GAAiB,MAAA;GAAe,OAAA7C,OAAMW;GACjF,UAAA,oBAAC,YAAD,EAAsB,WAAA,kBAAiB,CAAA;EADT,CAAA,IAAjC;EAEyB2D,EAAA,KAAAzB;EAAAyB,EAAA,KAAA/B;EAAA+B,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAE,MAAAF,EAAA,OAAAG,IAAA;EANvBC,KAAA,qBAAA,UAAA,EAAA,UAAA,CACFF,IAGAC,EAEyB,EAAA,CAAA;EACzBH,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAPEI;AAOF;;AAIP,SAAAW,cAAAhB,IAAA;CAAA,MAAAC,IAAAzG,EAAA,EAAA;CAAuB,MAAA,EAAA8C,OAAAkC,YAAAsC,UAAAd;CASrB,MAAA,EAAApE,QAAAqC,SAAAC,oBAII4C,MAAKG;CAAS,IAAAd;CAAA,IAAAF,EAAA,OAAAhC,SAAA;EAEdkC,KAAA,oBAACsB,uBAAD;GAA2B,WAAA;GACzB,UAAA,oBAAC,MAAD;IAAW,MAAA;IAASxD,UAAAA;GAAf,CAAA;EADS,CAAA;EAEEgC,EAAA,KAAAhC;EAAAgC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAArE,UAAAqE,EAAA,OAAA3D,SAAA2D,EAAA,OAAAzB,cAAAyB,EAAA,OAAA/B,iBAAA;EAClBkC,KAAA,oBAAC,kBAAD;GAA0BxE;GAAeU;GAAmBkC;GAA6BN;EAAe,CAAA;EAAI+B,EAAA,KAAArE;EAAAqE,EAAA,KAAA3D;EAAA2D,EAAA,KAAAzB;EAAAyB,EAAA,KAAA/B;EAAA+B,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAa,OAAA;EAJzGT,KAAA,qBAACqB,gBAAD;GAAiBZ;GAAiB,WAAA;GAAlC,UAAA,CACHX,IAGAC,EAJY;;EAKHH,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAa;EAAAb,EAAA,MAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OALNI;AAKM;AAEfN,SAASmB,QAAQxC"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","layers","mergeStatefulStyles","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","MESSAGE_MS","UNTIL_CLOSED","WIDE","rise","FORCED_COLORS","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","controlFocused","controlHovered","controlPressed","SnackbarAction","label","onPress","SnackbarMessage","message","showCloseButton","SnackbarOptions","onClose","timeout","SnackbarProps","className","closeLabel","queue","SnackbarQueue","style","Omit","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","controlClassName","StyleXStyles","state","isFocusVisible","isHovered","isPressed","props","Snackbar","t0","$","T0","t1","t2","t3","t4","t5","snackbarContent","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps","RACToastQueue","stylex.props","_c","RACToastRegion","RACButton","RACToastContent","RACToast"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport '../../styles/layers.stylex';\nimport { layers } from '../../styles/layers.stylex';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container, and\n// `src/components/portal-container.test.tsx` is what keeps that true.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// How long a message is shown when the call site names no `timeout`. The\n// specs page gives no duration, so these come from the snackbar's guidelines\n// and accessibility pages.\n//\n// A message alone leaves after five seconds. The pages allow four to ten, and\n// React Aria's toast docs set five as the least a reader should be given.\n//\n// A message with an action stays until the action is taken or something\n// closes it, as the pages ask of every actionable snackbar. No timer can know\n// how long a reader needs to act: a screen reader user hears the message\n// first and has to reach the region before the action is any use, and the\n// pause while the region is hovered or focused only starts once they have.\n// Android's snackbar can keep shorter defaults because the platform lengthens\n// them from each user's accessibility settings, and the web has no such\n// setting to read.\nconst MESSAGE_MS = 5000;\nconst UNTIL_CLOSED = 0;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xbg5kjn\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"xoqf9c6\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  controlFocused: {\n    kWkggS: \"x1mbb5iu\",\n    $$css: true\n  },\n  controlHovered: {\n    kWkggS: \"x930l3l\",\n    $$css: true\n  },\n  controlPressed: {\n    kWkggS: \"xsykwg8\",\n    $$css: true\n  }\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  message: ReactNode;\n  showCloseButton: boolean;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /** Run when the snackbar closes, however it was closed. */\n  onClose?: () => void;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   *\n   * Named for what it draws rather than `isDismissable`, which on `Sheet`,\n   * `Dialog` and React Aria's modals is whether a press outside them closes\n   * them — a snackbar has no outside to press.\n   * @default false\n   */\n  showCloseButton?: boolean;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to five seconds\n   * for a message alone. A message with an action defaults to `0` and stays\n   * until the action is taken or something closes it, as Material Design asks\n   * of an actionable snackbar, since a reader may need longer to reach the\n   * action than any timer allows. The timer is paused while the region is\n   * hovered or focused, so a message never expires while it is being read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `showCloseButton`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = {\n  /**\n   * What a screen reader calls the region holding the snackbar. Left out,\n   * React Aria names the region itself: a count of the messages it holds, in\n   * the reader's own locale — \"1 notification.\" in English, and one of some\n   * thirty languages otherwise. Pass a name only to replace that, and pass a\n   * translated one, since whatever is passed is read as written.\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /**\n   * What a screen reader calls the button that dismisses a snackbar. It sits\n   * here rather than on a message's own options because it does not vary by\n   * message, so putting it there would make every `add` call repeat it. Left\n   * out, React Aria names it in the reader's locale — \"Close\" in English.\n   */\n  closeLabel?: string;\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n} & Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'>;\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      onClose,\n      showCloseButton = false,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      message,\n      showCloseButton\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? MESSAGE_MS : UNTIL_CLOSED)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n// A control's classes, from its own render state — see `controlFocused`.\nfunction controlClassName(style: stylex.StyleXStyles) {\n  return (state: {\n    isFocusVisible: boolean;\n    isHovered: boolean;\n    isPressed: boolean;\n  }) => stylex.props(styles.control, style, state.isHovered && styles.controlHovered, state.isFocusVisible && styles.controlFocused, state.isPressed && styles.controlPressed).className ?? '';\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n */\nfunction Snackbar({\n  closeLabel,\n  queue,\n  ...props\n}: RefAttributes<HTMLDivElement> & SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1u7mh7p xi7mcox xbpsoft xq5vm52 x47corl xixxii4 x1bk8fjm\"\n  }, props)}>\n      {snackbarContent(queue, closeLabel)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} className={controlClassName(style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue, closeLabel: string | undefined) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} closeLabel={closeLabel} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  closeLabel,\n  showCloseButton\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  closeLabel: string | undefined;\n  showCloseButton: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {showCloseButton ? <SnackbarButton aria-label={closeLabel} slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  closeLabel,\n  toast\n}: {\n  close: () => void;\n  closeLabel: string | undefined;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    message,\n    showCloseButton\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1w1tqly x1tfhd1 xx61lck x13rsnn2 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} closeLabel={closeLabel} showCloseButton={showCloseButton} />\n    </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":"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"}

package/dist/control/index.js

@@ -1,9 +1,62 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { fieldChromeStyles } from "../field/styles.js";
 import { controlStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
+import { Text } from "react-aria-components";
 //#region src/control/index.tsx
 /**
+* The hint under one option of a group, in the second column of its grid and
+* in the option's description slot, so it is read with the option.
+*
+* Not `FieldMessage`, which is the line under a whole field: it reads the
+* validation of the field around it and draws an error, or an empty line for
+* one to arrive in. An option sits inside its group's validation, so through
+* `FieldMessage` it took the group's error for its own — React Aria's
+* `FieldError` then rendered into the option's slots, which hold no error
+* slot, and threw — dropped its own hint whenever the group was invalid, and
+* drew an empty line under every option inside a `Form`. The group's own line
+* is where its error goes, and an option has only its hint to say.
+*/
+function ControlDescription(t0) {
+	const $ = c(5);
+	const { children } = t0;
+	if (children === void 0) return null;
+	let t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = props(controlStyles.messages);
+		t2 = props(fieldChromeStyles.message, fieldChromeStyles.messageLine);
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t1 = $[0];
+		t2 = $[1];
+	}
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = props(fieldChromeStyles.message);
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] !== children) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			...t1,
+			children: /* @__PURE__ */ jsx("div", {
+				...t2,
+				children: /* @__PURE__ */ jsx(Text, {
+					slot: "description",
+					...t3,
+					children
+				})
+			})
+		});
+		$[3] = children;
+		$[4] = t4;
+	} else t4 = $[4];
+	return t4;
+}
+/**
 * The label beside a selection control, in the second column of its grid.
 *
 * Renders nothing without children, which is what a control labelled from
@@ -33,6 +86,6 @@ function ControlLabel(t0) {
 	return t2;
 }
 //#endregion
-export { ControlLabel };
+export { ControlDescription, ControlLabel };
 
 //# sourceMappingURL=index.js.map

package/dist/control/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","controlStyles","ControlLabelProps","children","state","ControlLabelState","isDisabled","isReadOnly","ControlLabel","t0","$","_c","undefined","t1","props","label","labelReadOnly","labelDisabled","t2","_c","stylex.props"],"sources":["../../src/control/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { controlStyles } from './styles';\ntype ControlLabelProps = {\n  /** The label's text. Nothing renders when there is none. */\n  children: ReactNode;\n  /** The render state React Aria hands the component. */\n  state: ControlLabelState;\n};\n\n/**\n * The state a label reads. Each of React Aria's three render states carries\n * more than this, and this is the part all three share.\n */\ntype ControlLabelState = {\n  isDisabled: boolean;\n  isReadOnly: boolean;\n};\n\n/**\n * The label beside a selection control, in the second column of its grid.\n *\n * Renders nothing without children, which is what a control labelled from\n * outside — by a group's legend, or an `aria-label` — needs.\n */\nfunction ControlLabel({\n  children,\n  state\n}: ControlLabelProps) {\n  if (children === undefined) {\n    return null;\n  }\n  return <span {...stylex.props(controlStyles.label, state.isReadOnly && controlStyles.labelReadOnly, state.isDisabled && controlStyles.labelDisabled)}>\n      {children}\n    </span>;\n}\nexport type { ControlLabelProps };\nexport { ControlLabel };"],"mappings":";;;;;;;;;;;AAyBA,SAAAS,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAAR,UAAAC,UAAAK;CAIpB,IAAIN,aAAaS,KAAAA,GAAS,OACjB;CACR,IAAAC;CAAA,IAAAH,EAAA,OAAAN,MAAAE,cAAAI,EAAA,OAAAN,MAAAG,YAAA;EACgBM,KAAAb,MAAaC,cAAac,OAAQX,MAAKG,cAAeN,cAAae,eAAgBZ,MAAKE,cAAeL,cAAagB,aAAc;EAACP,EAAA,KAAAN,MAAAE;EAAAI,EAAA,KAAAN,MAAAG;EAAAG,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAP,YAAAO,EAAA,OAAAG,IAAA;EAA7IK,KAAA,oBAAA,QAAA;GAEE,GAFQL;GACZV;EACI,CAAA;EAAAO,EAAA,KAAAP;EAAAO,EAAA,KAAAG;EAAAH,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAFFQ;AAEE"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","Text","fieldChromeStyles","controlStyles","ControlDescriptionProps","children","ControlLabelProps","state","ControlLabelState","isDisabled","isReadOnly","ControlDescription","t0","$","_c","undefined","t1","t2","Symbol","for","props","messages","message","messageLine","t3","t4","ControlLabel","label","labelReadOnly","labelDisabled","_c","stylex.props"],"sources":["../../src/control/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { Text } from 'react-aria-components';\nimport { fieldChromeStyles } from '../field/styles';\nimport { controlStyles } from './styles';\ntype ControlDescriptionProps = {\n  /** The hint. Nothing renders when there is none. */\n  children: string | undefined;\n};\ntype ControlLabelProps = {\n  /** The label's text. Nothing renders when there is none. */\n  children: ReactNode;\n  /** The render state React Aria hands the component. */\n  state: ControlLabelState;\n};\n\n/**\n * The state a label reads. Each of React Aria's three render states carries\n * more than this, and this is the part all three share.\n */\ntype ControlLabelState = {\n  isDisabled: boolean;\n  isReadOnly: boolean;\n};\n\n/**\n * The hint under one option of a group, in the second column of its grid and\n * in the option's description slot, so it is read with the option.\n *\n * Not `FieldMessage`, which is the line under a whole field: it reads the\n * validation of the field around it and draws an error, or an empty line for\n * one to arrive in. An option sits inside its group's validation, so through\n * `FieldMessage` it took the group's error for its own — React Aria's\n * `FieldError` then rendered into the option's slots, which hold no error\n * slot, and threw — dropped its own hint whenever the group was invalid, and\n * drew an empty line under every option inside a `Form`. The group's own line\n * is where its error goes, and an option has only its hint to say.\n */\nfunction ControlDescription({\n  children\n}: ControlDescriptionProps) {\n  if (children === undefined) {\n    return null;\n  }\n  return <div {...stylex.props(controlStyles.messages)}>\n      <div {...stylex.props(fieldChromeStyles.message, fieldChromeStyles.messageLine)}>\n        <Text slot=\"description\" {...stylex.props(fieldChromeStyles.message)}>\n          {children}\n        </Text>\n      </div>\n    </div>;\n}\n\n/**\n * The label beside a selection control, in the second column of its grid.\n *\n * Renders nothing without children, which is what a control labelled from\n * outside — by a group's legend, or an `aria-label` — needs.\n */\nfunction ControlLabel({\n  children,\n  state\n}: ControlLabelProps) {\n  if (children === undefined) {\n    return null;\n  }\n  return <span {...stylex.props(controlStyles.label, state.isReadOnly && controlStyles.labelReadOnly, state.isDisabled && controlStyles.labelDisabled)}>\n      {children}\n    </span>;\n}\nexport type { ControlDescriptionProps, ControlLabelProps };\nexport { ControlDescription, ControlLabel };"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsCA,SAAAY,mBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAA4B,MAAA,EAAAT,aAAAO;CAG1B,IAAIP,aAAaU,KAAAA,GAAS,OACjB;CACR,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAK,OAAAC,IAAA,2BAAA,GAAA;EACeH,KAAAhB,MAAaG,cAAakB,QAAS;EACtCJ,KAAAjB,MAAaE,kBAAiBoB,SAAUpB,kBAAiBqB,WAAY;EAACV,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAD,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAK,OAAAC,IAAA,2BAAA,GAAA;EAChDK,KAAAxB,MAAaE,kBAAiBoB,OAAQ;EAACT,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAR,UAAA;EAFnEoB,KAAA,oBAAA,OAAA;GAMC,GANQT;GACZ,UAAA,oBAAA,OAAA;IAIM,GAJGC;IACP,UAAA,oBAAC,MAAD;KAAW,MAAA;KAAa,GAAKO;KAC1BnB;IADE,CAAA;GAGD,CAAA;EACF,CAAA;EAAAQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OANDY;AAMC;;;;;;;AASV,SAAAC,aAAAd,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAAT,UAAAE,UAAAK;CAIpB,IAAIP,aAAaU,KAAAA,GAAS,OACjB;CACR,IAAAC;CAAA,IAAAH,EAAA,OAAAN,MAAAE,cAAAI,EAAA,OAAAN,MAAAG,YAAA;EACgBM,KAAAhB,MAAaG,cAAawB,OAAQpB,MAAKG,cAAeP,cAAayB,eAAgBrB,MAAKE,cAAeN,cAAa0B,aAAc;EAAChB,EAAA,KAAAN,MAAAE;EAAAI,EAAA,KAAAN,MAAAG;EAAAG,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAR,YAAAQ,EAAA,OAAAG,IAAA;EAA7IC,KAAA,oBAAA,QAAA;GAEE,GAFQD;GACZX;EACI,CAAA;EAAAQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAFFI;AAEE"}

package/dist/control/styles.js

@@ -50,7 +50,7 @@ const controlStyles = {
 		$$css: true
 	},
 	labelDisabled: {
-		kMwMTN: "x1xj74d8",
+		kMwMTN: "x1xj74d8 x1bhcspo",
 		kkrTdU: "x1h6gzvc",
 		$$css: true
 	},

package/dist/control/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","LAYER_SIZE","TARGET_SIZE","TARGET_REACH","controlStyles","controlDisabled","kkrTdU","$$css","controlReadOnly","disc","kgeoSG","kFcpXp","kEoFBp","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","field","k1C7PZ","kumcoG","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","labelDisabled","labelReadOnly","messages","kEXP64"],"sources":["../../src/control/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row a selection control draws, shared by Checkbox, Switch and Radio.\n// Each wrote it out in full: the two-column grid, the body-large label with\n// its disabled and read-only fades, the messages cell under the text, and the\n// cursors the control takes in those two states. Switch's own comment already\n// said it drew \"the two-column grid the checkbox uses\" while keeping a second\n// copy, so the coupling was recorded in prose rather than in code — the same\n// thing src/field and src/row were extracted to stop.\n//\n// The set is closed at three. React Aria Components has no fourth component\n// drawing this row, and CheckboxGroup is a container rather than a control.\n// What this is worth is that the three cannot drift apart, and that the\n// repository's own convention — a style more than one component draws lives\n// beside src/components, not inside it — holds here too.\n//\n// Two things deliberately stay with each component.\n//\n// The state layers are three different shapes rather than one shape with\n// three sets of key names. Checkbox carries an `error` key Radio has no\n// equivalent for, Checkbox's pressed set inverts its own key names, and\n// Switch deliberately does not invert at all. One style keyed on a `marked`\n// boolean would have to encode an error branch one caller uses, an inversion\n// another uses, and a documented non-inversion for the third, which costs a\n// reader more than the three short `stylex.create` calls it would replace.\n//\n// And the disc's colour. Checkbox draws it in `onSurface` and Radio in\n// `onSurfaceVariant`, which is the one declaration their otherwise identical\n// discs disagree on, so `disc` holds the other fourteen and each component\n// composes its own colour after.\n// The two sizes the checkbox, radio button and switch pages each give, and\n// the decision the three of them share.\n//\n// Every one of those pages lists them as separate measurements — a 40dp state\n// layer and a 48dp target — and all three components here recorded the pair in\n// their header comments while drawing only the first. The target is what the\n// pages ask a press to reach, so it is drawn: `disc` carries a transparent\n// `::before` that reaches the 4dp either side, taking the press because a\n// pseudo-element is part of the element it belongs to. Nothing moves, since\n// that box is out of flow — the alternative, a 48dp disc, would have grown\n// every form in every consuming app by 8dp a row.\n//\n// Switch composes neither of these. Its track is its own 52 by 40, so it\n// carries the same `::before` in its own file, over the one axis that is\n// short.\n//\n// The layer is also what the label centres its first line on, and the two\n// have to agree: a disc resized without the label following it would put the\n// control off its own label again, which is the drift this row already had\n// once. The target is deliberately not in that sum — a label centred on an\n// invisible box would sit 4dp below the disc a reader can see.\n//\n// Literals rather than `sizing.controlSm` and `controlMd`, which happen to\n// hold the same two numbers. Those are steps of the control scale, spent on\n// button heights; these are one page's state layer and one page's target, and\n// a consumer resizing their buttons should not move either.\nconst LAYER_SIZE = '40px';\nconst TARGET_SIZE = '48px';\n\n/** How far the target reaches past the layer on each side: 4dp. */\nconst TARGET_REACH = `calc((${LAYER_SIZE} - ${TARGET_SIZE}) / 2)`;\nconst controlStyles = {\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  disc: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x15kbrqr\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  field: {\n    kGNEyG: \"x7a106z\",\n    kB7OPa: \"x9f619\",\n    k1C7PZ: \"xpr5407\",\n    k1xSpc: \"xrvj5dj\",\n    kumcoG: \"x1pmbctz\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k8WAf4: \"x18r0n19\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  labelReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  messages: {\n    kEXP64: \"x1xdureb\",\n    $$css: true\n  }\n};\nexport { controlStyles };"],"mappings":";AA+DA,MAAMU,gBAAgB;CACpBC,iBAAiB;EACfC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfF,QAAQ;EACRC,OAAO;CACT;CACAE,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRZ,QAAQ;EACRa,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,OAAO;EACLb,QAAQ;EACRI,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRtB,OAAO;CACT;CACAuB,OAAO;EACLZ,QAAQ;EACRa,QAAQ;EACRzB,QAAQ;EACR0B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR9B,OAAO;CACT;CACA+B,eAAe;EACbP,QAAQ;EACRzB,QAAQ;EACRC,OAAO;CACT;CACAgC,eAAe;EACbjC,QAAQ;EACRC,OAAO;CACT;CACAiC,UAAU;EACRC,QAAQ;EACRlC,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","LAYER_SIZE","TARGET_SIZE","TARGET_REACH","controlStyles","controlDisabled","kkrTdU","$$css","controlReadOnly","disc","kgeoSG","kFcpXp","kEoFBp","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","field","k1C7PZ","kumcoG","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","labelDisabled","labelReadOnly","messages","kEXP64"],"sources":["../../src/control/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The row a selection control draws, shared by Checkbox, Switch and Radio.\n// Each wrote it out in full: the two-column grid, the body-large label with\n// its disabled and read-only fades, the messages cell under the text, and the\n// cursors the control takes in those two states. Switch's own comment already\n// said it drew \"the two-column grid the checkbox uses\" while keeping a second\n// copy, so the coupling was recorded in prose rather than in code — the same\n// thing src/field and src/row were extracted to stop.\n//\n// The set is closed at three. React Aria Components has no fourth component\n// drawing this row, and CheckboxGroup is a container rather than a control.\n// What this is worth is that the three cannot drift apart, and that the\n// repository's own convention — a style more than one component draws lives\n// beside src/components, not inside it — holds here too.\n//\n// Two things deliberately stay with each component.\n//\n// The state layers are three different shapes rather than one shape with\n// three sets of key names. Checkbox carries an `error` key Radio has no\n// equivalent for, Checkbox's pressed set inverts its own key names, and\n// Switch deliberately does not invert at all. One style keyed on a `marked`\n// boolean would have to encode an error branch one caller uses, an inversion\n// another uses, and a documented non-inversion for the third, which costs a\n// reader more than the three short `stylex.create` calls it would replace.\n//\n// And the disc's colour. Checkbox draws it in `onSurface` and Radio in\n// `onSurfaceVariant`, which is the one declaration their otherwise identical\n// discs disagree on, so `disc` holds the other fourteen and each component\n// composes its own colour after.\n// The two sizes the checkbox, radio button and switch pages each give, and\n// the decision the three of them share.\n//\n// Every one of those pages lists them as separate measurements — a 40dp state\n// layer and a 48dp target — and all three components here recorded the pair in\n// their header comments while drawing only the first. The target is what the\n// pages ask a press to reach, so it is drawn: `disc` carries a transparent\n// `::before` that reaches the 4dp either side, taking the press because a\n// pseudo-element is part of the element it belongs to. Nothing moves, since\n// that box is out of flow — the alternative, a 48dp disc, would have grown\n// every form in every consuming app by 8dp a row.\n//\n// Switch composes neither of these. Its track is its own 52 by 40, so it\n// carries the same `::before` in its own file, over the one axis that is\n// short.\n//\n// The layer is also what the label centres its first line on, and the two\n// have to agree: a disc resized without the label following it would put the\n// control off its own label again, which is the drift this row already had\n// once. The target is deliberately not in that sum — a label centred on an\n// invisible box would sit 4dp below the disc a reader can see.\n//\n// Literals rather than `sizing.controlSm` and `controlMd`, which happen to\n// hold the same two numbers. Those are steps of the control scale, spent on\n// button heights; these are one page's state layer and one page's target, and\n// a consumer resizing their buttons should not move either.\nconst LAYER_SIZE = '40px';\nconst TARGET_SIZE = '48px';\n\n/** How far the target reaches past the layer on each side: 4dp. */\nconst TARGET_REACH = `calc((${LAYER_SIZE} - ${TARGET_SIZE}) / 2)`;\nconst controlStyles = {\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  disc: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x15kbrqr\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  field: {\n    kGNEyG: \"x7a106z\",\n    kB7OPa: \"x9f619\",\n    k1C7PZ: \"xpr5407\",\n    k1xSpc: \"xrvj5dj\",\n    kumcoG: \"x1pmbctz\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k8WAf4: \"x18r0n19\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  labelReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  messages: {\n    kEXP64: \"x1xdureb\",\n    $$css: true\n  }\n};\nexport { controlStyles };"],"mappings":";AAqEA,MAAMW,gBAAgB;CACpBC,iBAAiB;EACfC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfF,QAAQ;EACRC,OAAO;CACT;CACAE,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRZ,QAAQ;EACRa,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,OAAO;EACLb,QAAQ;EACRI,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRtB,OAAO;CACT;CACAuB,OAAO;EACLZ,QAAQ;EACRa,QAAQ;EACRzB,QAAQ;EACR0B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR9B,OAAO;CACT;CACA+B,eAAe;EACbP,QAAQ;EACRzB,QAAQ;EACRC,OAAO;CACT;CACAgC,eAAe;EACbjC,QAAQ;EACRC,OAAO;CACT;CACAiC,UAAU;EACRC,QAAQ;EACRlC,OAAO;CACT;AACF"}