@kanso-labs/kanso-ui 0.43.6 → 0.44.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","stylex","RenderComponentProps","useRender","mergeStyles","spacing","alignments","baseline","kGNEyG","$$css","center","end","start","stretch","gaps","lg","kOIVth","md","none","sm","xl","xs","xxl","xxs","xxxl","justifications","around","kjj79g","between","styles","base","kB7OPa","k1xSpc","kH6xsr","kogj98","kmVPX3","column","kXwgrk","row","wrap","kwnvtZ","StackAlign","StackGap","StackJustify","StackProps","align","direction","gap","justify","Stack","t0","$","render","t1","t2","t3","t4","t5","t6","t7","t8","props","undefined","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/stack/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Short names rather than the CSS values they map to, so a call site reads\n// `align=\"start\"` instead of `align=\"flex-start\"`. A lookup is unavoidable\n// either way — `alignItems` takes `flex-start` and `justifyContent` takes\n// `space-between`, neither of which is a word anyone wants in a prop.\n//\n// No Material Design page draws a stack. Its gaps are the spacing tokens,\n// the 4dp grid the layout pages space elements on, and `xl` is their 24dp\n// spacer between panes.\nconst alignments = {\n  baseline: {\n    kGNEyG: \"x1pha0wt\",\n    $$css: true\n  },\n  center: {\n    kGNEyG: \"x6s0dn4\",\n    $$css: true\n  },\n  end: {\n    kGNEyG: \"xuk3077\",\n    $$css: true\n  },\n  start: {\n    kGNEyG: \"x1cy8zhl\",\n    $$css: true\n  },\n  stretch: {\n    kGNEyG: \"x1qjc9v5\",\n    $$css: true\n  }\n};\n\n// One key per step of the spacing scale, named exactly as the token group\n// names it, so `gaps[gap]` indexes straight off the prop with no lookup table\n// to keep in sync — the same arrangement Text's type scale uses.\n//\n// `none` is the one key with no token behind it, and deliberately so: zero is\n// the absence of a spacing decision rather than a step of the scale, so there\n// is nothing for the scale to name. It exists because a stack that only wants\n// the direction and the alignment is otherwise a plain flex container written\n// out by hand.\nconst gaps = {\n  lg: {\n    kOIVth: \"xxj4525\",\n    $$css: true\n  },\n  md: {\n    kOIVth: \"x1gka490\",\n    $$css: true\n  },\n  none: {\n    kOIVth: \"xxhr3t\",\n    $$css: true\n  },\n  sm: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  xl: {\n    kOIVth: \"xj2l1yv\",\n    $$css: true\n  },\n  xs: {\n    kOIVth: \"xzoy561\",\n    $$css: true\n  },\n  xxl: {\n    kOIVth: \"xghv2kt\",\n    $$css: true\n  },\n  xxs: {\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  xxxl: {\n    kOIVth: \"xvm9ira\",\n    $$css: true\n  }\n};\nconst justifications = {\n  around: {\n    kjj79g: \"x1l1ennw\",\n    $$css: true\n  },\n  between: {\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  center: {\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  end: {\n    kjj79g: \"x13a6bvl\",\n    $$css: true\n  },\n  start: {\n    kjj79g: \"x1nhvcw1\",\n    $$css: true\n  }\n};\n\n// `margin`, `padding` and `listStyleType` are the UA resets. A stack renders\n// a <div> by default, which has none of them, but `render` is how one becomes\n// a <ul>, and a list keeps a block margin above and below, an inline-start\n// padding and a marker on every item — a column 40px off its own gap, and\n// spaced from its neighbours by the UA rather than by whatever holds it.\n// Breadcrumbs clears the same three on the list it renders, and Text clears\n// the margin for the same reason.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kH6xsr: \"x3ct3a4\",\n    kogj98: \"x1ghz6dp\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  column: {\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  },\n  row: {\n    kXwgrk: \"x1q0g3np\",\n    $$css: true\n  },\n  wrap: {\n    kwnvtZ: \"x1a02dak\",\n    $$css: true\n  }\n};\ntype StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';\ntype StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';\ntype StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';\ntype StackProps = {\n  /**\n   * How the children line up across the stack: down the inline axis of a\n   * column, down the block axis of a row. Left unset, they stretch, which is\n   * what makes every card in a column the same width.\n   *\n   * `start` is what an inline-sized child needs in a column — a Tag or a\n   * Chip spans the whole width otherwise.\n   */\n  align?: StackAlign;\n  /**\n   * Which way the children run.\n   * @default 'column'\n   */\n  direction?: 'column' | 'row';\n  /**\n   * The space between children, as a step of the spacing scale. `none` closes\n   * it entirely.\n   *\n   * Worth setting. The default is a middle step, and how much air a group of\n   * things wants is the one thing a stack cannot work out for itself.\n   * @default 'md'\n   */\n  gap?: StackGap;\n  /**\n   * How leftover space is distributed along the stack. Left unset, the\n   * children sit at the start and the space collects after them.\n   *\n   * `between` is the one that puts a headline at one end of a row and its\n   * actions at the other.\n   */\n  justify?: StackJustify;\n  /**\n   * Lets a row wrap onto further lines rather than overflowing. Has no effect\n   * on a column, which has as many lines as it has children.\n   * @default false\n   */\n  wrap?: boolean;\n} & RenderComponentProps<'div'>;\n\n/**\n * A row or a column of children with one gap between them, taken from the\n * spacing scale.\n *\n * Layout only — it paints no surface and wraps no child, so each child is a\n * flex item exactly as it was written. It is the answer to spacing a group of\n * things, which is why no component here carries a margin of its own: the\n * space between two things belongs to whatever holds both of them.\n *\n * `render` swaps the element, for a stack that should be a `<ul>`, a `<nav>`,\n * or a `<section>` rather than a `<div>`. A list comes without its UA margin,\n * padding and markers, and wants `role=\"list\"` on the `<ul>`: Safari's\n * VoiceOver stops announcing a list once its markers are gone, and the role\n * puts it back.\n */\nfunction Stack({\n  align,\n  direction = 'column',\n  gap = 'md',\n  justify,\n  render,\n  wrap = false,\n  ...props\n}: StackProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[direction], gaps[gap], align !== undefined && alignments[align], justify !== undefined && justifications[justify], wrap && styles.wrap), props)\n    },\n    render\n  });\n}\nexport type { StackAlign, StackGap, StackJustify, StackProps };\nexport default Stack;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","stylex","isValidElement","RenderComponentProps","useRender","mergeStyles","spacing","alignments","baseline","kGNEyG","$$css","center","end","start","stretch","gaps","lg","kOIVth","md","none","sm","xl","xs","xxl","xxs","xxxl","justifications","around","kjj79g","between","styles","base","kB7OPa","k1xSpc","kH6xsr","kogj98","kmVPX3","column","kXwgrk","row","wrap","kwnvtZ","StackAlign","StackGap","StackJustify","StackProps","align","direction","gap","justify","listRole","render","type","undefined","Stack","t0","$","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","role","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/stack/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { isValidElement } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Short names rather than the CSS values they map to, so a call site reads\n// `align=\"start\"` instead of `align=\"flex-start\"`. A lookup is unavoidable\n// either way — `alignItems` takes `flex-start` and `justifyContent` takes\n// `space-between`, neither of which is a word anyone wants in a prop.\n//\n// No Material Design page draws a stack. Its gaps are the spacing tokens,\n// the 4dp grid the layout pages space elements on, and `xl` is their 24dp\n// spacer between panes.\nconst alignments = {\n  baseline: {\n    kGNEyG: \"x1pha0wt\",\n    $$css: true\n  },\n  center: {\n    kGNEyG: \"x6s0dn4\",\n    $$css: true\n  },\n  end: {\n    kGNEyG: \"xuk3077\",\n    $$css: true\n  },\n  start: {\n    kGNEyG: \"x1cy8zhl\",\n    $$css: true\n  },\n  stretch: {\n    kGNEyG: \"x1qjc9v5\",\n    $$css: true\n  }\n};\n\n// One key per step of the spacing scale, named exactly as the token group\n// names it, so `gaps[gap]` indexes straight off the prop with no lookup table\n// to keep in sync — the same arrangement Text's type scale uses.\n//\n// `none` is the one key with no token behind it, and deliberately so: zero is\n// the absence of a spacing decision rather than a step of the scale, so there\n// is nothing for the scale to name. It exists because a stack that only wants\n// the direction and the alignment is otherwise a plain flex container written\n// out by hand.\nconst gaps = {\n  lg: {\n    kOIVth: \"xxj4525\",\n    $$css: true\n  },\n  md: {\n    kOIVth: \"x1gka490\",\n    $$css: true\n  },\n  none: {\n    kOIVth: \"xxhr3t\",\n    $$css: true\n  },\n  sm: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  xl: {\n    kOIVth: \"xj2l1yv\",\n    $$css: true\n  },\n  xs: {\n    kOIVth: \"xzoy561\",\n    $$css: true\n  },\n  xxl: {\n    kOIVth: \"xghv2kt\",\n    $$css: true\n  },\n  xxs: {\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  xxxl: {\n    kOIVth: \"xvm9ira\",\n    $$css: true\n  }\n};\nconst justifications = {\n  around: {\n    kjj79g: \"x1l1ennw\",\n    $$css: true\n  },\n  between: {\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  center: {\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  end: {\n    kjj79g: \"x13a6bvl\",\n    $$css: true\n  },\n  start: {\n    kjj79g: \"x1nhvcw1\",\n    $$css: true\n  }\n};\n\n// `margin`, `padding` and `listStyleType` are the UA resets. A stack renders\n// a <div> by default, which has none of them, but `render` is how one becomes\n// a <ul>, and a list keeps a block margin above and below, an inline-start\n// padding and a marker on every item — a column 40px off its own gap, and\n// spaced from its neighbours by the UA rather than by whatever holds it.\n// Breadcrumbs clears the same three on the list it renders, and Text clears\n// the margin for the same reason.\n//\n// Clearing the markers costs a list its role in Safari, whose VoiceOver stops\n// announcing a list once its markers are gone, so a stack rendered as a <ul>\n// or an <ol> gives the role back itself — see `listRole`.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kH6xsr: \"x3ct3a4\",\n    kogj98: \"x1ghz6dp\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  column: {\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  },\n  row: {\n    kXwgrk: \"x1q0g3np\",\n    $$css: true\n  },\n  wrap: {\n    kwnvtZ: \"x1a02dak\",\n    $$css: true\n  }\n};\ntype StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';\ntype StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';\ntype StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';\ntype StackProps = {\n  /**\n   * How the children line up across the stack: down the inline axis of a\n   * column, down the block axis of a row. Left unset, they stretch, which is\n   * what makes every card in a column the same width.\n   *\n   * `start` is what an inline-sized child needs in a column — a Tag or a\n   * Chip spans the whole width otherwise.\n   */\n  align?: StackAlign;\n  /**\n   * Which way the children run.\n   * @default 'column'\n   */\n  direction?: 'column' | 'row';\n  /**\n   * The space between children, as a step of the spacing scale. `none` closes\n   * it entirely.\n   *\n   * Worth setting. The default is a middle step, and how much air a group of\n   * things wants is the one thing a stack cannot work out for itself.\n   * @default 'md'\n   */\n  gap?: StackGap;\n  /**\n   * How leftover space is distributed along the stack. Left unset, the\n   * children sit at the start and the space collects after them.\n   *\n   * `between` is the one that puts a headline at one end of a row and its\n   * actions at the other.\n   */\n  justify?: StackJustify;\n  /**\n   * Lets a row wrap onto further lines rather than overflowing. Has no effect\n   * on a column, which has as many lines as it has children.\n   * @default false\n   */\n  wrap?: boolean;\n} & RenderComponentProps<'div'>;\n\n// The role a list rendered through an element form of `render` is given\n// back, since the stack cleared the markers that carried it. Put under the\n// call site's props, and under the element's own as `useRender` merges them,\n// so a `role` written on either wins.\nfunction listRole(render: StackProps['render']) {\n  return isValidElement(render) && (render.type === 'ul' || render.type === 'ol') ? 'list' : undefined;\n}\n\n/**\n * A row or a column of children with one gap between them, taken from the\n * spacing scale.\n *\n * Layout only — it paints no surface and wraps no child, so each child is a\n * flex item exactly as it was written. It is the answer to spacing a group of\n * things, which is why no component here carries a margin of its own: the\n * space between two things belongs to whatever holds both of them.\n *\n * `render` swaps the element, for a stack that should be a `<ul>`, a `<nav>`,\n * or a `<section>` rather than a `<div>`. A list comes without its UA margin,\n * padding and markers, and with `role=\"list\"`: Safari's VoiceOver stops\n * announcing a list once its markers are gone, and the role puts it back. A\n * `role` the call site writes, on the stack or on the element, is kept\n * instead. A `render` function returns an element the stack cannot see\n * before it renders, so a list returned from one wants the role written on\n * it.\n */\nfunction Stack({\n  align,\n  direction = 'column',\n  gap = 'md',\n  justify,\n  render,\n  wrap = false,\n  ...props\n}: StackProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      role: listRole(render),\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[direction], gaps[gap], align !== undefined && alignments[align], justify !== undefined && justifications[justify], wrap && styles.wrap), props)\n    },\n    render\n  });\n}\nexport type { StackAlign, StackGap, StackJustify, StackProps };\nexport default Stack;"],"mappings":"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"}

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

@@ -21,8 +21,8 @@ type SwitchProps = {
   description?: string;
   /**
    * The problem with the current value, in words. Its presence is what puts
-   * the switch in its error state — the message and `aria-invalid` follow
-   * from it.
+   * the switch in its error state — the error colours on the track and the
+   * handle, the message and `aria-invalid` follow from it.
    *
    * Outside a `Form` the message line arrives with the message, so the
    * field grows when this does and moves what is under it. A `Form` holds
@@ -30,11 +30,21 @@ type SwitchProps = {
    */
   error?: string;
   /**
-   * Draws the check in the handle while the switch is on, the page's
-   * "icon on selected switch" form.
+   * The icon in the handle while the switch is on: `true` for the check, the
+   * page's "icon on selected switch" form, or a node to draw in its place.
+   * The handle draws it at 16px in its icon colour, so give a node `1em`
+   * square in `currentColor`.
    * @default false
    */
-  icon?: boolean;
+  icon?: ReactNode;
+  /**
+   * The icon in the handle while the switch is off: `true` for the cross, or a
+   * node to draw in its place. Given with `icon`, it is the page's form with
+   * an icon in both states, and the off handle grows to the on handle's 24dp
+   * to hold it.
+   * @default false
+   */
+  unselectedIcon?: ReactNode;
 } & AccessibleName & Omit<SwitchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;
 /**
  * A switch that turns a setting on or off, with its label and optionally a
@@ -46,7 +56,7 @@ type SwitchProps = {
  * The call site's `className` and `style` land on the field as a whole,
  * which is the element a layout positions.
  */
-declare function Switch({ children, description, error, icon, ...props }: RefAttributes<HTMLDivElement> & SwitchProps): import("react").JSX.Element;
+declare function Switch({ children, description, error, icon, unselectedIcon, ...props }: RefAttributes<HTMLDivElement> & SwitchProps): import("react").JSX.Element;
 //#endregion
 export { type SwitchProps, Switch as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/switch/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
-import { CheckGlyph } from "../../glyphs/index.js";
+import { CheckGlyph, CloseGlyph } from "../../glyphs/index.js";
 import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
@@ -41,8 +41,9 @@ const styles = {
 		kZKoxP: "xlup9mm",
 		kaIpWk: "x16fbrrb",
 		kB7OPa: "x9f619",
-		kMwMTN: "xscdzaa x6jt684",
+		kMwMTN: "x5yhsjm x1q5838n",
 		k1xSpc: "x78zum5",
+		kGuDYH: "x1j61zf2",
 		kzqmXN: "x1kky2od",
 		kjj79g: "xl56j7k",
 		kIyJzY: "x1qno0dh",
@@ -56,11 +57,17 @@ const styles = {
 	},
 	handleDisabled: {
 		kWkggS: "x1crcgwy x1o55y2u",
+		kMwMTN: "xx09jb7 x1a46atw",
+		$$css: true
+	},
+	handleError: {
+		kWkggS: "xwi4nbo x1tt9vl1",
 		$$css: true
 	},
 	handleOn: {
 		kWkggS: "x1ntwmx2 x1sir5s4",
 		kZKoxP: "xxk0z11",
+		kMwMTN: "xscdzaa x6jt684",
 		kzqmXN: "xvy4d1p",
 		$$css: true
 	},
@@ -78,6 +85,11 @@ const styles = {
 		kzqmXN: "xgd8bvy",
 		$$css: true
 	},
+	handleWithIcon: {
+		kZKoxP: "xxk0z11",
+		kzqmXN: "xvy4d1p",
+		$$css: true
+	},
 	layer: {
 		k6CgDc: "x12w9bfk",
 		kWkggS: "xjbqb8w",
@@ -143,6 +155,10 @@ const styles = {
 		kVAM5u: "xrh88j3 xmnqt3w",
 		$$css: true
 	},
+	trackError: {
+		kVAM5u: "xx78ee7 x1ylmb6m",
+		$$css: true
+	},
 	trackOn: {
 		kWkggS: "xnety89 x1jzqe4",
 		kVAM5u: "x1uajy3w x1n2ykn",
@@ -152,9 +168,17 @@ const styles = {
 		kWkggS: "x19v6zzp x1o55y2u",
 		kVAM5u: "x9r1u3d xmnqt3w",
 		$$css: true
+	},
+	trackOnError: {
+		kVAM5u: "xx78ee7 x1n2ykn",
+		$$css: true
 	}
 };
 const hoverLayers = {
+	error: {
+		kWkggS: "x55e1u4",
+		$$css: true
+	},
 	off: {
 		kWkggS: "x1b18xnh",
 		$$css: true
@@ -165,6 +189,10 @@ const hoverLayers = {
 	}
 };
 const focusLayers = {
+	error: {
+		kWkggS: "xyn212m",
+		$$css: true
+	},
 	off: {
 		kWkggS: "xwqhyid",
 		$$css: true
@@ -175,6 +203,10 @@ const focusLayers = {
 	}
 };
 const pressedLayers = {
+	error: {
+		kWkggS: "x3czxiy",
+		$$css: true
+	},
 	off: {
 		kWkggS: "xjeeohs",
 		$$css: true
@@ -187,26 +219,28 @@ const pressedLayers = {
 const TRAVEL = 20;
 const MOUSE_SLOP = TRAVEL / 4;
 const TOUCH_SLOP = TRAVEL / 2;
-function buttonContent(children, icon, ripple, drag) {
+function buttonContent(children, icons, ripple, drag) {
 	return (state) => {
 		const interactive = !state.isDisabled && !state.isReadOnly;
 		const on = state.isSelected;
+		const tone = state.isInvalid ? "error" : on ? "on" : "off";
 		const dragging = interactive && drag.offset !== null;
 		const active = interactive && (state.isHovered || state.isPressed || state.isFocusVisible);
+		const iconShown = on ? icons.on : icons.off;
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			...props(styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled),
 			children: /* @__PURE__ */ jsx("span", {
-				...props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && focus.ringVisible),
+				...props(styles.track, on && styles.trackOn, state.isInvalid && (on ? styles.trackOnError : styles.trackError), state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && focus.ringVisible),
 				children: /* @__PURE__ */ jsxs("span", {
 					...interactive ? drag.handlers(on) : {},
 					...props(styles.seat, on && styles.seatOn, interactive && styles.seatDraggable, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0)),
 					children: [/* @__PURE__ */ jsx("span", {
 						...interactive ? ripple.handlers : {},
-						...props(styles.layer, interactive && state.isHovered && hoverLayers[on ? "on" : "off"], interactive && state.isFocusVisible && focusLayers[on ? "on" : "off"], interactive && state.isPressed && pressedLayers[on ? "on" : "off"]),
+						...props(styles.layer, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone]),
 						children: interactive ? ripple.surface : null
 					}), /* @__PURE__ */ jsx("span", {
-						...props(styles.handle, on && styles.handleOn, active && (on ? styles.handleOnActive : styles.handleActive), (dragging || interactive && state.isPressed) && styles.handlePressed, state.isDisabled && (on ? styles.handleOnDisabled : styles.handleDisabled)),
-						children: icon && on ? /* @__PURE__ */ jsx(CheckGlyph, { className: "xlup9mm x1lliihq x1kky2od" }) : null
+						...props(styles.handle, on && styles.handleOn, active && (on ? styles.handleOnActive : styles.handleActive), !on && state.isInvalid && styles.handleError, !on && drawsIcon(icons.off) && styles.handleWithIcon, (dragging || interactive && state.isPressed) && styles.handlePressed, state.isDisabled && (on ? styles.handleOnDisabled : styles.handleDisabled)),
+						children: iconShown
 					})]
 				})
 			})
@@ -216,6 +250,20 @@ function buttonContent(children, icon, ripple, drag) {
 		})] });
 	};
 }
+function drawsIcon(icon) {
+	return icon !== false && icon !== null && icon !== void 0;
+}
+function fieldContent(button, description, error) {
+	return ({ isDisabled }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [button, /* @__PURE__ */ jsx("div", {
+		...props(controlStyles.messages),
+		children: /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error,
+			inset: false,
+			isDisabled
+		})
+	})] });
+}
 /**
 * A switch that turns a setting on or off, with its label and optionally a
 * description or an error under it. Its state is React Aria's: pass
@@ -227,76 +275,81 @@ function buttonContent(children, icon, ripple, drag) {
 * which is the element a layout positions.
 */
 function Switch(t0) {
-	const $ = c(21);
-	const { children, description, error, icon: t1, ...props$1 } = t0;
+	const $ = c(25);
+	const { children, description, error, icon: t1, unselectedIcon: t2, ...props$1 } = t0;
 	const icon = t1 === void 0 ? false : t1;
+	const unselectedIcon = t2 === void 0 ? false : t2;
 	const ripple = useRipple();
 	const drag = useHandleDrag();
 	const validationBehavior = useFieldValidationBehavior();
 	const T0 = SwitchField;
-	let t2;
+	let t3;
 	if ($[0] !== error) {
-		t2 = invalidFrom(error);
+		t3 = invalidFrom(error);
 		$[0] = error;
-		$[1] = t2;
-	} else t2 = $[1];
-	const t3 = mergeStatefulStyles(props(controlStyles.field), props$1);
-	let t4;
-	if ($[2] !== children || $[3] !== drag || $[4] !== icon || $[5] !== ripple) {
-		t4 = buttonContent(children, icon, ripple, drag);
-		$[2] = children;
-		$[3] = drag;
-		$[4] = icon;
-		$[5] = ripple;
-		$[6] = t4;
-	} else t4 = $[6];
+		$[1] = t3;
+	} else t3 = $[1];
+	const t4 = mergeStatefulStyles(props(controlStyles.field), props$1);
 	let t5;
-	if ($[7] !== t4) {
-		t5 = /* @__PURE__ */ jsx(SwitchButton, {
-			className: "xjp7ctv",
-			children: t4
-		});
-		$[7] = t4;
-		$[8] = t5;
-	} else t5 = $[8];
+	if ($[2] !== unselectedIcon) {
+		t5 = unselectedIcon === true ? /* @__PURE__ */ jsx(CloseGlyph, { className: "xlup9mm x1lliihq x1kky2od" }) : unselectedIcon;
+		$[2] = unselectedIcon;
+		$[3] = t5;
+	} else t5 = $[3];
 	let t6;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = props(controlStyles.messages);
-		$[9] = t6;
-	} else t6 = $[9];
+	if ($[4] !== icon) {
+		t6 = icon === true ? /* @__PURE__ */ jsx(CheckGlyph, { className: "xlup9mm x1lliihq x1kky2od" }) : icon;
+		$[4] = icon;
+		$[5] = t6;
+	} else t6 = $[5];
 	let t7;
-	if ($[10] !== description || $[11] !== error) {
-		t7 = /* @__PURE__ */ jsx("div", {
-			...t6,
-			children: /* @__PURE__ */ jsx(FieldMessage, {
-				description,
-				error,
-				inset: false
-			})
+	if ($[6] !== children || $[7] !== drag || $[8] !== ripple || $[9] !== t5 || $[10] !== t6) {
+		t7 = buttonContent(children, {
+			off: t5,
+			on: t6
+		}, ripple, drag);
+		$[6] = children;
+		$[7] = drag;
+		$[8] = ripple;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t7) {
+		t8 = /* @__PURE__ */ jsx(SwitchButton, {
+			className: "xjp7ctv",
+			children: t7
 		});
-		$[10] = description;
-		$[11] = error;
 		$[12] = t7;
-	} else t7 = $[12];
-	let t8;
-	if ($[13] !== T0 || $[14] !== props$1 || $[15] !== t2 || $[16] !== t3 || $[17] !== t5 || $[18] !== t7 || $[19] !== validationBehavior) {
-		t8 = /* @__PURE__ */ jsxs(T0, {
-			isInvalid: t2,
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== description || $[15] !== error || $[16] !== t8) {
+		t9 = fieldContent(t8, description, error);
+		$[14] = description;
+		$[15] = error;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== T0 || $[19] !== props$1 || $[20] !== t3 || $[21] !== t4 || $[22] !== t9 || $[23] !== validationBehavior) {
+		t10 = /* @__PURE__ */ jsx(T0, {
+			isInvalid: t3,
 			validationBehavior,
 			...props$1,
-			...t3,
-			children: [t5, t7]
+			...t4,
+			children: t9
 		});
-		$[13] = T0;
-		$[14] = props$1;
-		$[15] = t2;
-		$[16] = t3;
-		$[17] = t5;
-		$[18] = t7;
-		$[19] = validationBehavior;
-		$[20] = t8;
-	} else t8 = $[20];
-	return t8;
+		$[18] = T0;
+		$[19] = props$1;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t9;
+		$[23] = validationBehavior;
+		$[24] = t10;
+	} else t10 = $[24];
+	return t10;
 }
 /**
 * The handle following a pointer across the track, as the switch page draws

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","MouseEvent","ReactMouseEvent","ReactNode","PointerEvent","ReactPointerEvent","RefAttributes","SwitchFieldProps","RACSwitchFieldProps","SwitchButtonRenderProps","stylex","useCallback","useRef","useState","SwitchButton","SwitchField","AccessibleName","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","FORCED_COLORS","_temp","kLqNvP","styles","control","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kGNEyG","kZKoxP","kB7OPa","kkrTdU","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","$$css","handle","k6CgDc","kWkggS","kaIpWk","kMwMTN","kIyJzY","k1ekBW","kAMwcw","handleActive","handleDisabled","handleOn","handleOnActive","handleOnDisabled","handlePressed","layer","kpwlN0","seat","k87sOh","seatAt","offset","val","undefined","seatDraggable","kFalU9","seatDragging","seatOn","track","kVAM5u","ksu8eU","kMzoRj","trackDisabled","trackOn","trackOnDisabled","hoverLayers","off","on","focusLayers","pressedLayers","TRAVEL","MOUSE_SLOP","TOUCH_SLOP","Drag","ReturnType","useHandleDrag","Ripple","HTMLSpanElement","SwitchProps","children","description","error","icon","Omit","buttonContent","ripple","drag","state","interactive","isDisabled","isReadOnly","isSelected","dragging","active","isHovered","isPressed","isFocusVisible","props","controlReadOnly","controlDisabled","ringVisible","handlers","surface","Switch","t0","$","t1","validationBehavior","T0","t2","t3","field","t4","t5","t6","Symbol","for","messages","t7","t8","setOffset","origin","settled","cancelClick","current","onPointerCancel","event","preventDefault","stopPropagation","onClickCapture","event_0","from","along","rtl","x","clientX","Math","abs","slop","next","min","max","base","onPointerMove","event_1","from_0","stopped","currentTarget","dispatchEvent","bubbles","pointerId","pointerType","input","closest","querySelector","focuses","preventScroll","click","onPointerUp","onPointerDown","event_2","button","touch","getComputedStyle","direction","setPointerCapture","stylex.props","_c","props"],"sources":["../../../src/components/switch/index.tsx"],"sourcesContent":["'use client';\n\n// React's event types are aliased because `useHandleDrag` also constructs a\n// DOM `PointerEvent`. Imported unaliased, the name shadows that constructor:\n// TypeScript still resolves the call to the global, since a type-only import\n// takes no value name, but a reader and a static analyser alike read it as\n// React's type, which has no runtime value behind it at all.\nimport type { MouseEvent as ReactMouseEvent, ReactNode, PointerEvent as ReactPointerEvent, RefAttributes } from 'react';\nimport type { SwitchFieldProps as RACSwitchFieldProps, SwitchButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useRef, useState } from 'react';\nimport { SwitchButton, SwitchField } from 'react-aria-components';\nimport type { AccessibleName } from '../../render/name';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The switch page: a 52 by 32dp track with a 2dp outline and a full corner,\n// a handle that is 16dp off, 24dp on and 28dp while pressed, a 16dp icon in\n// the handle when asked for, a 40dp state layer around the handle and a 48dp\n// target. Off, the track is surface container highest inside an outline\n// rule and the handle is outline, turning on surface variant while hovered,\n// pressed or focused; on, the track is primary and the handle on primary,\n// turning primary container in the same states, with the icon in on primary\n// container. Disabled, the track and its rule are on surface at the\n// disabled container opacity and the handle on surface at the disabled\n// content opacity, or surface when on. The state layer is on surface off and\n// primary on.\n//\n// React Aria's `SwitchField` is the root, a div holding the description and\n// error slots; its `SwitchButton` is the label around a visually hidden\n// input, and everything drawn is that label's children, chosen from the\n// render state React Aria hands them. The field is the two-column grid the\n// checkbox uses, with the label `display: contents`, so the description and\n// error line up under the text.\n//\n// The handle travels between the two ends of the track and grows between\n// its three sizes on the same transition, `motion.durationShort2` with the\n// standard easing; the state layer and the ripple sit on a 40dp disc centred\n// on the handle, so they move with it. The adjacent label is body-large on\n// surface, which the page keeps the same whichever way the switch is.\n//\n// The page's pressed handle follows the pointer: it grows, travels with the\n// drag, and the switch flips when it is released past the middle of the\n// track or springs back when it is not. React Aria's `SwitchButton` has no\n// drag of its own, so the travel is this component's — see `useHandleDrag`.\n//\n// Under forced colours the switch names system colours for its fills. That\n// mode paints an author's fill in the page's own `Canvas`, so the handle\n// vanished and on and off drew the same empty pill; a system colour is kept\n// rather than repainted. Off is a `ButtonText` handle in an empty track with\n// a `ButtonText` rule. On is a `HighlightText` handle in a track filled with\n// `Highlight`, the pair the mode gives whatever is chosen, with the check in\n// `Highlight` over the handle. Disabled, the same shapes are `GrayText`, and\n// the handle of a switch that is on is emptied to `Canvas` so it still shows\n// against its track. Every style that sets a fill repeats its branch, since\n// one written without the query replaces the property whole, branch and all.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst _temp = {\n  kLqNvP: \"x1lxsm33\",\n  \"$$css\": true\n};\nconst styles = {\n  control: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1fb0czk\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1vqgdyp\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  handle: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xp2scj5 x1tt9vl1\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xscdzaa x6jt684\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1kky2od\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x7okvu4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  handleActive: {\n    kWkggS: \"x1ccu2yh x1tt9vl1\",\n    $$css: true\n  },\n  handleDisabled: {\n    kWkggS: \"x1crcgwy x1o55y2u\",\n    $$css: true\n  },\n  handleOn: {\n    kWkggS: \"x1ntwmx2 x1sir5s4\",\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  handleOnActive: {\n    kWkggS: \"xp89om9 x1sir5s4\",\n    $$css: true\n  },\n  handleOnDisabled: {\n    kWkggS: \"x14s9m32 x9yvj25\",\n    kMwMTN: \"x1gpw424 x1bhcspo\",\n    $$css: true\n  },\n  handlePressed: {\n    kZKoxP: \"x1fgtraw\",\n    kzqmXN: \"xgd8bvy\",\n    $$css: true\n  },\n  layer: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"x100vrsf\",\n    kpwlN0: \"x1qx2jxi\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seat: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1fgtraw\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xgd8bvy\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x2hifos\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seatAt: (offset: number) => [_temp, {\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${offset}px`)\n  }],\n  seatDraggable: {\n    kFalU9: \"x5ve5x3\",\n    $$css: true\n  },\n  seatDragging: {\n    kIyJzY: \"x1mq3mr6\",\n    $$css: true\n  },\n  seatOn: {\n    kLqNvP: \"x1n8ud3w\",\n    $$css: true\n  },\n  track: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"x1rrhr5q x9yvj25\",\n    kZKoxP: \"x10w6t97\",\n    kVAM5u: \"x1fwvt7v x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  trackDisabled: {\n    kWkggS: \"x1trd85j x9yvj25\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    $$css: true\n  },\n  trackOn: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    $$css: true\n  },\n  trackOnDisabled: {\n    kWkggS: \"x19v6zzp x1o55y2u\",\n    kVAM5u: \"x9r1u3d xmnqt3w\",\n    $$css: true\n  }\n};\n\n// The state layer over the handle: on surface while the switch is off and\n// primary while it is on, at the hover or the pressed opacity.\nconst hoverLayers = {\n  off: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  off: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  off: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\n\n// How far the seat travels: the track's 48dp inside its 2dp rule, less the\n// seat's own 28dp.\nconst TRAVEL = 20;\n\n// How far a press has to move before it is a drag, by the pointer making it.\n// Anything moves a little between pressing and lifting, and a press inside\n// this is still a tap, which flips the switch. A mouse moves a pixel or two,\n// so a quarter of the travel is room enough. A finger drifts further on an\n// ordinary tap — 6 to 10px was common — and under that same 5px the tap was\n// read as a drag let go before the middle, which settled where it began and\n// dropped the tap without a sign. A finger and a pen take half the travel,\n// the platforms' own touch slop; a drag past it is past the middle too.\nconst MOUSE_SLOP = TRAVEL / 4;\nconst TOUCH_SLOP = TRAVEL / 2;\ntype Drag = ReturnType<typeof useHandleDrag>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype SwitchProps = {\n  /**\n   * The label, beside the switch. A switch that a row labels some other way\n   * leaves it out and passes `aria-label` or `aria-labelledby` instead — one\n   * of the three is required, since a switch with none is announced as an\n   * unnamed switch.\n   *\n   * A link or a button in it acts on its own, as in a native label, and\n   * leaves the switch as it was. A press anywhere else in the label toggles\n   * it.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the switch in its error state — the message and `aria-invalid` follow\n   * from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Draws the check in the handle while the switch is on, the page's\n   * \"icon on selected switch\" form.\n   * @default false\n   */\n  icon?: boolean;\n} & AccessibleName & Omit<RACSwitchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the label draws, chosen from the render state React Aria hands it.\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. The ripple's handlers and surface go on the\n// state layer while the switch can change, and are left off while it\n// cannot, since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, icon: boolean, ripple: Ripple, drag: Drag) {\n  return (state: SwitchButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const on = state.isSelected;\n    const dragging = interactive && drag.offset !== null;\n    const active = interactive && (state.isHovered || state.isPressed || state.isFocusVisible);\n    return <>\n        <span {...stylex.props(styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled)}>\n          <span {...stylex.props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && focus.ringVisible)}>\n            <span {...interactive ? drag.handlers(on) : {}} {...stylex.props(styles.seat, on && styles.seatOn, interactive && styles.seatDraggable, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0))}>\n              <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.layer, interactive && state.isHovered && hoverLayers[on ? 'on' : 'off'], interactive && state.isFocusVisible && focusLayers[on ? 'on' : 'off'], interactive && state.isPressed && pressedLayers[on ? 'on' : 'off'])}>\n                {interactive ? ripple.surface : null}\n              </span>\n              <span {...stylex.props(styles.handle, on && styles.handleOn, active && (on ? styles.handleOnActive : styles.handleActive), (dragging || interactive && state.isPressed) && styles.handlePressed, state.isDisabled && (on ? styles.handleOnDisabled : styles.handleDisabled))}>\n                {icon && on ? <CheckGlyph className=\"xlup9mm x1lliihq x1kky2od\" /> : null}\n              </span>\n            </span>\n          </span>\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A switch that turns a setting on or off, with its label and optionally a\n * description or an error under it. Its state is React Aria's: pass\n * `isSelected` with `onChange` to control it, or `defaultSelected` to let it\n * keep its own. A switch takes effect as it is flipped, which is what sets\n * it apart from a checkbox in a form.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Switch({\n  children,\n  description,\n  error,\n  icon = false,\n  ...props\n}: RefAttributes<HTMLDivElement> & SwitchProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const drag = useHandleDrag();\n  const validationBehavior = useFieldValidationBehavior();\n  return <SwitchField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <SwitchButton className=\"xjp7ctv\">\n        {buttonContent(children, icon, ripple, drag)}\n      </SwitchButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </SwitchField>;\n}\n\n/**\n * The handle following a pointer across the track, as the switch page draws\n * a pressed switch. The seat's inset comes from the drag while one is under\n * way, and the switch settles from where the handle was let go: on past the\n * middle of the track, off before it.\n *\n * What flips the switch on an ordinary tap is React Aria's own press, which\n * ends on the pointer being released and pays no attention to where the\n * handle was dragged to — so a drag has to end that press before releasing,\n * which is what the pointer cancel is for, and settle the switch itself.\n * Settling means clicking the field's own input, the same element a tap\n * reaches in the end: the change goes through React Aria, and a controlled\n * switch stays controlled, since nothing here calls `onChange` or holds any\n * state of the switch's own. The click the pointer's release sends after\n * that is cancelled too, so nothing flips the switch a second time.\n *\n * A press that moves no further than the slop is left alone entirely, so a\n * tap flips the switch however still the pointer was — a drag starts only\n * once the pointer passes it, and from then on the handle follows every move.\n * The slop is the pointer's own: a finger and a pen drift further on a tap\n * than a mouse does. A mouse or pen drag then focuses the input, as a tap\n * does.\n *\n * The guard for the click after a drag is cleared by the next press, not by\n * that click, since the click may never come: a touch dragged past the\n * browser's own slop sends none, and a guard left armed swallowed the next\n * tap instead.\n */\nfunction useHandleDrag() {\n  const [offset, setOffset] = useState<null | number>(null);\n  const origin = useRef<null | {\n    base: number;\n    focuses: boolean;\n    on: boolean;\n    rtl: boolean;\n    slop: number;\n    x: number;\n  }>(null);\n  const settled = useRef<null | number>(null);\n  const cancelClick = useRef(false);\n  const onPointerCancel = useCallback(() => {\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n  }, []);\n  const onClickCapture = useCallback((event: ReactMouseEvent<HTMLSpanElement>) => {\n    if (!cancelClick.current) {\n      return;\n    }\n    cancelClick.current = false;\n    // The label's activation is the browser's own, so this is what stops the\n    // input being flipped by a drag that settled where it began.\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n  const onPointerMove = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    if (from === null) {\n      return;\n    }\n    const along = from.rtl ? from.x - event.clientX : event.clientX - from.x;\n    if (settled.current === null && Math.abs(along) <= from.slop) {\n      return;\n    }\n    const next = Math.min(TRAVEL, Math.max(0, from.base + along));\n    settled.current = next;\n    setOffset(next);\n  }, []);\n  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    const stopped = settled.current;\n    const seat = event.currentTarget;\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n    // A press that never moved is a tap, which React Aria flips on its own.\n    if (from === null || stopped === null) {\n      return;\n    }\n    // React Aria's press is about to flip the switch from wherever it\n    // started, so it is cancelled first — a pointer cancel is what ends a\n    // press without firing it — and the drag settles the switch instead.\n    seat.dispatchEvent(new PointerEvent('pointercancel', {\n      bubbles: true,\n      pointerId: event.pointerId,\n      pointerType: event.pointerType\n    }));\n    // The pointer's own click follows this, by which time the switch has\n    // already settled.\n    cancelClick.current = true;\n    const input = seat.closest('label')?.querySelector('input');\n    // Where a tap leaves focus, a drag leaves it too, whichever side it\n    // settles on. A tap reaches the input through the label, which focuses\n    // it; the click below is programmatic and moves nothing, and React\n    // Aria's press, which would, was cancelled above — so a mouse drag left\n    // focus on the page, and a Space after it did nothing. A touch is left\n    // alone, as a touch tap leaves no ring to find.\n    if (from.focuses) {\n      input?.focus({\n        preventScroll: true\n      });\n    }\n    if (stopped > TRAVEL / 2 === from.on) {\n      return;\n    }\n    input?.click();\n  }, []);\n  const handlers = useCallback((on: boolean) => ({\n    onClickCapture,\n    onPointerCancel,\n    onPointerDown: (event: ReactPointerEvent<HTMLSpanElement>) => {\n      cancelClick.current = false;\n      if (event.pointerType === 'mouse' && event.button !== 0) {\n        return;\n      }\n      const touch = event.pointerType === 'touch';\n      origin.current = {\n        base: on ? TRAVEL : 0,\n        focuses: !touch,\n        on,\n        rtl: getComputedStyle(event.currentTarget).direction === 'rtl',\n        slop: touch || event.pointerType === 'pen' ? TOUCH_SLOP : MOUSE_SLOP,\n        x: event.clientX\n      };\n      settled.current = null;\n      try {\n        event.currentTarget.setPointerCapture(event.pointerId);\n      } catch {\n        // A pointer the browser is not tracking has no capture to take —\n        // a synthetic event in a test, where the moves are dispatched on\n        // this element anyway.\n      }\n    },\n    onPointerMove,\n    onPointerUp\n  }), [onClickCapture, onPointerCancel, onPointerMove, onPointerUp]);\n  return {\n    handlers,\n    offset\n  };\n}\nexport type { SwitchProps };\nexport default Switch;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","MouseEvent","ReactMouseEvent","ReactNode","PointerEvent","ReactPointerEvent","RefAttributes","SwitchFieldProps","RACSwitchFieldProps","SwitchButtonRenderProps","SwitchFieldRenderProps","stylex","useCallback","useRef","useState","SwitchButton","SwitchField","AccessibleName","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","CloseGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","FORCED_COLORS","_temp","kLqNvP","styles","control","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kGNEyG","kZKoxP","kB7OPa","kkrTdU","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","$$css","handle","k6CgDc","kWkggS","kaIpWk","kMwMTN","kGuDYH","kIyJzY","k1ekBW","kAMwcw","handleActive","handleDisabled","handleError","handleOn","handleOnActive","handleOnDisabled","handlePressed","handleWithIcon","layer","kpwlN0","seat","k87sOh","seatAt","offset","val","undefined","seatDraggable","kFalU9","seatDragging","seatOn","track","kVAM5u","ksu8eU","kMzoRj","trackDisabled","trackError","trackOn","trackOnDisabled","trackOnError","hoverLayers","error","off","on","focusLayers","pressedLayers","TRAVEL","MOUSE_SLOP","TOUCH_SLOP","Drag","ReturnType","useHandleDrag","Ripple","HTMLSpanElement","SwitchProps","children","description","icon","unselectedIcon","Omit","buttonContent","icons","ripple","drag","state","interactive","isDisabled","isReadOnly","isSelected","tone","isInvalid","dragging","active","isHovered","isPressed","isFocusVisible","iconShown","props","controlReadOnly","controlDisabled","ringVisible","handlers","surface","drawsIcon","fieldContent","button","messages","Switch","t0","$","t1","t2","validationBehavior","T0","t3","t4","field","t5","t6","t7","t8","t9","t10","setOffset","origin","settled","cancelClick","Symbol","for","current","onPointerCancel","event","preventDefault","stopPropagation","onClickCapture","event_0","from","along","rtl","x","clientX","Math","abs","slop","next","min","max","base","onPointerMove","event_1","from_0","stopped","currentTarget","dispatchEvent","bubbles","pointerId","pointerType","input","closest","querySelector","focuses","preventScroll","click","onPointerUp","onPointerDown","event_2","touch","getComputedStyle","direction","setPointerCapture","stylex.props","_c","props"],"sources":["../../../src/components/switch/index.tsx"],"sourcesContent":["'use client';\n\n// React's event types are aliased because `useHandleDrag` also constructs a\n// DOM `PointerEvent`. Imported unaliased, the name shadows that constructor:\n// TypeScript still resolves the call to the global, since a type-only import\n// takes no value name, but a reader and a static analyser alike read it as\n// React's type, which has no runtime value behind it at all.\nimport type { MouseEvent as ReactMouseEvent, ReactNode, PointerEvent as ReactPointerEvent, RefAttributes } from 'react';\nimport type { SwitchFieldProps as RACSwitchFieldProps, SwitchButtonRenderProps, SwitchFieldRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useRef, useState } from 'react';\nimport { SwitchButton, SwitchField } from 'react-aria-components';\nimport type { AccessibleName } from '../../render/name';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The switch page: a 52 by 32dp track with a 2dp outline and a full corner,\n// a handle that is 16dp off, 24dp on and 28dp while pressed, a 16dp icon in\n// the handle when asked for, a 40dp state layer around the handle and a 48dp\n// target. Off, the track is surface container highest inside an outline\n// rule and the handle is outline, turning on surface variant while hovered,\n// pressed or focused; on, the track is primary and the handle on primary,\n// turning primary container in the same states, with the icon in on primary\n// container. Disabled, the track and its rule are on surface at the\n// disabled container opacity and the handle on surface at the disabled\n// content opacity, or surface when on. The state layer is on surface off and\n// primary on.\n//\n// The page draws the icon in two forms: on the selected handle alone, which\n// is `icon`, and in both states, which adds `unselectedIcon`. An off handle\n// holding an icon is 24dp, as an on one is, and the icon in it is surface\n// container highest, faded to the disabled content opacity while disabled.\n// Either prop takes `true` for the page's own glyph, the check on and the\n// cross off, or a node to draw in its place. The handle sets the 16dp as a\n// font size and the colour as `color`, so a `1em` icon in `currentColor`\n// takes both, as the README asks of every icon.\n//\n// The page gives no error state, so an invalid switch takes the checkbox's\n// error colours rather than showing its problem in the message alone. The\n// track's rule is error, and so is the handle while the switch is off; on,\n// the track keeps its primary fill and the handle its on primary, so the\n// switch still reads as on inside an error rule. The state layer is error\n// either way, as the checkbox's is, and a disabled switch keeps its disabled\n// colours. Under forced colours the error colour goes with every other, and\n// the switch keeps the mapping below, so there the message says what is\n// wrong.\n//\n// React Aria's `SwitchField` is the root, a div holding the description and\n// error slots; its `SwitchButton` is the label around a visually hidden\n// input, and everything drawn is that label's children, chosen from the\n// render state React Aria hands them. The field is the two-column grid the\n// checkbox uses, with the label `display: contents`, so the description and\n// error line up under the text.\n//\n// The handle travels between the two ends of the track and grows between\n// its three sizes on the same transition, `motion.durationShort2` with the\n// standard easing; the state layer and the ripple sit on a 40dp disc centred\n// on the handle, so they move with it. The adjacent label is body-large on\n// surface, which the page keeps the same whichever way the switch is.\n//\n// The page's pressed handle follows the pointer: it grows, travels with the\n// drag, and the switch flips when it is released past the middle of the\n// track or springs back when it is not. React Aria's `SwitchButton` has no\n// drag of its own, so the travel is this component's — see `useHandleDrag`.\n//\n// Under forced colours the switch names system colours for its fills. That\n// mode paints an author's fill in the page's own `Canvas`, so the handle\n// vanished and on and off drew the same empty pill; a system colour is kept\n// rather than repainted. Off is a `ButtonText` handle in an empty track with\n// a `ButtonText` rule. On is a `HighlightText` handle in a track filled with\n// `Highlight`, the pair the mode gives whatever is chosen, with the check in\n// `Highlight` over the handle. Disabled, the same shapes are `GrayText`, and\n// the handle of a switch that is on is emptied to `Canvas` so it still shows\n// against its track. Every style that sets a fill repeats its branch, since\n// one written without the query replaces the property whole, branch and all.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst _temp = {\n  kLqNvP: \"x1lxsm33\",\n  \"$$css\": true\n};\nconst styles = {\n  control: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1fb0czk\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1vqgdyp\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  handle: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xp2scj5 x1tt9vl1\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x5yhsjm x1q5838n\",\n    k1xSpc: \"x78zum5\",\n    kGuDYH: \"x1j61zf2\",\n    kzqmXN: \"x1kky2od\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x7okvu4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  handleActive: {\n    kWkggS: \"x1ccu2yh x1tt9vl1\",\n    $$css: true\n  },\n  handleDisabled: {\n    kWkggS: \"x1crcgwy x1o55y2u\",\n    kMwMTN: \"xx09jb7 x1a46atw\",\n    $$css: true\n  },\n  handleError: {\n    kWkggS: \"xwi4nbo x1tt9vl1\",\n    $$css: true\n  },\n  handleOn: {\n    kWkggS: \"x1ntwmx2 x1sir5s4\",\n    kZKoxP: \"xxk0z11\",\n    kMwMTN: \"xscdzaa x6jt684\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  handleOnActive: {\n    kWkggS: \"xp89om9 x1sir5s4\",\n    $$css: true\n  },\n  handleOnDisabled: {\n    kWkggS: \"x14s9m32 x9yvj25\",\n    kMwMTN: \"x1gpw424 x1bhcspo\",\n    $$css: true\n  },\n  handlePressed: {\n    kZKoxP: \"x1fgtraw\",\n    kzqmXN: \"xgd8bvy\",\n    $$css: true\n  },\n  handleWithIcon: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  layer: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"x100vrsf\",\n    kpwlN0: \"x1qx2jxi\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seat: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1fgtraw\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xgd8bvy\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x2hifos\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seatAt: (offset: number) => [_temp, {\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${offset}px`)\n  }],\n  seatDraggable: {\n    kFalU9: \"x5ve5x3\",\n    $$css: true\n  },\n  seatDragging: {\n    kIyJzY: \"x1mq3mr6\",\n    $$css: true\n  },\n  seatOn: {\n    kLqNvP: \"x1n8ud3w\",\n    $$css: true\n  },\n  track: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"x1rrhr5q x9yvj25\",\n    kZKoxP: \"x10w6t97\",\n    kVAM5u: \"x1fwvt7v x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  trackDisabled: {\n    kWkggS: \"x1trd85j x9yvj25\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    $$css: true\n  },\n  trackError: {\n    kVAM5u: \"xx78ee7 x1ylmb6m\",\n    $$css: true\n  },\n  trackOn: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    $$css: true\n  },\n  trackOnDisabled: {\n    kWkggS: \"x19v6zzp x1o55y2u\",\n    kVAM5u: \"x9r1u3d xmnqt3w\",\n    $$css: true\n  },\n  trackOnError: {\n    kVAM5u: \"xx78ee7 x1n2ykn\",\n    $$css: true\n  }\n};\n\n// The state layer over the handle: on surface while the switch is off and\n// primary while it is on, at the hover or the pressed opacity, and error\n// either way while it is invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  off: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  error: {\n    kWkggS: \"xyn212m\",\n    $$css: true\n  },\n  off: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  off: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\n\n// How far the seat travels: the track's 48dp inside its 2dp rule, less the\n// seat's own 28dp.\nconst TRAVEL = 20;\n\n// How far a press has to move before it is a drag, by the pointer making it.\n// Anything moves a little between pressing and lifting, and a press inside\n// this is still a tap, which flips the switch. A mouse moves a pixel or two,\n// so a quarter of the travel is room enough. A finger drifts further on an\n// ordinary tap — 6 to 10px was common — and under that same 5px the tap was\n// read as a drag let go before the middle, which settled where it began and\n// dropped the tap without a sign. A finger and a pen take half the travel,\n// the platforms' own touch slop; a drag past it is past the middle too.\nconst MOUSE_SLOP = TRAVEL / 4;\nconst TOUCH_SLOP = TRAVEL / 2;\ntype Drag = ReturnType<typeof useHandleDrag>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype SwitchProps = {\n  /**\n   * The label, beside the switch. A switch that a row labels some other way\n   * leaves it out and passes `aria-label` or `aria-labelledby` instead — one\n   * of the three is required, since a switch with none is announced as an\n   * unnamed switch.\n   *\n   * A link or a button in it acts on its own, as in a native label, and\n   * leaves the switch as it was. A press anywhere else in the label toggles\n   * it.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the switch in its error state — the error colours on the track and the\n   * handle, the message and `aria-invalid` follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * The icon in the handle while the switch is on: `true` for the check, the\n   * page's \"icon on selected switch\" form, or a node to draw in its place.\n   * The handle draws it at 16px in its icon colour, so give a node `1em`\n   * square in `currentColor`.\n   * @default false\n   */\n  icon?: ReactNode;\n  /**\n   * The icon in the handle while the switch is off: `true` for the cross, or a\n   * node to draw in its place. Given with `icon`, it is the page's form with\n   * an icon in both states, and the off handle grows to the on handle's 24dp\n   * to hold it.\n   * @default false\n   */\n  unselectedIcon?: ReactNode;\n} & AccessibleName & Omit<RACSwitchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the label draws, chosen from the render state React Aria hands it.\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. The ripple's handlers and surface go on the\n// state layer while the switch can change, and are left off while it\n// cannot, since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, icons: {\n  off: ReactNode;\n  on: ReactNode;\n}, ripple: Ripple, drag: Drag) {\n  return (state: SwitchButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const on = state.isSelected;\n    const tone = state.isInvalid ? 'error' : on ? 'on' : 'off';\n    const dragging = interactive && drag.offset !== null;\n    const active = interactive && (state.isHovered || state.isPressed || state.isFocusVisible);\n    const iconShown = on ? icons.on : icons.off;\n    return <>\n        <span {...stylex.props(styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled)}>\n          <span {...stylex.props(styles.track, on && styles.trackOn, state.isInvalid && (on ? styles.trackOnError : styles.trackError), state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && focus.ringVisible)}>\n            <span {...interactive ? drag.handlers(on) : {}} {...stylex.props(styles.seat, on && styles.seatOn, interactive && styles.seatDraggable, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0))}>\n              <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.layer, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone])}>\n                {interactive ? ripple.surface : null}\n              </span>\n              <span {...stylex.props(styles.handle, on && styles.handleOn, active && (on ? styles.handleOnActive : styles.handleActive), !on && state.isInvalid && styles.handleError, !on && drawsIcon(icons.off) && styles.handleWithIcon, (dragging || interactive && state.isPressed) && styles.handlePressed, state.isDisabled && (on ? styles.handleOnDisabled : styles.handleDisabled))}>\n                {iconShown}\n              </span>\n            </span>\n          </span>\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n// Whether a handle icon prop draws anything: `false`, `null` and `undefined`\n// leave the handle empty, and so at its own size.\nfunction drawsIcon(icon: ReactNode) {\n  return icon !== false && icon !== null && icon !== undefined;\n}\n\n// The button and the line under it, from the field's render state: the\n// description fades with a disabled switch, as its label does. Built by a\n// call for the same reason as `buttonContent`.\nfunction fieldContent(button: ReactNode, description: string | undefined, error: string | undefined) {\n  return ({\n    isDisabled\n  }: SwitchFieldRenderProps) => <>\n      {button}\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} isDisabled={isDisabled} />\n      </div>\n    </>;\n}\n\n/**\n * A switch that turns a setting on or off, with its label and optionally a\n * description or an error under it. Its state is React Aria's: pass\n * `isSelected` with `onChange` to control it, or `defaultSelected` to let it\n * keep its own. A switch takes effect as it is flipped, which is what sets\n * it apart from a checkbox in a form.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Switch({\n  children,\n  description,\n  error,\n  icon = false,\n  unselectedIcon = false,\n  ...props\n}: RefAttributes<HTMLDivElement> & SwitchProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const drag = useHandleDrag();\n  const validationBehavior = useFieldValidationBehavior();\n  return <SwitchField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      {fieldContent(<SwitchButton className=\"xjp7ctv\">\n          {buttonContent(children, {\n        off: unselectedIcon === true ? <CloseGlyph className=\"xlup9mm x1lliihq x1kky2od\" /> : unselectedIcon,\n        on: icon === true ? <CheckGlyph className=\"xlup9mm x1lliihq x1kky2od\" /> : icon\n      }, ripple, drag)}\n        </SwitchButton>, description, error)}\n    </SwitchField>;\n}\n\n/**\n * The handle following a pointer across the track, as the switch page draws\n * a pressed switch. The seat's inset comes from the drag while one is under\n * way, and the switch settles from where the handle was let go: on past the\n * middle of the track, off before it.\n *\n * What flips the switch on an ordinary tap is React Aria's own press, which\n * ends on the pointer being released and pays no attention to where the\n * handle was dragged to — so a drag has to end that press before releasing,\n * which is what the pointer cancel is for, and settle the switch itself.\n * Settling means clicking the field's own input, the same element a tap\n * reaches in the end: the change goes through React Aria, and a controlled\n * switch stays controlled, since nothing here calls `onChange` or holds any\n * state of the switch's own. The click the pointer's release sends after\n * that is cancelled too, so nothing flips the switch a second time.\n *\n * A press that moves no further than the slop is left alone entirely, so a\n * tap flips the switch however still the pointer was — a drag starts only\n * once the pointer passes it, and from then on the handle follows every move.\n * The slop is the pointer's own: a finger and a pen drift further on a tap\n * than a mouse does. A mouse or pen drag then focuses the input, as a tap\n * does.\n *\n * The guard for the click after a drag is cleared by the next press, not by\n * that click, since the click may never come: a touch dragged past the\n * browser's own slop sends none, and a guard left armed swallowed the next\n * tap instead.\n */\nfunction useHandleDrag() {\n  const [offset, setOffset] = useState<null | number>(null);\n  const origin = useRef<null | {\n    base: number;\n    focuses: boolean;\n    on: boolean;\n    rtl: boolean;\n    slop: number;\n    x: number;\n  }>(null);\n  const settled = useRef<null | number>(null);\n  const cancelClick = useRef(false);\n  const onPointerCancel = useCallback(() => {\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n  }, []);\n  const onClickCapture = useCallback((event: ReactMouseEvent<HTMLSpanElement>) => {\n    if (!cancelClick.current) {\n      return;\n    }\n    cancelClick.current = false;\n    // The label's activation is the browser's own, so this is what stops the\n    // input being flipped by a drag that settled where it began.\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n  const onPointerMove = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    if (from === null) {\n      return;\n    }\n    const along = from.rtl ? from.x - event.clientX : event.clientX - from.x;\n    if (settled.current === null && Math.abs(along) <= from.slop) {\n      return;\n    }\n    const next = Math.min(TRAVEL, Math.max(0, from.base + along));\n    settled.current = next;\n    setOffset(next);\n  }, []);\n  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    const stopped = settled.current;\n    const seat = event.currentTarget;\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n    // A press that never moved is a tap, which React Aria flips on its own.\n    if (from === null || stopped === null) {\n      return;\n    }\n    // React Aria's press is about to flip the switch from wherever it\n    // started, so it is cancelled first — a pointer cancel is what ends a\n    // press without firing it — and the drag settles the switch instead.\n    seat.dispatchEvent(new PointerEvent('pointercancel', {\n      bubbles: true,\n      pointerId: event.pointerId,\n      pointerType: event.pointerType\n    }));\n    // The pointer's own click follows this, by which time the switch has\n    // already settled.\n    cancelClick.current = true;\n    const input = seat.closest('label')?.querySelector('input');\n    // Where a tap leaves focus, a drag leaves it too, whichever side it\n    // settles on. A tap reaches the input through the label, which focuses\n    // it; the click below is programmatic and moves nothing, and React\n    // Aria's press, which would, was cancelled above — so a mouse drag left\n    // focus on the page, and a Space after it did nothing. A touch is left\n    // alone, as a touch tap leaves no ring to find.\n    if (from.focuses) {\n      input?.focus({\n        preventScroll: true\n      });\n    }\n    if (stopped > TRAVEL / 2 === from.on) {\n      return;\n    }\n    input?.click();\n  }, []);\n  const handlers = useCallback((on: boolean) => ({\n    onClickCapture,\n    onPointerCancel,\n    onPointerDown: (event: ReactPointerEvent<HTMLSpanElement>) => {\n      cancelClick.current = false;\n      if (event.pointerType === 'mouse' && event.button !== 0) {\n        return;\n      }\n      const touch = event.pointerType === 'touch';\n      origin.current = {\n        base: on ? TRAVEL : 0,\n        focuses: !touch,\n        on,\n        rtl: getComputedStyle(event.currentTarget).direction === 'rtl',\n        slop: touch || event.pointerType === 'pen' ? TOUCH_SLOP : MOUSE_SLOP,\n        x: event.clientX\n      };\n      settled.current = null;\n      try {\n        event.currentTarget.setPointerCapture(event.pointerId);\n      } catch {\n        // A pointer the browser is not tracking has no capture to take —\n        // a synthetic event in a test, where the moves are dispatched on\n        // this element anyway.\n      }\n    },\n    onPointerMove,\n    onPointerUp\n  }), [onClickCapture, onPointerCancel, onPointerMove, onPointerUp]);\n  return {\n    handlers,\n    offset\n  };\n}\nexport type { SwitchProps };\nexport default Switch;"],"mappings":";;;;;;;;;;;;;;;AAyFA,MAAMkC,QAAQ;CACZC,QAAQ;CACR,SAAS;AACX;AACA,MAAMC,SAAS;CACbC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNC,QAAQ;EACRX,QAAQ;EACRY,QAAQ;EACRX,QAAQ;EACRY,QAAQ;EACRX,QAAQ;EACRY,QAAQ;EACRV,QAAQ;EACRW,QAAQ;EACRT,QAAQ;EACRC,QAAQ;EACRS,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRT,OAAO;CACT;CACAU,cAAc;EACZP,QAAQ;EACRH,OAAO;CACT;CACAW,gBAAgB;EACdR,QAAQ;EACRE,QAAQ;EACRL,OAAO;CACT;CACAY,aAAa;EACXT,QAAQ;EACRH,OAAO;CACT;CACAa,UAAU;EACRV,QAAQ;EACRX,QAAQ;EACRa,QAAQ;EACRR,QAAQ;EACRG,OAAO;CACT;CACAc,gBAAgB;EACdX,QAAQ;EACRH,OAAO;CACT;CACAe,kBAAkB;EAChBZ,QAAQ;EACRE,QAAQ;EACRL,OAAO;CACT;CACAgB,eAAe;EACbxB,QAAQ;EACRK,QAAQ;EACRG,OAAO;CACT;CACAiB,gBAAgB;EACdzB,QAAQ;EACRK,QAAQ;EACRG,OAAO;CACT;CACAkB,OAAO;EACLhB,QAAQ;EACRC,QAAQ;EACRX,QAAQ;EACRY,QAAQ;EACRX,QAAQ;EACRI,QAAQ;EACRsB,QAAQ;EACRpB,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRT,OAAO;CACT;CACAoB,MAAM;EACJlB,QAAQ;EACRX,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRE,QAAQ;EACRwB,QAAQ;EACRrC,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRT,OAAO;CACT;CACAsB,SAASC,WAAmB,CAACxC,OAAO,EAClC,0BAAyByC,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAW,GAAGF,OAAM,GAAI,EACrH,CAAC;CACDG,eAAe;EACbC,QAAQ;EACR3B,OAAO;CACT;CACA4B,cAAc;EACZrB,QAAQ;EACRP,OAAO;CACT;CACA6B,QAAQ;EACN7C,QAAQ;EACRgB,OAAO;CACT;CACA8B,OAAO;EACL5B,QAAQ;EACRC,QAAQ;EACRX,QAAQ;EACRuC,QAAQ;EACR3B,QAAQ;EACR4B,QAAQ;EACRC,QAAQ;EACRxC,QAAQ;EACRG,OAAO;EACPC,QAAQ;EACRE,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRT,OAAO;CACT;CACAkC,eAAe;EACb/B,QAAQ;EACR4B,QAAQ;EACR/B,OAAO;CACT;CACAmC,YAAY;EACVJ,QAAQ;EACR/B,OAAO;CACT;CACAoC,SAAS;EACPjC,QAAQ;EACR4B,QAAQ;EACR/B,OAAO;CACT;CACAqC,iBAAiB;EACflC,QAAQ;EACR4B,QAAQ;EACR/B,OAAO;CACT;CACAsC,cAAc;EACZP,QAAQ;EACR/B,OAAO;CACT;AACF;AAKA,MAAMuC,cAAc;CAClBC,OAAO;EACLrC,QAAQ;EACRH,OAAO;CACT;CACAyC,KAAK;EACHtC,QAAQ;EACRH,OAAO;CACT;CACA0C,IAAI;EACFvC,QAAQ;EACRH,OAAO;CACT;AACF;AAGA,MAAM2C,cAAc;CAClBH,OAAO;EACLrC,QAAQ;EACRH,OAAO;CACT;CACAyC,KAAK;EACHtC,QAAQ;EACRH,OAAO;CACT;CACA0C,IAAI;EACFvC,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAM4C,gBAAgB;CACpBJ,OAAO;EACLrC,QAAQ;EACRH,OAAO;CACT;CACAyC,KAAK;EACHtC,QAAQ;EACRH,OAAO;CACT;CACA0C,IAAI;EACFvC,QAAQ;EACRH,OAAO;CACT;AACF;AAIA,MAAM6C,SAAS;AAUf,MAAMC,aAAaD,SAAS;AAC5B,MAAME,aAAaF,SAAS;AAsD5B,SAASc,cAAcL,UAAqBM,OAGzCC,QAAgBC,MAAY;CAC7B,QAAQC,UAAmC;EACzC,MAAMC,cAAc,CAACD,MAAME,cAAc,CAACF,MAAMG;EAChD,MAAMxB,KAAKqB,MAAMI;EACjB,MAAMC,OAAOL,MAAMM,YAAY,UAAU3B,KAAK,OAAO;EACrD,MAAM4B,WAAWN,eAAeF,KAAKvC,WAAW;EAChD,MAAMgD,SAASP,gBAAgBD,MAAMS,aAAaT,MAAMU,aAAaV,MAAMW;EAC3E,MAAMC,YAAYjC,KAAKkB,MAAMlB,KAAKkB,MAAMnB;EACxC,OAAO,qBAAA,YAAA,EAAA,UAAA,CACH,oBAAC,QAAD;GAAM,GAAIhF,MAAawB,OAAOC,SAAS6E,MAAMG,cAAcjG,cAAc4G,iBAAiBd,MAAME,cAAchG,cAAc6G,eAAe;GACzI,UAAA,oBAAC,QAAD;IAAM,GAAIrH,MAAawB,OAAO6C,OAAOY,MAAMzD,OAAOmD,SAAS2B,MAAMM,cAAc3B,KAAKzD,OAAOqD,eAAerD,OAAOkD,aAAa4B,MAAME,eAAevB,KAAKzD,OAAOoD,kBAAkBpD,OAAOiD,gBAAgB6B,MAAMW,kBAAkBlG,MAAMuG,WAAW;IAC/O,UAAA,qBAAC,QAAD;KAAM,GAAIf,cAAcF,KAAKkB,SAAStC,EAAE,IAAI,CAAC;KAAG,GAAIjF,MAAawB,OAAOmC,MAAMsB,MAAMzD,OAAO4C,QAAQmC,eAAe/E,OAAOyC,eAAe4C,YAAYrF,OAAO2C,cAAc0C,YAAYrF,OAAOqC,OAAOwC,KAAKvC,UAAU,CAAC,CAAC;KAApN,UAAA,CACE,oBAAC,QAAD;MAAM,GAAIyC,cAAcH,OAAOmB,WAAW,CAAC;MAAG,GAAIvH,MAAawB,OAAOiC,OAAO8C,eAAeD,MAAMS,aAAajC,YAAY6B,OAAOJ,eAAeD,MAAMW,kBAAkB/B,YAAYyB,OAAOJ,eAAeD,MAAMU,aAAa7B,cAAcwB,KAAK;MAC9OJ,UAAAA,cAAcH,OAAOoB,UAAU;KAC5B,CAAA,GACN,oBAAC,QAAD;MAAM,GAAIxH,MAAawB,OAAOgB,QAAQyC,MAAMzD,OAAO4B,UAAU0D,WAAW7B,KAAKzD,OAAO6B,iBAAiB7B,OAAOyB,eAAe,CAACgC,MAAMqB,MAAMM,aAAapF,OAAO2B,aAAa,CAAC8B,MAAMwC,UAAUtB,MAAMnB,GAAG,KAAKxD,OAAOgC,iBAAiBqD,YAAYN,eAAeD,MAAMU,cAAcxF,OAAO+B,eAAe+C,MAAME,eAAevB,KAAKzD,OAAO8B,mBAAmB9B,OAAO0B,eAAe;MAC5WgE,UAAAA;KACG,CAAA,CACF;;GACF,CAAA;EACF,CAAA,GACN,oBAAC,cAAD;GAAqBZ;GAAQT;EAAuB,CAAA,CACtD,EAAA,CAAA;CACJ;AACF;AAIA,SAAS4B,UAAU1B,MAAiB;CAClC,OAAOA,SAAS,SAASA,SAAS,QAAQA,SAAS/B,KAAAA;AACrD;AAKA,SAAS0D,aAAaC,QAAmB7B,aAAiCf,OAA2B;CACnG,QAAQ,EACNyB,iBAC4B,qBAAA,YAAA,EAAA,UAAA,CACzBmB,QACD,oBAAC,OAAD;EAAK,GAAI3H,MAAaQ,cAAcoH,QAAQ;EAC1C,UAAA,oBAAC,cAAD;GAA2B9B;GAAoBf;GAAO,OAAO;GAAmByB;EAAW,CAAA;CACxF,CAAA,CACP,EAAA,CAAA;AACJ;;;;;;;;;;;AAYA,SAAAqB,OAAAC,IAAA;CAAA,MAAAC,IAAA1I,EAAA,EAAA;CAAgB,MAAA,EAAAwG,UAAAC,aAAAf,OAAAgB,MAAAiC,IAAAhC,gBAAAiC,IAAA,GAAAd,YAAAW;CAId,MAAA/B,OAAAiC,OAAAhE,KAAAA,IAAA,QAAAgE;CACA,MAAAhC,iBAAAiC,OAAAjE,KAAAA,IAAA,QAAAiE;CAGA,MAAA7B,SAAetF,UAA2B;CAC1C,MAAAuF,OAAaZ,cAAc;CAC3B,MAAAyC,qBAA2BvH,2BAA2B;CAC9C,MAAAwH,KAAA9H;CAAW,IAAA+H;CAAA,IAAAL,EAAA,OAAAhD,OAAA;EAAYqD,KAAA1H,YAAYqE,KAAK;EAACgD,EAAA,KAAAhD;EAAAgD,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAyD,MAAAM,KAAArH,oBAAoBhB,MAAaQ,cAAa8H,KAAM,GAAGnB,OAAK;CAAC,IAAAoB;CAAA,IAAAR,EAAA,OAAA/B,gBAAA;EAG5JuC,KAAAvC,mBAAmB,OAAO,oBAAC,YAAD,EAAsB,WAAA,4BAA2B,CAAA,IAA3EA;EAA+F+B,EAAA,KAAA/B;EAAA+B,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAhC,MAAA;EAChGyC,KAAAzC,SAAS,OAAO,oBAAC,YAAD,EAAsB,WAAA,4BAA2B,CAAA,IAAjEA;EAA2EgC,EAAA,KAAAhC;EAAAgC,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAlC,YAAAkC,EAAA,OAAA1B,QAAA0B,EAAA,OAAA3B,UAAA2B,EAAA,OAAAQ,MAAAR,EAAA,QAAAS,IAAA;EAF5EC,KAAAvC,cAAcL,UAAU;GAAAb,KACtBuD;GAA+FtD,IAChGuD;EACN,GAAGpC,QAAQC,IAAI;EAAC0B,EAAA,KAAAlC;EAAAkC,EAAA,KAAA1B;EAAA0B,EAAA,KAAA3B;EAAA2B,EAAA,KAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAU,IAAA;EAJFC,KAAA,oBAAC,cAAD;GAAwB,WAAA;GACjCD,UAAAA;EADsB,CAAA;EAKVV,EAAA,MAAAU;EAAAV,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAAjC,eAAAiC,EAAA,QAAAhD,SAAAgD,EAAA,QAAAW,IAAA;EALhBC,KAAAjB,aAAagB,IAKK5C,aAAaf,KAAK;EAACgD,EAAA,MAAAjC;EAAAiC,EAAA,MAAAhD;EAAAgD,EAAA,MAAAW;EAAAX,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,QAAAI,MAAAJ,EAAA,QAAAZ,WAAAY,EAAA,QAAAK,MAAAL,EAAA,QAAAM,MAAAN,EAAA,QAAAY,MAAAZ,EAAA,QAAAG,oBAAA;EANnCU,MAAA,oBAAC,IAAD;GAAwB,WAAAR;GAAwCF;GAAkB,GAAMf;GAAK,GAAMkB;GACrGM,UAAAA;EADc,CAAA;EAOHZ,EAAA,MAAAI;EAAAJ,EAAA,MAAAZ;EAAAY,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAY;EAAAZ,EAAA,MAAAG;EAAAH,EAAA,MAAAa;CAAA,OAAAA,MAAAb,EAAA;CAAA,OAPTa;AAOS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BlB,SAAAnD,gBAAA;CAAA,MAAAsC,IAAA1I,EAAA,CAAA;CACE,MAAA,CAAAyE,QAAA+E,aAA4B1I,SAAwB,IAAI;CACxD,MAAA2I,SAAe5I,OAOZ,IAAI;CACP,MAAA6I,UAAgB7I,OAAsB,IAAI;CAC1C,MAAA8I,cAAoB9I,OAAO,KAAK;CAAE,IAAA4H;CAAA,IAAAC,EAAA,OAAAkB,OAAAC,IAAA,2BAAA,GAAA;EACEpB,WAAA;GAClCgB,OAAMK,UAAW;GACjBJ,QAAOI,UAAW;GAClBN,UAAU,IAAI;EAAC;EAChBd,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAJD,MAAAqB,kBAAwBtB;CAIjB,IAAAE;CAAA,IAAAD,EAAA,OAAAkB,OAAAC,IAAA,2BAAA,GAAA;EAC4BlB,MAAAqB,UAAA;GACjC,IAAI,CAACL,YAAWG,SAAQ;GAGxBH,YAAWG,UAAW;GAGtBE,MAAKC,eAAgB;GACrBD,MAAKE,gBAAiB;EAAC;EACxBxB,EAAA,KAAAC;CAAA,OAAAA,KAAAD,EAAA;CATD,MAAAyB,iBAAuBxB;CAShB,IAAAC;CAAA,IAAAF,EAAA,OAAAkB,OAAAC,IAAA,2BAAA,GAAA;EAC2BjB,MAAAwB,YAAA;GAChC,MAAAC,OAAaZ,OAAMK;GACnB,IAAIO,SAAS,MAAI;GAGjB,MAAAC,QAAcD,KAAIE,MAAOF,KAAIG,IAAKR,QAAKS,UAAWT,QAAKS,UAAWJ,KAAIG;GACtE,IAAId,QAAOI,YAAa,QAAQY,KAAIC,IAAKL,KAAK,KAAKD,KAAIO,MAAK;GAG5D,MAAAC,OAAaH,KAAII,IAAK/E,QAAQ2E,KAAIK,IAAK,GAAGV,KAAIW,OAAQV,KAAK,CAAC;GAC5DZ,QAAOI,UAAWe;GAClBrB,UAAUqB,IAAI;EAAC;EAChBnC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAZD,MAAAuC,gBAAsBrC;CAYf,IAAAG;CAAA,IAAAL,EAAA,OAAAkB,OAAAC,IAAA,2BAAA,GAAA;EACyBd,MAAAmC,YAAA;GAC9B,MAAAC,SAAa1B,OAAMK;GACnB,MAAAsB,UAAgB1B,QAAOI;GACvB,MAAAxF,OAAa0F,QAAKqB;GAClB5B,OAAMK,UAAW;GACjBJ,QAAOI,UAAW;GAClBN,UAAU,IAAI;GAEd,IAAIa,WAAS,QAAQe,YAAY,MAAI;GAMrC9G,KAAIgH,cAAe,IAAIlL,aAAa,iBAAiB;IAAAmL,SAC1C;IAAIC,WACFxB,QAAKwB;IAAUC,aACbzB,QAAKyB;GACpB,CAAC,CAAC;GAGF9B,YAAWG,UAAW;GACtB,MAAA4B,QAAcpH,KAAIqH,QAAS,OAAsB,CAAC,EAAAC,cAAC,OAAO;GAO1D,IAAIvB,OAAIwB,SACNH,OAAKhK,MAAQ,EAAAoK,eACI,KACjB,CAAC;GAEH,IAAIV,UAAUrF,SAAS,MAAMsE,OAAIzE,IAAG;GAGpC8F,OAAKK,MAAQ;EAAC;EACfrD,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAtCD,MAAAsD,cAAoBjD;CAsCb,IAAAC;CAAA,IAAAN,EAAA,OAAAkB,OAAAC,IAAA,2BAAA,GAAA;EACsBb,MAAApD,QAAkB;GAAAuE;GAAAJ;GAAAkC,gBAG9BC,YAAA;IACbvC,YAAWG,UAAW;IACtB,IAAIE,QAAKyB,gBAAiB,WAAWzB,QAAK1B,WAAY,GAAC;IAGvD,MAAA6D,QAAcnC,QAAKyB,gBAAiB;IACpChC,OAAMK,UAAW;KAAAkB,MACTpF,KAAAG,SAAA;KAAe8F,SACZ,CAACM;KAAKvG;KAAA2E,KAEV6B,iBAAiBpC,QAAKqB,aAAc,CAAC,CAAAgB,cAAe;KAAKzB,MACxDuB,SAASnC,QAAKyB,gBAAiB,QAA/BxF,aAAAD;KAA8DwE,GACjER,QAAKS;IACV;IACAf,QAAOI,UAAW;IAClB,IAAA;KACEE,QAAKqB,cAAciB,kBAAmBtC,QAAKwB,SAAU;IAAC,QAAA,CAAA;GAKvD;GACFP;GAAAe;EAGH;EAAEtD,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CA5BF,MAAAR,WAAiBc;CA4BkD,IAAAE;CAAA,IAAAR,EAAA,OAAAjE,QAAA;EAC5DyE,KAAA;GAAAhB;GAAAzD;EAGP;EAACiE,EAAA,KAAAjE;EAAAiE,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAHMQ;AAGN"}

package/dist/components/text-area/index.d.ts

@@ -26,6 +26,15 @@ type TextAreaProps = Omit<TextFieldProps, 'children' | 'isInvalid' | 'validation
    * English, singular for a limit of one.
    */
   characterLimitLabel?: string;
+  /**
+   * What a screen reader is told once the length reaches `maxLength`, where
+   * `characterCount` draws the count: the count is hidden from the tree, so
+   * this is how a reader learns the field has stopped taking characters. It
+   * is said once as the limit is reached, and again only after the length
+   * has dropped below it. Left out, it is the sentence for it in the
+   * I18nProvider's locale — "Character limit reached" in English.
+   */
+  characterLimitReachedLabel?: string;
   /**
    * A hint shown under the field. Replaced by `error` when there is one, so
    * the two never stack.
@@ -100,7 +109,7 @@ type TextAreaProps = Omit<TextFieldProps, 'children' | 'isInvalid' | 'validation
  * shared with every other field; this component is what React Aria's
  * `TextField` puts around them.
  */
-declare function TextArea$1({ autosize, characterCount, characterLimitLabel, description, error, floatingLabel, inputRef, isDisabled, label, leadingIcon, rows, trailingIcon, variant, ...props }: RefAttributes<HTMLDivElement> & TextAreaProps): import("react").JSX.Element;
+declare function TextArea$1({ autosize, characterCount, characterLimitLabel, characterLimitReachedLabel, description, error, floatingLabel, inputRef, isDisabled, label, leadingIcon, rows, trailingIcon, variant, ...props }: RefAttributes<HTMLDivElement> & TextAreaProps): import("react").JSX.Element;
 //#endregion
 export { type TextAreaProps, TextArea$1 as default };
 //# sourceMappingURL=index.d.ts.map