@kanso-labs/kanso-ui 0.44.0 → 0.45.0

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","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"}
+{"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} indent 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 * Where the row around it already says what it turns on, it takes\n * `aria-label` in place of a label, and draws the track alone.\n *\n * ```tsx\n * const [selected, setSelected] = useState(false)\n *\n * <Switch isSelected={selected} onChange={setSelected}>\n *   Label\n * </Switch>\n * <Switch aria-label=\"Label\" defaultSelected />\n * ```\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":"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"}

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

@@ -46,7 +46,8 @@ type TextFieldProps$1 = Omit<TextFieldProps, 'children' | 'isInvalid' | 'prefix'
   error?: string;
   /**
    * Whether the label sits in the empty box and floats to the top once the
-   * field is focused or holds a value, as the text fields page draws it.
+   * field is focused or holds a value, as Material Design's text fields
+   * draw it.
    * `false` keeps it small at the top in every state.
    * @default true
    */
@@ -92,12 +93,19 @@ type TextFieldProps$1 = Omit<TextFieldProps, 'children' | 'isInvalid' | 'prefix'
    * An icon at the end of the box, after the value: the page's 24dp trailing
    * icon, in the muted role and the error role while the field has an error.
    * An icon drawn in `em` takes that size from the slot.
+   *
+   * It may be a control rather than a picture, such as an `IconButton` that
+   * clears the field. A press on it is the button's own, where a press
+   * anywhere else in the box focuses the input. The button is 40px around
+   * its 24px icon, so an inline margin of -8px on each side puts the icon
+   * where a bare one sits. It draws its own colours, so it keeps the muted
+   * role while the field has an error.
    */
   trailingIcon?: ReactNode;
   /**
    * The filled box, or the outlined one: no fill, an outline that thickens
    * and takes the primary role while focused, and the label cutting it once
-   * it floats — the text fields page's two fields.
+   * it floats — Material Design's two text fields.
    * @default 'filled'
    */
   variant?: FieldVariant;
@@ -109,14 +117,36 @@ type TextFieldProps$1 = Omit<TextFieldProps, 'children' | 'isInvalid' | 'prefix'
  * `className` and `style` land on the field as a whole, which is the element
  * a layout positions.
  *
- * The text fields page's configurations are props: `leadingIcon` and
- * `trailingIcon` at the box's ends, `prefix` and `suffix` on the value's
- * line, and `characterCount` opposite the supporting text, counting against
- * `maxLength`.
+ * ```tsx
+ * <TextField description="Supporting line" label="Label" />
+ * ```
+ *
+ * The configurations of Material Design's text fields are props:
+ * `leadingIcon` and `trailingIcon` at the box's ends, `prefix` and `suffix`
+ * on the value's line, and `characterCount` opposite the supporting text,
+ * counting against `maxLength`. A trailing icon that clears the field is an
+ * `IconButton` there, shown while the field holds something:
+ *
+ * ```tsx
+ * const [value, setValue] = useState('')
+ *
+ * <TextField
+ *   label="Label"
+ *   onChange={setValue}
+ *   trailingIcon={
+ *     value === '' ? undefined : (
+ *       <IconButton aria-label="Clear" onPress={() => setValue('')}>
+ *         <CloseIcon />
+ *       </IconButton>
+ *     )
+ *   }
+ *   value={value}
+ * />
+ * ```
  *
- * The box, label, input and message are the field chrome in `src/field`,
- * shared with every other field; this component is what React Aria's
- * `TextField` puts around them.
+ * The box, label, input and message are drawn as every field in the library
+ * draws them; this component is what React Aria's `TextField` puts around
+ * them.
  */
 declare function TextField$1({ characterCount, characterLimitLabel, characterLimitReachedLabel, description, error, floatingLabel, inputRef, isDisabled, label, leadingIcon, numeric, prefix, suffix, trailingIcon, variant, ...props }: RefAttributes<HTMLDivElement> & TextFieldProps$1): import("react").JSX.Element;
 //#endregion

package/dist/components/text-field/index.js

@@ -14,14 +14,36 @@ import { TextField } from "react-aria-components";
 * `className` and `style` land on the field as a whole, which is the element
 * a layout positions.
 *
-* The text fields page's configurations are props: `leadingIcon` and
-* `trailingIcon` at the box's ends, `prefix` and `suffix` on the value's
-* line, and `characterCount` opposite the supporting text, counting against
-* `maxLength`.
+* ```tsx
+* <TextField description="Supporting line" label="Label" />
+* ```
 *
-* The box, label, input and message are the field chrome in `src/field`,
-* shared with every other field; this component is what React Aria's
-* `TextField` puts around them.
+* The configurations of Material Design's text fields are props:
+* `leadingIcon` and `trailingIcon` at the box's ends, `prefix` and `suffix`
+* on the value's line, and `characterCount` opposite the supporting text,
+* counting against `maxLength`. A trailing icon that clears the field is an
+* `IconButton` there, shown while the field holds something:
+*
+* ```tsx
+* const [value, setValue] = useState('')
+*
+* <TextField
+*   label="Label"
+*   onChange={setValue}
+*   trailingIcon={
+*     value === '' ? undefined : (
+*       <IconButton aria-label="Clear" onPress={() => setValue('')}>
+*         <CloseIcon />
+*       </IconButton>
+*     )
+*   }
+*   value={value}
+* />
+* ```
+*
+* The box, label, input and message are drawn as every field in the library
+* draws them; this component is what React Aria's `TextField` puts around
+* them.
 */
 function TextField$1(t0) {
 	const $ = c(32);

package/dist/components/text-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","Omit","characterCount","characterLimitLabel","characterLimitReachedLabel","description","error","floatingLabel","inputRef","HTMLInputElement","label","leadingIcon","numeric","prefix","suffix","trailingIcon","variant","t0","$","t1","t2","isDisabled","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","t8","root","t9","t10","isRequired","t11","maxLength","t12","TextField","_c","props","RACTextField","stylex.props"],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\ntype TextFieldProps = Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'prefix' | 'validationBehavior'> & {\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does. The count is written in the\n   * `I18nProvider`'s digits and grouping.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces. Left out, it is the\n   * sentence for it in the I18nProvider's locale — \"Up to 20 characters\" in\n   * English, singular for a limit of one.\n   */\n  characterLimitLabel?: string;\n  /**\n   * What a screen reader is told once the length reaches `maxLength`, where\n   * `characterCount` draws the count: the count is hidden from the tree, so\n   * this is how a reader learns the field has stopped taking characters. It\n   * is said once as the limit is reached, and again only after the length\n   * has dropped below it. Left out, it is the sentence for it in the\n   * I18nProvider's locale — \"Character limit reached\" in English.\n   */\n  characterLimitReachedLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all 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   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * What the field is for. Required rather than optional: a text field with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em`\n   * takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. The value runs left to\n   * right whatever the page's direction, so a minus sign stays before the\n   * digits under a right-to-left locale, and a phone shows the decimal\n   * keypad. That keypad has no minus key on iOS or Android, so a field taking\n   * negative amounts gives an `inputMode` of its own, which replaces it, or\n   * is a `NumberField`, which picks a keypad for each platform.\n   * @default false\n   */\n  numeric?: boolean;\n  /**\n   * Text before the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  prefix?: ReactNode;\n  /**\n   * Text after the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  suffix?: ReactNode;\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A labelled single-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, `prefix` and `suffix` on the value's\n * line, and `characterCount` opposite the supporting text, counting against\n * `maxLength`.\n *\n * The box, label, input and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextField({\n  characterCount = false,\n  characterLimitLabel,\n  characterLimitReachedLabel,\n  description,\n  error,\n  floatingLabel = true,\n  inputRef,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  numeric = false,\n  prefix,\n  suffix,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: RefAttributes<HTMLDivElement> & TextFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField\n  // The decimal keypad for a numeric field, unless the call site names\n  // another below.\n  inputMode={numeric ? 'decimal' : undefined} isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} isRequired={props.isRequired} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput leftToRight={numeric} numeric={numeric} prefix={prefix} ref={inputRef} suffix={suffix} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} characterLimitReachedLabel={characterLimitReachedLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","Omit","characterCount","characterLimitLabel","characterLimitReachedLabel","description","error","floatingLabel","inputRef","HTMLInputElement","label","leadingIcon","numeric","prefix","suffix","trailingIcon","variant","t0","$","t1","t2","isDisabled","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","t8","root","t9","t10","isRequired","t11","maxLength","t12","TextField","_c","props","RACTextField","stylex.props"],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\ntype TextFieldProps = Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'prefix' | 'validationBehavior'> & {\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does. The count is written in the\n   * `I18nProvider`'s digits and grouping.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces. Left out, it is the\n   * sentence for it in the I18nProvider's locale — \"Up to 20 characters\" in\n   * English, singular for a limit of one.\n   */\n  characterLimitLabel?: string;\n  /**\n   * What a screen reader is told once the length reaches `maxLength`, where\n   * `characterCount` draws the count: the count is hidden from the tree, so\n   * this is how a reader learns the field has stopped taking characters. It\n   * is said once as the limit is reached, and again only after the length\n   * has dropped below it. Left out, it is the sentence for it in the\n   * I18nProvider's locale — \"Character limit reached\" in English.\n   */\n  characterLimitReachedLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all 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   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as Material Design's text fields\n   * draw it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * What the field is for. Required rather than optional: a text field with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em`\n   * takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. The value runs left to\n   * right whatever the page's direction, so a minus sign stays before the\n   * digits under a right-to-left locale, and a phone shows the decimal\n   * keypad. That keypad has no minus key on iOS or Android, so a field taking\n   * negative amounts gives an `inputMode` of its own, which replaces it, or\n   * is a `NumberField`, which picks a keypad for each platform.\n   * @default false\n   */\n  numeric?: boolean;\n  /**\n   * Text before the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  prefix?: ReactNode;\n  /**\n   * Text after the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  suffix?: ReactNode;\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   *\n   * It may be a control rather than a picture, such as an `IconButton` that\n   * clears the field. A press on it is the button's own, where a press\n   * anywhere else in the box focuses the input. The button is 40px around\n   * its 24px icon, so an inline margin of -8px on each side puts the icon\n   * where a bare one sits. It draws its own colours, so it keeps the muted\n   * role while the field has an error.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — Material Design's two text fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A labelled single-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * ```tsx\n * <TextField description=\"Supporting line\" label=\"Label\" />\n * ```\n *\n * The configurations of Material Design's text fields are props:\n * `leadingIcon` and `trailingIcon` at the box's ends, `prefix` and `suffix`\n * on the value's line, and `characterCount` opposite the supporting text,\n * counting against `maxLength`. A trailing icon that clears the field is an\n * `IconButton` there, shown while the field holds something:\n *\n * ```tsx\n * const [value, setValue] = useState('')\n *\n * <TextField\n *   label=\"Label\"\n *   onChange={setValue}\n *   trailingIcon={\n *     value === '' ? undefined : (\n *       <IconButton aria-label=\"Clear\" onPress={() => setValue('')}>\n *         <CloseIcon />\n *       </IconButton>\n *     )\n *   }\n *   value={value}\n * />\n * ```\n *\n * The box, label, input and message are drawn as every field in the library\n * draws them; this component is what React Aria's `TextField` puts around\n * them.\n */\nfunction TextField({\n  characterCount = false,\n  characterLimitLabel,\n  characterLimitReachedLabel,\n  description,\n  error,\n  floatingLabel = true,\n  inputRef,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  numeric = false,\n  prefix,\n  suffix,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: RefAttributes<HTMLDivElement> & TextFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField\n  // The decimal keypad for a numeric field, unless the call site names\n  // another below.\n  inputMode={numeric ? 'decimal' : undefined} isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} isRequired={props.isRequired} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput leftToRight={numeric} numeric={numeric} prefix={prefix} ref={inputRef} suffix={suffix} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} characterLimitReachedLabel={characterLimitReachedLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":"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"}

package/dist/components/time-picker/index.js

@@ -11,7 +11,6 @@ import { overlay } from "../../styles/overlay.js";
 import { picker, triggerClassName } from "../../styles/picker.js";
 import { segmentStyles } from "../../segments/styles.js";
 import { renderSegment } from "../../segments/index.js";
-import { InsideModalContext } from "../../overlay/modal.js";
 import { c } from "react/compiler-runtime";
 import { useContext, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -284,7 +283,7 @@ function polar(turn, radius) {
 * which is the element a layout positions.
 */
 function TimePicker(t0) {
-	const $ = c(52);
+	const $ = c(50);
 	const { cancelLabel, confirmLabel, container, defaultMode: t1, defaultOpen: t2, description, enterTimeLabel, error, floatingLabel: t3, isDisabled: t4, isOpen, isReadOnly: t5, label, leadingIcon, onOpenChange, selectTimeLabel, variant: t6, ...props$1 } = t0;
 	const defaultMode = t1 === void 0 ? "dial" : t1;
 	const defaultOpen = t2 === void 0 ? false : t2;
@@ -294,7 +293,6 @@ function TimePicker(t0) {
 	const variant = t6 === void 0 ? "filled" : t6;
 	const validationBehavior = useFieldValidationBehavior();
 	const messages = useMessages();
-	const overModal = useContext(InsideModalContext);
 	const [ownOpen, setOwnOpen] = useState(defaultOpen);
 	const open = isOpen ?? ownOpen;
 	let t7;
@@ -376,18 +374,17 @@ function TimePicker(t0) {
 		$[22] = t17;
 	} else t17 = $[22];
 	let t18;
-	if ($[23] !== overModal) {
-		t18 = props(overlay.scrim, overModal && overlay.scrimOverModal, styles.centre);
-		$[23] = overModal;
-		$[24] = t18;
-	} else t18 = $[24];
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = props(overlay.scrim, styles.centre);
+		$[23] = t18;
+	} else t18 = $[23];
 	const t19 = cancelLabel ?? messages.cancel;
 	const t20 = confirmLabel ?? messages.confirm;
 	const t21 = enterTimeLabel ?? messages.enterTime;
 	const t22 = props$1.granularity === "hour" ? "hour" : "minute";
 	const t23 = selectTimeLabel ?? messages.selectTime;
 	let t24;
-	if ($[25] !== defaultMode || $[26] !== label || $[27] !== props$1.hourCycle || $[28] !== props$1.placeholderValue || $[29] !== t19 || $[30] !== t20 || $[31] !== t21 || $[32] !== t22 || $[33] !== t23) {
+	if ($[24] !== defaultMode || $[25] !== label || $[26] !== props$1.hourCycle || $[27] !== props$1.placeholderValue || $[28] !== t19 || $[29] !== t20 || $[30] !== t21 || $[31] !== t22 || $[32] !== t23) {
 		t24 = /* @__PURE__ */ jsx(Modal, {
 			className: "x1n1nwrg x1u6grsq xbhiib0 x16dv9tl xvkjz1l x1w1tqly x19pkqky xx61lck x13rsnn2 x1udv5rz x9f619 x139gbkf xi55695 xmz0i5r x193iq5w xysyzu8",
 			children: /* @__PURE__ */ jsx(TimePickerDialog, {
@@ -402,19 +399,19 @@ function TimePicker(t0) {
 				selectTimeLabel: t23
 			})
 		});
-		$[25] = defaultMode;
-		$[26] = label;
-		$[27] = props$1.hourCycle;
-		$[28] = props$1.placeholderValue;
-		$[29] = t19;
-		$[30] = t20;
-		$[31] = t21;
-		$[32] = t22;
-		$[33] = t23;
-		$[34] = t24;
-	} else t24 = $[34];
+		$[24] = defaultMode;
+		$[25] = label;
+		$[26] = props$1.hourCycle;
+		$[27] = props$1.placeholderValue;
+		$[28] = t19;
+		$[29] = t20;
+		$[30] = t21;
+		$[31] = t22;
+		$[32] = t23;
+		$[33] = t24;
+	} else t24 = $[33];
 	let t25;
-	if ($[35] !== changeOpen || $[36] !== container || $[37] !== open || $[38] !== t18 || $[39] !== t24) {
+	if ($[34] !== changeOpen || $[35] !== container || $[36] !== open || $[37] !== t24) {
 		t25 = /* @__PURE__ */ jsx(ModalOverlay, {
 			isDismissable: true,
 			isOpen: open,
@@ -423,15 +420,14 @@ function TimePicker(t0) {
 			...t18,
 			children: t24
 		});
-		$[35] = changeOpen;
-		$[36] = container;
-		$[37] = open;
-		$[38] = t18;
-		$[39] = t24;
-		$[40] = t25;
-	} else t25 = $[40];
+		$[34] = changeOpen;
+		$[35] = container;
+		$[36] = open;
+		$[37] = t24;
+		$[38] = t25;
+	} else t25 = $[38];
 	let t26;
-	if ($[41] !== T0 || $[42] !== isDisabled || $[43] !== isReadOnly || $[44] !== props$1 || $[45] !== t10 || $[46] !== t16 || $[47] !== t17 || $[48] !== t25 || $[49] !== t9 || $[50] !== validationBehavior) {
+	if ($[39] !== T0 || $[40] !== isDisabled || $[41] !== isReadOnly || $[42] !== props$1 || $[43] !== t10 || $[44] !== t16 || $[45] !== t17 || $[46] !== t25 || $[47] !== t9 || $[48] !== validationBehavior) {
 		t26 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t9,
@@ -445,18 +441,18 @@ function TimePicker(t0) {
 				t25
 			]
 		});
-		$[41] = T0;
-		$[42] = isDisabled;
-		$[43] = isReadOnly;
-		$[44] = props$1;
-		$[45] = t10;
-		$[46] = t16;
-		$[47] = t17;
-		$[48] = t25;
-		$[49] = t9;
-		$[50] = validationBehavior;
-		$[51] = t26;
-	} else t26 = $[51];
+		$[39] = T0;
+		$[40] = isDisabled;
+		$[41] = isReadOnly;
+		$[42] = props$1;
+		$[43] = t10;
+		$[44] = t16;
+		$[45] = t17;
+		$[46] = t25;
+		$[47] = t9;
+		$[48] = validationBehavior;
+		$[49] = t26;
+	} else t26 = $[49];
 	return t26;
 }
 /**