@kanso-labs/kanso-ui 0.26.2 → 0.26.3

package/dist/components/disclosure-group/index.js

@@ -1,5 +1,6 @@
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import Separator$1 from "../separator/index.js";
+import { c } from "react/compiler-runtime";
 import { Children, Fragment, isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DisclosureGroup } from "react-aria-components";
@@ -24,12 +25,54 @@ import { DisclosureGroup } from "react-aria-components";
 * The call site's `className` and `style` land on the container, which is the
 * element a layout positions.
 */
-function DisclosureGroup$1({ children, divided = true, ...props }) {
-	return /* @__PURE__ */ jsx(DisclosureGroup, {
-		...props,
-		...mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf" }, props),
-		children: divided ? dividedChildren(children) : children
-	});
+function DisclosureGroup$1(t0) {
+	const $ = c(14);
+	let T0;
+	let children;
+	let divided;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		const { children: t3, divided: t4, ...props } = t0;
+		children = t3;
+		divided = t4 === void 0 ? true : t4;
+		T0 = DisclosureGroup;
+		t1 = props;
+		t2 = mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf" }, props);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = children;
+		$[3] = divided;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		T0 = $[1];
+		children = $[2];
+		divided = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	let t3;
+	if ($[6] !== children || $[7] !== divided) {
+		t3 = divided ? dividedChildren(children) : children;
+		$[6] = children;
+		$[7] = divided;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== T0 || $[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			...t2,
+			children: t3
+		});
+		$[9] = T0;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
 }
 function dividedChildren(children) {
 	return flatten(children).map((section, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index === 0 ? null : /* @__PURE__ */ jsx(Separator$1, {}), section] }, keyOf(section, index)));

package/dist/components/disclosure-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/disclosure-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DisclosureGroupProps as RACDisclosureGroupProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Children, Fragment, isValidElement } from 'react';\nimport { DisclosureGroup as RACDisclosureGroup } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport Separator from '../separator';\n\n// A stack of Disclosures that agree with each other about what is open —\n// the lists page's accordion. The sections are the library's own\n// `Disclosure`, unchanged: this adds only the agreement between them and the\n// rule that divides them.\n//\n// Give each section an `id`, which is the key the group reports as expanded.\n// Whether one opens at a time or several is `allowsMultipleExpanded`, and it\n// is React Aria's rather than two components — a group that closes the last\n// section when a new one opens is the same stack with a different word.\n//\n// Two things are this component's own.\n//\n// **A rule between the sections, and none at the ends.** The group renders\n// the library's `Separator` between each pair rather than asking each\n// section to draw a border, so a section drawn on its own and a section in a\n// group stay the same component. `divided={false}` leaves them undivided,\n// for a stack sitting on cards of its own.\n//\n// **Nothing else is added.** The group draws no container, no corner and no\n// colour: an accordion inside a card and one running down a page want\n// different surroundings, and the page is what knows which it is.\n//\n// The lists page keeps its expand-interaction tokens behind a token-set menu\n// that does not open to a script, so what is drawn here is what the page\n// states in words plus what `Disclosure` already carries; see that\n// component's comment for the same note.\n\ntype DisclosureGroupProps = Omit<RACDisclosureGroupProps, 'children'> & {\n  /** The sections, as `Disclosure` elements each given an `id`. */\n  children?: ReactNode;\n  /**\n   * Whether a rule is drawn between the sections. There is never one above\n   * the first or below the last.\n   * @default true\n   */\n  divided?: boolean;\n};\n\n/**\n * A stack of `Disclosure` sections that agree about what is open. Which are\n * expanded is React Aria's: pass `expandedKeys` with `onExpandedChange` to\n * control it, or `defaultExpandedKeys` to let the group keep its own.\n *\n * ```tsx\n * <DisclosureGroup defaultExpandedKeys={FIRST}>\n *   <Disclosure id=\"first\">\n *     <Disclosure.Header>Headline</Disclosure.Header>\n *     <Disclosure.Panel>Supporting line</Disclosure.Panel>\n *   </Disclosure>\n * </DisclosureGroup>\n * ```\n *\n * One section opens at a time unless `allowsMultipleExpanded` says otherwise.\n * Give every section an `id` — that is the key the group reports.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction DisclosureGroup({\n  children,\n  divided = true,\n  ...props\n}: DisclosureGroupProps) {\n  return <RACDisclosureGroup {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {divided ? dividedChildren(children) : children}\n    </RACDisclosureGroup>;\n}\n\n// The sections with a rule between each pair, and none at the ends.\nfunction dividedChildren(children: ReactNode) {\n  const sections = flatten(children);\n  return sections.map((section, index) => <Fragment key={keyOf(section, index)}>\n      {index === 0 ? null : <Separator />}\n      {section}\n    </Fragment>);\n}\n\n// The sections, with any fragment around them opened up first.\n// `Children.toArray` flattens arrays but hands back a fragment as one child,\n// and a call site that writes its sections inside one — or maps over data and\n// wraps the result — would otherwise get a single entry and no rules at all.\n// Recursive, since a fragment may hold another.\nfunction flatten(children: ReactNode): ReactNode[] {\n  return Children.toArray(children).flatMap(child => {\n    if (isValidElement<{\n      children?: ReactNode;\n    }>(child)) {\n      if (child.type === Fragment) {\n        return flatten(child.props.children);\n      }\n    }\n    return [child];\n  });\n}\n\n// The key `Children.toArray` put on the entry, falling back to its position\n// for anything that is not an element — a string between two sections is not\n// a thing this component expects, but it should render rather than throw.\nfunction keyOf(section: ReactNode, index: number) {\n  if (isValidElement(section)) {\n    return section.key ?? String(index);\n  }\n  return String(index);\n}\nexport type { DisclosureGroupProps };\nexport default DisclosureGroup;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,SAAS,kBAAgB,EACvB,UACA,UAAU,MACV,GAAG,SACoB;CACvB,OAAO,oBAAC,iBAAD;EAAoB,GAAI;EAAO,GAAI,oBAAoB,EAC5D,WAAW,yBACb,GAAG,KAAK;EACH,UAAA,UAAU,gBAAgB,QAAQ,IAAI;CACrB,CAAA;AACxB;AAGA,SAAS,gBAAgB,UAAqB;CAE5C,OADiB,QAAQ,QAClB,CAAQ,CAAC,KAAK,SAAS,UAAU,qBAAC,UAAD,EAAA,UAAA,CACnC,UAAU,IAAI,OAAO,oBAAC,aAAD,CAAU,CAAA,GAC/B,OACO,EAAA,GAH2C,MAAM,SAAS,KAAK,CAG/D,CAAC;AACf;AAOA,SAAS,QAAQ,UAAkC;CACjD,OAAO,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAQ,UAAS;EACjD,IAAI,eAED,KAAK,GACF;OAAA,MAAM,SAAS,UACjB,OAAO,QAAQ,MAAM,MAAM,QAAQ;EAAA;EAGvC,OAAO,CAAC,KAAK;CACf,CAAC;AACH;AAKA,SAAS,MAAM,SAAoB,OAAe;CAChD,IAAI,eAAe,OAAO,GACxB,OAAO,QAAQ,OAAO,OAAO,KAAK;CAEpC,OAAO,OAAO,KAAK;AACrB"}
+{"version":3,"file":"index.js","names":["ReactNode","DisclosureGroupProps","RACDisclosureGroupProps","stylex","Children","Fragment","isValidElement","DisclosureGroup","RACDisclosureGroup","mergeStatefulStyles","Separator","Omit","children","divided","t0","$","_c","T0","t1","t2","t3","t4","props","undefined","className","dividedChildren","sections","flatten","map","section","index","keyOf","toArray","flatMap","child","type","key","String"],"sources":["../../../src/components/disclosure-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DisclosureGroupProps as RACDisclosureGroupProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Children, Fragment, isValidElement } from 'react';\nimport { DisclosureGroup as RACDisclosureGroup } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport Separator from '../separator';\n\n// A stack of Disclosures that agree with each other about what is open —\n// the lists page's accordion. The sections are the library's own\n// `Disclosure`, unchanged: this adds only the agreement between them and the\n// rule that divides them.\n//\n// Give each section an `id`, which is the key the group reports as expanded.\n// Whether one opens at a time or several is `allowsMultipleExpanded`, and it\n// is React Aria's rather than two components — a group that closes the last\n// section when a new one opens is the same stack with a different word.\n//\n// Two things are this component's own.\n//\n// **A rule between the sections, and none at the ends.** The group renders\n// the library's `Separator` between each pair rather than asking each\n// section to draw a border, so a section drawn on its own and a section in a\n// group stay the same component. `divided={false}` leaves them undivided,\n// for a stack sitting on cards of its own.\n//\n// **Nothing else is added.** The group draws no container, no corner and no\n// colour: an accordion inside a card and one running down a page want\n// different surroundings, and the page is what knows which it is.\n//\n// The lists page keeps its expand-interaction tokens behind a token-set menu\n// that does not open to a script, so what is drawn here is what the page\n// states in words plus what `Disclosure` already carries; see that\n// component's comment for the same note.\n\ntype DisclosureGroupProps = Omit<RACDisclosureGroupProps, 'children'> & {\n  /** The sections, as `Disclosure` elements each given an `id`. */\n  children?: ReactNode;\n  /**\n   * Whether a rule is drawn between the sections. There is never one above\n   * the first or below the last.\n   * @default true\n   */\n  divided?: boolean;\n};\n\n/**\n * A stack of `Disclosure` sections that agree about what is open. Which are\n * expanded is React Aria's: pass `expandedKeys` with `onExpandedChange` to\n * control it, or `defaultExpandedKeys` to let the group keep its own.\n *\n * ```tsx\n * <DisclosureGroup defaultExpandedKeys={FIRST}>\n *   <Disclosure id=\"first\">\n *     <Disclosure.Header>Headline</Disclosure.Header>\n *     <Disclosure.Panel>Supporting line</Disclosure.Panel>\n *   </Disclosure>\n * </DisclosureGroup>\n * ```\n *\n * One section opens at a time unless `allowsMultipleExpanded` says otherwise.\n * Give every section an `id` — that is the key the group reports.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction DisclosureGroup({\n  children,\n  divided = true,\n  ...props\n}: DisclosureGroupProps) {\n  return <RACDisclosureGroup {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {divided ? dividedChildren(children) : children}\n    </RACDisclosureGroup>;\n}\n\n// The sections with a rule between each pair, and none at the ends.\nfunction dividedChildren(children: ReactNode) {\n  const sections = flatten(children);\n  return sections.map((section, index) => <Fragment key={keyOf(section, index)}>\n      {index === 0 ? null : <Separator />}\n      {section}\n    </Fragment>);\n}\n\n// The sections, with any fragment around them opened up first.\n// `Children.toArray` flattens arrays but hands back a fragment as one child,\n// and a call site that writes its sections inside one — or maps over data and\n// wraps the result — would otherwise get a single entry and no rules at all.\n// Recursive, since a fragment may hold another.\nfunction flatten(children: ReactNode): ReactNode[] {\n  return Children.toArray(children).flatMap(child => {\n    if (isValidElement<{\n      children?: ReactNode;\n    }>(child)) {\n      if (child.type === Fragment) {\n        return flatten(child.props.children);\n      }\n    }\n    return [child];\n  });\n}\n\n// The key `Children.toArray` put on the entry, falling back to its position\n// for anything that is not an element — a string between two sections is not\n// a thing this component expects, but it should render rather than throw.\nfunction keyOf(section: ReactNode, index: number) {\n  if (isValidElement(section)) {\n    return section.key ?? String(index);\n  }\n  return String(index);\n}\nexport type { DisclosureGroupProps };\nexport default DisclosureGroup;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,SAAAO,kBAAAO,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAL;CAAA,IAAAC;CAAA,IAAAK;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAyB,MAAA,EAAAF,UAAAQ,IAAAP,SAAAQ,IAAA,GAAAC,UAAAR;EAAAF,WAAAQ;EAEvBP,UAAAQ,OAAAE,KAAAA,IAAA,OAAAF;EAGQJ,KAAAT;EAAuBc,KAAAA;EAAWH,KAAAV,oBAAoB,EAAAe,WACjD,yBACb,GAAGF,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAF,KAAAF,EAAA;EAAAH,WAAAG,EAAA;EAAAF,UAAAE,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAH,YAAAG,EAAA,OAAAF,SAAA;EACJO,KAAAP,UAAUY,gBAAgBb,QAAmB,IAA7CA;EAA8CG,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAH5CC,KAAA,oBAAC,IAAD;GAAmB,GAAKC;GAAK,GAAMH;GAGrCC,UAAAA;EAHqB,CAAA;EAIHL,EAAA,KAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAJhBM;AAIgB;AAIzB,SAASI,gBAAgBb,UAAqB;CAE5C,OADiBe,QAAQf,QAClBc,CAAQ,CAACE,KAAKC,SAASC,UAAU,qBAAC,UAAD,EAAA,UAAA,CACnCA,UAAU,IAAI,OAAO,oBAAC,aAAD,CAAU,CAAA,GAC/BD,OACO,EAAA,GAH2CE,MAAMF,SAASC,KAAK,CAG/D,CAAC;AACf;AAOA,SAASH,QAAQf,UAAkC;CACjD,OAAOR,SAAS4B,QAAQpB,QAAQ,CAAC,CAACqB,SAAQC,UAAS;EACjD,IAAI5B,eAED4B,KAAK,GACFA;OAAAA,MAAMC,SAAS9B,UACjB,OAAOsB,QAAQO,MAAMZ,MAAMV,QAAQ;EAAA;EAGvC,OAAO,CAACsB,KAAK;CACf,CAAC;AACH;AAKA,SAASH,MAAMF,SAAoBC,OAAe;CAChD,IAAIxB,eAAeuB,OAAO,GACxB,OAAOA,QAAQO,OAAOC,OAAOP,KAAK;CAEpC,OAAOO,OAAOP,KAAK;AACrB"}

package/dist/components/drop-zone/index.js

@@ -1,8 +1,8 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { dropZoneStyles, rootStyles } from "./styles.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DropZone, FileTrigger } from "react-aria-components";
 //#region src/components/drop-zone/index.tsx
 function content(children, label) {

package/dist/components/drop-zone/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["props"],"sources":["../../../src/components/drop-zone/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DropZoneProps as RACDropZoneProps, FileTriggerProps as RACFileTriggerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DropZone as RACDropZone, FileTrigger as RACFileTrigger } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { dropZoneStyles, rootStyles } from './styles';\n\n// A place to drop files, and a button that opens the file picker. The design\n// system carries no page for either — there is no drop target and no file\n// input in it — so the drop target is drawn from the nearest thing it does\n// carry, the outlined card: the same surface, the same 1dp outline-variant\n// rule and the same medium corner.\n//\n// Two departures from that card, both this component's own.\n//\n// **The rule is dashed rather than solid.** A solid rule reads as a card,\n// which is a thing that holds content; a dashed one reads as a place to put\n// something, which is what this is. It is the one convention strong enough\n// that drawing it as a card would be the surprising choice.\n//\n// **Dropping over it fills it.** The rule goes to the primary role and the\n// surface to primary container, which is the same pair a selected list row\n// takes — so \"this is the target\" looks the same here as \"this is the one\n// chosen\" does elsewhere.\n//\n// **The label names the target rather than being composed into a name.**\n// React Aria puts a visually hidden button inside and, given nothing, labels\n// it `DropZone` — its own component name, untranslated, which is what a\n// screen reader would then read out. Passing the label through as the\n// button's `aria-label` and drawing the text as ordinary content is what\n// makes the name the words the call site wrote and nothing else; React\n// Aria's own label slot would compose the two and say both.\n//\n// `FileTrigger` is beside it rather than inside it, and that is React Aria's\n// shape rather than a choice here: a file picker is useful on its own, with\n// no drop target anywhere near it. It renders nothing but a hidden input, so\n// it takes no `className` or `style` of its own — whatever it wraps is what\n// is seen, and that is normally the library's Button.\n\ntype DropZoneProps = Omit<RACDropZoneProps, 'children' | 'className' | 'style'> & {\n  /** What the target holds: its label, and whatever else it offers. */\n  children?: ReactNode;\n  /** A function may compute the class from the target's render state. */\n  className?: RACDropZoneProps['className'];\n  /**\n   * What the target says it is for. Drawn inside it and used as its\n   * accessible name, so a target with one needs no `aria-label`. A string\n   * rather than a node, since it is what names the target; anything richer\n   * goes in `children` beside it.\n   */\n  label?: string;\n  /** A function may compute the style from the target's render state. */\n  style?: RACDropZoneProps['style'];\n};\ntype FileTriggerProps = RACFileTriggerProps;\n\n// What the target draws, from React Aria's render state. Written as a call\n// rather than inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction content(children: ReactNode, label: string | undefined) {\n  return <>\n      {label === undefined ? null : <p {...stylex.props(dropZoneStyles.label)}>{label}</p>}\n      {children}\n    </>;\n}\n\n/**\n * A place to drop files. What is dropped is React Aria's: `onDrop` is handed\n * the items, and `isFileDropItem`, `isDirectoryDropItem`, `isTextDropItem`\n * and `DIRECTORY_DRAG_TYPE` are exported from the package for reading them.\n *\n * ```tsx\n * <DropZone label=\"Drop here\" onDrop={handleDrop}>\n *   <FileTrigger onSelect={handleSelect}>\n *     <Button variant=\"outlined\">Label</Button>\n *   </FileTrigger>\n * </DropZone>\n * ```\n *\n * It is drawn from the outlined card, with a dashed rule rather than a solid\n * one, and fills with the primary container while something is over it.\n * `label` both draws the words and names the target; `aria-label` names it\n * without drawing anything, for a page that already says what it takes.\n *\n * The call site's `className` and `style` land on the target itself, which\n * is the element a layout positions.\n */\nfunction DropZone({\n  children,\n  label,\n  ...props\n}: DropZoneProps) {\n  return <RACDropZone aria-label={props['aria-label'] ?? label} {...props} {...mergeStatefulStyles(rootStyles, props)}>\n      {content(children, label)}\n    </RACDropZone>;\n}\n\n/**\n * A button that opens the file picker. Wrap whatever should open it —\n * normally the library's Button — and take the files from `onSelect`.\n *\n * ```tsx\n * <FileTrigger acceptedFileTypes={['image/*']} onSelect={handleSelect}>\n *   <Button>Label</Button>\n * </FileTrigger>\n * ```\n *\n * It renders nothing of its own but the hidden input, so it takes no\n * `className` or `style`: what is seen is whatever it wraps. `allowsMultiple`\n * takes more than one file, `acceptDirectory` takes a folder, and\n * `defaultCamera` opens straight to a camera on a device that has one.\n */\nfunction FileTrigger(props: FileTriggerProps) {\n  return <RACFileTrigger {...props} />;\n}\nexport type { DropZoneProps, FileTriggerProps };\nexport { FileTrigger };\nexport default DropZone;"],"mappings":";;;;;;;AA4DA,SAAS,QAAQ,UAAqB,OAA2B;CAC/D,OAAO,qBAAA,UAAA,EAAA,UAAA,CACF,UAAU,KAAA,IAAY,OAAO,oBAAC,KAAD;EAAG,GAAI,MAAa,eAAe,KAAK;EAAI,UAAA;CAAS,CAAA,GAClF,QACH,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAA,WAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAkB,MAAA,EAAA,UAAA,IAAA,OAAA,IAAA,GAAA,UAAA;EAAA,WAAA;EAAA,QAAA;EAKR,KAAA;EAAwB,KAAA,MAAM,iBAAN;EAAkCA,KAAA;EAAW,KAAA,oBAAoB,YAAY,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,WAAA,EAAA;EAAA,QAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,OAAA;EAC9G,KAAA,QAAQ,UAAU,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EADtB,KAAA,oBAAC,IAAD;GAAyB,cAAA;GAA4B,GAAMA;GAAK,GAAM;GACxE,UAAA;EADc,CAAA;EAEH,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFT;AAES;;;;;;;;;;;;;;;;AAkBlB,SAAA,cAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAC,aAAD,EAAe,GAAK,MAAK,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAA7B;AAA6B"}
+{"version":3,"file":"index.js","names":["ReactNode","DropZoneProps","RACDropZoneProps","FileTriggerProps","RACFileTriggerProps","stylex","DropZone","RACDropZone","FileTrigger","RACFileTrigger","mergeStatefulStyles","dropZoneStyles","rootStyles","Omit","children","className","label","style","content","undefined","props","t0","$","_c","T0","t1","t2","t3","t4","t5"],"sources":["../../../src/components/drop-zone/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DropZoneProps as RACDropZoneProps, FileTriggerProps as RACFileTriggerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DropZone as RACDropZone, FileTrigger as RACFileTrigger } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { dropZoneStyles, rootStyles } from './styles';\n\n// A place to drop files, and a button that opens the file picker. The design\n// system carries no page for either — there is no drop target and no file\n// input in it — so the drop target is drawn from the nearest thing it does\n// carry, the outlined card: the same surface, the same 1dp outline-variant\n// rule and the same medium corner.\n//\n// Two departures from that card, both this component's own.\n//\n// **The rule is dashed rather than solid.** A solid rule reads as a card,\n// which is a thing that holds content; a dashed one reads as a place to put\n// something, which is what this is. It is the one convention strong enough\n// that drawing it as a card would be the surprising choice.\n//\n// **Dropping over it fills it.** The rule goes to the primary role and the\n// surface to primary container, which is the same pair a selected list row\n// takes — so \"this is the target\" looks the same here as \"this is the one\n// chosen\" does elsewhere.\n//\n// **The label names the target rather than being composed into a name.**\n// React Aria puts a visually hidden button inside and, given nothing, labels\n// it `DropZone` — its own component name, untranslated, which is what a\n// screen reader would then read out. Passing the label through as the\n// button's `aria-label` and drawing the text as ordinary content is what\n// makes the name the words the call site wrote and nothing else; React\n// Aria's own label slot would compose the two and say both.\n//\n// `FileTrigger` is beside it rather than inside it, and that is React Aria's\n// shape rather than a choice here: a file picker is useful on its own, with\n// no drop target anywhere near it. It renders nothing but a hidden input, so\n// it takes no `className` or `style` of its own — whatever it wraps is what\n// is seen, and that is normally the library's Button.\n\ntype DropZoneProps = Omit<RACDropZoneProps, 'children' | 'className' | 'style'> & {\n  /** What the target holds: its label, and whatever else it offers. */\n  children?: ReactNode;\n  /** A function may compute the class from the target's render state. */\n  className?: RACDropZoneProps['className'];\n  /**\n   * What the target says it is for. Drawn inside it and used as its\n   * accessible name, so a target with one needs no `aria-label`. A string\n   * rather than a node, since it is what names the target; anything richer\n   * goes in `children` beside it.\n   */\n  label?: string;\n  /** A function may compute the style from the target's render state. */\n  style?: RACDropZoneProps['style'];\n};\ntype FileTriggerProps = RACFileTriggerProps;\n\n// What the target draws, from React Aria's render state. Written as a call\n// rather than inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction content(children: ReactNode, label: string | undefined) {\n  return <>\n      {label === undefined ? null : <p {...stylex.props(dropZoneStyles.label)}>{label}</p>}\n      {children}\n    </>;\n}\n\n/**\n * A place to drop files. What is dropped is React Aria's: `onDrop` is handed\n * the items, and `isFileDropItem`, `isDirectoryDropItem`, `isTextDropItem`\n * and `DIRECTORY_DRAG_TYPE` are exported from the package for reading them.\n *\n * ```tsx\n * <DropZone label=\"Drop here\" onDrop={handleDrop}>\n *   <FileTrigger onSelect={handleSelect}>\n *     <Button variant=\"outlined\">Label</Button>\n *   </FileTrigger>\n * </DropZone>\n * ```\n *\n * It is drawn from the outlined card, with a dashed rule rather than a solid\n * one, and fills with the primary container while something is over it.\n * `label` both draws the words and names the target; `aria-label` names it\n * without drawing anything, for a page that already says what it takes.\n *\n * The call site's `className` and `style` land on the target itself, which\n * is the element a layout positions.\n */\nfunction DropZone({\n  children,\n  label,\n  ...props\n}: DropZoneProps) {\n  return <RACDropZone aria-label={props['aria-label'] ?? label} {...props} {...mergeStatefulStyles(rootStyles, props)}>\n      {content(children, label)}\n    </RACDropZone>;\n}\n\n/**\n * A button that opens the file picker. Wrap whatever should open it —\n * normally the library's Button — and take the files from `onSelect`.\n *\n * ```tsx\n * <FileTrigger acceptedFileTypes={['image/*']} onSelect={handleSelect}>\n *   <Button>Label</Button>\n * </FileTrigger>\n * ```\n *\n * It renders nothing of its own but the hidden input, so it takes no\n * `className` or `style`: what is seen is whatever it wraps. `allowsMultiple`\n * takes more than one file, `acceptDirectory` takes a folder, and\n * `defaultCamera` opens straight to a camera on a device that has one.\n */\nfunction FileTrigger(props: FileTriggerProps) {\n  return <RACFileTrigger {...props} />;\n}\nexport type { DropZoneProps, FileTriggerProps };\nexport { FileTrigger };\nexport default DropZone;"],"mappings":";;;;;;;AA4DA,SAASkB,QAAQJ,UAAqBE,OAA2B;CAC/D,OAAO,qBAAA,UAAA,EAAA,UAAA,CACFA,UAAUG,KAAAA,IAAY,OAAO,oBAAC,KAAD;EAAG,GAAId,MAAaM,eAAeK,KAAK;EAAIA,UAAAA;CAAS,CAAA,GAClFF,QACH,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAAR,WAAAe,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAV;CAAA,IAAAE;CAAA,IAAAS;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAkB,MAAA,EAAAP,UAAAc,IAAAZ,OAAAa,IAAA,GAAAT,UAAAC;EAAAP,WAAAc;EAAAZ,QAAAa;EAKRL,KAAAjB;EAAwBkB,KAAAL,MAAM,iBAANJ;EAAkCI,KAAAA;EAAWO,KAAAjB,oBAAoBE,YAAYQ,KAAK;EAACE,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAR,WAAAQ,EAAA;EAAAN,QAAAM,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAR,YAAAQ,EAAA,OAAAN,OAAA;EAC9GY,KAAAV,QAAQJ,UAAUE,KAAK;EAACM,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EADtBC,KAAA,oBAAC,IAAD;GAAyB,cAAAJ;GAA4B,GAAML;GAAK,GAAMO;GACxEC,UAAAA;EADc,CAAA;EAEHN,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAFTO;AAES;;;;;;;;;;;;;;;;AAkBlB,SAAArB,cAAAY,OAAA;CAAA,MAAAE,IAAAC,EAAA,CAAA;CAAA,IAAAF;CAAA,IAAAC,EAAA,OAAAF,OAAA;EACSC,KAAA,oBAAC,aAAD,EAAe,GAAKD,MAAK,CAAA;EAAIE,EAAA,KAAAF;EAAAE,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,OAA7BD;AAA6B"}

package/dist/components/drop-zone/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":[],"sources":["../../../src/components/drop-zone/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Apart from ./index.tsx so that file exports components alone, which is what\n// keeps fast refresh working for it — the same arrangement `src/row` uses.\n// `rootStyles` is here for a second reason: index.test.tsx applies it\n// directly, because React Aria enters `isDropTarget` only inside a real drag\n// session that a synthetic DragEvent does not start.\n\nconst dropZoneStyles = {\n  label: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  root: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    kaIpWk: \"x62ce2h\",\n    ksu8eU: \"xbsl7fq\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kjj79g: \"xl56j7k\",\n    kAzted: \"x1db3i3o\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1apw6a7\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  rootFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  rootOver: {\n    kWkggS: \"xp89om9\",\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\n\n// The target's own classes, from React Aria's render state.\nfunction rootStyles(state: {\n  isDropTarget: boolean;\n  isFocusVisible: boolean;\n}) {\n  return {\n    0: {\n      className: \"x6s0dn4 x14s9m32 x133yhug x62ce2h xbsl7fq xmkeg23 x9f619 x139gbkf x78zum5 xdt5ytf x1gka490 xl56j7k x1db3i3o xrgy624 x2ssjo2 x1t137rt x1de99jn x1apw6a7 xkzkux9 xts7igz xpc4ca7\"\n    },\n    2: {\n      className: \"x6s0dn4 x14s9m32 x133yhug x62ce2h xbsl7fq xmkeg23 x9f619 x139gbkf x78zum5 xdt5ytf x1gka490 xl56j7k x1db3i3o xrgy624 x2ssjo2 x1de99jn x1apw6a7 xkzkux9 xts7igz xpc4ca7 xaatb59\"\n    },\n    1: {\n      className: \"x6s0dn4 x62ce2h xmkeg23 x9f619 x78zum5 xdt5ytf x1gka490 xl56j7k x1db3i3o xrgy624 x2ssjo2 x1t137rt x1de99jn x1apw6a7 xkzkux9 xts7igz xpc4ca7 xp89om9 x1uajy3w x1y0btm7 xscdzaa\"\n    },\n    3: {\n      className: \"x6s0dn4 x62ce2h xmkeg23 x9f619 x78zum5 xdt5ytf x1gka490 xl56j7k x1db3i3o xrgy624 x2ssjo2 x1de99jn x1apw6a7 xkzkux9 xts7igz xpc4ca7 xaatb59 xp89om9 x1uajy3w x1y0btm7 xscdzaa\"\n    }\n  }[!!state.isFocusVisible << 1 | !!state.isDropTarget << 0];\n}\nexport { dropZoneStyles, rootStyles };"],"mappings":";AAUA,MAAM,iBAAiB;CACrB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAGA,SAAS,WAAW,OAGjB;CACD,OAAO;EACL,GAAG,EACD,WAAW,iLACb;EACA,GAAG,EACD,WAAW,gLACb;EACA,GAAG,EACD,WAAW,gLACb;EACA,GAAG,EACD,WAAW,+KACb;CACF,EAAE,CAAC,CAAC,MAAM,kBAAkB,IAAI,CAAC,CAAC,MAAM,gBAAgB;AAC1D"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","typography","dropZoneStyles","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kogj98","k9WMMc","$$css","root","kGNEyG","kWkggS","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","k1xSpc","kXwgrk","kOIVth","kjj79g","kAzted","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","rootFocused","rootOver","rootStyles","state","isDropTarget","isFocusVisible","className"],"sources":["../../../src/components/drop-zone/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Apart from ./index.tsx so that file exports components alone, which is what\n// keeps fast refresh working for it — the same arrangement `src/row` uses.\n// `rootStyles` is here for a second reason: index.test.tsx applies it\n// directly, because React Aria enters `isDropTarget` only inside a real drag\n// session that a synthetic DragEvent does not start.\n\nconst dropZoneStyles = {\n  label: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  root: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    kaIpWk: \"x62ce2h\",\n    ksu8eU: \"xbsl7fq\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kjj79g: \"xl56j7k\",\n    kAzted: \"x1db3i3o\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1apw6a7\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  rootFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  rootOver: {\n    kWkggS: \"xp89om9\",\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\n\n// The target's own classes, from React Aria's render state.\nfunction rootStyles(state: {\n  isDropTarget: boolean;\n  isFocusVisible: boolean;\n}) {\n  return {\n    0: {\n      className: \"x6s0dn4 x14s9m32 x133yhug x62ce2h xbsl7fq xmkeg23 x9f619 x139gbkf x78zum5 xdt5ytf x1gka490 xl56j7k x1db3i3o xrgy624 x2ssjo2 x1t137rt x1de99jn x1apw6a7 xkzkux9 xts7igz xpc4ca7\"\n    },\n    2: {\n      className: \"x6s0dn4 x14s9m32 x133yhug x62ce2h xbsl7fq xmkeg23 x9f619 x139gbkf x78zum5 xdt5ytf x1gka490 xl56j7k x1db3i3o xrgy624 x2ssjo2 x1de99jn x1apw6a7 xkzkux9 xts7igz xpc4ca7 xaatb59\"\n    },\n    1: {\n      className: \"x6s0dn4 x62ce2h xmkeg23 x9f619 x78zum5 xdt5ytf x1gka490 xl56j7k x1db3i3o xrgy624 x2ssjo2 x1t137rt x1de99jn x1apw6a7 xkzkux9 xts7igz xpc4ca7 xp89om9 x1uajy3w x1y0btm7 xscdzaa\"\n    },\n    3: {\n      className: \"x6s0dn4 x62ce2h xmkeg23 x9f619 x78zum5 xdt5ytf x1gka490 xl56j7k x1db3i3o xrgy624 x2ssjo2 x1de99jn x1apw6a7 xkzkux9 xts7igz xpc4ca7 xaatb59 xp89om9 x1uajy3w x1y0btm7 xscdzaa\"\n    }\n  }[!!state.isFocusVisible << 1 | !!state.isDropTarget << 0];\n}\nexport { dropZoneStyles, rootStyles };"],"mappings":";AAUA,MAAMM,iBAAiB;CACrBC,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRrB,OAAO;CACT;CACAsB,aAAa;EACXN,QAAQ;EACRhB,OAAO;CACT;CACAuB,UAAU;EACRpB,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRd,QAAQ;EACRQ,OAAO;CACT;AACF;AAGA,SAASwB,WAAWC,OAGjB;CACD,OAAO;EACL,GAAG,EACDG,WAAW,iLACb;EACA,GAAG,EACDA,WAAW,gLACb;EACA,GAAG,EACDA,WAAW,gLACb;EACA,GAAG,EACDA,WAAW,+KACb;CACF,EAAE,CAAC,CAACH,MAAME,kBAAkB,IAAI,CAAC,CAACF,MAAMC,gBAAgB;AAC1D"}

package/dist/components/feed/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
+import { c } from "react/compiler-runtime";
 //#region src/components/feed/index.tsx
 const DEFAULT_MIN_ITEM_WIDTH = "180px";
 const _temp = {
@@ -25,15 +26,57 @@ const styles = { root: (minItemWidth) => [_temp, { "--x-gridTemplateColumns": `r
 * It reads the space it is in rather than the width of the window, so a feed
 * inside a pane reflows with the pane rather than with the browser.
 */
-function Feed({ minItemWidth = DEFAULT_MIN_ITEM_WIDTH, render, ...props$1 }) {
-	return useRender({
-		defaultTagName: "div",
-		props: {
-			...props$1,
-			...mergeStyles(props(styles.root(minItemWidth)), props$1)
-		},
-		render
-	});
+function Feed(t0) {
+	const $ = c(13);
+	let render;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		const { minItemWidth: t5, render: t6, ...props$1 } = t0;
+		render = t6;
+		const minItemWidth = t5 === void 0 ? DEFAULT_MIN_ITEM_WIDTH : t5;
+		t4 = useRender;
+		t3 = "div";
+		t1 = props$1;
+		t2 = mergeStyles(props(styles.root(minItemWidth)), props$1);
+		$[0] = t0;
+		$[1] = render;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		render = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
+	}
+	let t5;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t5 = {
+			...t1,
+			...t2
+		};
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== render || $[10] !== t3 || $[11] !== t5) {
+		t6 = {
+			defaultTagName: t3,
+			props: t5,
+			render
+		};
+		$[9] = render;
+		$[10] = t3;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t4(t6);
 }
 //#endregion
 export { Feed as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/feed/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Material Design's example minimum for an adaptive grid cell, and the only\n// number the spec puts on one. It is a floor rather than a recommendation: how\n// narrow a card can get before its contents stop making sense is a property of\n// the contents, which is why Material Design leaves it a parameter rather than\n// fixing it. Most feeds should say what theirs is instead of taking this.\nconst DEFAULT_MIN_ITEM_WIDTH = '180px';\n\n// The third of Material Design's canonical layouts, after list-detail and\n// supporting pane. Where those two divide a page into panes, this arranges one\n// pane into a grid of comparable things — the spec's own examples are news and\n// social feeds, and a catalogue of cards is the same shape.\n//\n// Material Design describes the grid by its cell rather than by its columns:\n// Compose spells it `GridCells.Adaptive(minSize)`, meaning every column is at\n// least that wide and the grid fits as many as it can.\n// `repeat(auto-fill, minmax(…, 1fr))` is the same sentence in CSS.\n//\n// So there are no breakpoints here, and that is the point rather than an\n// omission. The layout answers to the room it is given instead of to the width\n// of the window, which is what lets a feed inside a pane reflow with the pane.\n// It also means none of the query emission-order care that ListDetail and\n// SupportingPane both have to document applies.\n//\n// A function style rather than a static one, because the cell minimum comes\n// from the call site and StyleX compiles its classes ahead of time. StyleX\n// resolves that by writing the value to a custom property inline, which is the\n// same mechanism the token gallery's `durationBar` uses.\nconst _temp = {\n  kB7OPa: \"x9f619\",\n  k1xSpc: \"xrvj5dj\",\n  kOIVth: \"xj2l1yv\",\n  kumcoG: \"xqketvx\",\n  \"$$css\": true\n};\nconst styles = {\n  root: (minItemWidth: string) => [_temp, {\n    \"--x-gridTemplateColumns\": `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` != null ? `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` : undefined\n  }]\n};\ntype FeedProps = {\n  /**\n   * How narrow a cell may get before the grid drops a column. Every column is\n   * at least this wide and the grid fits as many as the space allows, which is\n   * how Material Design describes an adaptive grid — by its cell rather than\n   * by a column count per breakpoint.\n   *\n   * Worth setting. The default is the figure Material Design's own example\n   * uses, and it is a floor rather than advice: only the contents know how\n   * narrow they can go.\n   * @default '180px'\n   */\n  minItemWidth?: string;\n} & RenderComponentProps<'div'>;\n\n/**\n * Material Design's feed layout: a grid of comparable items that fits as many\n * columns as the space allows, down to a single column when it allows only\n * one.\n *\n * Layout only — it paints no surface, and it gives its children no container\n * of their own, so each child is a grid cell exactly as it was written. That\n * is the difference from ListDetail and SupportingPane, which do wrap: those\n * two divide a page into named regions, where this one lays out however many\n * things it is handed.\n *\n * It reads the space it is in rather than the width of the window, so a feed\n * inside a pane reflows with the pane rather than with the browser.\n */\nfunction Feed({\n  minItemWidth = DEFAULT_MIN_ITEM_WIDTH,\n  render,\n  ...props\n}: FeedProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      // The dynamic style carries the cell minimum as a custom property in\n      // `style` rather than as a class, which is why the merge has to reach\n      // `style` as well as `className` — see src/styles/merge.ts.\n      ...mergeStyles(stylex.props(styles.root(minItemWidth)), props)\n    },\n    render\n  });\n}\nexport type { FeedProps };\nexport default Feed;"],"mappings":";;;;AAYA,MAAM,yBAAyB;AAsB/B,MAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS,EACb,OAAO,iBAAyB,CAAC,OAAO,EACtC,2BAA2B,4BAA4B,aAAY,YAAa,OAAO,4BAA4B,aAAY,WAAY,KAAA,EAC7I,CAAC,EACH;;;;;;;;;;;;;;;AA8BA,SAAS,KAAK,EACZ,eAAe,wBACf,QACA,GAAG,WACS;CACZ,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GAIH,GAAG,YAAY,MAAa,OAAO,KAAK,YAAY,CAAC,GAAG,OAAK;EAC/D;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","spacing","DEFAULT_MIN_ITEM_WIDTH","_temp","kB7OPa","k1xSpc","kOIVth","kumcoG","styles","root","minItemWidth","undefined","FeedProps","Feed","t0","$","_c","render","t1","t2","t3","t4","t5","t6","props","defaultTagName"],"sources":["../../../src/components/feed/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Material Design's example minimum for an adaptive grid cell, and the only\n// number the spec puts on one. It is a floor rather than a recommendation: how\n// narrow a card can get before its contents stop making sense is a property of\n// the contents, which is why Material Design leaves it a parameter rather than\n// fixing it. Most feeds should say what theirs is instead of taking this.\nconst DEFAULT_MIN_ITEM_WIDTH = '180px';\n\n// The third of Material Design's canonical layouts, after list-detail and\n// supporting pane. Where those two divide a page into panes, this arranges one\n// pane into a grid of comparable things — the spec's own examples are news and\n// social feeds, and a catalogue of cards is the same shape.\n//\n// Material Design describes the grid by its cell rather than by its columns:\n// Compose spells it `GridCells.Adaptive(minSize)`, meaning every column is at\n// least that wide and the grid fits as many as it can.\n// `repeat(auto-fill, minmax(…, 1fr))` is the same sentence in CSS.\n//\n// So there are no breakpoints here, and that is the point rather than an\n// omission. The layout answers to the room it is given instead of to the width\n// of the window, which is what lets a feed inside a pane reflow with the pane.\n// It also means none of the query emission-order care that ListDetail and\n// SupportingPane both have to document applies.\n//\n// A function style rather than a static one, because the cell minimum comes\n// from the call site and StyleX compiles its classes ahead of time. StyleX\n// resolves that by writing the value to a custom property inline, which is the\n// same mechanism the token gallery's `durationBar` uses.\nconst _temp = {\n  kB7OPa: \"x9f619\",\n  k1xSpc: \"xrvj5dj\",\n  kOIVth: \"xj2l1yv\",\n  kumcoG: \"xqketvx\",\n  \"$$css\": true\n};\nconst styles = {\n  root: (minItemWidth: string) => [_temp, {\n    \"--x-gridTemplateColumns\": `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` != null ? `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` : undefined\n  }]\n};\ntype FeedProps = {\n  /**\n   * How narrow a cell may get before the grid drops a column. Every column is\n   * at least this wide and the grid fits as many as the space allows, which is\n   * how Material Design describes an adaptive grid — by its cell rather than\n   * by a column count per breakpoint.\n   *\n   * Worth setting. The default is the figure Material Design's own example\n   * uses, and it is a floor rather than advice: only the contents know how\n   * narrow they can go.\n   * @default '180px'\n   */\n  minItemWidth?: string;\n} & RenderComponentProps<'div'>;\n\n/**\n * Material Design's feed layout: a grid of comparable items that fits as many\n * columns as the space allows, down to a single column when it allows only\n * one.\n *\n * Layout only — it paints no surface, and it gives its children no container\n * of their own, so each child is a grid cell exactly as it was written. That\n * is the difference from ListDetail and SupportingPane, which do wrap: those\n * two divide a page into named regions, where this one lays out however many\n * things it is handed.\n *\n * It reads the space it is in rather than the width of the window, so a feed\n * inside a pane reflows with the pane rather than with the browser.\n */\nfunction Feed({\n  minItemWidth = DEFAULT_MIN_ITEM_WIDTH,\n  render,\n  ...props\n}: FeedProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      // The dynamic style carries the cell minimum as a custom property in\n      // `style` rather than as a class, which is why the merge has to reach\n      // `style` as well as `className` — see src/styles/merge.ts.\n      ...mergeStyles(stylex.props(styles.root(minItemWidth)), props)\n    },\n    render\n  });\n}\nexport type { FeedProps };\nexport default Feed;"],"mappings":";;;;;AAYA,MAAMK,yBAAyB;AAsB/B,MAAMC,QAAQ;CACZC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACR,SAAS;AACX;AACA,MAAMC,SAAS,EACbC,OAAOC,iBAAyB,CAACP,OAAO,EACtC,2BAA2B,4BAA4BO,aAAY,YAAa,OAAO,4BAA4BA,aAAY,WAAYC,KAAAA,EAC7I,CAAC,EACH;;;;;;;;;;;;;;;AA8BA,SAAAE,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAJ,cAAAY,IAAAL,QAAAM,IAAA,GAAAC,YAAAV;EAAAG,SAAAM;EACZ,MAAAb,eAAAY,OAAAX,KAAAA,IAAAT,yBAAAoB;EAIOvB,KAAAA;EACWqB,KAAA;EAEXI,KAAAA;EAIAL,KAAAnB,YAAYH,MAAaW,OAAMC,KAAMC,YAAY,CAAC,GAAGc,OAAK;EAACT,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,MAAAH,EAAA,OAAAI,IAAA;EALzDG,KAAA;GAAA,GACFE;GAAK,GAILL;EACL;EAACJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAE,UAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EARcC,KAAA;GAAAE,gBACCL;GAAKI,OACdF;GAMNL;EAEH;EAACF,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAVMhB,GAAUwB,EAUhB;AAAC"}

package/dist/components/form/index.js

@@ -1,5 +1,6 @@
 import { mergeStyles } from "../../styles/merge.js";
 import { FIELD_VALIDATION_BEHAVIOR } from "../../field/root.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { Form } from "react-aria-components";
 //#region src/components/form/index.tsx
@@ -14,12 +15,44 @@ import { Form } from "react-aria-components";
 * The call site's `className` and `style` land on the form element, which is
 * the element a layout positions.
 */
-function Form$1({ validationBehavior = FIELD_VALIDATION_BEHAVIOR, ...props }) {
-	return /* @__PURE__ */ jsx(Form, {
-		validationBehavior,
-		...props,
-		...mergeStyles({ className: "x9f619" }, props)
-	});
+function Form$1(t0) {
+	const $ = c(10);
+	let T0;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		const { validationBehavior: t4, ...props } = t0;
+		const validationBehavior = t4 === void 0 ? FIELD_VALIDATION_BEHAVIOR : t4;
+		T0 = Form;
+		t1 = validationBehavior;
+		t2 = props;
+		t3 = mergeStyles({ className: "x9f619" }, props);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		T0 = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+	}
+	let t4;
+	if ($[5] !== T0 || $[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			validationBehavior: t1,
+			...t2,
+			...t3
+		});
+		$[5] = T0;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
 }
 //#endregion
 export { Form$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/form/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { FormProps as RACFormProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Form as RACForm } from 'react-aria-components';\nimport { FIELD_VALIDATION_BEHAVIOR } from '../../field/root';\nimport { mergeStyles } from '../../styles/merge';\n\n// No page of its own: a form is the fields inside it, and the text fields\n// page is what each of them draws — the error a form reports lands in the\n// field's supporting text, in the error role, under the box. The form\n// draws nothing, and lays nothing out either; a Stack inside it is what\n// spaces the fields.\n//\n// React Aria's `Form` is the element. It hands two things to the fields\n// inside it through context: `validationErrors`, keyed by each field's\n// `name`, which is how a server's answer reaches the fields without any of\n// them changing, and `validationBehavior`, which every field reads in place\n// of its own default. React Aria's own default for that is `native`; the\n// library's is `aria`, set here so a form and a field agree, with `native`\n// the opt-in.\n\ntype FormProps = Omit<RACFormProps, 'className' | 'style'> & {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * How the fields inside validate. `aria` marks a field invalid and shows\n   * its message as soon as the field says so, and lets the form submit\n   * regardless. `native` hands validation to the browser: a required or\n   * malformed field blocks submission, and its message is the browser's\n   * own, shown once submission is tried.\n   * @default 'aria'\n   */\n  validationBehavior?: 'aria' | 'native';\n};\n\n/**\n * A form: the fields inside it and what they are told about validation. Pass\n * `validationErrors`, an object keyed by field `name`, to show what a server\n * sent back under each field, and `validationBehavior=\"native\"` to let the\n * browser's own constraint validation block submission. `onSubmit` is handed\n * the submit event; call `preventDefault` on it to handle the submission\n * yourself, and read the values from `new FormData(event.currentTarget)`.\n *\n * The call site's `className` and `style` land on the form element, which is\n * the element a layout positions.\n */\nfunction Form({\n  validationBehavior = FIELD_VALIDATION_BEHAVIOR,\n  ...props\n}: FormProps) {\n  return <RACForm validationBehavior={validationBehavior} {...props} {...mergeStyles({\n    className: \"x9f619\"\n  }, props)} />;\n}\nexport type { FormProps };\nexport default Form;"],"mappings":";;;;;;;;;;;;;;;;AA8CA,SAAS,OAAK,EACZ,qBAAqB,2BACrB,GAAG,SACS;CACZ,OAAO,oBAAC,MAAD;EAA6B;EAAoB,GAAI;EAAO,GAAI,YAAY,EACjF,WAAW,SACb,GAAG,KAAK;CAAE,CAAA;AACZ"}
+{"version":3,"file":"index.js","names":["CSSProperties","FormProps","RACFormProps","stylex","Form","RACForm","FIELD_VALIDATION_BEHAVIOR","mergeStyles","Omit","className","style","validationBehavior","t0","$","_c","T0","t1","t2","t3","t4","props","undefined"],"sources":["../../../src/components/form/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { FormProps as RACFormProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Form as RACForm } from 'react-aria-components';\nimport { FIELD_VALIDATION_BEHAVIOR } from '../../field/root';\nimport { mergeStyles } from '../../styles/merge';\n\n// No page of its own: a form is the fields inside it, and the text fields\n// page is what each of them draws — the error a form reports lands in the\n// field's supporting text, in the error role, under the box. The form\n// draws nothing, and lays nothing out either; a Stack inside it is what\n// spaces the fields.\n//\n// React Aria's `Form` is the element. It hands two things to the fields\n// inside it through context: `validationErrors`, keyed by each field's\n// `name`, which is how a server's answer reaches the fields without any of\n// them changing, and `validationBehavior`, which every field reads in place\n// of its own default. React Aria's own default for that is `native`; the\n// library's is `aria`, set here so a form and a field agree, with `native`\n// the opt-in.\n\ntype FormProps = Omit<RACFormProps, 'className' | 'style'> & {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * How the fields inside validate. `aria` marks a field invalid and shows\n   * its message as soon as the field says so, and lets the form submit\n   * regardless. `native` hands validation to the browser: a required or\n   * malformed field blocks submission, and its message is the browser's\n   * own, shown once submission is tried.\n   * @default 'aria'\n   */\n  validationBehavior?: 'aria' | 'native';\n};\n\n/**\n * A form: the fields inside it and what they are told about validation. Pass\n * `validationErrors`, an object keyed by field `name`, to show what a server\n * sent back under each field, and `validationBehavior=\"native\"` to let the\n * browser's own constraint validation block submission. `onSubmit` is handed\n * the submit event; call `preventDefault` on it to handle the submission\n * yourself, and read the values from `new FormData(event.currentTarget)`.\n *\n * The call site's `className` and `style` land on the form element, which is\n * the element a layout positions.\n */\nfunction Form({\n  validationBehavior = FIELD_VALIDATION_BEHAVIOR,\n  ...props\n}: FormProps) {\n  return <RACForm validationBehavior={validationBehavior} {...props} {...mergeStyles({\n    className: \"x9f619\"\n  }, props)} />;\n}\nexport type { FormProps };\nexport default Form;"],"mappings":";;;;;;;;;;;;;;;;;AA8CA,SAAAI,OAAAQ,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAD,oBAAAQ,IAAA,GAAAC,UAAAR;EACZ,MAAAD,qBAAAQ,OAAAE,KAAAA,IAAAf,4BAAAa;EAGQJ,KAAAV;EAA4BM,KAAAA;EAAwBS,KAAAA;EAAWF,KAAAX,YAAY,EAAAE,WACtE,SACb,GAAGW,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAFFC,KAAA,oBAAC,IAAD;GAA6BR,oBAAAA;GAAkB,GAAMS;GAAK,GAAMF;EAE9D,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAFNM;AAEM"}

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

@@ -3,6 +3,7 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from "../../render/aria.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import ProgressIndicator from "../progress-indicator/index.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, ButtonContext, Link, ToggleButton, useSlottedContext } from "react-aria-components";
 //#region src/components/icon-button/index.tsx
@@ -255,34 +256,70 @@ function buttonContent(children, pendingLabel, ripple) {
 * </IconButton>
 * ```
 */
-function IconButton({ children, defaultSelected, disableRipple = false, href, isDisabled, isSelected, onChange, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel = "Loading", rel, render, size = "md", target, variant = "standard", ...props$1 }) {
+function IconButton(t0) {
+	const $ = c(25);
+	const { children, defaultSelected, disableRipple: t1, href, isDisabled, isSelected, onChange, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel: t2, rel, render, size: t3, target, variant: t4, ...props$1 } = t0;
+	const disableRipple = t1 === void 0 ? false : t1;
+	const pendingLabel = t2 === void 0 ? "Loading" : t2;
+	const size = t3 === void 0 ? "md" : t3;
+	const variant = t4 === void 0 ? "standard" : t4;
 	const context = useSlottedContext(ButtonContext, props$1.slot);
 	const disabled = isDisabled ?? context?.isDisabled ?? false;
-	const ripple = useRipple(!disableRipple && !disabled, {
-		onClick,
-		onContextMenu,
-		onPointerCancel,
-		onPointerDown,
-		onPointerLeave,
-		onPointerUp
-	});
+	let t5;
+	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
+		t5 = {
+			onClick,
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
+		};
+		$[0] = onClick;
+		$[1] = onContextMenu;
+		$[2] = onPointerCancel;
+		$[3] = onPointerDown;
+		$[4] = onPointerLeave;
+		$[5] = onPointerUp;
+		$[6] = t5;
+	} else t5 = $[6];
+	const ripple = useRipple(!disableRipple && !disabled, t5);
 	const element = {
 		aria: ariaAttributesOf(props$1),
 		onKeyDown,
 		onKeyUp
 	};
-	if (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0) return /* @__PURE__ */ jsx(ToggleButton, {
-		defaultSelected,
-		isDisabled: disabled,
-		isSelected,
-		onChange,
-		render: toggleButtonRenderer(element, render),
-		...ripple.handlers,
-		...props$1,
-		...mergeStatefulStyles(toggleStyleProps(size, variant), props$1),
-		children: toggleContent(children, ripple)
-	});
-	const styleProps = mergeStatefulStyles((state) => props(styles.base, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props$1);
+	if (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0) {
+		const t6 = toggleButtonRenderer(element, render);
+		const t7 = ripple.handlers;
+		const t8 = mergeStatefulStyles(toggleStyleProps(size, variant), props$1);
+		let t9;
+		if ($[7] !== children || $[8] !== ripple) {
+			t9 = toggleContent(children, ripple);
+			$[7] = children;
+			$[8] = ripple;
+			$[9] = t9;
+		} else t9 = $[9];
+		return /* @__PURE__ */ jsx(ToggleButton, {
+			defaultSelected,
+			isDisabled: disabled,
+			isSelected,
+			onChange,
+			render: t6,
+			...t7,
+			...props$1,
+			...t8,
+			children: t9
+		});
+	}
+	let t6;
+	if ($[10] !== size || $[11] !== variant) {
+		t6 = (state) => props(styles.base, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
+		$[10] = size;
+		$[11] = variant;
+		$[12] = t6;
+	} else t6 = $[12];
+	const styleProps = mergeStatefulStyles(t6, props$1);
 	if (href !== void 0) return /* @__PURE__ */ jsxs(Link, {
 		href,
 		isDisabled: disabled,
@@ -294,14 +331,37 @@ function IconButton({ children, defaultSelected, disableRipple = false, href, is
 		...styleProps,
 		children: [children, ripple.surface]
 	});
-	return /* @__PURE__ */ jsx(Button, {
-		isDisabled: disabled,
-		render: buttonRenderer(element, render),
-		...ripple.handlers,
-		...props$1,
-		...styleProps,
-		children: buttonContent(children, pendingLabel, ripple)
-	});
+	const T0 = Button;
+	const t7 = buttonRenderer(element, render);
+	const t8 = ripple.handlers;
+	let t9;
+	if ($[13] !== children || $[14] !== pendingLabel || $[15] !== ripple) {
+		t9 = buttonContent(children, pendingLabel, ripple);
+		$[13] = children;
+		$[14] = pendingLabel;
+		$[15] = ripple;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== T0 || $[18] !== disabled || $[19] !== props$1 || $[20] !== ripple.handlers || $[21] !== styleProps || $[22] !== t7 || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsx(T0, {
+			isDisabled: disabled,
+			render: t7,
+			...t8,
+			...props$1,
+			...styleProps,
+			children: t9
+		});
+		$[17] = T0;
+		$[18] = disabled;
+		$[19] = props$1;
+		$[20] = ripple.handlers;
+		$[21] = styleProps;
+		$[22] = t7;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	return t10;
 }
 function toggleContent(children, ripple) {
 	return () => /* @__PURE__ */ jsxs(Fragment, { children: [children, ripple.surface] });