@kanso-labs/kanso-ui 0.32.0 → 0.34.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","scaleIn","slideInFromBottom","styles","centre","kGNEyG","k1xSpc","kjj79g","kmVPX3","$$css","Omit","children","t0","$","_c","props","t1","DialogBody","className","DialogContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","DialogFooter","DialogHeader","DialogTitle","Body","Content","Footer","Header","Title","DialogContentProps","Pick","Element","DialogTitleProps"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. Open\n * state is React Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug x78zum5 xdt5ytf x1iyjqo2 xpo2rfv x193rfdd x1hews6w xxj4525 xn43zvd xv61bfh x1odjw0f x1az23kl x18d9i69 x886u18 xexx8yu xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own. Escape is a separate prop, `isKeyboardDismissDisabled`,\n * and `isDismissable` says nothing about it — so a dialog that has to be\n * answered from one of its actions, as an alert dialog usually does, turns\n * off both.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: DialogContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, styles.centre)}>\n      <Modal {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x19pkqky x1f120ba x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr\"\n    }, {\n      className,\n      style\n    })}>\n        <RACDialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </RACDialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction DialogFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp\"\n  }, props)} />;\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the\n// container's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the container, which is the one\n// worth restyling, and everything else lands on the dialog.\ntype DialogContentProps = Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element\n   * inside it, or the dialog renders outside the theme and falls back to\n   * the tokens' `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport default Dialog;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","scaleIn","slideInFromBottom","styles","centre","kGNEyG","k1xSpc","kjj79g","kmVPX3","$$css","Omit","children","t0","$","_c","props","t1","DialogBody","className","DialogContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","DialogFooter","DialogHeader","DialogTitle","Body","Content","Footer","Header","Title","DialogContentProps","Element","Pick","DialogTitleProps"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, 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 dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. Open\n * state is React Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug x78zum5 xdt5ytf x1iyjqo2 xpo2rfv x193rfdd x1hews6w xxj4525 xn43zvd xv61bfh x1odjw0f x1az23kl x18d9i69 x886u18 xexx8yu xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own. Escape is a separate prop, `isKeyboardDismissDisabled`,\n * and `isDismissable` says nothing about it — so a dialog that has to be\n * answered from one of its actions, as an alert dialog usually does, turns\n * off both.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: DialogContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, styles.centre)}>\n      <Modal {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr\"\n    }, {\n      className,\n      style\n    })}>\n        <RACDialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </RACDialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction DialogFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp\"\n  }, props)} />;\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the\n// container's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the container, which is the one\n// worth restyling, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its sibling, since\n// the picked one carries React Aria's documentation, whose default is the\n// reverse of this component's.\ntype DialogContentProps = {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element\n   * inside it, or the dialog renders outside the theme and falls back to\n   * the tokens' `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the container, closes the\n   * dialog. `true` here where React Aria's own default is `false`, the\n   * same default `Sheet` takes. Escape is `isKeyboardDismissDisabled`'s,\n   * and this says nothing about it — an alert dialog, which has to be\n   * answered from one of its actions, turns off both.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n} & Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'>;\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport default Dialog;"],"mappings":"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"}

package/dist/components/icon-button/index.js

@@ -100,7 +100,7 @@ const styles = {
 		$$css: true
 	},
 	standard: {
-		kWkggS: "x83qkoq x1p2om7n xjbqb8w",
+		kWkggS: "x1dg9itu x1728qcm xjbqb8w",
 		kMwMTN: "x1w5n3ug",
 		$$css: true
 	},

package/dist/components/icon-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ClassNameOrFunction","DOMRenderFunction","FocusableElement","StyleOrFunction","stylex","ButtonContext","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","useSlottedContext","ButtonDOMProps","ButtonState","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","stateLayerOpacity","ProgressIndicator","Ripple","ReturnType","TARGET_SIZE","styles","base","k6CgDc","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","label","labelPending","k33iCy","lg","kZKoxP","kGuDYH","kzqmXN","md","kgeoSG","kFcpXp","kEoFBp","outlined","kVAM5u","ksu8eU","outlinedDisabled","outlinedToggleSelected","pending","kpwlN0","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","selectedShapes","toggleStyles","selected","unselected","disabledStyles","IconButtonProps","children","className","IconButtonState","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","render","size","IconButtonSize","style","target","variant","IconButtonVariant","Omit","buttonContent","ripple","state","isPending","surface","IconButton","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","t4","t5","props","undefined","context","slot","t6","element","aria","t7","t8","handlers","t9","toggleStyleProps","t10","toggleContent","ring","styleProps","T0","t11"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, DOMRenderFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ButtonContext, Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton, useSlottedContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, outlined with an outline variant border and\n// an on-surface-variant icon, standard on surface variant over nothing. calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **The outlined border thickens with the size, and the widths are Button's\n// rather than this page's.** The icon buttons page keeps them in a size token\n// set its widget will not open to a script, and the two components already\n// share their five heights on purpose — a 96dp icon button beside a 96dp\n// outlined button with a different border weight would read as a mistake.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton` instead\n// of its `Button`, which announces the state through `aria-pressed` rather\n// than a role of its own — every variant and size still applies. The page\n// gives each style a second pair of colour roles for it, and they are not\n// the plain button's: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once chosen, a tonal one rests\n// on secondary container and takes secondary, and a standard one is\n// transparent throughout with the icon going from on-surface-variant to\n// primary, and an outlined one swaps its border for the inverse surface\n// pair. So a chosen filled toggle looks like a plain filled button, and an\n// unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\n\n/**\n * The press area the page requires of its two smallest sizes. A literal\n * rather than `sizing.controlMd`, which holds the same number: that is a step\n * of the control scale, and a consumer resizing their medium controls should\n * not shrink a target the page states as a floor.\n */\nconst TARGET_SIZE = '48px';\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xbck2fw x1h1ujn1 x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kaIpWk: \"xtt5grq x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1fh0d6s\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1q69gdh\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1eujcsb\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1q27o6y x1v1ylhe x1c5gpgi\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1girmi0\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x12vej0r x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x1q841l6 x1ofvui0 x167r6xl\",\n    kMwMTN: \"x1lba3jz\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"xszbqgh\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1n6cgzf\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x11ts1a5\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"xz1kjiq\",\n    $$css: true\n  }\n};\n\n// The outlined border thickens with the size, as Button's does: 1dp up to M,\n// 2dp at XL, 3dp at XXL. A style per size rather than a value in the size\n// style, since a border on a filled button would draw in the icon's colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\n\n// A chosen toggle rests at the corner its size presses to, which is the\n// page's round-to-square morph. A style per size rather than a value inside\n// each size style, since StyleX replaces the property whole and this one has\n// to beat both the size's `:active` branch and the disabled style's circle.\nconst selectedShapes = {\n  lg: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  }\n};\n\n// Which container a toggle draws, chosen and not. Three of the six are the\n// plain button's own styles: a chosen filled toggle is the filled button, and\n// an unchosen tonal or standard one is the tonal or standard button.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filled,\n    unselected: styles.filledToggle\n  },\n  outlined: {\n    selected: styles.outlinedToggleSelected,\n    unselected: styles.outlined\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   */\n  'aria-label': string;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Whether a toggle starts chosen, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only, and a toggle is never a link.\n   */\n  href?: string;\n  /**\n   * Whether a toggle is chosen, when the call site holds the state. Pass it\n   * with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\n   */\n  isSelected?: boolean;\n  /**\n   * Called with the new state when a toggle is pressed. Passing this,\n   * `isSelected` or `defaultSelected` is what makes the button a toggle.\n   */\n  onChange?: (isSelected: boolean) => void;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * `standard` is transparent and tints what it sits on; `outlined` is\n   * transparent with a rule around it; `filled` and `tonal` carry a container\n   * of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed. `isSelected` is optional because only the toggle form has one, and\n// one function has to be accepted by both: React Aria hands the plain button\n// a state without it and the toggle a state with it, and a parameter type\n// this wide accepts either.\ntype IconButtonState = ButtonState & {\n  isSelected?: boolean;\n};\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only the labelling ones.\n *\n * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which\n * reports its state through `aria-pressed` and draws the page's second pair\n * of colour roles for its variant. A toggle takes neither `href` nor the\n * pending props.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  href,\n  isDisabled,\n  isPending = false,\n  isSelected,\n  onChange,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // A field's context may disable the button — a number field's stepper at\n  // the end of its range, a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep every one of them enabled. The call site's own prop still\n  // wins where it is given; the context is read for the ripple, which has\n  // to know before the render state does.\n  const context = useSlottedContext(ButtonContext, props.slot);\n  const disabled = isDisabled ?? context?.isDisabled ?? false;\n\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled, and while pending, as in\n  // Button — and pending for the same second reason given there: React Aria\n  // suppresses the click that would end a press but not the pointer events\n  // that start one, so a ripple begun while pending was never ended.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !disabled && !isPending, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n\n  // The three props that make this a toggle. Read together rather than behind\n  // a `toggle` word of its own, the way `href` already turns the button into\n  // a link: a button given none of them has no state to report, and one given\n  // any of them has nothing else it could mean.\n  if (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(toggleStyleProps(size, variant), props)}>\n        {toggleContent(children, ripple)}\n      </RACToggleButton>;\n  }\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n\n// What a toggle draws: its icon and the ripple. No pending ring — React\n// Aria's toggle button has no pending state, and a control reporting which of\n// two states it is in has nothing to be pending about.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction toggleContent(children: ReactNode, ripple: Ripple) {\n  return () => <>\n      {children}\n      {ripple.surface}\n    </>;\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant) {\n  return (state: IconButtonState) => stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size],\n  // A chosen outlined toggle has a container rather than a rule, so the\n  // width goes on only while it is unchosen.\n  variant === 'outlined' && state.isSelected !== true && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":";;;;;;;;;;AA4EA,MAAMiC,SAAS;CACbC,MAAM;EACJC,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;EACRC,OAAO;CACT;CACAC,UAAU;EACRd,QAAQ;EACRG,QAAQ;EACRU,OAAO;CACT;CACAE,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAK,gBAAgB;EACdF,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAM,cAAc;EACZH,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAO,OAAO;EACLhB,QAAQ;EACRS,OAAO;CACT;CACAQ,cAAc;EACZC,QAAQ;EACRT,OAAO;CACT;CACAU,IAAI;EACFC,QAAQ;EACRxB,QAAQ;EACRyB,QAAQ;EACRC,QAAQ;EACRb,OAAO;CACT;CACAc,IAAI;EACFC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,QAAQ;EACRxB,QAAQ;EACRyB,QAAQ;EACRC,QAAQ;EACRb,OAAO;CACT;CACAkB,UAAU;EACRf,QAAQ;EACRgB,QAAQ;EACRC,QAAQ;EACRhB,QAAQ;EACRJ,OAAO;CACT;CACAqB,kBAAkB;EAChBlB,QAAQ;EACRgB,QAAQ;EACRf,QAAQ;EACRJ,OAAO;CACT;CACAsB,wBAAwB;EACtBnB,QAAQ;EACRgB,QAAQ;EACRf,QAAQ;EACRJ,OAAO;CACT;CACAuB,SAAS;EACPrC,QAAQ;EACRK,QAAQ;EACRiC,QAAQ;EACR/B,QAAQ;EACRE,QAAQ;EACRK,OAAO;CACT;CACAyB,UAAU;EACRtB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACA0B,kBAAkB;EAChBvB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACA2B,wBAAwB;EACtBxB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACA4B,OAAO;EACLzB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACA6B,eAAe;EACb1B,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACA8B,qBAAqB;EACnB3B,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACA+B,IAAI;EACFpB,QAAQ;EACRxB,QAAQ;EACRyB,QAAQ;EACRC,QAAQ;EACRb,OAAO;CACT;CACAgC,IAAI;EACFjB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,QAAQ;EACRxB,QAAQ;EACRyB,QAAQ;EACRC,QAAQ;EACRb,OAAO;CACT;CACAiC,KAAK;EACHtB,QAAQ;EACRxB,QAAQ;EACRyB,QAAQ;EACRC,QAAQ;EACRb,OAAO;CACT;AACF;AAKA,MAAMkC,gBAAgB;CACpBxB,IAAI;EACFtB,QAAQ;EACRY,OAAO;CACT;CACAc,IAAI;EACF1B,QAAQ;EACRY,OAAO;CACT;CACA+B,IAAI;EACF3C,QAAQ;EACRY,OAAO;CACT;CACAgC,IAAI;EACF5C,QAAQ;EACRY,OAAO;CACT;CACAiC,KAAK;EACH7C,QAAQ;EACRY,OAAO;CACT;AACF;AAMA,MAAMmC,iBAAiB;CACrBzB,IAAI;EACFvB,QAAQ;EACRa,OAAO;CACT;CACAc,IAAI;EACF3B,QAAQ;EACRa,OAAO;CACT;CACA+B,IAAI;EACF5C,QAAQ;EACRa,OAAO;CACT;CACAgC,IAAI;EACF7C,QAAQ;EACRa,OAAO;CACT;CACAiC,KAAK;EACH9C,QAAQ;EACRa,OAAO;CACT;AACF;AAKA,MAAMoC,eAAe;CACnBlC,QAAQ;EACNmC,UAAUtD,OAAOmB;EACjBoC,YAAYvD,OAAOuB;CACrB;CACAY,UAAU;EACRmB,UAAUtD,OAAOuC;EACjBgB,YAAYvD,OAAOmC;CACrB;CACAO,UAAU;EACRY,UAAUtD,OAAO4C;EACjBW,YAAYvD,OAAO0C;CACrB;CACAG,OAAO;EACLS,UAAUtD,OAAO+C;EACjBQ,YAAYvD,OAAO6C;CACrB;AACF;AACA,MAAMW,iBAAiB;CACrBrC,QAAQnB,OAAOsB;CACfa,UAAUnC,OAAOsC;CACjBI,UAAU1C,OAAO2C;CACjBE,OAAO7C,OAAO8C;AAChB;AAkGA,SAAS8B,cAAclB,UAAqBQ,cAAsBW,QAAgB;CAChF,QAAQC,UAA6B,qBAAA,UAAA,EAAA,UAAA;EACjC,oBAAC,QAAD;GAAM,GAAI;IACV,GAAG,EACDnB,WAAW,UACb;IACA,GAAG,EACDA,WAAW,kBACb;GACF,EAAE,CAAC,CAACmB,MAAMC,aAAa;GAClBrB;EACG,CAAA;EACLoB,MAAMC,YAAY,oBAAC,QAAD;GAAM,WAAU;GAC/B,UAAA,oBAAC,mBAAD;IAAmB,cAAYb;IAAc,iBAAA;IAAgB,MAAK;IAAM,MAAK;IAAU,SAAQ;GAAU,CAAA;EACrG,CAAA,IAAI;EACXW,OAAOG;CACV,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;;;AAiBA,SAAAC,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAA1B,UAAAG,iBAAAC,eAAAuB,IAAAtB,MAAAuB,YAAAP,WAAAQ,IAAAvB,YAAAC,UAAAuB,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAA7B,cAAA8B,IAAA7B,KAAAC,QAAAC,MAAA4B,IAAAzB,QAAAC,SAAAyB,IAAA,GAAAC,YAAAjB;CAGlB,MAAApB,gBAAAuB,OAAAe,KAAAA,IAAA,QAAAf;CAGA,MAAAN,YAAAQ,OAAAa,KAAAA,IAAA,QAAAb;CAWA,MAAArB,eAAA8B,OAAAI,KAAAA,IAAA,YAAAJ;CAGA,MAAA3B,OAAA4B,OAAAG,KAAAA,IAAA,OAAAH;CAEA,MAAAxB,UAAAyB,OAAAE,KAAAA,IAAA,aAAAF;CASA,MAAAG,UAAgBxH,kBAAkBP,eAAe6H,QAAKG,IAAK;CAC3D,MAAApF,WAAiBoE,cAAce,SAAOf,cAArB;CAA2C,IAAAiB;CAAA,IAAApB,EAAA,OAAAK,WAAAL,EAAA,OAAAM,iBAAAN,EAAA,OAAAS,mBAAAT,EAAA,OAAAU,iBAAAV,EAAA,OAAAW,kBAAAX,EAAA,OAAAY,aAAA;EAU0BQ,KAAA;GAAAf;GAAAC;GAAAG;GAAAC;GAAAC;GAAAC;EAOtF;EAACZ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAS;EAAAT,EAAA,KAAAU;EAAAV,EAAA,KAAAW;EAAAX,EAAA,KAAAY;EAAAZ,EAAA,KAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAPD,MAAAN,SAAe7F,UAA4B,CAAC8E,iBAAD,CAAmB5C,YAAnB,CAAgC6D,WAAWwB,EAOrF;CACD,MAAAC,UAAgB;EAAAC,MACRxH,iBAAiBkH,OAAK;EAACT;EAAAC;CAG/B;CAMA,IAAI9B,oBAAoBuC,KAAAA,KAAapC,eAAeoC,KAAAA,KAAanC,aAAamC,KAAAA,GAAS;EAC+C,MAAAM,KAAAtH,qBAAqBoH,SAASpC,MAAM;EAAO,MAAAuC,KAAA9B,OAAM+B;EAA0B,MAAAC,KAAAvH,oBAAoBwH,iBAAiBzC,MAAMI,OAAO,GAAG0B,OAAK;EAAC,IAAAY;EAAA,IAAA5B,EAAA,OAAAzB,YAAAyB,EAAA,OAAAN,QAAA;GACrQkC,MAAAC,cAActD,UAAUmB,MAAM;GAACM,EAAA,KAAAzB;GAAAyB,EAAA,KAAAN;GAAAM,EAAA,KAAA4B;EAAA,OAAAA,MAAA5B,EAAA;EAAA,OAD7B,oBAAC,cAAD;GAAkCtB;GAA6B3C,YAAAA;GAAsB8C;GAAsBC;GAAkB,QAAAyC;GAAqC,GAAMC;GAAe,GAAMR;GAAK,GAAMU;GAC1ME,UAAAA;EADkB,CAAA;CAEH;CACrB,IAAAL;CAAA,IAAAvB,EAAA,QAAAd,QAAAc,EAAA,QAAAV,SAAA;EACsCiC,MAAA5B,UAAwBzG,MAAa2B,OAAMC,MAAOZ,MAAK4H,MAAOjH,OAAOyE,UAAUzE,OAAOqE,OAAOI,YAAY,cAActB,cAAckB,OAAOS,MAAKQ,cAAetF,OAAMkB,UAAW4D,MAAKQ,cAAe9B,eAAeiB,QAAQ;EAACU,EAAA,MAAAd;EAAAc,EAAA,MAAAV;EAAAU,EAAA,MAAAuB;CAAA,OAAAA,KAAAvB,EAAA;CAApQ,MAAA+B,aAAmB5H,oBAAoBoH,IAA+NP,OAAK;CAC3Q,IAAIpC,SAASqC,KAAAA,GAAS,OACb,qBAAC,MAAD;EAAerC;EAAkB7C,YAAAA;EAAeiD;EAAa,QAAAhF,aAAaqH,OAAO;EAAWhC;EAAM,GAAMK,OAAM+B;EAAS,GAAMT;EAAK,GAAMe;EAAxI,UAAA,CACFxD,UACAmB,OAAMG,OAFI;;CAKT,MAAAmC,KAAA3I;CAA8D,MAAAmI,KAAAzH,eAAesH,SAASpC,MAAM;CAAO,MAAAyC,KAAAhC,OAAM+B;CAAS,IAAAG;CAAA,IAAA5B,EAAA,QAAAzB,YAAAyB,EAAA,QAAAjB,gBAAAiB,EAAA,QAAAN,QAAA;EACrHkC,MAAAnC,cAAclB,UAAUQ,cAAcW,MAAM;EAACM,EAAA,MAAAzB;EAAAyB,EAAA,MAAAjB;EAAAiB,EAAA,MAAAN;EAAAM,EAAA,MAAA4B;CAAA,OAAAA,MAAA5B,EAAA;CAAA,IAAAiC;CAAA,IAAAjC,EAAA,QAAAgC,MAAAhC,EAAA,QAAAjE,YAAAiE,EAAA,QAAAJ,aAAAI,EAAA,QAAAgB,WAAAhB,EAAA,QAAAN,OAAA+B,YAAAzB,EAAA,QAAA+B,cAAA/B,EAAA,QAAA4B,OAAA5B,EAAA,QAAAwB,IAAA;EAD3CS,MAAA,oBAAC,IAAD;GAAuBlG,YAAAA;GAAqB6D;GAAmB,QAAA4B;GAA+B,GAAME;GAAe,GAAMV;GAAK,GAAMe;GACtIH,UAAAA;EADY,CAAA;EAEH5B,EAAA,MAAAgC;EAAAhC,EAAA,MAAAjE;EAAAiE,EAAA,MAAAJ;EAAAI,EAAA,MAAAgB;EAAAhB,EAAA,MAAAN,OAAA+B;EAAAzB,EAAA,MAAA+B;EAAA/B,EAAA,MAAA4B;EAAA5B,EAAA,MAAAwB;EAAAxB,EAAA,MAAAiC;CAAA,OAAAA,MAAAjC,EAAA;CAAA,OAFPiC;AAEO;AAUhB,SAASJ,cAActD,UAAqBmB,QAAgB;CAC1D,aAAa,qBAAA,UAAA,EAAA,UAAA,CACRnB,UACAmB,OAAOG,OACV,EAAA,CAAA;AACJ;AAMA,SAAS8B,iBAAiBzC,MAAsBI,SAA4B;CAC1E,QAAQK,UAA2BzG,MAAa2B,OAAOC,MAAMZ,MAAM4H,MAAMnC,MAAMd,eAAe,OAAOX,aAAaoB,QAAQ,CAACnB,WAAWD,aAAaoB,QAAQ,CAAClB,YAAYvD,OAAOqE,OAG/KI,YAAY,cAAcK,MAAMd,eAAe,QAAQb,cAAckB,OAAOS,MAAMQ,cAActF,OAAOkB,UAAU4D,MAAMQ,cAAc9B,eAAeiB,UAAUK,MAAMd,eAAe,QAAQZ,eAAeiB,KAAK;AACjN"}
+{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ClassNameOrFunction","DOMRenderFunction","FocusableElement","StyleOrFunction","stylex","ButtonContext","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","useSlottedContext","ButtonDOMProps","ButtonState","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","stateLayerOpacity","ProgressIndicator","Ripple","ReturnType","TARGET_SIZE","styles","base","k6CgDc","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","label","labelPending","k33iCy","lg","kZKoxP","kGuDYH","kzqmXN","md","kgeoSG","kFcpXp","kEoFBp","outlined","kVAM5u","ksu8eU","outlinedDisabled","outlinedToggleSelected","pending","kpwlN0","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","selectedShapes","toggleStyles","selected","unselected","disabledStyles","IconButtonProps","children","className","IconButtonState","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","render","size","IconButtonSize","style","target","variant","IconButtonVariant","Omit","buttonContent","ripple","state","isPending","surface","IconButton","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","t4","t5","props","undefined","context","slot","t6","element","aria","t7","t8","handlers","t9","toggleStyleProps","t10","toggleContent","ring","styleProps","T0","t11"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, DOMRenderFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ButtonContext, Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton, useSlottedContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, outlined with an outline variant border and\n// an on-surface-variant icon, standard on surface variant over nothing.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **The outlined border thickens with the size, and the widths are Button's\n// rather than this page's.** The icon buttons page keeps them in a size token\n// set its widget will not open to a script, and the two components already\n// share their five heights on purpose — a 96dp icon button beside a 96dp\n// outlined button with a different border weight would read as a mistake.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton` instead\n// of its `Button`, which announces the state through `aria-pressed` rather\n// than a role of its own — every variant and size still applies. The page\n// gives each style a second pair of colour roles for it, and they are not\n// the plain button's: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once chosen, a tonal one rests\n// on secondary container and takes secondary, and a standard one is\n// transparent throughout with the icon going from on-surface-variant to\n// primary, and an outlined one swaps its border for the inverse surface\n// pair. So a chosen filled toggle looks like a plain filled button, and an\n// unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\n\n/**\n * The press area the page requires of its two smallest sizes. A literal\n * rather than `sizing.controlMd`, which holds the same number: that is a step\n * of the control scale, and a consumer resizing their medium controls should\n * not shrink a target the page states as a floor.\n */\nconst TARGET_SIZE = '48px';\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xbck2fw x1h1ujn1 x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kaIpWk: \"xtt5grq x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1fh0d6s\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1q69gdh\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1eujcsb\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1q27o6y x1v1ylhe x1c5gpgi\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1girmi0\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x12vej0r x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x1q841l6 x1ofvui0 x167r6xl\",\n    kMwMTN: \"x1lba3jz\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"xszbqgh\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1n6cgzf\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x11ts1a5\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"xz1kjiq\",\n    $$css: true\n  }\n};\n\n// The outlined border thickens with the size, as Button's does: 1dp up to M,\n// 2dp at XL, 3dp at XXL. A style per size rather than a value in the size\n// style, since a border on a filled button would draw in the icon's colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\n\n// A chosen toggle rests at the corner its size presses to, which is the\n// page's round-to-square morph. A style per size rather than a value inside\n// each size style, since StyleX replaces the property whole and this one has\n// to beat both the size's `:active` branch and the disabled style's circle.\nconst selectedShapes = {\n  lg: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  }\n};\n\n// Which container a toggle draws, chosen and not. Three of the six are the\n// plain button's own styles: a chosen filled toggle is the filled button, and\n// an unchosen tonal or standard one is the tonal or standard button.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filled,\n    unselected: styles.filledToggle\n  },\n  outlined: {\n    selected: styles.outlinedToggleSelected,\n    unselected: styles.outlined\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   */\n  'aria-label': string;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Whether a toggle starts chosen, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only, and a toggle is never a link.\n   */\n  href?: string;\n  /**\n   * Whether a toggle is chosen, when the call site holds the state. Pass it\n   * with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\n   */\n  isSelected?: boolean;\n  /**\n   * Called with the new state when a toggle is pressed. Passing this,\n   * `isSelected` or `defaultSelected` is what makes the button a toggle.\n   */\n  onChange?: (isSelected: boolean) => void;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * `standard` is transparent and tints what it sits on; `outlined` is\n   * transparent with a rule around it; `filled` and `tonal` carry a container\n   * of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed. `isSelected` is optional because only the toggle form has one, and\n// one function has to be accepted by both: React Aria hands the plain button\n// a state without it and the toggle a state with it, and a parameter type\n// this wide accepts either.\ntype IconButtonState = ButtonState & {\n  isSelected?: boolean;\n};\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only the labelling ones.\n *\n * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which\n * reports its state through `aria-pressed` and draws the page's second pair\n * of colour roles for its variant. A toggle takes neither `href` nor the\n * pending props.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  href,\n  isDisabled,\n  isPending = false,\n  isSelected,\n  onChange,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // A field's context may disable the button — a number field's stepper at\n  // the end of its range, a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep every one of them enabled. The call site's own prop still\n  // wins where it is given; the context is read for the ripple, which has\n  // to know before the render state does.\n  const context = useSlottedContext(ButtonContext, props.slot);\n  const disabled = isDisabled ?? context?.isDisabled ?? false;\n\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled, and while pending, as in\n  // Button — and pending for the same second reason given there: React Aria\n  // suppresses the click that would end a press but not the pointer events\n  // that start one, so a ripple begun while pending was never ended.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !disabled && !isPending, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n\n  // The three props that make this a toggle. Read together rather than behind\n  // a `toggle` word of its own, the way `href` already turns the button into\n  // a link: a button given none of them has no state to report, and one given\n  // any of them has nothing else it could mean.\n  if (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(toggleStyleProps(size, variant), props)}>\n        {toggleContent(children, ripple)}\n      </RACToggleButton>;\n  }\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n\n// What a toggle draws: its icon and the ripple. No pending ring — React\n// Aria's toggle button has no pending state, and a control reporting which of\n// two states it is in has nothing to be pending about.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction toggleContent(children: ReactNode, ripple: Ripple) {\n  return () => <>\n      {children}\n      {ripple.surface}\n    </>;\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant) {\n  return (state: IconButtonState) => stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size],\n  // A chosen outlined toggle has a container rather than a rule, so the\n  // width goes on only while it is unchosen.\n  variant === 'outlined' && state.isSelected !== true && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}

package/dist/components/progress-indicator/index.js

@@ -231,7 +231,7 @@ function indicatorContent(label, showValue, variant, buffer, minValue, maxValue,
 	})] });
 }
 function LinearTrack(t0) {
-	const $ = c(22);
+	const $ = c(23);
 	const { buffer, isIndeterminate, percentage, tone } = t0;
 	const inherit = tone === "inherit";
 	if (isIndeterminate) {
@@ -296,23 +296,27 @@ function LinearTrack(t0) {
 	}
 	const t1 = percentage ?? 0;
 	let t2;
-	if ($[16] !== buffer) {
-		t2 = buffer === void 0 ? void 0 : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { ...props(styles.trackBuffered, styles.trackBufferedAt(buffer)) }), /* @__PURE__ */ jsx("span", { className: "x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1d6qlk4 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli" })] });
+	if ($[16] !== buffer || $[17] !== inherit) {
+		t2 = buffer === void 0 ? void 0 : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { ...props(styles.trackBuffered, styles.trackBufferedAt(buffer), inherit && indicatorStyles.inheritTrack) }), /* @__PURE__ */ jsx("span", { ...{
+			0: { className: "x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1d6qlk4 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli" },
+			1: { className: "x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli x1larodg" }
+		}[!!inherit << 0] })] });
 		$[16] = buffer;
-		$[17] = t2;
-	} else t2 = $[17];
+		$[17] = inherit;
+		$[18] = t2;
+	} else t2 = $[18];
 	let t3;
-	if ($[18] !== t1 || $[19] !== t2 || $[20] !== tone) {
+	if ($[19] !== t1 || $[20] !== t2 || $[21] !== tone) {
 		t3 = /* @__PURE__ */ jsx(IndicatorLine, {
 			percentage: t1,
 			tone,
 			children: t2
 		});
-		$[18] = t1;
-		$[19] = t2;
-		$[20] = tone;
-		$[21] = t3;
-	} else t3 = $[21];
+		$[19] = t1;
+		$[20] = t2;
+		$[21] = tone;
+		$[22] = t3;
+	} else t3 = $[22];
 	return t3;
 }
 /**

package/dist/components/progress-indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ProgressBarRenderProps","ProgressBarProps","RACProgressBarProps","stylex","ProgressBar","IndicatorTone","IndicatorLabels","IndicatorLine","indicatorStyles","mergeStatefulStyles","colors","motion","radii","CIRCULAR_SIZE","CIRCULAR_SIZE_PX","THICKNESS","GAP","RADIUS","CIRCUMFERENCE","Math","PI","ARC_MS","CYCLE_MS","ROTATE_MS","round","RING_EASING","INDETERMINATE_MS","BUFFER_MS","LINE_SLOWDOWN","RING_SLOWDOWN","primaryTranslate","primaryScale","secondaryTranslate","secondaryScale","buffering","expandArc","travelArc","spin","_temp","kZKoxP","kzqmXN","_temp2","styles","arcActive","kjVXCG","$$css","arcIndeterminate","kkDQuc","k44tkh","ko0y90","kKVMdj","kyAemX","k1ekBW","arcMotion","k6CgDc","kIyJzY","kAMwcw","arcTrack","circular","kB7OPa","k1xSpc","k3aq6I","circularIndeterminate","circularSize","size","val","undefined","indeterminateBarInner","kWkggS","kaIpWk","kpwlN0","kVAEAm","indeterminateTrack","primaryBarInner","rootCircular","kGNEyG","secondaryBarInner","trackBuffered","kmuXW","trackBufferedAt","share","ProgressIndicatorProps","buffer","className","label","showValue","style","tone","ProgressIndicatorTone","variant","ProgressIndicatorVariant","Omit","Extract","arcsFor","percentage","active","track","max","strokeDasharray","strokeDashoffset","bufferShare","minValue","maxValue","value","range","buffered","remaining","min","CircularTrack","t0","$","_c","isIndeterminate","inherit","t1","arcs","t2","props","t3","inheritTrack","t4","t5","t6","t7","inheritActive","t8","t9","indicatorContent","state","valueText","LinearTrack","ProgressIndicator","T0","t10","t11","t12","root"],"sources":["../../../src/components/progress-indicator/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ProgressBarRenderProps, ProgressBarProps as RACProgressBarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ProgressBar } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii } from '../../tokens/design.tokens.stylex';\n\n// The progress indicators page's two shapes, drawn flat: the page's wavy\n// shape is the Expressive column's alone, and its amplitude and wavelength\n// belong to a variant rather than to this. Both carry the three parts the\n// page's anatomy names — the active indicator in primary, the track in\n// secondary container, and, on the line, the stop indicator in primary at\n// the end — at the page's 4dp thickness, with the 4dp gap its measurements\n// give either side of the track. The ring is the page's default 40dp of the\n// four sizes it draws.\n//\n// The determinate line is a row of those parts, so the active indicator's\n// width is the percentage itself and the track takes what is left. The\n// determinate ring is two arcs of one circle, cut by the dash pattern: the\n// active arc runs from the top for its share of the circumference, and the\n// track picks up 4dp past it and stops 4dp before it comes back round,\n// which is the same gap measured along the curve.\n//\n// The animations are Material's own rather than something assembled from\n// the motion tokens: an indeterminate indicator is a piece of choreography,\n// and one written from scratch reads as a different component beside a\n// Material app. Material Web and Angular Material both descend from the\n// same implementation and agree on every number, so the numbers here are\n// theirs — the line's two bars and their four keyframe sets, the buffer's\n// scrolling dots, the ring's 1333ms arc, its four-arc cycle and its 1568ms\n// rotation, and the 250ms and 500ms a determinate value moves over.\n//\n// Two things are decided differently, both after reading the two of them.\n//\n// The ring is one dashed arc rather than two halves. Material Web draws it\n// as a pair of bordered half-circles, Angular as a pair of clipped SVG\n// circles with a patch over the seam between them; both constructions exist\n// to work around that split, and a single arc whose dash pattern is\n// animated needs neither and shares its geometry with the determinate ring.\n// The three effects it composes are still theirs: the arc grows and shrinks\n// over the arc's duration, its start travels the circle over four of those,\n// and the whole thing turns over the rotation's.\n//\n// Under `prefers-reduced-motion` the motion slows rather than stopping,\n// which is Angular's answer and the better one: an indicator that freezes\n// stops saying the work is going on, and a frozen arc caught at its short\n// end reads as broken. The multipliers are Angular's — two for the line,\n// and a quarter more for the ring.\n//\n// React Aria's `ProgressBar` is the root: it carries the role, the value and\n// its text, and reports the percentage and whether it is indeterminate as\n// render state, which is what everything here is drawn from.\n\n// The circle the arcs are cut from. The radius is the diameter less the\n// stroke, halved, so the stroke sits inside the 40dp box rather than\n// straddling its edge.\n//\n// The thickness and the gap are the same 4dp the shared line is drawn at,\n// written again rather than imported from `src/indicator/styles`: StyleX\n// evaluates the values inside `stylex.create` and `stylex.keyframes` as it\n// compiles, and will not follow an import to a module that is not a theme\n// to reach one — an imported constant fails the transform outright.\nconst CIRCULAR_SIZE = 40;\n// The same value as a length, hoisted rather than built at the parameter.\n// The compiler has no safe reordering for a template literal, so one written\n// as a default parameter skips the whole component around it — which the\n// panic threshold this lands beside turns into a build failure.\nconst CIRCULAR_SIZE_PX = `${CIRCULAR_SIZE}px`;\nconst THICKNESS = 4;\nconst GAP = 4;\nconst RADIUS = (CIRCULAR_SIZE - THICKNESS) / 2;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\n// The ring's timings. The arc is 1333ms; a full cycle is four of them; and\n// the rotation is the arc scaled by 360/306, which is the arc's start\n// rotation plus the circle less the arc's size.\nconst ARC_MS = 1333;\nconst CYCLE_MS = ARC_MS * 4;\nconst ROTATE_MS = Math.round(ARC_MS * 360 / 306);\nconst RING_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n// The line's own: 2s for an indeterminate pass, and the 250ms the buffer's\n// dots take to scroll one pitch. What a determinate value moves over is the\n// shared line's, since a meter moves the same way.\nconst INDETERMINATE_MS = 2000;\nconst BUFFER_MS = 250;\n\n// What `prefers-reduced-motion` slows each shape by.\nconst LINE_SLOWDOWN = 2;\nconst RING_SLOWDOWN = 1.25;\n\n// The two bars of the indeterminate line, translated and scaled at once.\nconst primaryTranslate = \"x1pch1fy-B\";\nconst primaryScale = \"xxyp5q1-B\";\nconst secondaryTranslate = \"xzo9tdn-B\";\nconst secondaryScale = \"x1w7bnrt-B\";\n\n// The buffer's dots scroll by one pitch of the pattern and start again.\nconst buffering = \"x19sykc1-B\";\n\n// The arc's own length, written against a path the circle normalises to 100\n// with `pathLength`, so these are percentages of the circumference rather\n// than lengths StyleX would have to work out.\n//\n// Material contracts to 10 degrees of turn and grows to 270. The 270 is 75\n// of the circumference and is written as it is; the 10 is not, because the\n// page's rounded ends change what a short dash draws. A round cap adds half\n// the stroke at each end, so a 10-degree dash on the 40dp ring is 3px of\n// path inside a 7px capsule of 4px stroke — a dot rather than the sliver\n// Material's square-cut ends give at the same angle. 8 is the shortest the\n// cap still draws as an arc, and it is the floor for that reason rather\n// than because the page names it.\nconst expandArc = \"x1t81ys1-B\";\n\n// Where the arc starts. Material turns it in eight increments of 135 degrees\n// rather than at a constant rate, each eased with the same curve the arc's\n// growth uses, so it settles at each position and springs to the next; three\n// full turns over the cycle, under the rotation's own single turn. The\n// numbers here are those angles along a path of 100: 135 degrees is 37.5 of\n// it, and 1080 degrees is 300.\nconst travelArc = \"x26nhu8-B\";\nconst spin = \"x1fy8ia8-B\";\nconst _temp = {\n  kZKoxP: \"xyq6l7l\",\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst _temp2 = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst styles = {\n  arcActive: {\n    kjVXCG: \"x1i9vjva\",\n    $$css: true\n  },\n  arcIndeterminate: {\n    kkDQuc: \"x12dwrod\",\n    k44tkh: \"xxx5gdc\",\n    ko0y90: \"x77zgwx\",\n    kKVMdj: \"x14p4i3i\",\n    kyAemX: \"x1582zw4\",\n    kjVXCG: \"x1i9vjva\",\n    k1ekBW: \"x13b0p5u\",\n    $$css: true\n  },\n  arcMotion: {\n    k6CgDc: \"x12w9bfk\",\n    kIyJzY: \"xd6oih7\",\n    k1ekBW: \"xg0bdzq\",\n    kAMwcw: \"x4ognrn\",\n    $$css: true\n  },\n  arcTrack: {\n    kjVXCG: \"xynoiew\",\n    $$css: true\n  },\n  circular: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1lliihq\",\n    k3aq6I: \"x9tu13d\",\n    $$css: true\n  },\n  circularIndeterminate: {\n    kkDQuc: \"x7hzzi\",\n    k44tkh: \"x11c9iw4\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xpedhrg\",\n    kyAemX: \"x1esw782\",\n    k3aq6I: \"x1c071of\",\n    $$css: true\n  },\n  circularSize: (size: string) => [_temp, {\n    \"--x-blockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size),\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size)\n  }],\n  indeterminateBarInner: {\n    kWkggS: \"xnety89\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  indeterminateTrack: {\n    kWkggS: \"x15dekr4\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  primaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xkj56kq\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  rootCircular: {\n    kGNEyG: \"x1cy8zhl\",\n    kzqmXN: \"x14atkfc\",\n    $$css: true\n  },\n  secondaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xnb0dd2\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  trackBuffered: {\n    kWkggS: \"x15dekr4\",\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  trackBufferedAt: (share: number) => [_temp2, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${share}%`)\n  }]\n};\ntype ProgressIndicatorProps = {\n  /**\n   * How far the work is loaded ahead of the value — a video's buffered\n   * seconds, a queue's fetched pages. Read on the same scale as `value`: the\n   * track is solid up to it and dotted beyond. Ignored while the indicator\n   * is indeterminate, and left out for work with nothing to buffer.\n   */\n  buffer?: number;\n  /** A function may compute the class from the indicator's render state. */\n  className?: RACProgressBarProps['className'];\n  /**\n   * What the work is, shown above the indicator. A screen reader reads it as\n   * the indicator's name; an indicator whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label. Ignored while the indicator\n   * is indeterminate, which has no value to show.\n   * @default false\n   */\n  showValue?: boolean;\n  /**\n   * How wide the ring is drawn, as a CSS length. Everything inside scales\n   * with it, so `1em` gives a ring the size of the type around it. Ignored\n   * by the line, which fills the width it is given.\n   *\n   * A length rather than a step of the `sm`/`md`/`lg` scale every other\n   * `size` here takes — see AGENTS.md, under Prop vocabularies. A ring sized\n   * to the type around it is what the prop is for, which no fixed scale\n   * gives; the name predates that rule, and changing it is a breaking change\n   * of its own.\n   * @default '40px'\n   */\n  size?: string;\n  /** A function may compute the style from the indicator's render state. */\n  style?: RACProgressBarProps['style'];\n  /**\n   * Which colours it is drawn in. `primary` is the page's own pair — the\n   * active indicator in primary over a secondary container track — and\n   * `inherit` takes the colour around it, for an indicator inside something\n   * that already has one, such as a button, where primary would be the fill.\n   * @default 'primary'\n   */\n  tone?: ProgressIndicatorTone;\n  /**\n   * The line the page draws, or the ring: `linear` fills the width it is\n   * given, `circular` is 40dp across.\n   * @default 'linear'\n   */\n  variant?: ProgressIndicatorVariant;\n} & Omit<RACProgressBarProps, 'children' | 'className' | 'style'>;\n\n// The two of the shared line's four tones an indicator draws. The other two\n// say how a measurement reads, which is a meter's business rather than a\n// running task's.\ntype ProgressIndicatorTone = Extract<IndicatorTone, 'inherit' | 'primary'>;\ntype ProgressIndicatorVariant = 'circular' | 'linear';\n\n// The dashes that cut the two arcs out of one circle. The active arc runs\n// from the top for its share of the circumference; the track picks up 4dp\n// after it and stops 4dp before it comes back round, which is the page's gap\n// measured along the curve.\nfunction arcsFor(percentage: number | undefined) {\n  const active = (percentage ?? 0) / 100 * CIRCUMFERENCE;\n  const track = Math.max(0, CIRCUMFERENCE - active - 2 * GAP);\n  return {\n    active: {\n      strokeDasharray: `${active} ${CIRCUMFERENCE}`,\n      strokeDashoffset: 0\n    },\n    track: {\n      strokeDasharray: `${track} ${CIRCUMFERENCE}`,\n      strokeDashoffset: -(active + GAP)\n    }\n  };\n}\n\n// How much of the track the buffer covers. The buffer is read on the value's\n// scale, and the track holds what the value has not taken, so the solid part\n// is the buffer's share of that remainder.\nfunction bufferShare(buffer: number | undefined, percentage: number | undefined, minValue: number, maxValue: number) {\n  if (buffer === undefined) {\n    return undefined;\n  }\n  const value = percentage ?? 0;\n  const range = maxValue - minValue;\n  const buffered = range === 0 ? 0 : (buffer - minValue) / range * 100;\n  const remaining = 100 - value;\n  if (remaining <= 0) {\n    return 0;\n  }\n  return Math.min(100, Math.max(0, (buffered - value) / remaining * 100));\n}\nfunction CircularTrack({\n  isIndeterminate,\n  percentage,\n  size,\n  tone\n}: {\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  size: string;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  const arcs = arcsFor(percentage);\n  return <svg aria-hidden=\"true\" viewBox={`0 0 ${CIRCULAR_SIZE} ${CIRCULAR_SIZE}`} {...stylex.props(styles.circular, styles.circularSize(size), isIndeterminate && styles.circularIndeterminate)}>\n      {isIndeterminate ? null : <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" r={RADIUS} strokeDasharray={arcs.track.strokeDasharray} strokeDashoffset={arcs.track.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(styles.arcMotion, styles.arcTrack, inherit && indicatorStyles.inheritTrack)} />}\n      <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" pathLength={isIndeterminate ? 100 : undefined} r={RADIUS} strokeDasharray={isIndeterminate ? undefined : arcs.active.strokeDasharray} strokeDashoffset={isIndeterminate ? undefined : arcs.active.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(isIndeterminate ? styles.arcIndeterminate : styles.arcMotion, isIndeterminate ? null : styles.arcActive, inherit && indicatorStyles.inheritActive)} />\n    </svg>;\n}\n\n// What the indicator draws, from React Aria's render state. Built by a call\n// 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\n// on its inputs.\nfunction indicatorContent(label: ReactNode, showValue: boolean, variant: ProgressIndicatorVariant, buffer: number | undefined, minValue: number, maxValue: number, size: string, tone: ProgressIndicatorTone) {\n  return (state: ProgressBarRenderProps) => <>\n      <IndicatorLabels label={label} value={showValue && !state.isIndeterminate ? state.valueText : undefined} />\n      {variant === 'circular' ? <CircularTrack isIndeterminate={state.isIndeterminate} percentage={state.percentage} size={size} tone={tone} /> : <LinearTrack buffer={bufferShare(buffer, state.percentage, minValue, maxValue)} isIndeterminate={state.isIndeterminate} percentage={state.percentage} tone={tone} />}\n    </>;\n}\nfunction LinearTrack({\n  buffer,\n  isIndeterminate,\n  percentage,\n  tone\n}: {\n  buffer: number | undefined;\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  if (isIndeterminate) {\n    return <div className=\"xqu0tyb x1dkaolv x9f619 xh8yej3 xb3r6kr x1n2onr6 x19axjrm x1c071of\">\n        <span {...stylex.props(styles.indeterminateTrack, inherit && indicatorStyles.inheritTrack)} />\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x4hg7df x1esw782 xoia761\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.primaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x1pdi2bj x1esw782 xnsac6p\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.secondaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n      </div>;\n  }\n  return <IndicatorLine percentage={percentage ?? 0} tone={tone}>\n      {buffer === undefined ? undefined : <>\n          <span {...stylex.props(styles.trackBuffered, styles.trackBufferedAt(buffer))} />\n          <span className=\"x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1d6qlk4 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli\" />\n        </>}\n    </IndicatorLine>;\n}\n\n/**\n * Progress through a task, as a line or a ring. Its value is React Aria's:\n * pass `value` between `minValue` and `maxValue`, or leave `value` out and\n * set `isIndeterminate` for work whose length is not known. `formatOptions`\n * says how the value reads, in the locale the page is in, and `buffer` marks\n * how far the work is loaded ahead of it.\n *\n * The call site's `className` and `style` land on the indicator as a whole,\n * which is the element a layout positions.\n */\nfunction ProgressIndicator({\n  buffer,\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = false,\n  size = CIRCULAR_SIZE_PX,\n  tone = 'primary',\n  variant = 'linear',\n  ...props\n}: ProgressIndicatorProps) {\n  return <ProgressBar maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root, variant === 'circular' && styles.rootCircular), props)}>\n      {indicatorContent(label, showValue, variant, buffer, minValue, maxValue, size, tone)}\n    </ProgressBar>;\n}\nexport type { ProgressIndicatorProps, ProgressIndicatorTone, ProgressIndicatorVariant };\nexport default ProgressIndicator;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ProgressBarRenderProps","ProgressBarProps","RACProgressBarProps","stylex","ProgressBar","IndicatorTone","IndicatorLabels","IndicatorLine","indicatorStyles","mergeStatefulStyles","colors","motion","radii","CIRCULAR_SIZE","CIRCULAR_SIZE_PX","THICKNESS","GAP","RADIUS","CIRCUMFERENCE","Math","PI","ARC_MS","CYCLE_MS","ROTATE_MS","round","RING_EASING","INDETERMINATE_MS","BUFFER_MS","LINE_SLOWDOWN","RING_SLOWDOWN","primaryTranslate","primaryScale","secondaryTranslate","secondaryScale","buffering","expandArc","travelArc","spin","_temp","kZKoxP","kzqmXN","_temp2","styles","arcActive","kjVXCG","$$css","arcIndeterminate","kkDQuc","k44tkh","ko0y90","kKVMdj","kyAemX","k1ekBW","arcMotion","k6CgDc","kIyJzY","kAMwcw","arcTrack","circular","kB7OPa","k1xSpc","k3aq6I","circularIndeterminate","circularSize","size","val","undefined","indeterminateBarInner","kWkggS","kaIpWk","kpwlN0","kVAEAm","indeterminateTrack","primaryBarInner","rootCircular","kGNEyG","secondaryBarInner","trackBuffered","kmuXW","trackBufferedAt","share","ProgressIndicatorProps","buffer","className","label","showValue","style","tone","ProgressIndicatorTone","variant","ProgressIndicatorVariant","Omit","Extract","arcsFor","percentage","active","track","max","strokeDasharray","strokeDashoffset","bufferShare","minValue","maxValue","value","range","buffered","remaining","min","CircularTrack","t0","$","_c","isIndeterminate","inherit","t1","arcs","t2","props","t3","inheritTrack","t4","t5","t6","t7","inheritActive","t8","t9","indicatorContent","state","valueText","LinearTrack","0","1","ProgressIndicator","T0","t10","t11","t12","root"],"sources":["../../../src/components/progress-indicator/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ProgressBarRenderProps, ProgressBarProps as RACProgressBarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ProgressBar } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii } from '../../tokens/design.tokens.stylex';\n\n// The progress indicators page's two shapes, drawn flat: the page's wavy\n// shape is the Expressive column's alone, and its amplitude and wavelength\n// belong to a variant rather than to this. Both carry the three parts the\n// page's anatomy names — the active indicator in primary, the track in\n// secondary container, and, on the line, the stop indicator in primary at\n// the end — at the page's 4dp thickness, with the 4dp gap its measurements\n// give either side of the track. The ring is the page's default 40dp of the\n// four sizes it draws.\n//\n// The determinate line is a row of those parts, so the active indicator's\n// width is the percentage itself and the track takes what is left. The\n// determinate ring is two arcs of one circle, cut by the dash pattern: the\n// active arc runs from the top for its share of the circumference, and the\n// track picks up 4dp past it and stops 4dp before it comes back round,\n// which is the same gap measured along the curve.\n//\n// The animations are Material's own rather than something assembled from\n// the motion tokens: an indeterminate indicator is a piece of choreography,\n// and one written from scratch reads as a different component beside a\n// Material app. Material Web and Angular Material both descend from the\n// same implementation and agree on every number, so the numbers here are\n// theirs — the line's two bars and their four keyframe sets, the buffer's\n// scrolling dots, the ring's 1333ms arc, its four-arc cycle and its 1568ms\n// rotation, and the 250ms and 500ms a determinate value moves over.\n//\n// Two things are decided differently, both after reading the two of them.\n//\n// The ring is one dashed arc rather than two halves. Material Web draws it\n// as a pair of bordered half-circles, Angular as a pair of clipped SVG\n// circles with a patch over the seam between them; both constructions exist\n// to work around that split, and a single arc whose dash pattern is\n// animated needs neither and shares its geometry with the determinate ring.\n// The three effects it composes are still theirs: the arc grows and shrinks\n// over the arc's duration, its start travels the circle over four of those,\n// and the whole thing turns over the rotation's.\n//\n// Under `prefers-reduced-motion` the motion slows rather than stopping,\n// which is Angular's answer and the better one: an indicator that freezes\n// stops saying the work is going on, and a frozen arc caught at its short\n// end reads as broken. The multipliers are Angular's — two for the line,\n// and a quarter more for the ring.\n//\n// React Aria's `ProgressBar` is the root: it carries the role, the value and\n// its text, and reports the percentage and whether it is indeterminate as\n// render state, which is what everything here is drawn from.\n\n// The circle the arcs are cut from. The radius is the diameter less the\n// stroke, halved, so the stroke sits inside the 40dp box rather than\n// straddling its edge.\n//\n// The thickness and the gap are the same 4dp the shared line is drawn at,\n// written again rather than imported from `src/indicator/styles`: StyleX\n// evaluates the values inside `stylex.create` and `stylex.keyframes` as it\n// compiles, and will not follow an import to a module that is not a theme\n// to reach one — an imported constant fails the transform outright.\nconst CIRCULAR_SIZE = 40;\n// The same value as a length, hoisted rather than built at the parameter.\n// The compiler has no safe reordering for a template literal, so one written\n// as a default parameter skips the whole component around it — which the\n// panic threshold this lands beside turns into a build failure.\nconst CIRCULAR_SIZE_PX = `${CIRCULAR_SIZE}px`;\nconst THICKNESS = 4;\nconst GAP = 4;\nconst RADIUS = (CIRCULAR_SIZE - THICKNESS) / 2;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\n// The ring's timings. The arc is 1333ms; a full cycle is four of them; and\n// the rotation is the arc scaled by 360/306, which is the arc's start\n// rotation plus the circle less the arc's size.\nconst ARC_MS = 1333;\nconst CYCLE_MS = ARC_MS * 4;\nconst ROTATE_MS = Math.round(ARC_MS * 360 / 306);\nconst RING_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n// The line's own: 2s for an indeterminate pass, and the 250ms the buffer's\n// dots take to scroll one pitch. What a determinate value moves over is the\n// shared line's, since a meter moves the same way.\nconst INDETERMINATE_MS = 2000;\nconst BUFFER_MS = 250;\n\n// What `prefers-reduced-motion` slows each shape by.\nconst LINE_SLOWDOWN = 2;\nconst RING_SLOWDOWN = 1.25;\n\n// The two bars of the indeterminate line, translated and scaled at once.\nconst primaryTranslate = \"x1pch1fy-B\";\nconst primaryScale = \"xxyp5q1-B\";\nconst secondaryTranslate = \"xzo9tdn-B\";\nconst secondaryScale = \"x1w7bnrt-B\";\n\n// The buffer's dots scroll by one pitch of the pattern and start again.\nconst buffering = \"x19sykc1-B\";\n\n// The arc's own length, written against a path the circle normalises to 100\n// with `pathLength`, so these are percentages of the circumference rather\n// than lengths StyleX would have to work out.\n//\n// Material contracts to 10 degrees of turn and grows to 270. The 270 is 75\n// of the circumference and is written as it is; the 10 is not, because the\n// page's rounded ends change what a short dash draws. A round cap adds half\n// the stroke at each end, so a 10-degree dash on the 40dp ring is 3px of\n// path inside a 7px capsule of 4px stroke — a dot rather than the sliver\n// Material's square-cut ends give at the same angle. 8 is the shortest the\n// cap still draws as an arc, and it is the floor for that reason rather\n// than because the page names it.\nconst expandArc = \"x1t81ys1-B\";\n\n// Where the arc starts. Material turns it in eight increments of 135 degrees\n// rather than at a constant rate, each eased with the same curve the arc's\n// growth uses, so it settles at each position and springs to the next; three\n// full turns over the cycle, under the rotation's own single turn. The\n// numbers here are those angles along a path of 100: 135 degrees is 37.5 of\n// it, and 1080 degrees is 300.\nconst travelArc = \"x26nhu8-B\";\nconst spin = \"x1fy8ia8-B\";\nconst _temp = {\n  kZKoxP: \"xyq6l7l\",\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst _temp2 = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst styles = {\n  arcActive: {\n    kjVXCG: \"x1i9vjva\",\n    $$css: true\n  },\n  arcIndeterminate: {\n    kkDQuc: \"x12dwrod\",\n    k44tkh: \"xxx5gdc\",\n    ko0y90: \"x77zgwx\",\n    kKVMdj: \"x14p4i3i\",\n    kyAemX: \"x1582zw4\",\n    kjVXCG: \"x1i9vjva\",\n    k1ekBW: \"x13b0p5u\",\n    $$css: true\n  },\n  arcMotion: {\n    k6CgDc: \"x12w9bfk\",\n    kIyJzY: \"xd6oih7\",\n    k1ekBW: \"xg0bdzq\",\n    kAMwcw: \"x4ognrn\",\n    $$css: true\n  },\n  arcTrack: {\n    kjVXCG: \"xynoiew\",\n    $$css: true\n  },\n  circular: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1lliihq\",\n    k3aq6I: \"x9tu13d\",\n    $$css: true\n  },\n  circularIndeterminate: {\n    kkDQuc: \"x7hzzi\",\n    k44tkh: \"x11c9iw4\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xpedhrg\",\n    kyAemX: \"x1esw782\",\n    k3aq6I: \"x1c071of\",\n    $$css: true\n  },\n  circularSize: (size: string) => [_temp, {\n    \"--x-blockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size),\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size)\n  }],\n  indeterminateBarInner: {\n    kWkggS: \"xnety89\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  indeterminateTrack: {\n    kWkggS: \"x15dekr4\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  primaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xkj56kq\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  rootCircular: {\n    kGNEyG: \"x1cy8zhl\",\n    kzqmXN: \"x14atkfc\",\n    $$css: true\n  },\n  secondaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xnb0dd2\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  trackBuffered: {\n    kWkggS: \"x15dekr4\",\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  trackBufferedAt: (share: number) => [_temp2, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${share}%`)\n  }]\n};\ntype ProgressIndicatorProps = {\n  /**\n   * How far the work is loaded ahead of the value — a video's buffered\n   * seconds, a queue's fetched pages. Read on the same scale as `value`: the\n   * track is solid up to it and dotted beyond. Ignored while the indicator\n   * is indeterminate, and left out for work with nothing to buffer.\n   */\n  buffer?: number;\n  /** A function may compute the class from the indicator's render state. */\n  className?: RACProgressBarProps['className'];\n  /**\n   * What the work is, shown above the indicator. A screen reader reads it as\n   * the indicator's name; an indicator whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label. Ignored while the indicator\n   * is indeterminate, which has no value to show.\n   * @default false\n   */\n  showValue?: boolean;\n  /**\n   * How wide the ring is drawn, as a CSS length. Everything inside scales\n   * with it, so `1em` gives a ring the size of the type around it. Ignored\n   * by the line, which fills the width it is given.\n   *\n   * A length rather than a step of the `sm`/`md`/`lg` scale every other\n   * `size` here takes — see AGENTS.md, under Prop vocabularies. A ring sized\n   * to the type around it is what the prop is for, which no fixed scale\n   * gives; the name predates that rule, and changing it is a breaking change\n   * of its own.\n   * @default '40px'\n   */\n  size?: string;\n  /** A function may compute the style from the indicator's render state. */\n  style?: RACProgressBarProps['style'];\n  /**\n   * Which colours it is drawn in. `primary` is the page's own pair — the\n   * active indicator in primary over a secondary container track — and\n   * `inherit` takes the colour around it, for an indicator inside something\n   * that already has one, such as a button, where primary would be the fill.\n   * @default 'primary'\n   */\n  tone?: ProgressIndicatorTone;\n  /**\n   * The line the page draws, or the ring: `linear` fills the width it is\n   * given, `circular` is 40dp across.\n   * @default 'linear'\n   */\n  variant?: ProgressIndicatorVariant;\n} & Omit<RACProgressBarProps, 'children' | 'className' | 'style'>;\n\n// The two of the shared line's four tones an indicator draws. The other two\n// say how a measurement reads, which is a meter's business rather than a\n// running task's.\ntype ProgressIndicatorTone = Extract<IndicatorTone, 'inherit' | 'primary'>;\ntype ProgressIndicatorVariant = 'circular' | 'linear';\n\n// The dashes that cut the two arcs out of one circle. The active arc runs\n// from the top for its share of the circumference; the track picks up 4dp\n// after it and stops 4dp before it comes back round, which is the page's gap\n// measured along the curve.\nfunction arcsFor(percentage: number | undefined) {\n  const active = (percentage ?? 0) / 100 * CIRCUMFERENCE;\n  const track = Math.max(0, CIRCUMFERENCE - active - 2 * GAP);\n  return {\n    active: {\n      strokeDasharray: `${active} ${CIRCUMFERENCE}`,\n      strokeDashoffset: 0\n    },\n    track: {\n      strokeDasharray: `${track} ${CIRCUMFERENCE}`,\n      strokeDashoffset: -(active + GAP)\n    }\n  };\n}\n\n// How much of the track the buffer covers. The buffer is read on the value's\n// scale, and the track holds what the value has not taken, so the solid part\n// is the buffer's share of that remainder.\nfunction bufferShare(buffer: number | undefined, percentage: number | undefined, minValue: number, maxValue: number) {\n  if (buffer === undefined) {\n    return undefined;\n  }\n  const value = percentage ?? 0;\n  const range = maxValue - minValue;\n  const buffered = range === 0 ? 0 : (buffer - minValue) / range * 100;\n  const remaining = 100 - value;\n  if (remaining <= 0) {\n    return 0;\n  }\n  return Math.min(100, Math.max(0, (buffered - value) / remaining * 100));\n}\nfunction CircularTrack({\n  isIndeterminate,\n  percentage,\n  size,\n  tone\n}: {\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  size: string;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  const arcs = arcsFor(percentage);\n  return <svg aria-hidden=\"true\" viewBox={`0 0 ${CIRCULAR_SIZE} ${CIRCULAR_SIZE}`} {...stylex.props(styles.circular, styles.circularSize(size), isIndeterminate && styles.circularIndeterminate)}>\n      {isIndeterminate ? null : <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" r={RADIUS} strokeDasharray={arcs.track.strokeDasharray} strokeDashoffset={arcs.track.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(styles.arcMotion, styles.arcTrack, inherit && indicatorStyles.inheritTrack)} />}\n      <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" pathLength={isIndeterminate ? 100 : undefined} r={RADIUS} strokeDasharray={isIndeterminate ? undefined : arcs.active.strokeDasharray} strokeDashoffset={isIndeterminate ? undefined : arcs.active.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(isIndeterminate ? styles.arcIndeterminate : styles.arcMotion, isIndeterminate ? null : styles.arcActive, inherit && indicatorStyles.inheritActive)} />\n    </svg>;\n}\n\n// What the indicator draws, from React Aria's render state. Built by a call\n// 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\n// on its inputs.\nfunction indicatorContent(label: ReactNode, showValue: boolean, variant: ProgressIndicatorVariant, buffer: number | undefined, minValue: number, maxValue: number, size: string, tone: ProgressIndicatorTone) {\n  return (state: ProgressBarRenderProps) => <>\n      <IndicatorLabels label={label} value={showValue && !state.isIndeterminate ? state.valueText : undefined} />\n      {variant === 'circular' ? <CircularTrack isIndeterminate={state.isIndeterminate} percentage={state.percentage} size={size} tone={tone} /> : <LinearTrack buffer={bufferShare(buffer, state.percentage, minValue, maxValue)} isIndeterminate={state.isIndeterminate} percentage={state.percentage} tone={tone} />}\n    </>;\n}\nfunction LinearTrack({\n  buffer,\n  isIndeterminate,\n  percentage,\n  tone\n}: {\n  buffer: number | undefined;\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  if (isIndeterminate) {\n    return <div className=\"xqu0tyb x1dkaolv x9f619 xh8yej3 xb3r6kr x1n2onr6 x19axjrm x1c071of\">\n        <span {...stylex.props(styles.indeterminateTrack, inherit && indicatorStyles.inheritTrack)} />\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x4hg7df x1esw782 xoia761\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.primaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x1pdi2bj x1esw782 xnsac6p\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.secondaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n      </div>;\n  }\n  return <IndicatorLine percentage={percentage ?? 0} tone={tone}>\n      {buffer === undefined ? undefined : <>\n          <span {...stylex.props(styles.trackBuffered, styles.trackBufferedAt(buffer), inherit && indicatorStyles.inheritTrack)} />\n          <span {...{\n        0: {\n          className: \"x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1d6qlk4 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli\"\n        },\n        1: {\n          className: \"x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli x1larodg\"\n        }\n      }[!!inherit << 0]} />\n        </>}\n    </IndicatorLine>;\n}\n\n/**\n * Progress through a task, as a line or a ring. Its value is React Aria's:\n * pass `value` between `minValue` and `maxValue`, or leave `value` out and\n * set `isIndeterminate` for work whose length is not known. `formatOptions`\n * says how the value reads, in the locale the page is in, and `buffer` marks\n * how far the work is loaded ahead of it.\n *\n * The call site's `className` and `style` land on the indicator as a whole,\n * which is the element a layout positions.\n */\nfunction ProgressIndicator({\n  buffer,\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = false,\n  size = CIRCULAR_SIZE_PX,\n  tone = 'primary',\n  variant = 'linear',\n  ...props\n}: ProgressIndicatorProps) {\n  return <ProgressBar maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root, variant === 'circular' && styles.rootCircular), props)}>\n      {indicatorContent(label, showValue, variant, buffer, minValue, maxValue, size, tone)}\n    </ProgressBar>;\n}\nexport type { ProgressIndicatorProps, ProgressIndicatorTone, ProgressIndicatorVariant };\nexport default ProgressIndicator;"],"mappings":"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"}

package/dist/components/sheet/index.d.ts

@@ -59,7 +59,7 @@ declare function SheetHeader(props: HTMLAttributes<HTMLDivElement>): import("rea
  * itself as an unnamed dialog.
  */
 declare function SheetTitle(props: SheetTitleProps): import("react").JSX.Element;
-type SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {
+type SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'> & {
   /** A function may compute the class from the panel's render state. */
   className?: ClassNameOrFunction<ModalRenderProps>;
   /**
@@ -70,6 +70,14 @@ type SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOv
    * `prefers-color-scheme` default.
    */
   container?: Element;
+  /**
+   * Whether a press on the scrim, outside the panel, closes the sheet.
+   * `true` here where React Aria's own default is `false`, since a sheet
+   * that ignores a tap outside it reads as stuck. Escape is
+   * `isKeyboardDismissDisabled`'s, and this says nothing about it.
+   * @default true
+   */
+  isDismissable?: boolean;
   /** A function may compute the style from the panel's render state. */
   style?: StyleOrFunction<ModalRenderProps>;
 };

package/dist/components/sheet/index.js

@@ -108,7 +108,7 @@ function SheetContent(t0) {
 	} else t2 = $[8];
 	let t3;
 	if ($[9] !== className || $[10] !== style) {
-		t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4" }, {
+		t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 x19dwuzr xuz63mn x1lym3mf xkducg2 xrzall9 xb0nsol xjslfuv x1gbqego x1cfajip xjg5lhu x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4" }, {
 			className,
 			style
 		});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","slideInFromEnd","slideInFromStart","slideInFromBottom","SheetProps","Omit","children","Sheet","t0","$","_c","props","t1","SheetBody","className","SheetContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\n\n// The side sheet arrives along the inline axis, and it takes two keyframes to\n// do that rather than one. Which edge the panel rests against is logical —\n// `insetInlineEnd` puts it on the right under a left-to-right document and on\n// the left under a right-to-left one — but `translateX` is physical and flips\n// with nothing. One keyframe would therefore have the panel arrive from the\n// far side of where it comes to rest under one of the two.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromStart = \"x18x3npg-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\n\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xp6hjv6 xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: SheetContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim)}>\n      <Modal {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4\"\n    }, {\n      className,\n      style\n    })}>\n        <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xqu0tyb x1dkaolv x9f619 x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport default Sheet;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","SheetProps","Omit","children","Sheet","t0","$","_c","props","t1","SheetBody","className","SheetContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, 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// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\n\n// The side sheet arrives along the inline axis, and it takes two keyframes to\n// do that rather than one. Which edge the panel rests against is logical —\n// `insetInlineEnd` puts it on the right under a left-to-right document and on\n// the left under a right-to-left one — but `translateX` is physical and flips\n// with nothing. One keyframe would therefore have the panel arrive from the\n// far side of where it comes to rest under one of the two.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromStart = \"x18x3npg-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\n\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xp6hjv6 xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: SheetContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim)}>\n      <Modal {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 x19dwuzr xuz63mn x1lym3mf xkducg2 xrzall9 xb0nsol xjslfuv x1gbqego x1cfajip xjg5lhu x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4\"\n    }, {\n      className,\n      style\n    })}>\n        <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xqu0tyb x1dkaolv x9f619 x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its sibling, since\n// the picked one carries React Aria's documentation, whose default is the\n// reverse of this component's.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the panel, closes the sheet.\n   * `true` here where React Aria's own default is `false`, since a sheet\n   * that ignores a tap outside it reads as stuck. Escape is\n   * `isKeyboardDismissDisabled`'s, and this says nothing about it.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport default Sheet;"],"mappings":"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"}

package/dist/components/snackbar/index.d.ts

@@ -10,8 +10,8 @@ type SnackbarAction = {
 /** What a snackbar carries: its message, and what may sit beside it. */
 type SnackbarMessage = {
   action: SnackbarAction | undefined;
-  isDismissable: boolean;
   message: ReactNode;
+  showCloseButton: boolean;
 };
 type SnackbarOptions = {
   /**
@@ -19,14 +19,18 @@ type SnackbarOptions = {
    * closes the snackbar, which is what the page draws.
    */
   action?: SnackbarAction;
+  /** Run when the snackbar closes, however it was closed. */
+  onClose?: () => void;
   /**
    * Whether a close button is shown at the end. The page draws one for a
    * message a reader may want out of the way before it expires.
+   *
+   * Named for what it draws rather than `isDismissable`, which on `Sheet`,
+   * `Dialog` and React Aria's modals is whether a press outside them closes
+   * them — a snackbar has no outside to press.
    * @default false
    */
-  isDismissable?: boolean;
-  /** Run when the snackbar closes, however it was closed. */
-  onClose?: () => void;
+  showCloseButton?: boolean;
   /**
    * How long the snackbar is shown, in milliseconds. Defaults to the page's
    * short duration, or its long one when there is an action to read, and the
@@ -34,7 +38,7 @@ type SnackbarOptions = {
    * expires while it is being read.
    *
    * `0` is the page's indefinite length: the snackbar stays until something
-   * closes it. Give one of those an action or `isDismissable`, or there is no
+   * closes it. Give one of those an action or `showCloseButton`, or there is no
    * way to be rid of it.
    */
   timeout?: number;