@kanso-labs/kanso-ui 0.44.0 → 0.44.1

package/dist/field/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","DISABLED_TEXT","default","onSurface","disabledContent","surface","BOX_BLOCK_SIZE","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_BLOCK_SIZE","lg","_temp","ks0D6T","fieldChromeStyles","affix","k6CgDc","kmuXW","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","affixLine","kGNEyG","k1xSpc","kOIVth","autosize","autosizeCell","kJuA4N","box","kWkggS","kZKoxP","kfdmCh","kt9PQ7","kT0f0o","kVL7Gh","kfmiAY","krdFHd","kGVxlE","kB7OPa","kkrTdU","kjBf7l","kInvED","k3XXqK","kMeerF","kGO01o","kLKAdn","kg3NbH","kVAEAm","boxDisabled","kL6WhQ","boxError","boxErrorFocused","boxFixed","boxFloating","boxFocused","boxLabel","k87sOh","kLqNvP","kVQacm","kg5iWk","boxLabelEndInset","maxInlineSize","val","undefined","boxLabelFloated","boxLabelOutlined","boxLabelOutlinedFloated","boxLeading","kZCmMZ","boxMultiline","kAzted","boxOutlined","kMwMTN","boxOutlinedDisabled","boxOutlinedError","boxOutlinedErrorFocused","boxOutlinedErrorHovered","boxOutlinedFloating","boxOutlinedFocused","boxOutlinedHovered","boxOutlinedMultiline","boxTrailing","kwRFfy","column","kzQI83","k7Eaqz","columnDisabled","columnDisabledFloating","columnFloating","counter","kcqcaj","keTefX","icon","kSGwAc","kjj79g","keoZOQ","iconDisabled","iconError","iconMultiline","k1K539","iconOutlined","input","k9l4BL","kIPbS0","k8Qsv1","kMzoRj","kzqmXN","kmVPX3","inputDisabled","inputUnderFloatingLabel","inputUnderLabel","label","kHjlTd","labelDisabled","labelError","labelFocused","leftToRight","ksoyAI","k9WMMc","message","kqGvvJ","messageDisabled","messageError","messageInset","kUOVxO","messageLine","messageLineCollapsed","messageRegion","numeric","outline","kVAM5u","kaIpWk","ksu8eU","kpwlN0","kogj98","k8WAf4","kfzvcC","outlineEndInset","paddingInlineEnd","outlineFocused","outlineLeading","outlineNotch","k33iCy","outlineNotchOpen","outlineTrailing","replica","segments","textArea","kHenm0","textAreaAutosize","trigger","kY2c9j","value","valuePlaceholder","valuePlaceholderHidden","groupStyles","root","kXwgrk"],"sources":["../../src/field/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Declared\n// here rather than imported from src/styles/ripple.ts, which spells the same\n// query: the StyleX compiler resolves a constant across files only out of a\n// `.stylex.ts` module, and the one this repository has is generated from the\n// design tokens, where a user-preference query does not belong beside the\n// window size classes.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The colour of a disabled control's text: its label and the description\n// under it, from one definition so the two cannot drift apart. `GrayText`\n// under forced colours, which leaves a group's legend and a description\n// alone: they are text beside a control, not a control the mode would grey.\nconst DISABLED_TEXT = {\n  default: `color-mix(in srgb, ${colors.onSurface} calc(${stateLayerOpacity.disabledContent} * 100%), ${colors.surface})`,\n  [FORCED_COLORS]: 'GrayText'\n};\n\n// What the box is tall enough for, rather than the 56dp the text fields page\n// draws it at. The page's number is the sum of these under the default\n// tokens, and stating it instead made the box right only there: a theme with\n// a longer body line — `Editorial` in src/theming/themes.ts, at body-small\n// 20 and body-large 28 on a 10dp `sm` — needs 68, and in a fixed 56 the\n// value's line ran past the underline with nothing left beneath it.\n//\n// The filled box holds its padding twice over, the floated label's line and\n// the control's; the outlined box holds its own padding twice and the\n// control's line alone, since its label sits on the outline rather than\n// above the value. The two agree at 56 under the default tokens, which is\n// what keeps the default stories' snapshots where they are.\n//\n// The resting label's line is written against the same expressions below, so\n// one derivation feeds both the box and the label that centres in it.\nconst BOX_BLOCK_SIZE = `calc(2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight})`;\nconst BOX_OUTLINED_BLOCK_SIZE = `calc(2 * ${spacing.lg} + ${typography.bodyLargeLineHeight})`;\n\n// The chrome's styles. Apart from the parts in ./index.tsx so that file\n// exports components alone, which is what keeps fast refresh working for it —\n// the same reason ./root.ts gives for the root style beside it.\n//\n// The focus indicator is an inset box-shadow on the bottom edge rather than a\n// border that thickens. A real border going 1px -> 2px on focus grows the\n// box, which pushes every sibling below it down by a pixel — so a form\n// twitches each time focus moves between its fields. A shadow is drawn inside\n// the box and changes nothing about its size.\n//\n// The label floats, as the text fields page draws it: body-large and centred\n// in an empty, unfocused box, body-small at the top once the field is focused\n// or holds a value. `floatingLabel={false}` keeps it small at the top in\n// every state instead.\n//\n// Where the label sits depends on the box's state, and a child cannot select\n// on its parent's state while the box can select on its own. So the label's\n// type is set on the box and inherited: the box changes the font size and\n// line height it hands down when focus is within it, or when its control\n// shows something other than its placeholder, and the label transitions\n// between the two. Resting, the line is the box less its padding, which is\n// what centres the label without a position to move — the move to the top is\n// a change of type alone. The control sets its own type, so none of this\n// reaches it.\n//\n// The label's colour follows the control's focus the same way: the box is\n// React Aria's Group, which reports focus within it as render state, and the\n// label takes `labelFocused` from that.\n//\n// The box is a row: an icon slot at either end, if the field has one, with\n// the label and control between them. The page gives the icons 24dp, 12dp\n// from the box's edge and 16dp from the text, centred in the box's height;\n// the slot cancels the box's top padding and stretches to its full height,\n// so it centres whatever it holds — a 24dp icon, or an icon button around\n// one. The label and the control sit in a column of their own, which is\n// what the label is positioned against, so it moves past a leading icon\n// with the text.\n//\n// A prefix or suffix sits on the control's line, in the control's type and\n// the muted role, and shows only while the field is focused or holds a\n// value, as the placeholder does — at rest the label is where it would be.\n// It is the column's colour it takes, inherited, since the column can\n// select on its own focus and content and the affix cannot select on\n// either.\n//\n// The outlined variant is the page's outlined text field: no fill, a 1dp\n// outline in the outline role with 4dp corners all round, 2dp and primary\n// while focused, on surface while hovered, the error role with an error,\n// and the label cutting the outline once it floats, with the page's 4dp\n// beside it. The value is centred, 16dp from the top and bottom, and the\n// label rests on its line and moves up onto the outline — a move, where the\n// filled label only changes type.\n//\n// The outline is a fieldset laid over the box: a browser draws a fieldset's\n// border around its legend, so a legend holding a copy of the label, in the\n// label's floated type, is what cuts the outline to the label's width with\n// nothing measured. Empty, it cuts nothing, which is the closed notch.\nconst _temp = {\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\nconst fieldChromeStyles = {\n  affix: {\n    k6CgDc: \"x12w9bfk\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  affixLine: {\n    kGNEyG: \"x1pha0wt\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  autosize: {\n    k1xSpc: \"xrvj5dj\",\n    $$css: true\n  },\n  autosizeCell: {\n    kJuA4N: \"x1b1wf8y\",\n    $$css: true\n  },\n  box: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x1cy8zhl\",\n    kWkggS: \"x1rrhr5q\",\n    kZKoxP: \"x4v968r\",\n    kfdmCh: \"xe3zi7u\",\n    kt9PQ7: \"x15anc7y\",\n    kT0f0o: \"x16uus16\",\n    kVL7Gh: \"xbiv7yw\",\n    kfmiAY: \"xirz1nw\",\n    krdFHd: \"xzcck0f\",\n    kGVxlE: \"x89kqus x18rfq6m\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ed109x\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kjBf7l: \"x1x84bn5\",\n    kInvED: \"x12iqurn\",\n    k3XXqK: \"xi9ts3s\",\n    kMeerF: \"x1jrff4x\",\n    kGO01o: \"x18d9i69\",\n    kLKAdn: \"xi7mcox\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xkdsq27\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxDisabled: {\n    kWkggS: \"xepofeg\",\n    kL6WhQ: \"x1fxan2a\",\n    kGVxlE: \"x1pqbjc1\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  boxError: {\n    kGVxlE: \"x1lxxh4i x1d6xoej\",\n    $$css: true\n  },\n  boxErrorFocused: {\n    kGVxlE: \"xb0slzl\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxFixed: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  boxFloating: {\n    kMv6JI: \"x1ps135g xnc7ww3 x16svsjw\",\n    kGuDYH: \"x52kfa xys1t9b x1848etk\",\n    k63SB2: \"xz4f7ai xn9xqko x1c52epr\",\n    kb6lSQ: \"x19wmx12 x1t00fh7 x1qn8t5l\",\n    kLWn49: \"xsv50tp x1f5c3pk x1mv3dpe\",\n    $$css: true\n  },\n  boxFocused: {\n    kGVxlE: \"xra6ydt\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxLabel: {\n    kB7OPa: \"x9f619\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    ks0D6T: \"x193iq5w\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x10l6tqk\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  boxLabelEndInset: (maxInlineSize: string) => [_temp, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize)\n  }],\n  boxLabelFloated: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  boxLabelOutlined: {\n    kLqNvP: \"x10k232c\",\n    ks0D6T: \"x35j8wb\",\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  boxLabelOutlinedFloated: {\n    k87sOh: \"x1qjp6zz\",\n    $$css: true\n  },\n  boxLeading: {\n    kZCmMZ: \"xwde665\",\n    $$css: true\n  },\n  boxMultiline: {\n    kZKoxP: \"xt7dq6l\",\n    kAzted: \"x9ep9ug\",\n    kGO01o: \"xqf7pud\",\n    $$css: true\n  },\n  boxOutlined: {\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xnqhc4v\",\n    kfdmCh: \"xs07zst\",\n    kT0f0o: \"x4gcak0\",\n    kVL7Gh: \"xqs30sb\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x158cnre x1sa41d3\",\n    kGO01o: \"xzfxn0k\",\n    kLKAdn: \"x1clyivc\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  boxOutlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1ldq0ta x1bhcspo\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  boxOutlinedError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  boxOutlinedErrorFocused: {\n    kMwMTN: \"x4ii1qj\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxOutlinedErrorHovered: {\n    kMwMTN: \"x12voer2 x16elhoc\",\n    $$css: true\n  },\n  boxOutlinedFloating: {\n    kLWn49: \"xsv50tp x1f5c3pk x1rzm7h7\",\n    $$css: true\n  },\n  boxOutlinedFocused: {\n    kMwMTN: \"x1mxwv8y\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxOutlinedHovered: {\n    kMwMTN: \"x158cnre x139gbkf\",\n    $$css: true\n  },\n  boxOutlinedMultiline: {\n    kZKoxP: \"xt7dq6l\",\n    kAzted: \"xnqs80d\",\n    $$css: true\n  },\n  boxTrailing: {\n    kwRFfy: \"xk163s\",\n    $$css: true\n  },\n  column: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  columnDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  columnDisabledFloating: {\n    kMwMTN: \"xspc5gk x19co3pv\",\n    $$css: true\n  },\n  columnFloating: {\n    kMwMTN: \"x1dfuzvz x6phwhp x19co3pv\",\n    $$css: true\n  },\n  counter: {\n    kmuXW: \"x2lah0s\",\n    kcqcaj: \"xss6m8b\",\n    keTefX: \"xvc5jky\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  icon: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kSGwAc: \"xkh2ocl\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"x1pvqxga\",\n    kjj79g: \"xl56j7k\",\n    keoZOQ: \"x1motrhk\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  iconDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  iconError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  iconMultiline: {\n    k1K539: \"x14yxyxb\",\n    $$css: true\n  },\n  iconOutlined: {\n    k1K539: \"xs1qnrw\",\n    keoZOQ: \"x17v9ssf\",\n    $$css: true\n  },\n  input: {\n    k9l4BL: \"x1hcrkkg\",\n    kIPbS0: \"xzwh6sb\",\n    k8Qsv1: \"x1hgeflb\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"xh8yej3\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k3XXqK: \"x1t137rt\",\n    kmVPX3: \"x1717udv\",\n    kg5iWk: \"xlyipyv\",\n    $$css: true\n  },\n  inputDisabled: {\n    k8Qsv1: \"x7ip5l3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  inputUnderFloatingLabel: {\n    k8Qsv1: \"x1mvm7v4 xxqzaim\",\n    $$css: true\n  },\n  inputUnderLabel: {\n    keoZOQ: \"xwuztrq\",\n    $$css: true\n  },\n  label: {\n    k6CgDc: \"x12w9bfk\",\n    kMwMTN: \"x1w5n3ug\",\n    kHjlTd: \"xj0a0fe\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xixa3zk\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  labelError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  labelFocused: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  leftToRight: {\n    ksoyAI: \"xzt5al7\",\n    k9WMMc: \"xrgu2gv\",\n    $$css: true\n  },\n  message: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    kqGvvJ: \"x10im51j\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  messageDisabled: {\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  messageError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  messageInset: {\n    kUOVxO: \"xboopgi\",\n    $$css: true\n  },\n  messageLine: {\n    kGNEyG: \"x1pha0wt\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    keoZOQ: \"x1y88zpp\",\n    kAzted: \"x17jz683\",\n    $$css: true\n  },\n  messageLineCollapsed: {\n    keoZOQ: \"xdj266r\",\n    kAzted: \"x2lwn1j\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  messageRegion: {\n    k1xSpc: \"x78zum5\",\n    kVAEAm: \"x1cmy3ng\",\n    $$css: true\n  },\n  numeric: {\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    $$css: true\n  },\n  outline: {\n    k6CgDc: \"x12w9bfk\",\n    kVAM5u: \"x1r7ld26\",\n    kaIpWk: \"x1tfhd1\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kpwlN0: \"x10a8y8t\",\n    kb6lSQ: \"xwth0xh\",\n    kogj98: \"x1ghz6dp\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x1mhv0kc\",\n    kfzvcC: \"x47corl\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1aqzbqr\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  outlineEndInset: (paddingInlineEnd: string) => [{\n    kwRFfy: paddingInlineEnd != null ? \"x120eax6\" : paddingInlineEnd,\n    $$css: true\n  }, {\n    \"--x-paddingInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(paddingInlineEnd)\n  }],\n  outlineFocused: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  outlineLeading: {\n    kZCmMZ: \"x167ah0f\",\n    $$css: true\n  },\n  outlineNotch: {\n    kZKoxP: \"xqtp20y\",\n    kB7OPa: \"x9f619\",\n    kLWn49: \"x14ju556\",\n    ks0D6T: \"x193iq5w\",\n    kVQacm: \"xb3r6kr\",\n    kmVPX3: \"x1717udv\",\n    k33iCy: \"xlshs6z\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  outlineNotchOpen: {\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  outlineTrailing: {\n    kwRFfy: \"x3o381d\",\n    $$css: true\n  },\n  replica: {\n    kHjlTd: \"x1mzt3pk\",\n    k33iCy: \"xlshs6z\",\n    khDVqt: \"x126k92a\",\n    $$css: true\n  },\n  segments: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kVQacm: \"xb3r6kr\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  textArea: {\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xysyzu8\",\n    kHenm0: \"xtt52l0\",\n    $$css: true\n  },\n  textAreaAutosize: {\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  },\n  trigger: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kpwlN0: \"x10a8y8t\",\n    k3XXqK: \"x1t137rt\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x10l6tqk\",\n    kY2c9j: \"x1vjfegm\",\n    $$css: true\n  },\n  value: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  valuePlaceholder: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  valuePlaceholderHidden: {\n    kMwMTN: \"x19co3pv\",\n    $$css: true\n  }\n};\n\n// The chrome a label sitting above a group takes, rather than inside a box.\n// CheckboxGroup, ChipGroup, RadioGroup, Slider and ColorSlider each wrote both\n// of these out: the type override on the label, and the column its label and\n// control sit in.\n//\n// The label is label-large, the role a field's label takes at rest, since a\n// group has no box to float it in.\n//\n// The two sliders compose an inline size of their own on the root, since a\n// slider fills the width it is given where a group of controls does not.\nconst groupStyles = {\n  label: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    $$css: true\n  }\n};\nexport { fieldChromeStyles, groupStyles };"],"mappings":"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"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","DISABLED_TEXT","default","onSurface","disabledContent","surface","HOVERED_FILL","hover","surfaceContainerHighest","DISABLED_FILL_OPACITY","OUTLINE_WIDTH","OUTLINE_FOCUSED_WIDTH","BOX_BLOCK_SIZE","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_BLOCK_SIZE","lg","_temp","ks0D6T","fieldChromeStyles","affix","k6CgDc","kmuXW","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","affixLine","kGNEyG","k1xSpc","kOIVth","autosize","autosizeCell","kJuA4N","box","kWkggS","kZKoxP","kfdmCh","kt9PQ7","kT0f0o","kVL7Gh","kfmiAY","krdFHd","kGVxlE","kB7OPa","kkrTdU","kjBf7l","kInvED","k3XXqK","kMeerF","kGO01o","kLKAdn","kg3NbH","kVAEAm","boxDisabled","kL6WhQ","boxError","boxErrorFocused","boxErrorHovered","boxFixed","boxFloating","boxFocused","boxHovered","boxLabel","k87sOh","kLqNvP","kVQacm","kg5iWk","boxLabelEndInset","maxInlineSize","val","undefined","boxLabelFloated","boxLabelOutlined","boxLabelOutlinedFloated","boxLeading","kZCmMZ","boxMultiline","kAzted","boxOutlined","kMwMTN","boxOutlinedDisabled","boxOutlinedError","boxOutlinedErrorFocused","boxOutlinedErrorHovered","boxOutlinedFloating","boxOutlinedFocused","boxOutlinedHovered","boxOutlinedMultiline","boxTrailing","kwRFfy","column","kzQI83","k7Eaqz","columnDisabled","columnDisabledFloating","columnFloating","counter","kcqcaj","keTefX","icon","kSGwAc","kjj79g","keoZOQ","iconDisabled","iconError","iconErrorHovered","iconMultiline","k1K539","iconOutlined","input","k9l4BL","kIPbS0","k8Qsv1","kMzoRj","knGrYV","kzqmXN","kmVPX3","inputDisabled","inputInvalid","inputUnderFloatingLabel","inputUnderLabel","label","kHjlTd","labelDisabled","labelError","labelErrorHovered","labelFocused","labelHovered","leftToRight","ksoyAI","k9WMMc","message","kqGvvJ","messageDisabled","messageError","messageIndent","messageInset","kUOVxO","messageLine","messageLineCollapsed","messageRegion","numeric","outline","kVAM5u","kaIpWk","ksu8eU","kpwlN0","kogj98","k8WAf4","kfzvcC","outlineEndInset","paddingInlineEnd","outlineFocused","outlineLeading","outlineLeadingFocused","outlineNotch","k33iCy","outlineNotchOpen","outlineTrailing","outlineTrailingFocused","replica","segments","textArea","kHenm0","textAreaAutosize","trigger","kY2c9j","value","valuePlaceholder","valuePlaceholderHidden","groupStyles","root","kXwgrk"],"sources":["../../src/field/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Declared\n// here rather than imported from src/styles/ripple.ts, which spells the same\n// query: the StyleX compiler resolves a constant across files only out of a\n// `.stylex.ts` module, and the one this repository has is generated from the\n// design tokens, where a user-preference query does not belong beside the\n// window size classes.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The colour of a disabled control's text: its label and the description\n// under it, from one definition so the two cannot drift apart. `GrayText`\n// under forced colours, which leaves a group's legend and a description\n// alone: they are text beside a control, not a control the mode would grey.\nconst DISABLED_TEXT = {\n  default: `color-mix(in srgb, ${colors.onSurface} calc(${stateLayerOpacity.disabledContent} * 100%), ${colors.surface})`,\n  [FORCED_COLORS]: 'GrayText'\n};\n\n// The filled box's state layer while hovered: on surface at the hover\n// opacity, laid over the fill, as the text fields page draws it.\nconst HOVERED_FILL = `color-mix(in srgb, ${colors.onSurface} calc(${stateLayerOpacity.hover} * 100%), ${colors.surfaceContainerHighest})`;\n\n// The filled box's disabled fill, on surface at 4%. Material Design gives the\n// filled field's disabled container a third of the 12% that\n// `stateLayerOpacity.disabledContainer` holds, and no token names it, so it\n// is written once here, beside the one style that draws it.\nconst DISABLED_FILL_OPACITY = '4%';\n\n// The outline's two widths, resting and focused. The notch's inline padding\n// is measured from the border's inside edge, so each width comes off the\n// padding that puts the notch level with the label — see `outline`.\nconst OUTLINE_WIDTH = '1px';\nconst OUTLINE_FOCUSED_WIDTH = '2px';\n\n// What the box is tall enough for, rather than the 56dp the text fields page\n// draws it at. The page's number is the sum of these under the default\n// tokens, and stating it instead made the box right only there: a theme with\n// a longer body line — `Editorial` in src/theming/themes.ts, at body-small\n// 20 and body-large 28 on a 10dp `sm` — needs 68, and in a fixed 56 the\n// value's line ran past the underline with nothing left beneath it.\n//\n// The filled box holds its padding twice over, the floated label's line and\n// the control's; the outlined box holds its own padding twice and the\n// control's line alone, since its label sits on the outline rather than\n// above the value. The two agree at 56 under the default tokens, which is\n// what keeps the default stories' snapshots where they are.\n//\n// The resting label's line is written against the same expressions below, so\n// one derivation feeds both the box and the label that centres in it.\nconst BOX_BLOCK_SIZE = `calc(2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight})`;\nconst BOX_OUTLINED_BLOCK_SIZE = `calc(2 * ${spacing.lg} + ${typography.bodyLargeLineHeight})`;\n\n// The chrome's styles. Apart from the parts in ./index.tsx so that file\n// exports components alone, which is what keeps fast refresh working for it —\n// the same reason ./root.ts gives for the root style beside it.\n//\n// The focus indicator is an inset box-shadow on the bottom edge rather than a\n// border that thickens. A real border going 1px -> 2px on focus grows the\n// box, which pushes every sibling below it down by a pixel — so a form\n// twitches each time focus moves between its fields. A shadow is drawn inside\n// the box and changes nothing about its size.\n//\n// The label floats, as the text fields page draws it: body-large and centred\n// in an empty, unfocused box, body-small at the top once the field is focused\n// or holds a value. `floatingLabel={false}` keeps it small at the top in\n// every state instead.\n//\n// Where the label sits depends on the box's state, and a child cannot select\n// on its parent's state while the box can select on its own. So the label's\n// type is set on the box and inherited: the box changes the font size and\n// line height it hands down when focus is within it, or when its control\n// shows something other than its placeholder, and the label transitions\n// between the two. Resting, the line is the box less its padding, which is\n// what centres the label without a position to move — the move to the top is\n// a change of type alone. The control sets its own type, so none of this\n// reaches it.\n//\n// The label's colour follows the control's focus the same way: the box is\n// React Aria's Group, which reports focus within it as render state, and the\n// label takes `labelFocused` from that.\n//\n// The box is a row: an icon slot at either end, if the field has one, with\n// the label and control between them. The page gives the icons 24dp, 12dp\n// from the box's edge and 16dp from the text, centred in the box's height;\n// the slot cancels the box's top padding and stretches to its full height,\n// so it centres whatever it holds — a 24dp icon, or an icon button around\n// one. The label and the control sit in a column of their own, which is\n// what the label is positioned against, so it moves past a leading icon\n// with the text.\n//\n// A prefix or suffix sits on the control's line, in the control's type and\n// the muted role, and shows only while the field is focused or holds a\n// value, as the placeholder does — at rest the label is where it would be.\n// It is the column's colour it takes, inherited, since the column can\n// select on its own focus and content and the affix cannot select on\n// either.\n//\n// The outlined variant is the page's outlined text field: no fill, a 1dp\n// outline in the outline role with 4dp corners all round, 2dp and primary\n// while focused, on surface while hovered, the error role with an error,\n// and the label cutting the outline once it floats, with the page's 4dp\n// beside it. The value is centred, 16dp from the top and bottom, and the\n// label rests on its line and moves up onto the outline — a move, where the\n// filled label only changes type.\n//\n// The outline is a fieldset laid over the box: a browser draws a fieldset's\n// border around its legend, so a legend holding a copy of the label, in the\n// label's floated type, is what cuts the outline to the label's width with\n// nothing measured. Empty, it cuts nothing, which is the closed notch.\nconst _temp = {\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\nconst fieldChromeStyles = {\n  affix: {\n    k6CgDc: \"x12w9bfk\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  affixLine: {\n    kGNEyG: \"x1pha0wt\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  autosize: {\n    k1xSpc: \"xrvj5dj\",\n    $$css: true\n  },\n  autosizeCell: {\n    kJuA4N: \"x1b1wf8y\",\n    $$css: true\n  },\n  box: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x1cy8zhl\",\n    kWkggS: \"x1rrhr5q\",\n    kZKoxP: \"x4v968r\",\n    kfdmCh: \"xe3zi7u\",\n    kt9PQ7: \"x15anc7y\",\n    kT0f0o: \"x16uus16\",\n    kVL7Gh: \"xbiv7yw\",\n    kfmiAY: \"xirz1nw\",\n    krdFHd: \"xzcck0f\",\n    kGVxlE: \"x89kqus x18rfq6m\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ed109x\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kjBf7l: \"x1x84bn5\",\n    kInvED: \"x12iqurn\",\n    k3XXqK: \"xi9ts3s\",\n    kMeerF: \"x1jrff4x\",\n    kGO01o: \"x18d9i69\",\n    kLKAdn: \"xi7mcox\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x106061f\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxDisabled: {\n    kWkggS: \"x1ojo7np\",\n    kL6WhQ: \"x1fxan2a\",\n    kGVxlE: \"xgloidm\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  boxError: {\n    kGVxlE: \"x1lxxh4i x1d6xoej\",\n    $$css: true\n  },\n  boxErrorFocused: {\n    kWkggS: \"x1rrhr5q\",\n    kGVxlE: \"xb0slzl\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxErrorHovered: {\n    kWkggS: \"x13aw6e3 xpae8dx\",\n    kGVxlE: \"x1lxxh4i xryshfu\",\n    $$css: true\n  },\n  boxFixed: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  boxFloating: {\n    kMv6JI: \"x1ps135g xnc7ww3 x16svsjw\",\n    kGuDYH: \"x52kfa xys1t9b x1848etk\",\n    k63SB2: \"xz4f7ai xn9xqko x1c52epr\",\n    kb6lSQ: \"x19wmx12 x1t00fh7 x1qn8t5l\",\n    kLWn49: \"xsv50tp x1f5c3pk x1mv3dpe\",\n    $$css: true\n  },\n  boxFocused: {\n    kWkggS: \"x1rrhr5q\",\n    kGVxlE: \"xra6ydt\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxHovered: {\n    kWkggS: \"x13aw6e3 xpae8dx\",\n    kGVxlE: \"x89kqus x1ncb8nd\",\n    $$css: true\n  },\n  boxLabel: {\n    kB7OPa: \"x9f619\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    ks0D6T: \"x193iq5w\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x10l6tqk\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  boxLabelEndInset: (maxInlineSize: string) => [_temp, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize)\n  }],\n  boxLabelFloated: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  boxLabelOutlined: {\n    kLqNvP: \"x10k232c\",\n    ks0D6T: \"x35j8wb\",\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  boxLabelOutlinedFloated: {\n    k87sOh: \"x1qjp6zz\",\n    $$css: true\n  },\n  boxLeading: {\n    kZCmMZ: \"xwde665\",\n    $$css: true\n  },\n  boxMultiline: {\n    kZKoxP: \"xt7dq6l\",\n    kAzted: \"x9ep9ug\",\n    kGO01o: \"xqf7pud\",\n    $$css: true\n  },\n  boxOutlined: {\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xnqhc4v\",\n    kfdmCh: \"xs07zst\",\n    kT0f0o: \"x4gcak0\",\n    kVL7Gh: \"xqs30sb\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x158cnre x1sa41d3\",\n    kGO01o: \"xzfxn0k\",\n    kLKAdn: \"x1clyivc\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  boxOutlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1ldq0ta x1bhcspo\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  boxOutlinedError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  boxOutlinedErrorFocused: {\n    kMwMTN: \"x4ii1qj\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxOutlinedErrorHovered: {\n    kMwMTN: \"x12voer2 x16elhoc\",\n    $$css: true\n  },\n  boxOutlinedFloating: {\n    kLWn49: \"xsv50tp x1f5c3pk x1rzm7h7\",\n    $$css: true\n  },\n  boxOutlinedFocused: {\n    kMwMTN: \"x1mxwv8y\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxOutlinedHovered: {\n    kMwMTN: \"x158cnre x139gbkf\",\n    $$css: true\n  },\n  boxOutlinedMultiline: {\n    kZKoxP: \"xt7dq6l\",\n    kAzted: \"xnqs80d\",\n    $$css: true\n  },\n  boxTrailing: {\n    kwRFfy: \"xk163s\",\n    $$css: true\n  },\n  column: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  columnDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  columnDisabledFloating: {\n    kMwMTN: \"xspc5gk x19co3pv\",\n    $$css: true\n  },\n  columnFloating: {\n    kMwMTN: \"x1dfuzvz x6phwhp x19co3pv\",\n    $$css: true\n  },\n  counter: {\n    kmuXW: \"x2lah0s\",\n    kcqcaj: \"xss6m8b\",\n    keTefX: \"xvc5jky\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  icon: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kSGwAc: \"xkh2ocl\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"x1pvqxga\",\n    kjj79g: \"xl56j7k\",\n    keoZOQ: \"x1motrhk\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  iconDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  iconError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  iconErrorHovered: {\n    kMwMTN: \"x16elhoc\",\n    $$css: true\n  },\n  iconMultiline: {\n    k1K539: \"x14yxyxb\",\n    $$css: true\n  },\n  iconOutlined: {\n    k1K539: \"xs1qnrw\",\n    keoZOQ: \"x17v9ssf\",\n    $$css: true\n  },\n  input: {\n    k9l4BL: \"x1hcrkkg\",\n    kIPbS0: \"xzwh6sb\",\n    k8Qsv1: \"x1hgeflb\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    knGrYV: \"x1jie568\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"xh8yej3\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k3XXqK: \"x1t137rt\",\n    kmVPX3: \"x1717udv\",\n    kg5iWk: \"xlyipyv\",\n    $$css: true\n  },\n  inputDisabled: {\n    k8Qsv1: \"x7ip5l3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  inputInvalid: {\n    knGrYV: \"x11twi6n\",\n    $$css: true\n  },\n  inputUnderFloatingLabel: {\n    k8Qsv1: \"x1mvm7v4 xxqzaim\",\n    $$css: true\n  },\n  inputUnderLabel: {\n    keoZOQ: \"xwuztrq\",\n    $$css: true\n  },\n  label: {\n    k6CgDc: \"x12w9bfk\",\n    kMwMTN: \"x1w5n3ug\",\n    kHjlTd: \"xj0a0fe\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xixa3zk\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  labelError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  labelErrorHovered: {\n    kMwMTN: \"x16elhoc\",\n    $$css: true\n  },\n  labelFocused: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  labelHovered: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  leftToRight: {\n    ksoyAI: \"xzt5al7\",\n    k9WMMc: \"xrgu2gv\",\n    $$css: true\n  },\n  message: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    kqGvvJ: \"x10im51j\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  messageDisabled: {\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  messageError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  messageIndent: {\n    keTefX: \"xq0p5jb\",\n    $$css: true\n  },\n  messageInset: {\n    kUOVxO: \"xboopgi\",\n    $$css: true\n  },\n  messageLine: {\n    kGNEyG: \"x1pha0wt\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    keoZOQ: \"x1y88zpp\",\n    kAzted: \"x17jz683\",\n    $$css: true\n  },\n  messageLineCollapsed: {\n    keoZOQ: \"xdj266r\",\n    kAzted: \"x2lwn1j\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  messageRegion: {\n    k1xSpc: \"x78zum5\",\n    kVAEAm: \"x1cmy3ng\",\n    $$css: true\n  },\n  numeric: {\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    $$css: true\n  },\n  outline: {\n    k6CgDc: \"x12w9bfk\",\n    kVAM5u: \"x1r7ld26\",\n    kaIpWk: \"x1tfhd1\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kpwlN0: \"x10a8y8t\",\n    kb6lSQ: \"xwth0xh\",\n    kogj98: \"x1ghz6dp\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"xgnwbya\",\n    kfzvcC: \"x47corl\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1bj6kjc\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  outlineEndInset: (paddingInlineEnd: string) => [{\n    kwRFfy: paddingInlineEnd != null ? \"x120eax6\" : paddingInlineEnd,\n    $$css: true\n  }, {\n    \"--x-paddingInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(paddingInlineEnd)\n  }],\n  outlineFocused: {\n    kMzoRj: \"xdh2fpr\",\n    kg3NbH: \"x1cmmxig\",\n    $$css: true\n  },\n  outlineLeading: {\n    kZCmMZ: \"x1e4tv75\",\n    $$css: true\n  },\n  outlineLeadingFocused: {\n    kZCmMZ: \"x2e0ysr\",\n    $$css: true\n  },\n  outlineNotch: {\n    kZKoxP: \"xqtp20y\",\n    kB7OPa: \"x9f619\",\n    kLWn49: \"x14ju556\",\n    ks0D6T: \"x193iq5w\",\n    kVQacm: \"xb3r6kr\",\n    kmVPX3: \"x1717udv\",\n    k33iCy: \"xlshs6z\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  outlineNotchOpen: {\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  outlineTrailing: {\n    kwRFfy: \"xflzzte\",\n    $$css: true\n  },\n  outlineTrailingFocused: {\n    kwRFfy: \"x1gwc4xo\",\n    $$css: true\n  },\n  replica: {\n    kHjlTd: \"x1mzt3pk\",\n    k33iCy: \"xlshs6z\",\n    khDVqt: \"x126k92a\",\n    $$css: true\n  },\n  segments: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kVQacm: \"xb3r6kr\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  textArea: {\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xysyzu8\",\n    kHenm0: \"xtt52l0\",\n    $$css: true\n  },\n  textAreaAutosize: {\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  },\n  trigger: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kpwlN0: \"x10a8y8t\",\n    k3XXqK: \"x1t137rt\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x10l6tqk\",\n    kY2c9j: \"x1vjfegm\",\n    $$css: true\n  },\n  value: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  valuePlaceholder: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  valuePlaceholderHidden: {\n    kMwMTN: \"x19co3pv\",\n    $$css: true\n  }\n};\n\n// The chrome a label sitting above a group takes, rather than inside a box.\n// CheckboxGroup, ChipGroup, RadioGroup, Slider and ColorSlider each wrote both\n// of these out: the type override on the label, and the column its label and\n// control sit in.\n//\n// The label is label-large, the role a field's label takes at rest, since a\n// group has no box to float it in.\n//\n// The two sliders compose an inline size of their own on the root, since a\n// slider fills the width it is given where a group of controls does not.\nconst groupStyles = {\n  label: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    $$css: true\n  }\n};\nexport { fieldChromeStyles, groupStyles, OUTLINE_FOCUSED_WIDTH, OUTLINE_WIDTH };"],"mappings":"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"}

package/dist/hooks/useRipple.js

@@ -1,6 +1,6 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
-import { rippleStyles as styles } from "../styles/ripple.js";
 import { motionDurationMs, motionEasing, spacingPx } from "../tokens/values.js";
+import { rippleStyles as styles } from "../styles/ripple.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/layout.d.ts

@@ -22,7 +22,10 @@
 declare const collectionSizes: {
   /** The thickness of the line a drag draws between two rows. */
   readonly dropIndicator: 2;
-  /** A `List`, `ListBox` or `Tree` row with a headline alone. */
+  /**
+   * A `List`, `ListBox` or `Tree` row with a headline alone, with or without
+   * the checkbox a selecting list draws beside it.
+   */
   readonly listRow: 56;
   /** A `List`, `ListBox` or `Tree` row with a headline and a supporting line. */
   readonly listRowTwoLine: 72;

package/dist/layout.js

@@ -22,7 +22,10 @@
 const collectionSizes = {
 	/** The thickness of the line a drag draws between two rows. */
 	dropIndicator: 2,
-	/** A `List`, `ListBox` or `Tree` row with a headline alone. */
+	/**
+	* A `List`, `ListBox` or `Tree` row with a headline alone, with or without
+	* the checkbox a selecting list draws beside it.
+	*/
 	listRow: 56,
 	/** A `List`, `ListBox` or `Tree` row with a headline and a supporting line. */
 	listRowTwoLine: 72,

package/dist/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","names":["collectionSizes","dropIndicator","listRow","listRowTwoLine","menuRow","sectionHeading","tableHeaderRow","tableRow","const"],"sources":["../src/layout.ts"],"sourcesContent":["// What the collections actually measure, for the layouts a virtualized one is\n// given. React Aria's `ListLayout`, `GridLayout`, `TableLayout` and\n// `WaterfallLayout` position rows from a size rather than from the DOM, so a\n// virtualized List, ListBox, Table or Tree has to be told how tall its rows\n// are — and a number guessed at the call site puts every row in the wrong\n// place the moment a component's own height changes.\n//\n// These are that number, and `src/layout.test.tsx` renders each collection and\n// measures it, so a constant here cannot drift from what the component draws.\n//\n// They are the heights as rendered, which is what a virtualizer needs — not\n// what a spec page names, where the two can differ. They agree today.\n\n/**\n * The heights the collections draw, in pixels, for a virtualized one's\n * layout options.\n *\n * ```tsx\n * <Virtualizer\n *   layout={ListLayout}\n *   layoutOptions={{\n *     rowSize: collectionSizes.listRow,\n *     headingSize: collectionSizes.sectionHeading,\n *   }}\n * >\n *   <List aria-label=\"Label\" items={items}>{renderItem}</List>\n * </Virtualizer>\n * ```\n *\n * A row that wraps is taller than any of these, so a collection whose content\n * varies takes `estimatedRowSize` rather than `rowSize` and lets React Aria\n * measure the rest.\n */\nconst collectionSizes = {\n  /** The thickness of the line a drag draws between two rows. */\n  dropIndicator: 2,\n  /** A `List`, `ListBox` or `Tree` row with a headline alone. */\n  listRow: 56,\n  /** A `List`, `ListBox` or `Tree` row with a headline and a supporting line. */\n  listRowTwoLine: 72,\n  /** A `Menu` item, which the menus page gives a shorter floor than a list's. */\n  menuRow: 48,\n  /** A `List.Section` or `Tree.Section` heading. */\n  sectionHeading: 38,\n  /** A `Table` header row, which the data tables page draws taller than a body row. */\n  tableHeaderRow: 56,\n  /** A `Table` body row. */\n  tableRow: 52,\n} as const\n\nexport { collectionSizes }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiCA,MAAMA,kBAAkB;;CAEtBC,eAAe;;CAEfC,SAAS;;CAETC,gBAAgB;;CAEhBC,SAAS;;CAETC,gBAAgB;;CAEhBC,gBAAgB;;CAEhBC,UAAU;AACZ"}
+{"version":3,"file":"layout.js","names":["collectionSizes","dropIndicator","listRow","listRowTwoLine","menuRow","sectionHeading","tableHeaderRow","tableRow","const"],"sources":["../src/layout.ts"],"sourcesContent":["// What the collections actually measure, for the layouts a virtualized one is\n// given. React Aria's `ListLayout`, `GridLayout`, `TableLayout` and\n// `WaterfallLayout` position rows from a size rather than from the DOM, so a\n// virtualized List, ListBox, Table or Tree has to be told how tall its rows\n// are — and a number guessed at the call site puts every row in the wrong\n// place the moment a component's own height changes.\n//\n// These are that number, and `src/layout.test.tsx` renders each collection and\n// measures it, so a constant here cannot drift from what the component draws.\n//\n// They are the heights as rendered, which is what a virtualizer needs — not\n// what a spec page names, where the two can differ. They agree today.\n\n/**\n * The heights the collections draw, in pixels, for a virtualized one's\n * layout options.\n *\n * ```tsx\n * <Virtualizer\n *   layout={ListLayout}\n *   layoutOptions={{\n *     rowSize: collectionSizes.listRow,\n *     headingSize: collectionSizes.sectionHeading,\n *   }}\n * >\n *   <List aria-label=\"Label\" items={items}>{renderItem}</List>\n * </Virtualizer>\n * ```\n *\n * A row that wraps is taller than any of these, so a collection whose content\n * varies takes `estimatedRowSize` rather than `rowSize` and lets React Aria\n * measure the rest.\n */\nconst collectionSizes = {\n  /** The thickness of the line a drag draws between two rows. */\n  dropIndicator: 2,\n  /**\n   * A `List`, `ListBox` or `Tree` row with a headline alone, with or without\n   * the checkbox a selecting list draws beside it.\n   */\n  listRow: 56,\n  /** A `List`, `ListBox` or `Tree` row with a headline and a supporting line. */\n  listRowTwoLine: 72,\n  /** A `Menu` item, which the menus page gives a shorter floor than a list's. */\n  menuRow: 48,\n  /** A `List.Section` or `Tree.Section` heading. */\n  sectionHeading: 38,\n  /** A `Table` header row, which the data tables page draws taller than a body row. */\n  tableHeaderRow: 56,\n  /** A `Table` body row. */\n  tableRow: 52,\n} as const\n\nexport { collectionSizes }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiCA,MAAMA,kBAAkB;;CAEtBC,eAAe;;;;;CAKfC,SAAS;;CAETC,gBAAgB;;CAEhBC,SAAS;;CAETC,gBAAgB;;CAEhBC,gBAAgB;;CAEhBC,UAAU;AACZ"}

package/dist/row/styles.js

@@ -9,7 +9,7 @@ const rowStyles = {
 		k1xSpc: "x78zum5",
 		kOIVth: "xxj4525",
 		kzqmXN: "xh8yej3",
-		k8WAf4: "x1uvvd8r",
+		k8WAf4: "x1cmllll",
 		kg3NbH: "x790zyz",
 		kVAEAm: "x1n2onr6",
 		k9WMMc: "x1yc453h",
@@ -182,6 +182,7 @@ const rowStyles = {
 	threeLine: {
 		kGNEyG: "x1cy8zhl",
 		kAzted: "x1bt55z4",
+		k8WAf4: "x1uvvd8r",
 		$$css: true
 	},
 	twoLine: {

package/dist/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","RowVariant","colors","radii","shadows","sizing","spacing","stateLayerOpacity","typography","HOVER_CAPABLE","FORCED_COLORS","rowStyles","base","kGNEyG","kWkggS","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kOIVth","kzqmXN","k8WAf4","kg3NbH","kVAEAm","k9WMMc","kMnn75","$$css","disabled","kkrTdU","kAXs8y","dragging","kKwaWg","kGVxlE","kY2c9j","drawer","kaIpWk","kUOVxO","kAzted","drawerSurface","dropTarget","kjBf7l","kInvED","k3XXqK","kMeerF","focusVisible","headlineEmphasis","k63SB2","headlineList","kMv6JI","kGuDYH","kb6lSQ","kLWn49","kHjlTd","headlineMenu","hovered","interactive","kVVagm","interactiveLayers","list","main","kXwgrk","kzQI83","k7Eaqz","menu","overline","pressed","selectedDrawer","selectedList","selectedMenu","slot","kmuXW","supporting","supportingInherit","supportingSelectedDrawer","supportingSelectedList","supportingSelectedMenu","threeLine","twoLine","supportingTone","variant","isDisabled","isSelected"],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RowVariant } from '.';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row every list draws: ListItem's, and from here on the item of every\n// collection the coverage plan adds — ListBox, Menu, List, Tree, the options\n// of Select and ComboBox. Apart from the RowContent component in ./index.tsx\n// so that file exports components alone, which is what keeps fast refresh\n// working for it.\n//\n// Three variants, because three spec pages draw three rows. The lists page\n// gives a list item a 56dp floor, a body-large headline and a body-medium\n// supporting line, and primary container when selected. The menus page gives\n// a menu item 48dp, a label-large label, and tertiary container when\n// selected. The navigation drawer page gives its row 56dp too, with a\n// label-large label like a menu's, and marks the current one with a\n// secondary-container pill held 12dp off each edge — 336dp of indicator in a\n// 360dp container, which is what that inset comes to. The layout, the\n// padding, the state layers and the disabled treatment are one row; `list`,\n// `menu` and `drawer` carry only what the three pages disagree on, and a\n// consumer applies one of them beside `base`.\n//\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, a menu, or the page.\n// The two selected states are the ones that bring a container of their own.\n\n// A pointer that can hover, for `interactiveLayers` — a plain element with no\n// render state, so its hover layer is a pseudo-class, and Chromium leaves\n// `:hover` on whatever a touch last tapped. Inside this query a touch screen\n// draws no hover at all; a touchscreen laptop still matches it for its\n// trackpad.\nconst HOVER_CAPABLE = '@media (hover: hover)';\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 rowStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf xs5hli\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  dragging: {\n    kWkggS: \"x14s9m32\",\n    kKwaWg: \"xdiex0u\",\n    kGVxlE: \"x4r79n0\",\n    kY2c9j: \"x1vjfegm\",\n    $$css: true\n  },\n  drawer: {\n    kaIpWk: \"x1dkaolv\",\n    kzqmXN: \"x14atkfc\",\n    kUOVxO: \"xd2r6sq\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  drawerSurface: {\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  dropTarget: {\n    kKwaWg: \"xu73ib2\",\n    kjBf7l: \"xrgy624 x1x84bn5\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  focusVisible: {\n    kKwaWg: \"x17vw94z\",\n    kjBf7l: \"xrgy624 x1v8yhc2\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  headlineEmphasis: {\n    k63SB2: \"x1sfltvt\",\n    $$css: true\n  },\n  headlineList: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  hovered: {\n    kKwaWg: \"xbmfk57\",\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  interactiveLayers: {\n    kWkggS: \"x83qkoq x1yl1wq7 xjqqt44 xjbqb8w\",\n    $$css: true\n  },\n  list: {\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  main: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"x14qo01y\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  },\n  menu: {\n    kAzted: \"x1ddmzdj\",\n    $$css: true\n  },\n  overline: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  pressed: {\n    kKwaWg: \"xdiex0u\",\n    $$css: true\n  },\n  selectedDrawer: {\n    kWkggS: \"x15dekr4 x1jzqe4\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  selectedList: {\n    kWkggS: \"xp89om9 x1jzqe4\",\n    kMwMTN: \"xscdzaa x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  selectedMenu: {\n    kWkggS: \"xs6yvni x1jzqe4\",\n    kMwMTN: \"x3cbcwg x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  slot: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  supporting: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  supportingInherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  supportingSelectedDrawer: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  supportingSelectedList: {\n    kMwMTN: \"xscdzaa x1k5gbb1\",\n    $$css: true\n  },\n  supportingSelectedMenu: {\n    kMwMTN: \"x3cbcwg x1k5gbb1\",\n    $$css: true\n  },\n  threeLine: {\n    kGNEyG: \"x1cy8zhl\",\n    kAzted: \"x1bt55z4\",\n    $$css: true\n  },\n  twoLine: {\n    kAzted: \"x304zwk\",\n    $$css: true\n  }\n};\n\n/**\n * The tone a row's muted text takes over its own muted style: the supporting\n * line and the overline, and a menu item's shortcut. Nothing while the row is\n * drawn on the surface, where the muted style's on surface variant holds;\n * the selected container's own on-colour while selected; and the row's own\n * colour while disabled. Disabled is asked first, since a disabled row's own\n * colour is already the faded one and so wins over the selected container's\n * content role. One function for every caller, so a shortcut and the\n * supporting line beside it cannot come to disagree.\n */\nfunction supportingTone(variant: RowVariant, {\n  isDisabled,\n  isSelected\n}: {\n  isDisabled: boolean;\n  isSelected: boolean;\n}) {\n  if (isDisabled) {\n    return rowStyles.supportingInherit;\n  }\n  if (!isSelected) {\n    return null;\n  }\n  // Each variant's container is a different colour family, and the muted\n  // role is not guaranteed to be readable over any of them.\n  if (variant === 'drawer') {\n    return rowStyles.supportingSelectedDrawer;\n  }\n  if (variant === 'menu') {\n    return rowStyles.supportingSelectedMenu;\n  }\n  return rowStyles.supportingSelectedList;\n}\nexport { rowStyles, supportingTone };"],"mappings":"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"}
+{"version":3,"file":"styles.js","names":["stylex","RowVariant","colors","radii","shadows","sizing","spacing","stateLayerOpacity","typography","HOVER_CAPABLE","FORCED_COLORS","rowStyles","base","kGNEyG","kWkggS","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kOIVth","kzqmXN","k8WAf4","kg3NbH","kVAEAm","k9WMMc","kMnn75","$$css","disabled","kkrTdU","kAXs8y","dragging","kKwaWg","kGVxlE","kY2c9j","drawer","kaIpWk","kUOVxO","kAzted","drawerSurface","dropTarget","kjBf7l","kInvED","k3XXqK","kMeerF","focusVisible","headlineEmphasis","k63SB2","headlineList","kMv6JI","kGuDYH","kb6lSQ","kLWn49","kHjlTd","headlineMenu","hovered","interactive","kVVagm","interactiveLayers","list","main","kXwgrk","kzQI83","k7Eaqz","menu","overline","pressed","selectedDrawer","selectedList","selectedMenu","slot","kmuXW","supporting","supportingInherit","supportingSelectedDrawer","supportingSelectedList","supportingSelectedMenu","threeLine","twoLine","supportingTone","variant","isDisabled","isSelected"],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RowVariant } from '.';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row every list draws: ListItem's, and from here on the item of every\n// collection the coverage plan adds — ListBox, Menu, List, Tree, the options\n// of Select and ComboBox. Apart from the RowContent component in ./index.tsx\n// so that file exports components alone, which is what keeps fast refresh\n// working for it.\n//\n// Three variants, because three spec pages draw three rows. The lists page\n// gives a list item a 56dp floor, a body-large headline and a body-medium\n// supporting line, and primary container when selected. The menus page gives\n// a menu item 48dp, a label-large label, and tertiary container when\n// selected. The navigation drawer page gives its row 56dp too, with a\n// label-large label like a menu's, and marks the current one with a\n// secondary-container pill held 12dp off each edge — 336dp of indicator in a\n// 360dp container, which is what that inset comes to. The layout, the\n// padding, the state layers and the disabled treatment are one row; `list`,\n// `menu` and `drawer` carry only what the three pages disagree on, and a\n// consumer applies one of them beside `base`.\n//\n// The block padding is the lists page's 8dp, which is what puts a row's\n// 40dp leading element — an avatar, a selection checkbox — on the 56dp\n// one-line height, and a 56dp one on 72. The page pads a three-line row 12dp\n// instead, which `threeLine` carries. A menu item and a drawer row hold one\n// line of text inside a taller floor, so their padding shows only on a label\n// that wraps.\n//\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, a menu, or the page.\n// The two selected states are the ones that bring a container of their own.\n\n// A pointer that can hover, for `interactiveLayers` — a plain element with no\n// render state, so its hover layer is a pseudo-class, and Chromium leaves\n// `:hover` on whatever a touch last tapped. Inside this query a touch screen\n// draws no hover at all; a touchscreen laptop still matches it for its\n// trackpad.\nconst HOVER_CAPABLE = '@media (hover: hover)';\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 rowStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf xs5hli\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  dragging: {\n    kWkggS: \"x14s9m32\",\n    kKwaWg: \"xdiex0u\",\n    kGVxlE: \"x4r79n0\",\n    kY2c9j: \"x1vjfegm\",\n    $$css: true\n  },\n  drawer: {\n    kaIpWk: \"x1dkaolv\",\n    kzqmXN: \"x14atkfc\",\n    kUOVxO: \"xd2r6sq\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  drawerSurface: {\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  dropTarget: {\n    kKwaWg: \"xu73ib2\",\n    kjBf7l: \"xrgy624 x1x84bn5\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  focusVisible: {\n    kKwaWg: \"x17vw94z\",\n    kjBf7l: \"xrgy624 x1v8yhc2\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  headlineEmphasis: {\n    k63SB2: \"x1sfltvt\",\n    $$css: true\n  },\n  headlineList: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  hovered: {\n    kKwaWg: \"xbmfk57\",\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  interactiveLayers: {\n    kWkggS: \"x83qkoq x1yl1wq7 xjqqt44 xjbqb8w\",\n    $$css: true\n  },\n  list: {\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  main: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"x14qo01y\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  },\n  menu: {\n    kAzted: \"x1ddmzdj\",\n    $$css: true\n  },\n  overline: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  pressed: {\n    kKwaWg: \"xdiex0u\",\n    $$css: true\n  },\n  selectedDrawer: {\n    kWkggS: \"x15dekr4 x1jzqe4\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  selectedList: {\n    kWkggS: \"xp89om9 x1jzqe4\",\n    kMwMTN: \"xscdzaa x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  selectedMenu: {\n    kWkggS: \"xs6yvni x1jzqe4\",\n    kMwMTN: \"x3cbcwg x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  slot: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  supporting: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  supportingInherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  supportingSelectedDrawer: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  supportingSelectedList: {\n    kMwMTN: \"xscdzaa x1k5gbb1\",\n    $$css: true\n  },\n  supportingSelectedMenu: {\n    kMwMTN: \"x3cbcwg x1k5gbb1\",\n    $$css: true\n  },\n  threeLine: {\n    kGNEyG: \"x1cy8zhl\",\n    kAzted: \"x1bt55z4\",\n    k8WAf4: \"x1uvvd8r\",\n    $$css: true\n  },\n  twoLine: {\n    kAzted: \"x304zwk\",\n    $$css: true\n  }\n};\n\n/**\n * The tone a row's muted text takes over its own muted style: the supporting\n * line and the overline, and a menu item's shortcut. Nothing while the row is\n * drawn on the surface, where the muted style's on surface variant holds;\n * the selected container's own on-colour while selected; and the row's own\n * colour while disabled. Disabled is asked first, since a disabled row's own\n * colour is already the faded one and so wins over the selected container's\n * content role. One function for every caller, so a shortcut and the\n * supporting line beside it cannot come to disagree.\n */\nfunction supportingTone(variant: RowVariant, {\n  isDisabled,\n  isSelected\n}: {\n  isDisabled: boolean;\n  isSelected: boolean;\n}) {\n  if (isDisabled) {\n    return rowStyles.supportingInherit;\n  }\n  if (!isSelected) {\n    return null;\n  }\n  // Each variant's container is a different colour family, and the muted\n  // role is not guaranteed to be readable over any of them.\n  if (variant === 'drawer') {\n    return rowStyles.supportingSelectedDrawer;\n  }\n  if (variant === 'menu') {\n    return rowStyles.supportingSelectedMenu;\n  }\n  return rowStyles.supportingSelectedList;\n}\nexport { rowStyles, supportingTone };"],"mappings":"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"}

package/dist/styles/overlay.js

@@ -65,11 +65,6 @@ const overlay = {
 		kVAEAm: "xixxii4",
 		kY2c9j: "x125h2g0",
 		$$css: true
-	},
-	scrimOverModal: {
-		kKVMdj: "x1a5igra",
-		kWkggS: "xjbqb8w",
-		$$css: true
 	}
 };
 const origins = {

package/dist/styles/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":["PopoverRenderProps","stylex","colors","motion","radii","shadows","spacing","layers","FORCED_COLORS","fadeIn","scaleIn","overlay","fromBottom","k3nNDw","$$css","fromLeft","fromRight","fromTop","modalBodyRing","kjBf7l","kInvED","k3XXqK","kMeerF","modalDialog","kZKoxP","kB7OPa","k1xSpc","kXwgrk","kAzted","popup","k44tkh","kKVMdj","kyAemX","kWkggS","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kGVxlE","kMwMTN","kORKVm","kZeWKH","popupDialog","kOIVth","scrim","kpwlN0","kVAEAm","kY2c9j","scrimOverModal","origins","bottom","center","left","right","top","OverlayAlign","OverlaySide","placementOf","side","align","const","popupOrigin","placement"],"sources":["../../src/styles/overlay.ts"],"sourcesContent":["import type { PopoverRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing } from '../tokens/design.tokens.stylex';\nimport './layers.stylex';\nimport { layers } from './layers.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// What every overlay shares, drawn once. Popover's anchored surface and its\n// entry, Sheet's scrim, and the element that carries the dialog role inside\n// each of them; the coverage plan brings a dozen more overlays — Menu, Select,\n// ComboBox, Tooltip, the date pickers, Dialog — and each would otherwise have\n// written the same surface and the same scrim a second time. Geometry stays\n// with the component: how wide a popover is, which edge a sheet is pinned to,\n// where a dialog sits, are each overlay's own decision.\n//\n// Every one of these is portalled to the end of the body, which is why each\n// component takes a `container` prop and documents the same caveat: an app\n// that scopes its StyleX theme to a subtree has to point the portal inside it,\n// or the surface renders outside the theme and falls back to the tokens'\n// `prefers-color-scheme` default.\n//\n// Portalled to the end of the body, an element with no `z-index` paints level\n// with the page's own unlayered content, so a modal's scrim takes a layer\n// from src/styles/layers.stylex.ts, which sets the order every overlay\n// stacks in over the page.\n//\n// Entry only, and no exit animation, for the same reason in every overlay:\n// React Aria keeps a closing surface mounted only while an animation is\n// running on it, and a popover in particular is dismissed far more often than\n// it is closed deliberately — usually by pressing something else, where a\n// lingering surface is in the way of whatever the press was for.\n\n// The scrim settles before the panel it sits behind arrives: shorter than\n// any panel's entry, so the two do not finish together.\nconst fadeIn = \"x18re5ia-B\";\n\n// An anchored surface grows from the edge it is anchored by rather than from\n// its own centre, which is what makes it read as coming out of the trigger.\n// The origin is a separate style, chosen from the placement React Aria\n// reports, so the same keyframes serve all four sides.\nconst scaleIn = \"x1k48ry3-B\";\nconst overlay = {\n  fromBottom: {\n    k3nNDw: \"x18ouj0k\",\n    $$css: true\n  },\n  fromLeft: {\n    k3nNDw: \"x1nf803f\",\n    $$css: true\n  },\n  fromRight: {\n    k3nNDw: \"xyibjs4\",\n    $$css: true\n  },\n  fromTop: {\n    k3nNDw: \"x1dp6rp6\",\n    $$css: true\n  },\n  modalBodyRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  modalDialog: {\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kAzted: \"x2lwn1j\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popup: {\n    k44tkh: \"xvhm28k x1u6grsq\",\n    kKVMdj: \"x97zbip\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1mjdul6\",\n    kVAM5u: \"x1w1tqly\",\n    kaIpWk: \"x62ce2h\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kGVxlE: \"x1os83gw\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kORKVm: \"x1odjw0f\",\n    kZeWKH: \"xish69e\",\n    $$css: true\n  },\n  popupDialog: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  scrim: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kB7OPa: \"x9f619\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    kY2c9j: \"x125h2g0\",\n    $$css: true\n  },\n  scrimOverModal: {\n    kKVMdj: \"x1a5igra\",\n    kWkggS: \"xjbqb8w\",\n    $$css: true\n  }\n};\n\n// Which side the surface opened on, and the origin its entry grows from.\n// Keyed on the placement React Aria reports rather than the one asked for,\n// since the surface flips to the opposite side when there is no room on its\n// own; `center` is the placement React Aria reports for an anchor it could\n// not place beside, and grows from the top like the default.\nconst origins = {\n  bottom: overlay.fromTop,\n  center: overlay.fromTop,\n  left: overlay.fromRight,\n  right: overlay.fromLeft,\n  top: overlay.fromBottom\n};\n\n/** Where along that side it lines up with the anchor. */\ntype OverlayAlign = 'center' | 'end' | 'start';\n\n/**\n * Which side of the anchor a surface opens on. `start` and `end` are the\n * inline sides by the writing direction, the right and the left in a\n * right-to-left layout; `left` and `right` stay where they are in either.\n */\ntype OverlaySide = 'bottom' | 'end' | 'left' | 'right' | 'start' | 'top';\n\n/**\n * React Aria's placement, from the side and the alignment a call site names.\n * Its own vocabulary pairs a side with `top`/`bottom` on the inline sides and\n * `start`/`end` on the block ones; a call site should not have to know which\n * of the two it is asking for, so this maps one onto the other. The inline\n * sides take in `start` and `end`, which React Aria turns into the left or\n * the right by the locale's direction as it places the surface, so what it\n * reports, and what `popupOrigin` reads, is always a physical side.\n *\n * Shared by every anchored overlay rather than kept in one, since which side\n * a surface opens on is the same question for a popover, a menu and a\n * tooltip.\n */\nfunction placementOf(side: OverlaySide, align: OverlayAlign) {\n  if (align === 'center') {\n    return side;\n  }\n  if (side === 'top' || side === 'bottom') {\n    return `${side} ${align}` as const;\n  }\n  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const;\n}\n\n/**\n * The origin an anchored surface grows from, for the placement React Aria\n * reports through its render state. `null`, before the surface has been\n * placed, grows from the top as `bottom` does.\n */\nfunction popupOrigin(placement: PopoverRenderProps['placement']) {\n  return origins[placement ?? 'bottom'];\n}\nexport type { OverlayAlign, OverlaySide };\nexport { overlay, placementOf, popupOrigin };"],"mappings":";AA+CA,MAAMW,UAAU;CACdC,YAAY;EACVC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRF,QAAQ;EACRC,OAAO;CACT;CACAE,WAAW;EACTH,QAAQ;EACRC,OAAO;CACT;CACAG,SAAS;EACPJ,QAAQ;EACRC,OAAO;CACT;CACAI,eAAe;EACbC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAS,aAAa;EACXC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRP,QAAQ;EACRP,OAAO;CACT;CACAe,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR3B,OAAO;CACT;CACA4B,aAAa;EACXjB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRgB,QAAQ;EACR7B,OAAO;CACT;CACA8B,OAAO;EACLd,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,QAAQ;EACRoB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRjC,OAAO;CACT;CACAkC,gBAAgB;EACdjB,QAAQ;EACRE,QAAQ;EACRnB,OAAO;CACT;AACF;AAOA,MAAMmC,UAAU;CACdC,QAAQvC,QAAQM;CAChBkC,QAAQxC,QAAQM;CAChBmC,MAAMzC,QAAQK;CACdqC,OAAO1C,QAAQI;CACfuC,KAAK3C,QAAQC;AACf;;;;;;;;;;;;;;AAyBA,SAAS6C,YAAYC,MAAmBC,OAAqB;CAC3D,IAAIA,UAAU,UACZ,OAAOD;CAET,IAAIA,SAAS,SAASA,SAAS,UAC7B,OAAO,GAAGA,KAAI,GAAIC;CAEpB,OAAO,GAAGD,KAAI,GAAIC,UAAU,UAAU,QAAQ;AAChD;;;;;;AAOA,SAASE,YAAYC,WAA4C;CAC/D,OAAOb,QAAQa,aAAa;AAC9B"}
+{"version":3,"file":"overlay.js","names":["PopoverRenderProps","stylex","colors","motion","radii","shadows","spacing","layers","FORCED_COLORS","fadeIn","scaleIn","overlay","fromBottom","k3nNDw","$$css","fromLeft","fromRight","fromTop","modalBodyRing","kjBf7l","kInvED","k3XXqK","kMeerF","modalDialog","kZKoxP","kB7OPa","k1xSpc","kXwgrk","kAzted","popup","k44tkh","kKVMdj","kyAemX","kWkggS","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kGVxlE","kMwMTN","kORKVm","kZeWKH","popupDialog","kOIVth","scrim","kpwlN0","kVAEAm","kY2c9j","origins","bottom","center","left","right","top","OverlayAlign","OverlaySide","placementOf","side","align","const","popupOrigin","placement"],"sources":["../../src/styles/overlay.ts"],"sourcesContent":["import type { PopoverRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing } from '../tokens/design.tokens.stylex';\nimport './layers.stylex';\nimport { layers } from './layers.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// What every overlay shares, drawn once. Popover's anchored surface and its\n// entry, Sheet's scrim, and the element that carries the dialog role inside\n// each of them; the coverage plan brings a dozen more overlays — Menu, Select,\n// ComboBox, Tooltip, the date pickers, Dialog — and each would otherwise have\n// written the same surface and the same scrim a second time. Geometry stays\n// with the component: how wide a popover is, which edge a sheet is pinned to,\n// where a dialog sits, are each overlay's own decision.\n//\n// Every one of these is portalled to the end of the body, which is why each\n// component takes a `container` prop and documents the same caveat: an app\n// that scopes its StyleX theme to a subtree has to point the portal inside it,\n// or the surface renders outside the theme and falls back to the tokens'\n// `prefers-color-scheme` default.\n//\n// Portalled to the end of the body, an element with no `z-index` paints level\n// with the page's own unlayered content, so a modal's scrim takes a layer\n// from src/styles/layers.stylex.ts, which sets the order every overlay\n// stacks in over the page.\n//\n// Entry only, and no exit animation, for the same reason in every overlay:\n// React Aria keeps a closing surface mounted only while an animation is\n// running on it, and a popover in particular is dismissed far more often than\n// it is closed deliberately — usually by pressing something else, where a\n// lingering surface is in the way of whatever the press was for.\n\n// The scrim settles before the panel it sits behind arrives: shorter than\n// any panel's entry, so the two do not finish together.\nconst fadeIn = \"x18re5ia-B\";\n\n// An anchored surface grows from the edge it is anchored by rather than from\n// its own centre, which is what makes it read as coming out of the trigger.\n// The origin is a separate style, chosen from the placement React Aria\n// reports, so the same keyframes serve all four sides.\nconst scaleIn = \"x1k48ry3-B\";\nconst overlay = {\n  fromBottom: {\n    k3nNDw: \"x18ouj0k\",\n    $$css: true\n  },\n  fromLeft: {\n    k3nNDw: \"x1nf803f\",\n    $$css: true\n  },\n  fromRight: {\n    k3nNDw: \"xyibjs4\",\n    $$css: true\n  },\n  fromTop: {\n    k3nNDw: \"x1dp6rp6\",\n    $$css: true\n  },\n  modalBodyRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  modalDialog: {\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kAzted: \"x2lwn1j\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popup: {\n    k44tkh: \"xvhm28k x1u6grsq\",\n    kKVMdj: \"x97zbip\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1mjdul6\",\n    kVAM5u: \"x1w1tqly\",\n    kaIpWk: \"x62ce2h\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kGVxlE: \"x1os83gw\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kORKVm: \"x1odjw0f\",\n    kZeWKH: \"xish69e\",\n    $$css: true\n  },\n  popupDialog: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  scrim: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kB7OPa: \"x9f619\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    kY2c9j: \"x125h2g0\",\n    $$css: true\n  }\n};\n\n// Which side the surface opened on, and the origin its entry grows from.\n// Keyed on the placement React Aria reports rather than the one asked for,\n// since the surface flips to the opposite side when there is no room on its\n// own; `center` is the placement React Aria reports for an anchor it could\n// not place beside, and grows from the top like the default.\nconst origins = {\n  bottom: overlay.fromTop,\n  center: overlay.fromTop,\n  left: overlay.fromRight,\n  right: overlay.fromLeft,\n  top: overlay.fromBottom\n};\n\n/** Where along that side it lines up with the anchor. */\ntype OverlayAlign = 'center' | 'end' | 'start';\n\n/**\n * Which side of the anchor a surface opens on. `start` and `end` are the\n * inline sides by the writing direction, the right and the left in a\n * right-to-left layout; `left` and `right` stay where they are in either.\n */\ntype OverlaySide = 'bottom' | 'end' | 'left' | 'right' | 'start' | 'top';\n\n/**\n * React Aria's placement, from the side and the alignment a call site names.\n * Its own vocabulary pairs a side with `top`/`bottom` on the inline sides and\n * `start`/`end` on the block ones; a call site should not have to know which\n * of the two it is asking for, so this maps one onto the other. The inline\n * sides take in `start` and `end`, which React Aria turns into the left or\n * the right by the locale's direction as it places the surface, so what it\n * reports, and what `popupOrigin` reads, is always a physical side.\n *\n * Shared by every anchored overlay rather than kept in one, since which side\n * a surface opens on is the same question for a popover, a menu and a\n * tooltip.\n */\nfunction placementOf(side: OverlaySide, align: OverlayAlign) {\n  if (align === 'center') {\n    return side;\n  }\n  if (side === 'top' || side === 'bottom') {\n    return `${side} ${align}` as const;\n  }\n  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const;\n}\n\n/**\n * The origin an anchored surface grows from, for the placement React Aria\n * reports through its render state. `null`, before the surface has been\n * placed, grows from the top as `bottom` does.\n */\nfunction popupOrigin(placement: PopoverRenderProps['placement']) {\n  return origins[placement ?? 'bottom'];\n}\nexport type { OverlayAlign, OverlaySide };\nexport { overlay, placementOf, popupOrigin };"],"mappings":";AA+CA,MAAMW,UAAU;CACdC,YAAY;EACVC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRF,QAAQ;EACRC,OAAO;CACT;CACAE,WAAW;EACTH,QAAQ;EACRC,OAAO;CACT;CACAG,SAAS;EACPJ,QAAQ;EACRC,OAAO;CACT;CACAI,eAAe;EACbC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAS,aAAa;EACXC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRP,QAAQ;EACRP,OAAO;CACT;CACAe,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR3B,OAAO;CACT;CACA4B,aAAa;EACXjB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRgB,QAAQ;EACR7B,OAAO;CACT;CACA8B,OAAO;EACLd,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,QAAQ;EACRoB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRjC,OAAO;CACT;AACF;AAOA,MAAMkC,UAAU;CACdC,QAAQtC,QAAQM;CAChBiC,QAAQvC,QAAQM;CAChBkC,MAAMxC,QAAQK;CACdoC,OAAOzC,QAAQI;CACfsC,KAAK1C,QAAQC;AACf;;;;;;;;;;;;;;AAyBA,SAAS4C,YAAYC,MAAmBC,OAAqB;CAC3D,IAAIA,UAAU,UACZ,OAAOD;CAET,IAAIA,SAAS,SAASA,SAAS,UAC7B,OAAO,GAAGA,KAAI,GAAIC;CAEpB,OAAO,GAAGD,KAAI,GAAIC,UAAU,UAAU,QAAQ;AAChD;;;;;;AAOA,SAASE,YAAYC,WAA4C;CAC/D,OAAOb,QAAQa,aAAa;AAC9B"}