@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/dist/render/useRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRender.js","names":["ComponentPropsWithRef","CSSProperties","HTMLAttributes","JSX","ReactElement","Ref","RefCallback","RefObject","cloneElement","createElement","isValidElement","useMemo","Handler","args","ReadonlyArray","IntrinsicTag","IntrinsicElements","RenderComponentProps","Tag","render","RenderProp","RenderFunctionProps","ref","props","UseRenderParameters","defaultTagName","Record","attach","Element","node","cleanup","current","isHandler","value","isHandlerKey","key","test","isRefCallback","isRefObject","joinClassNames","names","filter","Boolean","join","undefined","mergeElementProps","ours","theirs","merged","className","stringOf","style","mergeStyleObjects","styleOf","Object","keys","own","their","mergeRefs","a","b","detachA","detachB","refOf","useRender","t0","$","_c","t1","t2","t3","element","t4","t5","type","_c"],"sources":["../../src/render/useRender.tsx"],"sourcesContent":["import type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  HTMLAttributes,\n  JSX,\n  ReactElement,\n  Ref,\n  RefCallback,\n  RefObject,\n} from 'react'\n\nimport { cloneElement, createElement, isValidElement, useMemo } from 'react'\n\ntype Handler = (...args: ReadonlyArray<unknown>) => unknown\n\ntype IntrinsicTag = keyof JSX.IntrinsicElements\n\n/**\n * The props of a component rendered through {@link useRender}: everything the\n * element accepts, plus `render`.\n */\ntype RenderComponentProps<Tag extends IntrinsicTag> =\n  ComponentPropsWithRef<Tag> & {\n    /**\n     * Replaces the element the component renders by default: another tag, as\n     * `render={<h2 />}`, or a function returning the element to render, given\n     * the props the component would have put on its own.\n     */\n    render?: RenderProp | undefined\n  }\n\n/**\n * What a `render` function is handed: the element's props, merged and ready\n * to spread onto whatever element it returns. `any` on purpose, in the one\n * place it appears — the function may return any element, and a ref typed for\n * one of them would refuse every other.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- see above\ntype RenderFunctionProps = HTMLAttributes<any> & { ref?: Ref<any> | undefined }\n\ntype RenderProp = ((props: RenderFunctionProps) => ReactElement) | ReactElement\n\ninterface UseRenderParameters {\n  /**\n   * The tag rendered when `render` is not given.\n   * @default 'div'\n   */\n  defaultTagName?: IntrinsicTag | undefined\n  /** The props to put on whichever element ends up rendered. */\n  props?: Record<string, unknown> | undefined\n  render?: RenderProp | undefined\n}\n\nfunction attach(ref: Ref<Element>, node: Element | null): () => void {\n  if (ref === null) {\n    return () => {}\n  }\n  if (typeof ref === 'function') {\n    const cleanup = ref(node)\n    return typeof cleanup === 'function'\n      ? cleanup\n      : () => {\n          ref(null)\n        }\n  }\n  ref.current = node\n  return () => {\n    ref.current = null\n  }\n}\n\nfunction isHandler(value: unknown): value is Handler {\n  return typeof value === 'function'\n}\n\nfunction isHandlerKey(key: string) {\n  return /^on[A-Z]/u.test(key)\n}\n\nfunction isRefCallback(value: unknown): value is RefCallback<Element> {\n  return typeof value === 'function'\n}\n\nfunction isRefObject(value: unknown): value is RefObject<Element | null> {\n  return typeof value === 'object' && value !== null && 'current' in value\n}\n\n// undefined rather than '' when there is nothing to say, so an element with\n// no classes on either side renders without a class attribute at all.\nfunction joinClassNames(...names: ReadonlyArray<string | undefined>) {\n  return names.filter(Boolean).join(' ') || undefined\n}\n\n/**\n * The component's props over the element's own. The element wins a plain\n * conflict — it is the more specific of the two — while class names, styles\n * and handlers are combined rather than chosen between. `ref` is left out:\n * the hook merges the two refs itself.\n */\nfunction mergeElementProps(\n  ours: Record<string, unknown>,\n  theirs: Record<string, unknown>,\n) {\n  const merged: Record<string, unknown> = { ...ours, ...theirs }\n\n  merged.className = joinClassNames(\n    stringOf(ours.className),\n    stringOf(theirs.className),\n  )\n  merged.style = mergeStyleObjects(styleOf(ours.style), styleOf(theirs.style))\n\n  for (const key of Object.keys(theirs)) {\n    const own = ours[key]\n    const their = theirs[key]\n    if (isHandlerKey(key) && isHandler(own) && isHandler(their)) {\n      // The element's own handler runs first, as the more specific one.\n      merged[key] = (...args: ReadonlyArray<unknown>) => {\n        their(...args)\n        own(...args)\n      }\n    }\n  }\n\n  delete merged.ref\n  return merged\n}\n\n/**\n * One ref that feeds both, or whichever one there is. Attaching through a\n * callback lets each side keep its own cleanup: React 19 calls a callback\n * ref's returned function on detach in place of calling it with `null`, so\n * the merged callback returns one that does the same for each of the two.\n */\nfunction mergeRefs(\n  a: Ref<Element> | undefined,\n  b: Ref<Element> | undefined,\n): Ref<Element> | undefined {\n  if (a === undefined) {\n    return b\n  }\n  if (b === undefined) {\n    return a\n  }\n  return (node: Element | null) => {\n    const detachA = attach(a, node)\n    const detachB = attach(b, node)\n    return () => {\n      detachA()\n      detachB()\n    }\n  }\n}\n\nfunction mergeStyleObjects(\n  ours: CSSProperties | undefined,\n  theirs: CSSProperties | undefined,\n) {\n  if (ours === undefined && theirs === undefined) {\n    return undefined\n  }\n  return { ...ours, ...theirs }\n}\n\nfunction refOf(value: unknown): Ref<Element> | undefined {\n  if (isRefCallback(value) || isRefObject(value)) {\n    return value\n  }\n  return undefined\n}\n\nfunction stringOf(value: unknown) {\n  return typeof value === 'string' ? value : undefined\n}\n\nfunction styleOf(value: unknown) {\n  return typeof value === 'object' && value !== null\n    ? (value as CSSProperties)\n    : undefined\n}\n\n/**\n * Renders a component's element, or whatever its `render` prop asks for\n * instead.\n *\n * `render` is either a React element, cloned with the component's props\n * merged over its own — class names joined, styles merged, event handlers\n * chained, the element's own value winning any other conflict — or a function\n * handed those merged props to return an element of its choosing. Without one,\n * `defaultTagName` is rendered. A default `button` is given `type=\"button\"`,\n * since a bare one submits any form it happens to sit in.\n *\n * The element form is the point of owning this. React Aria's own `render`\n * is a function that must return the element the component would have\n * rendered itself, which suits its interactive components and nothing else;\n * the non-interactive ones here take `render={<h2 />}`, and keeping that\n * contract in a hook of the library's own is what lets them stay put\n * whichever behaviour library sits underneath the rest.\n */\nfunction useRender({\n  defaultTagName = 'div',\n  props = {},\n  render,\n}: UseRenderParameters): ReactElement {\n  const element = isValidElement<Record<string, unknown>>(render)\n    ? render\n    : undefined\n\n  // Both refs, when there are two, have to land on one node. The merged\n  // callback is memoised so React does not detach and re-attach it on every\n  // render — a new identity each time would.\n  //\n  // The dependencies are the props the refs are read from rather than the\n  // refs themselves. React writes through a ref object, so the compiler reads\n  // one as a value that may be modified later and declines to preserve a\n  // memoisation keyed on it — which, under the panic threshold this lands\n  // beside, fails the build. A prop it can prove holds still.\n  const ref = useMemo(\n    () => mergeRefs(refOf(props.ref), refOf(element?.props.ref)),\n    [props.ref, element?.props.ref],\n  )\n\n  if (element !== undefined) {\n    return cloneElement(element, {\n      ...mergeElementProps(props, element.props),\n      ref,\n    })\n  }\n\n  if (typeof render === 'function') {\n    return render({ ...props, ref } as RenderFunctionProps)\n  }\n\n  return createElement(\n    defaultTagName,\n    defaultTagName === 'button'\n      ? { type: 'button', ...props, ref }\n      : { ...props, ref },\n  )\n}\n\nexport type { RenderComponentProps, RenderFunctionProps, UseRenderParameters }\n\nexport { useRender }\n"],"mappings":"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"}
+{"version":3,"file":"useRender.js","names":["ComponentPropsWithRef","CSSProperties","HTMLAttributes","JSX","ReactElement","Ref","RefCallback","RefObject","cloneElement","createElement","isValidElement","useMemo","AttachableRef","NonNullable","Element","Handler","args","ReadonlyArray","IntrinsicTag","IntrinsicElements","RenderComponentProps","Tag","render","RenderProp","RenderFunctionProps","ref","props","UseRenderParameters","defaultTagName","Record","attach","node","cleanup","current","isHandler","value","isHandlerKey","key","test","isRefCallback","isRefObject","joinClassNames","names","filter","Boolean","join","undefined","mergeElementProps","ours","theirs","merged","className","stringOf","style","mergeStyleObjects","styleOf","Object","keys","own","their","mergeRefs","a","b","detachA","detachB","refOf","useRender","t0","$","_c","t1","t2","t3","element","t4","t5","type","_c"],"sources":["../../src/render/useRender.tsx"],"sourcesContent":["import type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  HTMLAttributes,\n  JSX,\n  ReactElement,\n  Ref,\n  RefCallback,\n  RefObject,\n} from 'react'\n\nimport { cloneElement, createElement, isValidElement, useMemo } from 'react'\n\n// A ref the hook can write through. React reads a `null` ref as none at all,\n// and `refOf` turns one into `undefined` before a merge sees it.\ntype AttachableRef = NonNullable<Ref<Element>>\n\ntype Handler = (...args: ReadonlyArray<unknown>) => unknown\n\ntype IntrinsicTag = keyof JSX.IntrinsicElements\n\n/**\n * The props of a component rendered through {@link useRender}: everything the\n * element accepts, plus `render`.\n */\ntype RenderComponentProps<Tag extends IntrinsicTag> =\n  ComponentPropsWithRef<Tag> & {\n    /**\n     * Replaces the element the component renders by default: another tag, as\n     * `render={<h2 />}`, or a function returning the element to render, given\n     * the props the component would have put on its own.\n     */\n    render?: RenderProp | undefined\n  }\n\n/**\n * What a `render` function is handed: the element's props, merged and ready\n * to spread onto whatever element it returns. `any` on purpose, in the one\n * place it appears — the function may return any element, and a ref typed for\n * one of them would refuse every other.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- see above\ntype RenderFunctionProps = HTMLAttributes<any> & { ref?: Ref<any> | undefined }\n\ntype RenderProp = ((props: RenderFunctionProps) => ReactElement) | ReactElement\n\ninterface UseRenderParameters {\n  /**\n   * The tag rendered when `render` is not given.\n   * @default 'div'\n   */\n  defaultTagName?: IntrinsicTag | undefined\n  /** The props to put on whichever element ends up rendered. */\n  props?: Record<string, unknown> | undefined\n  render?: RenderProp | undefined\n}\n\nfunction attach(ref: AttachableRef, node: Element | null): () => void {\n  if (typeof ref === 'function') {\n    const cleanup = ref(node)\n    return typeof cleanup === 'function'\n      ? cleanup\n      : () => {\n          ref(null)\n        }\n  }\n  ref.current = node\n  return () => {\n    ref.current = null\n  }\n}\n\nfunction isHandler(value: unknown): value is Handler {\n  return typeof value === 'function'\n}\n\nfunction isHandlerKey(key: string) {\n  return /^on[A-Z]/u.test(key)\n}\n\nfunction isRefCallback(value: unknown): value is RefCallback<Element> {\n  return typeof value === 'function'\n}\n\nfunction isRefObject(value: unknown): value is RefObject<Element | null> {\n  return typeof value === 'object' && value !== null && 'current' in value\n}\n\n// undefined rather than '' when there is nothing to say, so an element with\n// no classes on either side renders without a class attribute at all.\nfunction joinClassNames(...names: ReadonlyArray<string | undefined>) {\n  return names.filter(Boolean).join(' ') || undefined\n}\n\n/**\n * The component's props over the element's own. The element wins a plain\n * conflict — it is the more specific of the two — while class names, styles\n * and handlers are combined rather than chosen between. `ref` is left out:\n * the hook merges the two refs itself.\n */\nfunction mergeElementProps(\n  ours: Record<string, unknown>,\n  theirs: Record<string, unknown>,\n) {\n  const merged: Record<string, unknown> = { ...ours, ...theirs }\n\n  merged.className = joinClassNames(\n    stringOf(ours.className),\n    stringOf(theirs.className),\n  )\n  merged.style = mergeStyleObjects(styleOf(ours.style), styleOf(theirs.style))\n\n  for (const key of Object.keys(theirs)) {\n    const own = ours[key]\n    const their = theirs[key]\n    if (isHandlerKey(key) && isHandler(own) && isHandler(their)) {\n      // The element's own handler runs first, as the more specific one.\n      merged[key] = (...args: ReadonlyArray<unknown>) => {\n        their(...args)\n        own(...args)\n      }\n    }\n  }\n\n  delete merged.ref\n  return merged\n}\n\n/**\n * One ref that feeds both, or whichever one there is. Attaching through a\n * callback lets each side keep its own cleanup: React 19 calls a callback\n * ref's returned function on detach in place of calling it with `null`, so\n * the merged callback returns one that does the same for each of the two.\n */\nfunction mergeRefs(\n  a: AttachableRef | undefined,\n  b: AttachableRef | undefined,\n): AttachableRef | undefined {\n  if (a === undefined) {\n    return b\n  }\n  if (b === undefined) {\n    return a\n  }\n  return (node: Element | null) => {\n    const detachA = attach(a, node)\n    const detachB = attach(b, node)\n    return () => {\n      detachA()\n      detachB()\n    }\n  }\n}\n\nfunction mergeStyleObjects(\n  ours: CSSProperties | undefined,\n  theirs: CSSProperties | undefined,\n) {\n  if (ours === undefined && theirs === undefined) {\n    return undefined\n  }\n  return { ...ours, ...theirs }\n}\n\nfunction refOf(value: unknown): AttachableRef | undefined {\n  if (isRefCallback(value) || isRefObject(value)) {\n    return value\n  }\n  return undefined\n}\n\nfunction stringOf(value: unknown) {\n  return typeof value === 'string' ? value : undefined\n}\n\nfunction styleOf(value: unknown) {\n  return typeof value === 'object' && value !== null\n    ? (value as CSSProperties)\n    : undefined\n}\n\n/**\n * Renders a component's element, or whatever its `render` prop asks for\n * instead.\n *\n * `render` is either a React element, cloned with the component's props\n * merged over its own — class names joined, styles merged, event handlers\n * chained, the element's own value winning any other conflict — or a function\n * handed those merged props to return an element of its choosing. Without one,\n * `defaultTagName` is rendered. A default `button` is given `type=\"button\"`,\n * since a bare one submits any form it happens to sit in.\n *\n * The element form is the point of owning this. React Aria's own `render`\n * is a function that must return the element the component would have\n * rendered itself, which suits its interactive components and nothing else;\n * the non-interactive ones here take `render={<h2 />}`, and keeping that\n * contract in a hook of the library's own is what lets them stay put\n * whichever behaviour library sits underneath the rest.\n */\nfunction useRender({\n  defaultTagName = 'div',\n  props = {},\n  render,\n}: UseRenderParameters): ReactElement {\n  const element = isValidElement<Record<string, unknown>>(render)\n    ? render\n    : undefined\n\n  // Both refs, when there are two, have to land on one node. The merged\n  // callback is memoised so React does not detach and re-attach it on every\n  // render — a new identity each time would.\n  //\n  // The dependencies are the props the refs are read from rather than the\n  // refs themselves. React writes through a ref object, so the compiler reads\n  // one as a value that may be modified later and declines to preserve a\n  // memoisation keyed on it — which, under the panic threshold this lands\n  // beside, fails the build. A prop it can prove holds still.\n  const ref = useMemo(\n    () => mergeRefs(refOf(props.ref), refOf(element?.props.ref)),\n    [props.ref, element?.props.ref],\n  )\n\n  if (element !== undefined) {\n    return cloneElement(element, {\n      ...mergeElementProps(props, element.props),\n      ref,\n    })\n  }\n\n  if (typeof render === 'function') {\n    return render({ ...props, ref } as RenderFunctionProps)\n  }\n\n  return createElement(\n    defaultTagName,\n    defaultTagName === 'button'\n      ? { type: 'button', ...props, ref }\n      : { ...props, ref },\n  )\n}\n\nexport type { RenderComponentProps, RenderFunctionProps, UseRenderParameters }\n\nexport { useRender }\n"],"mappings":";;;AAyDA,SAAS8B,OAAOL,KAAoBM,MAAkC;CACpE,IAAI,OAAON,QAAQ,YAAY;EAC7B,MAAMO,UAAUP,IAAIM,IAAI;EACxB,OAAO,OAAOC,YAAY,aACtBA,gBACM;GACJP,IAAI,IAAI;EACV;CACN;CACAA,IAAIQ,UAAUF;CACd,aAAa;EACXN,IAAIQ,UAAU;CAChB;AACF;AAEA,SAASC,UAAUC,OAAkC;CACnD,OAAO,OAAOA,UAAU;AAC1B;AAEA,SAASC,aAAaC,KAAa;CACjC,OAAO,YAAYC,KAAKD,GAAG;AAC7B;AAEA,SAASE,cAAcJ,OAA+C;CACpE,OAAO,OAAOA,UAAU;AAC1B;AAEA,SAASK,YAAYL,OAAoD;CACvE,OAAO,OAAOA,UAAU,YAAYA,UAAU,QAAQ,aAAaA;AACrE;AAIA,SAASM,eAAe,GAAGC,OAA0C;CACnE,OAAOA,MAAMC,OAAOC,OAAO,CAAC,CAACC,KAAK,GAAG,KAAKC,KAAAA;AAC5C;;;;;;;AAQA,SAASC,kBACPC,MACAC,QACA;CACA,MAAMC,SAAkC;EAAE,GAAGF;EAAM,GAAGC;CAAO;CAE7DC,OAAOC,YAAYV,eACjBW,SAASJ,KAAKG,SAAS,GACvBC,SAASH,OAAOE,SAAS,CAC3B;CACAD,OAAOG,QAAQC,kBAAkBC,QAAQP,KAAKK,KAAK,GAAGE,QAAQN,OAAOI,KAAK,CAAC;CAE3E,KAAK,MAAMhB,OAAOmB,OAAOC,KAAKR,MAAM,GAAG;EACrC,MAAMS,MAAMV,KAAKX;EACjB,MAAMsB,QAAQV,OAAOZ;EACrB,IAAID,aAAaC,GAAG,KAAKH,UAAUwB,GAAG,KAAKxB,UAAUyB,KAAK,GAExDT,OAAOb,QAAQ,GAAGrB,SAAiC;GACjD2C,MAAM,GAAG3C,IAAI;GACb0C,IAAI,GAAG1C,IAAI;EACb;CAEJ;CAEA,OAAOkC,OAAOzB;CACd,OAAOyB;AACT;;;;;;;AAQA,SAASU,UACPC,GACAC,GAC2B;CAC3B,IAAID,MAAMf,KAAAA,GACR,OAAOgB;CAET,IAAIA,MAAMhB,KAAAA,GACR,OAAOe;CAET,QAAQ9B,SAAyB;EAC/B,MAAMgC,UAAUjC,OAAO+B,GAAG9B,IAAI;EAC9B,MAAMiC,UAAUlC,OAAOgC,GAAG/B,IAAI;EAC9B,aAAa;GACXgC,QAAQ;GACRC,QAAQ;EACV;CACF;AACF;AAEA,SAASV,kBACPN,MACAC,QACA;CACA,IAAID,SAASF,KAAAA,KAAaG,WAAWH,KAAAA,GACnC;CAEF,OAAO;EAAE,GAAGE;EAAM,GAAGC;CAAO;AAC9B;AAEA,SAASgB,MAAM9B,OAA2C;CACxD,IAAII,cAAcJ,KAAK,KAAKK,YAAYL,KAAK,GAC3C,OAAOA;AAGX;AAEA,SAASiB,SAASjB,OAAgB;CAChC,OAAO,OAAOA,UAAU,WAAWA,QAAQW,KAAAA;AAC7C;AAEA,SAASS,QAAQpB,OAAgB;CAC/B,OAAO,OAAOA,UAAU,YAAYA,UAAU,OACzCA,QACDW,KAAAA;AACN;;;;;;;;;;;;;;;;;;;AAoBA,SAAAoB,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAmB,MAAA,EAAAzC,gBAAA0C,IAAA5C,OAAA6C,IAAAjD,WAAA6C;CACjB,MAAAvC,iBAAA0C,OAAAxB,KAAAA,IAAA,QAAAwB;CAAsB,IAAAE;CAAA,IAAAJ,EAAA,OAAAG,IAAA;EACtBC,KAAAD,OAAAzB,KAAAA,IAAA,CAAS,IAATyB;EAAUH,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAV,MAAA1C,QAAA8C;CAGA,MAAAC,UAAgB/D,eAAwCY,MAE5C,IAFIA,SAAAwB,KAAAA;CAeF2B,SAAO/C,MAAWD;CAAA,IAAAiD;CAAA,IAAAN,EAAA,OAAAK,SAAA/C,MAAAD,OAAA2C,EAAA,OAAA1C,MAAAD,KAAA;EADxBiD,KAAAd,UAAUK,MAAMvC,MAAKD,GAAI,GAAGwC,MAAMQ,SAAO/C,MAAWD,GAAA,CAAC;EAAC2C,EAAA,KAAAK,SAAA/C,MAAAD;EAAA2C,EAAA,KAAA1C,MAAAD;EAAA2C,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAD9D,MAAA3C,MACQiD;CAIR,IAAID,YAAY3B,KAAAA,GAAS;EAAA,IAAA6B;EAAA,IAAAP,EAAA,OAAAK,WAAAL,EAAA,OAAA1C,SAAA0C,EAAA,OAAA3C,KAAA;GAChBkD,KAAAnE,aAAaiE,SAAS;IAAA,GACxB1B,kBAAkBrB,OAAO+C,QAAO/C,KAAM;IAACD;GAE5C,CAAC;GAAC2C,EAAA,KAAAK;GAAAL,EAAA,KAAA1C;GAAA0C,EAAA,KAAA3C;GAAA2C,EAAA,KAAAO;EAAA,OAAAA,KAAAP,EAAA;EAAA,OAHKO;CAGL;CAGJ,IAAI,OAAOrD,WAAW,YAAU;EAAA,IAAAqD;EAAA,IAAAP,EAAA,OAAA1C,SAAA0C,EAAA,QAAA3C,OAAA2C,EAAA,QAAA9C,QAAA;GACvBqD,KAAArD,OAAO;IAAA,GAAKI;IAAKD;GAAM,CAAwB;GAAC2C,EAAA,KAAA1C;GAAA0C,EAAA,MAAA3C;GAAA2C,EAAA,MAAA9C;GAAA8C,EAAA,MAAAO;EAAA,OAAAA,KAAAP,EAAA;EAAA,OAAhDO;CAAgD;CACxD,IAAAA;CAAA,IAAAP,EAAA,QAAAxC,kBAAAwC,EAAA,QAAA1C,SAAA0C,EAAA,QAAA3C,KAAA;EAEMkD,KAAAlE,cACLmB,gBACAA,mBAAmB,WAAnB;GAAAgD,MACY;GAAQ,GAAKlD;GAAKD;EACV,IAFpB;GAAA,GAESC;GAAKD;EAAM,CACtB;EAAC2C,EAAA,MAAAxC;EAAAwC,EAAA,MAAA1C;EAAA0C,EAAA,MAAA3C;EAAA2C,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OALMO;AAKN"}

package/dist/row/styles.js

@@ -19,6 +19,14 @@ const rowStyles = {
 		kWkggS: "xjbqb8w",
 		kMwMTN: "x1xj74d8",
 		kkrTdU: "x1h6gzvc",
+		kAXs8y: "xr5dkdi",
+		$$css: true
+	},
+	dragging: {
+		kWkggS: "x14s9m32",
+		kKwaWg: "xdiex0u",
+		kGVxlE: "x4r79n0",
+		kY2c9j: "x1vjfegm",
 		$$css: true
 	},
 	drawer: {
@@ -28,9 +36,17 @@ const rowStyles = {
 		kAzted: "xyax5pk",
 		$$css: true
 	},
+	dropTarget: {
+		kKwaWg: "xu73ib2",
+		kjBf7l: "xrgy624 x1x84bn5",
+		kInvED: "x2ssjo2",
+		k3XXqK: "xaatb59",
+		kMeerF: "x1de99jn",
+		$$css: true
+	},
 	focusVisible: {
 		kKwaWg: "x17vw94z",
-		kjBf7l: "xrgy624",
+		kjBf7l: "xrgy624 x1v8yhc2",
 		kInvED: "x2ssjo2",
 		k3XXqK: "xaatb59",
 		kMeerF: "x1de99jn",
@@ -62,7 +78,6 @@ const rowStyles = {
 		$$css: true
 	},
 	interactive: {
-		kWkggS: "x83qkoq x1p2om7n xjbqb8w",
 		kkrTdU: "x1ypdohk",
 		kVVagm: "xln7xf2",
 		kjBf7l: "xrgy624",
@@ -71,6 +86,10 @@ const rowStyles = {
 		kMeerF: "x1de99jn",
 		$$css: true
 	},
+	interactiveLayers: {
+		kWkggS: "x83qkoq x1yl1wq7 xjqqt44 xjbqb8w",
+		$$css: true
+	},
 	list: {
 		kAzted: "xyax5pk",
 		$$css: true
@@ -101,18 +120,21 @@ const rowStyles = {
 		$$css: true
 	},
 	selectedDrawer: {
-		kWkggS: "x15dekr4",
-		kMwMTN: "x1sawysd",
+		kWkggS: "x15dekr4 x1jzqe4",
+		kMwMTN: "x1sawysd x1k5gbb1",
+		kAXs8y: "x1g12otp",
 		$$css: true
 	},
 	selectedList: {
-		kWkggS: "xp89om9",
-		kMwMTN: "xscdzaa",
+		kWkggS: "xp89om9 x1jzqe4",
+		kMwMTN: "xscdzaa x1k5gbb1",
+		kAXs8y: "x1g12otp",
 		$$css: true
 	},
 	selectedMenu: {
-		kWkggS: "xs6yvni",
-		kMwMTN: "x3cbcwg",
+		kWkggS: "xs6yvni x1jzqe4",
+		kMwMTN: "x3cbcwg x1k5gbb1",
+		kAXs8y: "x1g12otp",
 		$$css: true
 	},
 	slot: {
@@ -135,15 +157,15 @@ const rowStyles = {
 		$$css: true
 	},
 	supportingSelectedDrawer: {
-		kMwMTN: "x1sawysd",
+		kMwMTN: "x1sawysd x1k5gbb1",
 		$$css: true
 	},
 	supportingSelectedList: {
-		kMwMTN: "xscdzaa",
+		kMwMTN: "xscdzaa x1k5gbb1",
 		$$css: true
 	},
 	supportingSelectedMenu: {
-		kMwMTN: "x3cbcwg",
+		kMwMTN: "x3cbcwg x1k5gbb1",
 		$$css: true
 	},
 	threeLine: {

package/dist/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","radii","sizing","spacing","stateLayerOpacity","typography","rowStyles","base","kGNEyG","kWkggS","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kOIVth","kzqmXN","k8WAf4","kg3NbH","kVAEAm","k9WMMc","$$css","disabled","kkrTdU","drawer","kaIpWk","kUOVxO","kAzted","focusVisible","kKwaWg","kjBf7l","kInvED","k3XXqK","kMeerF","headlineEmphasis","k63SB2","headlineList","kMv6JI","kGuDYH","kb6lSQ","kLWn49","headlineMenu","hovered","interactive","kVVagm","list","main","kXwgrk","kzQI83","k7Eaqz","menu","overline","pressed","selectedDrawer","selectedList","selectedMenu","slot","kmuXW","supporting","supportingInherit","supportingSelectedDrawer","supportingSelectedList","supportingSelectedMenu","threeLine","twoLine"],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, 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.\nconst rowStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  drawer: {\n    kaIpWk: \"x1dkaolv\",\n    kzqmXN: \"x14atkfc\",\n    kUOVxO: \"xd2r6sq\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  focusVisible: {\n    kKwaWg: \"x17vw94z\",\n    kjBf7l: \"xrgy624\",\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    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  hovered: {\n    kKwaWg: \"xbmfk57\",\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  interactive: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\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    $$css: true\n  },\n  pressed: {\n    kKwaWg: \"xdiex0u\",\n    $$css: true\n  },\n  selectedDrawer: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  selectedList: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  selectedMenu: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\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    $$css: true\n  },\n  supportingInherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  supportingSelectedDrawer: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  supportingSelectedList: {\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  supportingSelectedMenu: {\n    kMwMTN: \"x3cbcwg\",\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};\nexport { rowStyles };"],"mappings":";AAoCA,MAAMO,YAAY;CAChBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRZ,QAAQ;EACRG,QAAQ;EACRU,QAAQ;EACRF,OAAO;CACT;CACAG,QAAQ;EACNC,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRZ,OAAO;CACT;CACAa,kBAAkB;EAChBC,QAAQ;EACRd,OAAO;CACT;CACAe,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,cAAc;EACZJ,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAqB,SAAS;EACPb,QAAQ;EACRN,QAAQ;EACRF,OAAO;CACT;CACAsB,aAAa;EACXjC,QAAQ;EACRa,QAAQ;EACRqB,QAAQ;EACRd,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRZ,OAAO;CACT;CACAwB,MAAM;EACJlB,QAAQ;EACRN,OAAO;CACT;CACAyB,MAAM;EACJhC,QAAQ;EACRiC,QAAQ;EACRC,QAAQ;EACRjC,QAAQ;EACRkC,QAAQ;EACR5B,OAAO;CACT;CACA6B,MAAM;EACJvB,QAAQ;EACRN,OAAO;CACT;CACA8B,UAAU;EACRtC,QAAQ;EACRwB,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACA+B,SAAS;EACPvB,QAAQ;EACRR,OAAO;CACT;CACAgC,gBAAgB;EACd3C,QAAQ;EACRG,QAAQ;EACRQ,OAAO;CACT;CACAiC,cAAc;EACZ5C,QAAQ;EACRG,QAAQ;EACRQ,OAAO;CACT;CACAkC,cAAc;EACZ7C,QAAQ;EACRG,QAAQ;EACRQ,OAAO;CACT;CACAmC,MAAM;EACJ/C,QAAQ;EACRK,QAAQ;EACR2C,OAAO;EACPpC,OAAO;CACT;CACAqC,YAAY;EACV7C,QAAQ;EACRwB,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAsC,mBAAmB;EACjB9C,QAAQ;EACRQ,OAAO;CACT;CACAuC,0BAA0B;EACxB/C,QAAQ;EACRQ,OAAO;CACT;CACAwC,wBAAwB;EACtBhD,QAAQ;EACRQ,OAAO;CACT;CACAyC,wBAAwB;EACtBjD,QAAQ;EACRQ,OAAO;CACT;CACA0C,WAAW;EACTtD,QAAQ;EACRkB,QAAQ;EACRN,OAAO;CACT;CACA2C,SAAS;EACPrC,QAAQ;EACRN,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","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","$$css","disabled","kkrTdU","kAXs8y","dragging","kKwaWg","kGVxlE","kY2c9j","drawer","kaIpWk","kUOVxO","kAzted","dropTarget","kjBf7l","kInvED","k3XXqK","kMeerF","focusVisible","headlineEmphasis","k63SB2","headlineList","kMv6JI","kGuDYH","kb6lSQ","kLWn49","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"],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\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\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\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  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    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\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    $$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    $$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};\nexport { rowStyles };"],"mappings":";AAiDA,MAAMU,YAAY;CAChBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRZ,QAAQ;EACRG,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,UAAU;EACRf,QAAQ;EACRgB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRP,OAAO;CACT;CACAQ,QAAQ;EACNC,QAAQ;EACRd,QAAQ;EACRe,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAY,YAAY;EACVP,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACAiB,cAAc;EACZZ,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACAkB,kBAAkB;EAChBC,QAAQ;EACRnB,OAAO;CACT;CACAoB,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRxB,OAAO;CACT;CACAyB,cAAc;EACZJ,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRxB,OAAO;CACT;CACA0B,SAAS;EACPrB,QAAQ;EACRH,QAAQ;EACRF,OAAO;CACT;CACA2B,aAAa;EACXzB,QAAQ;EACR0B,QAAQ;EACRf,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACA6B,mBAAmB;EACjBxC,QAAQ;EACRW,OAAO;CACT;CACA8B,MAAM;EACJnB,QAAQ;EACRX,OAAO;CACT;CACA+B,MAAM;EACJtC,QAAQ;EACRuC,QAAQ;EACRC,QAAQ;EACRvC,QAAQ;EACRwC,QAAQ;EACRlC,OAAO;CACT;CACAmC,MAAM;EACJxB,QAAQ;EACRX,OAAO;CACT;CACAoC,UAAU;EACR5C,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRxB,OAAO;CACT;CACAqC,SAAS;EACPhC,QAAQ;EACRL,OAAO;CACT;CACAsC,gBAAgB;EACdjD,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRH,OAAO;CACT;CACAuC,cAAc;EACZlD,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRH,OAAO;CACT;CACAwC,cAAc;EACZnD,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRH,OAAO;CACT;CACAyC,MAAM;EACJrD,QAAQ;EACRK,QAAQ;EACRiD,OAAO;EACP1C,OAAO;CACT;CACA2C,YAAY;EACVnD,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRxB,OAAO;CACT;CACA4C,mBAAmB;EACjBpD,QAAQ;EACRQ,OAAO;CACT;CACA6C,0BAA0B;EACxBrD,QAAQ;EACRQ,OAAO;CACT;CACA8C,wBAAwB;EACtBtD,QAAQ;EACRQ,OAAO;CACT;CACA+C,wBAAwB;EACtBvD,QAAQ;EACRQ,OAAO;CACT;CACAgD,WAAW;EACT5D,QAAQ;EACRuB,QAAQ;EACRX,OAAO;CACT;CACAiD,SAAS;EACPtC,QAAQ;EACRX,OAAO;CACT;AACF"}

package/dist/styles/focus.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus.js","names":["stylex","colors","focus","ring","kjBf7l","kInvED","k3XXqK","kMeerF","$$css","ringVisible"],"sources":["../../src/styles/focus.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors } from '../tokens/design.tokens.stylex';\n\n// The focus ring, drawn once. Eighteen components spelled the same four\n// declarations out, which made a change to the ring eighteen edits with\n// nothing failing if one were missed.\n//\n// Only these two forms are shared, and the difference is who decides the\n// element has focus. `ring` lets the browser decide, through\n// `:focus-visible`, which is what a natively focusable element wants.\n// `ringVisible` is always solid, for a component that computes focus from\n// React Aria's render state and applies this style only when that state says\n// so — a checkbox, radio or switch, where the ring belongs on the drawn\n// control rather than on the input that actually holds focus.\n//\n// What deliberately stays with its component is every ring that differs, and\n// each of those already carries a comment saying why:\n//\n// - A different colour, because the surface underneath is not the default\n//   one: Snackbar's action and close, and Chip's remove.\n// - A negative offset, drawing the ring inside the element rather than\n//   around it: DropZone, NumberField, Table, a Tab, the shared row, and the\n//   body of a Dialog or a Sheet while it scrolls.\n// - An offset of its own, sized to what the ring surrounds: the colour\n//   thumb at 4px, the swatch at 6px, Chip's remove at 1px.\n// - A base of `outlineStyle: 'none'` that a separate style turns solid,\n//   which is a different mechanism rather than a different value: the slider\n//   thumb, the colour swatch picker, and the shared colour styles.\nconst focus = {\n  ring: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  ringVisible: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  }\n};\nexport { focus };"],"mappings":";AA6BA,MAAME,QAAQ;CACZC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,aAAa;EACXL,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;AACF"}
+{"version":3,"file":"focus.js","names":["stylex","colors","focus","ring","kjBf7l","kInvED","k3XXqK","kMeerF","$$css","ringVisible"],"sources":["../../src/styles/focus.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors } from '../tokens/design.tokens.stylex';\n\n// The focus ring, drawn once. Eighteen components spelled the same four\n// declarations out, which made a change to the ring eighteen edits with\n// nothing failing if one were missed.\n//\n// Only these two forms are shared, and the difference is who decides the\n// element has focus. `ring` lets the browser decide, through\n// `:focus-visible`, which is what a natively focusable element wants.\n// `ringVisible` is always solid, for a component that computes focus from\n// React Aria's render state and applies this style only when that state says\n// so — a checkbox, radio or switch, where the ring belongs on the drawn\n// control rather than on the input that actually holds focus.\n//\n// What deliberately stays with its component is every ring that differs, and\n// each of those already carries a comment saying why:\n//\n// - A different colour, because the surface underneath is not the default\n//   one: Snackbar's action and close, and Chip's remove.\n// - A negative offset, drawing the ring inside the element rather than\n//   around it: DropZone, NumberField, Table, a Tab and its panel, the shared\n//   row, and the body of a Dialog or a Sheet while it scrolls.\n// - An offset of its own, sized to what the ring surrounds: the colour\n//   thumb at 4px, the swatch at 6px, Chip's remove at 1px.\n// - A base of `outlineStyle: 'none'` that a separate style turns solid,\n//   which is a different mechanism rather than a different value: the slider\n//   thumb, the colour swatch picker, and the shared colour styles.\n// - An `outlineStyle` keyed on a breakpoint, for a ring that moves from one\n//   element to another as the window widens: a navigation bar's destination.\nconst focus = {\n  ring: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  ringVisible: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  }\n};\nexport { focus };"],"mappings":";AA+BA,MAAME,QAAQ;CACZC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,aAAa;EACXL,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;AACF"}

package/dist/styles/icon-button.js

@@ -2,7 +2,7 @@
 const iconButton = {
 	chrome: {
 		kGNEyG: "x6s0dn4",
-		kWkggS: "x1dg9itu x1728qcm xjbqb8w",
+		kWkggS: "xjbqb8w",
 		kZKoxP: "x1rv7mn0",
 		kaIpWk: "x1dkaolv",
 		kMzoRj: "xc342km",
@@ -21,6 +21,14 @@ const iconButton = {
 		kMwMTN: "x1gpw424",
 		kkrTdU: "xt0e3qv",
 		$$css: true
+	},
+	chromeHovered: {
+		kWkggS: "x14noynh",
+		$$css: true
+	},
+	chromePressed: {
+		kWkggS: "x123fei2",
+		$$css: true
 	}
 };
 //#endregion

package/dist/styles/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","names":["stylex","colors","radii","sizing","stateLayerOpacity","iconButton","chrome","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kzqmXN","kjj79g","kmVPX3","$$css","chromeDisabled"],"sources":["../../src/styles/icon-button.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, stateLayerOpacity } from '../tokens/design.tokens.stylex';\n\n// The icon buttons page's 40dp square and its state layer, drawn directly on\n// a button rather than through the `IconButton` component.\n//\n// Two places need that, and both said so in the same words while keeping\n// their own copy: a picker's trigger and the chevrons that move a calendar's\n// month. Neither can reach for `IconButton`, because React Aria carries each\n// of them on its own `Button` — the trigger through a picker's context, the\n// chevrons through a calendar's slots — so the chrome has to be drawn onto\n// the element React Aria renders.\n//\n// What each keeps is what it does not share. A calendar's chevron sits in a\n// 48dp column, so it adds the 4dp either side. Both take `chromeDisabled`\n// when React Aria disables them — a trigger when the field around it is\n// disabled, a chevron when there is no month to move to — and each reads\n// that from its own render state.\n//\n// This is deliberately narrow. Five other buttons in the library draw a bare\n// icon — a tree's caret, a navigation tree's, a combo box's toggle, a chip's\n// remove and `IconButton` itself — and each differs in size, content colour,\n// state-layer semantics or focus-ring offset, with a comment recording why.\n// At most eleven of these seventeen declarations survive into any of them, so\n// composing this and overriding the rest would hide those decisions rather\n// than record them.\nconst iconButton = {\n  chrome: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1eujcsb\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  chromeDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1gpw424\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  }\n};\nexport { iconButton };"],"mappings":";AA2BA,MAAMK,aAAa;CACjBC,QAAQ;EACNC,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,gBAAgB;EACdb,QAAQ;EACRK,QAAQ;EACRC,QAAQ;EACRM,OAAO;CACT;AACF"}
+{"version":3,"file":"icon-button.js","names":["stylex","colors","radii","sizing","stateLayerOpacity","iconButton","chrome","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kzqmXN","kjj79g","kmVPX3","$$css","chromeDisabled","chromeHovered","chromePressed"],"sources":["../../src/styles/icon-button.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, stateLayerOpacity } from '../tokens/design.tokens.stylex';\n\n// The icon buttons page's 40dp square and its state layer, drawn directly on\n// a button rather than through the `IconButton` component.\n//\n// Two places need that, and both said so in the same words while keeping\n// their own copy: a picker's trigger and the chevrons that move a calendar's\n// month. Neither can reach for `IconButton`, because React Aria carries each\n// of them on its own `Button` — the trigger through a picker's context, the\n// chevrons through a calendar's slots — so the chrome has to be drawn onto\n// the element React Aria renders.\n//\n// What each keeps is what it does not share. A calendar's chevron sits in a\n// 48dp column, so it adds the 4dp either side. Both take `chromeDisabled`\n// when React Aria disables them — a trigger when the field around it is\n// disabled, a chevron when there is no month to move to — and each reads\n// that from its own render state, along with the hover and press that pick\n// `chromeHovered` and `chromePressed`. Those come from React Aria rather\n// than `:hover` and `:active`, for Button's reasons — see its header: a\n// hover layer stayed on after a tap, and no pressed layer showed for a press\n// made from the keyboard.\n//\n// This is deliberately narrow. Five other buttons in the library draw a bare\n// icon — a tree's caret, a navigation tree's, a combo box's toggle, a chip's\n// remove and `IconButton` itself — and each differs in size, content colour,\n// state-layer semantics or focus-ring offset, with a comment recording why.\n// At most eleven of these seventeen declarations survive into any of them, so\n// composing this and overriding the rest would hide those decisions rather\n// than record them.\nconst iconButton = {\n  chrome: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1eujcsb\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  chromeDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1gpw424\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  chromeHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  chromePressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  }\n};\nexport { iconButton };"],"mappings":";AA+BA,MAAMK,aAAa;CACjBC,QAAQ;EACNC,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,gBAAgB;EACdb,QAAQ;EACRK,QAAQ;EACRC,QAAQ;EACRM,OAAO;CACT;CACAE,eAAe;EACbd,QAAQ;EACRY,OAAO;CACT;CACAG,eAAe;EACbf,QAAQ;EACRY,OAAO;CACT;AACF"}

package/dist/styles/overlay.js

@@ -45,6 +45,7 @@ const overlay = {
 		kB7OPa: "x9f619",
 		kMwMTN: "x139gbkf",
 		kORKVm: "x1odjw0f",
+		kZeWKH: "xish69e",
 		$$css: true
 	},
 	popupDialog: {

package/dist/styles/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":["PopoverRenderProps","stylex","colors","motion","radii","shadows","spacing","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","popupDialog","kOIVth","scrim","kpwlN0","kVAEAm","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';\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// 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    $$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    $$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/** Which side of the anchor a surface opens on. */\ntype OverlaySide = 'bottom' | 'left' | 'right' | '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.\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":";AAwCA,MAAMU,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;EACR1B,OAAO;CACT;CACA2B,aAAa;EACXhB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRe,QAAQ;EACR5B,OAAO;CACT;CACA6B,OAAO;EACLb,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,QAAQ;EACRmB,QAAQ;EACRC,QAAQ;EACR/B,OAAO;CACT;AACF;AAOA,MAAMgC,UAAU;CACdC,QAAQpC,QAAQM;CAChB+B,QAAQrC,QAAQM;CAChBgC,MAAMtC,QAAQK;CACdkC,OAAOvC,QAAQI;CACfoC,KAAKxC,QAAQC;AACf;;;;;;;;;;;AAkBA,SAAS0C,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","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","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';\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// 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    $$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/** Which side of the anchor a surface opens on. */\ntype OverlaySide = 'bottom' | 'left' | 'right' | '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.\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":";AAwCA,MAAMU,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;EACRhC,OAAO;CACT;AACF;AAOA,MAAMiC,UAAU;CACdC,QAAQrC,QAAQM;CAChBgC,QAAQtC,QAAQM;CAChBiC,MAAMvC,QAAQK;CACdmC,OAAOxC,QAAQI;CACfqC,KAAKzC,QAAQC;AACf;;;;;;;;;;;AAkBA,SAAS2C,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"}

package/dist/styles/picker.js

@@ -33,7 +33,7 @@ const picker = {
 	}
 };
 function triggerClassName(state) {
-	return props(iconButton.chrome, focus.ring, state.isDisabled && iconButton.chromeDisabled).className ?? "";
+	return props(iconButton.chrome, focus.ring, state.isHovered && iconButton.chromeHovered, state.isPressed && iconButton.chromePressed, state.isDisabled && iconButton.chromeDisabled).className ?? "";
 }
 //#endregion
 export { picker, triggerClassName };

package/dist/styles/picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"picker.js","names":["stylex","colors","media","shadows","spacing","focus","iconButton","picker","group","kGNEyG","kB7OPa","k1xSpc","kOIVth","kzqmXN","k3XXqK","$$css","popover","kZKoxP","kGVxlE","krVfgx","k87sOh","kt4wiu","kLqNvP","kogj98","kskxy","ks0D6T","kVAEAm","triggerGlyph","triggerClassName","state","isDisabled","props","chrome","ring","chromeDisabled","className","stylex.props"],"sources":["../../src/styles/picker.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, shadows, spacing } from '../tokens/design.tokens.stylex';\nimport { focus } from './focus';\nimport { iconButton } from './icon-button';\n\n// What a date picker and a date range picker draw in common: the line the\n// segments and the trigger share, the trigger itself, and the surface the\n// calendar opens on. Both put the same three on screen, and the breakpoint\n// swap below is why they are here rather than written twice — a docked\n// picker and a range picker that disagreed about where the modal sits would\n// be two bugs rather than one.\n//\n// In `src/styles` rather than a `src/picker` of its own, since this is\n// styles more than one component draws, which is what that directory holds.\n// Geometry belonging to one picker alone stays with that picker.\n\nconst picker = {\n  group: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kzqmXN: \"xh8yej3\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popover: {\n    kZKoxP: \"x1poebcc\",\n    kGVxlE: \"x1os83gw x1l41d60\",\n    kzqmXN: \"xpxzbr4\",\n    krVfgx: \"xudx362\",\n    k87sOh: \"xbvrusa\",\n    kt4wiu: \"x1v0tev1\",\n    kLqNvP: \"x12sfaok\",\n    kogj98: \"xucn3ve\",\n    kskxy: \"xmjxpzh\",\n    ks0D6T: \"x1x1rfll x1493c6o\",\n    kVAEAm: \"x1mesnot\",\n    $$css: true\n  },\n  triggerGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  }\n};\n\n// The trigger's classes, from React Aria's own render state. A picker's\n// trigger is disabled by the field around it rather than by a prop of its\n// own, so the fade comes off the state React Aria hands the className. It is\n// the same 38% the segments beside it take, so one disabled field fades as a\n// whole.\nfunction triggerClassName(state: {\n  isDisabled: boolean;\n}) {\n  return stylex.props(iconButton.chrome, focus.ring, state.isDisabled && iconButton.chromeDisabled).className ?? '';\n}\nexport { picker, triggerClassName };"],"mappings":";;;;AAiBA,MAAMO,SAAS;CACbC,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRL,QAAQ;EACRM,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAY,cAAc;EACZV,QAAQ;EACRJ,QAAQ;EACRE,OAAO;CACT;AACF;AAOA,SAASa,iBAAiBC,OAEvB;CACD,OAAO7B,MAAaM,WAAW0B,QAAQ3B,MAAM4B,MAAMJ,MAAMC,cAAcxB,WAAW4B,cAAc,CAAC,CAACC,aAAa;AACjH"}
+{"version":3,"file":"picker.js","names":["stylex","colors","media","shadows","spacing","focus","iconButton","picker","group","kGNEyG","kB7OPa","k1xSpc","kOIVth","kzqmXN","k3XXqK","$$css","popover","kZKoxP","kGVxlE","krVfgx","k87sOh","kt4wiu","kLqNvP","kogj98","kskxy","ks0D6T","kVAEAm","triggerGlyph","triggerClassName","state","isDisabled","isHovered","isPressed","props","chrome","ring","chromeHovered","chromePressed","chromeDisabled","className","stylex.props"],"sources":["../../src/styles/picker.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, shadows, spacing } from '../tokens/design.tokens.stylex';\nimport { focus } from './focus';\nimport { iconButton } from './icon-button';\n\n// What a date picker and a date range picker draw in common: the line the\n// segments and the trigger share, the trigger itself, and the surface the\n// calendar opens on. Both put the same three on screen, and the breakpoint\n// swap below is why they are here rather than written twice — a docked\n// picker and a range picker that disagreed about where the modal sits would\n// be two bugs rather than one.\n//\n// In `src/styles` rather than a `src/picker` of its own, since this is\n// styles more than one component draws, which is what that directory holds.\n// Geometry belonging to one picker alone stays with that picker.\n\nconst picker = {\n  group: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kzqmXN: \"xh8yej3\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popover: {\n    kZKoxP: \"x1poebcc\",\n    kGVxlE: \"x1os83gw x1l41d60\",\n    kzqmXN: \"xpxzbr4\",\n    krVfgx: \"xudx362\",\n    k87sOh: \"xbvrusa\",\n    kt4wiu: \"x1v0tev1\",\n    kLqNvP: \"x12sfaok\",\n    kogj98: \"xucn3ve\",\n    kskxy: \"xmjxpzh\",\n    ks0D6T: \"x1x1rfll x1493c6o\",\n    kVAEAm: \"x1mesnot\",\n    $$css: true\n  },\n  triggerGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  }\n};\n\n// The trigger's classes, from React Aria's own render state. A picker's\n// trigger is disabled by the field around it rather than by a prop of its\n// own, so the fade comes off the state React Aria hands the className. It is\n// the same 38% the segments beside it take, so one disabled field fades as a\n// whole.\nfunction triggerClassName(state: {\n  isDisabled: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n}) {\n  return stylex.props(iconButton.chrome, focus.ring, state.isHovered && iconButton.chromeHovered, state.isPressed && iconButton.chromePressed, state.isDisabled && iconButton.chromeDisabled).className ?? '';\n}\nexport { picker, triggerClassName };"],"mappings":";;;;AAiBA,MAAMO,SAAS;CACbC,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRL,QAAQ;EACRM,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAY,cAAc;EACZV,QAAQ;EACRJ,QAAQ;EACRE,OAAO;CACT;AACF;AAOA,SAASa,iBAAiBC,OAIvB;CACD,OAAO7B,MAAaM,WAAW4B,QAAQ7B,MAAM8B,MAAMN,MAAME,aAAazB,WAAW8B,eAAeP,MAAMG,aAAa1B,WAAW+B,eAAeR,MAAMC,cAAcxB,WAAWgC,cAAc,CAAC,CAACC,aAAa;AAC3M"}