@kanso-labs/kanso-ui 0.26.2 → 0.26.3

package/dist/components/list-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["props","header","children"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ListBoxItemRenderProps, ListBoxItemProps as RACListBoxItemProps, ListBoxLoadMoreItemProps as RACListBoxLoadMoreItemProps, ListBoxProps as RACListBoxProps, ListBoxSectionProps as RACListBoxSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection } from 'react-aria-components';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// The lists page's selectable list. Each option is the row every list here\n// draws — `src/row`, shared with ListItem and with every collection the\n// coverage plan adds after this one — so the 56dp floor, the body-large\n// headline, the body-medium supporting line, the state layers and the\n// disabled treatment are all that module's and none of them is written\n// again. What is here is the container around those rows, the section and\n// its header, and the row the list shows while it is fetching more.\n//\n// The container takes the page's 8dp above and below its rows and no\n// background of its own, which is what lets the same list sit on the page\n// and inside a popover without knowing which it is in. Select, ComboBox and\n// Autocomplete are each a field plus one of these in an overlay, so that is\n// not a detail — it is the reason the container is transparent.\n//\n// A selected option takes primary container and on primary container, the\n// page's selected state, through the row module's `list` variant. The page\n// also draws a checkbox in the trailing slot on a list that selects more\n// than one; that is left to the call site rather than added by the option,\n// since which of the two affordances a list wants is the list's decision and\n// the slot is already there for it.\n//\n// Three things are worth knowing about how this maps onto React Aria.\n//\n// **The option's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function — the same mechanism Tabs and Chip use, wrapped in\n// `mergeStatefulStyles` so a call site's own `className` survives.\n//\n// **A section's heading is React Aria's `Header`**, which is what points the\n// section's `aria-labelledby` at it. The lists page names no subhead in its\n// anatomy, so the type is title-small in on surface variant at the row's own\n// 16dp inline padding, which is what the page's own guidance draws.\n//\n// **The load-more row is a sentinel, not a button.** React Aria's\n// `ListBoxLoadMoreItem` calls `onLoadMore` when it comes into view and\n// renders whatever it is given while `isLoading`; ours renders the ring, so\n// a list that fetches as it scrolls says so with the same indicator every\n// other pending state in the library uses.\n\ntype ListBoxItemProps<T extends object = object> = {\n  /** The option's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the option's render state. */\n  className?: RACListBoxItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /** A function may compute the style from the option's render state. */\n  style?: RACListBoxItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & Omit<RACListBoxItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListBoxLoadMoreProps = Omit<RACListBoxLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListBoxProps<T extends object> = Omit<RACListBoxProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACListBoxProps<T>['className'];\n  /** A function may compute the style from the list's render state. */\n  style?: RACListBoxProps<T>['style'];\n};\ntype ListBoxSectionProps<T extends object = object> = Omit<RACListBoxSectionProps<T>, 'children'> & {\n  /**\n   * The options in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the option draws, from React Aria's render state. Built by a call\n// rather than written 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.\n//\n// It reads the render state for one thing: which colour the supporting line\n// takes. The muted role the page gives it holds only on the surface — over a\n// selected row's container it is a second colour family, and on a disabled\n// row it stays at full strength while the headline above it fades. The row\n// module decides; this hands it the two flags.\nfunction itemContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// option's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the option from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what an option is doing and not what it holds; the row is built by\n// a call for the same reason `itemContent` is.\nfunction itemStyles(supporting: ReactNode) {\n  return (state: ListBoxItemRenderProps) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, supporting !== undefined && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of options one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the option instead.\n *\n * Composed from parts, since an option's slots take arbitrary content:\n * `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list\n * with `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction ListBox<T extends object>(props: ListBoxProps<T>) {\n  return <RACListBox {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n  }, props)} />;\n}\n\n/**\n * One option. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every option an `id` — that is\n * the key selection is reported by.\n */\nfunction ListBoxItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(itemStyles(supporting), props)}>\n      {itemContent(children, leading, supporting, trailing)}\n    </RACListBoxItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading` — so a list that pages as it scrolls needs nothing else.\n */\nfunction ListBoxLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACListBoxLoadMoreItem>;\n}\n\n/**\n * A named group of options. `header` names it, and is what a screen reader\n * reads before the options inside.\n */\nfunction ListBoxSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListBoxSectionProps<T>) {\n  return <RACListBoxSection {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\n\n// What the option is worth as text, for the things React Aria does with an\n// option's words rather than its element: typeahead, a combo box's filter,\n// and the value a select shows once it is chosen. React Aria reads it off\n// the children when they are a string and finds nothing when they are not —\n// and an option here is always an element, since the row wraps its headline.\n// So a plain-string headline becomes the text value, and anything else has\n// to say what it is worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport default ListBox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ListBoxItemRenderProps","ListBoxItemProps","RACListBoxItemProps","ListBoxLoadMoreItemProps","RACListBoxLoadMoreItemProps","ListBoxProps","RACListBoxProps","ListBoxSectionProps","RACListBoxSectionProps","stylex","Header","ListBox","RACListBox","ListBoxItem","RACListBoxItem","ListBoxLoadMoreItem","RACListBoxLoadMoreItem","ListBoxSection","RACListBoxSection","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","colors","spacing","typography","ProgressIndicator","children","className","T","leading","style","supporting","trailing","Omit","ListBoxLoadMoreProps","label","header","itemContent","state","isDisabled","isSelected","itemStyles","props","base","list","interactive","undefined","twoLine","selectedList","disabled","$","_c","t0","t1","T0","t2","t3","t4","t5","t6","textValue","t7","textOf","ListBoxLoadMore","Item","LoadMore","Section"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ListBoxItemRenderProps, ListBoxItemProps as RACListBoxItemProps, ListBoxLoadMoreItemProps as RACListBoxLoadMoreItemProps, ListBoxProps as RACListBoxProps, ListBoxSectionProps as RACListBoxSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection } from 'react-aria-components';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// The lists page's selectable list. Each option is the row every list here\n// draws — `src/row`, shared with ListItem and with every collection the\n// coverage plan adds after this one — so the 56dp floor, the body-large\n// headline, the body-medium supporting line, the state layers and the\n// disabled treatment are all that module's and none of them is written\n// again. What is here is the container around those rows, the section and\n// its header, and the row the list shows while it is fetching more.\n//\n// The container takes the page's 8dp above and below its rows and no\n// background of its own, which is what lets the same list sit on the page\n// and inside a popover without knowing which it is in. Select, ComboBox and\n// Autocomplete are each a field plus one of these in an overlay, so that is\n// not a detail — it is the reason the container is transparent.\n//\n// A selected option takes primary container and on primary container, the\n// page's selected state, through the row module's `list` variant. The page\n// also draws a checkbox in the trailing slot on a list that selects more\n// than one; that is left to the call site rather than added by the option,\n// since which of the two affordances a list wants is the list's decision and\n// the slot is already there for it.\n//\n// Three things are worth knowing about how this maps onto React Aria.\n//\n// **The option's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function — the same mechanism Tabs and Chip use, wrapped in\n// `mergeStatefulStyles` so a call site's own `className` survives.\n//\n// **A section's heading is React Aria's `Header`**, which is what points the\n// section's `aria-labelledby` at it. The lists page names no subhead in its\n// anatomy, so the type is title-small in on surface variant at the row's own\n// 16dp inline padding, which is what the page's own guidance draws.\n//\n// **The load-more row is a sentinel, not a button.** React Aria's\n// `ListBoxLoadMoreItem` calls `onLoadMore` when it comes into view and\n// renders whatever it is given while `isLoading`; ours renders the ring, so\n// a list that fetches as it scrolls says so with the same indicator every\n// other pending state in the library uses.\n\ntype ListBoxItemProps<T extends object = object> = {\n  /** The option's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the option's render state. */\n  className?: RACListBoxItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /** A function may compute the style from the option's render state. */\n  style?: RACListBoxItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & Omit<RACListBoxItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListBoxLoadMoreProps = Omit<RACListBoxLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListBoxProps<T extends object> = Omit<RACListBoxProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACListBoxProps<T>['className'];\n  /** A function may compute the style from the list's render state. */\n  style?: RACListBoxProps<T>['style'];\n};\ntype ListBoxSectionProps<T extends object = object> = Omit<RACListBoxSectionProps<T>, 'children'> & {\n  /**\n   * The options in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the option draws, from React Aria's render state. Built by a call\n// rather than written 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.\n//\n// It reads the render state for one thing: which colour the supporting line\n// takes. The muted role the page gives it holds only on the surface — over a\n// selected row's container it is a second colour family, and on a disabled\n// row it stays at full strength while the headline above it fades. The row\n// module decides; this hands it the two flags.\nfunction itemContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// option's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the option from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what an option is doing and not what it holds; the row is built by\n// a call for the same reason `itemContent` is.\nfunction itemStyles(supporting: ReactNode) {\n  return (state: ListBoxItemRenderProps) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, supporting !== undefined && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of options one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the option instead.\n *\n * Composed from parts, since an option's slots take arbitrary content:\n * `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list\n * with `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction ListBox<T extends object>(props: ListBoxProps<T>) {\n  return <RACListBox {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n  }, props)} />;\n}\n\n/**\n * One option. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every option an `id` — that is\n * the key selection is reported by.\n */\nfunction ListBoxItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(itemStyles(supporting), props)}>\n      {itemContent(children, leading, supporting, trailing)}\n    </RACListBoxItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading` — so a list that pages as it scrolls needs nothing else.\n */\nfunction ListBoxLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACListBoxLoadMoreItem>;\n}\n\n/**\n * A named group of options. `header` names it, and is what a screen reader\n * reads before the options inside.\n */\nfunction ListBoxSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListBoxSectionProps<T>) {\n  return <RACListBoxSection {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\n\n// What the option is worth as text, for the things React Aria does with an\n// option's words rather than its element: typeahead, a combo box's filter,\n// and the value a select shows once it is chosen. React Aria reads it off\n// the children when they are a string and finds nothing when they are not —\n// and an option here is always an element, since the row wraps its headline.\n// So a plain-string headline becomes the text value, and anything else has\n// to say what it is worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport default ListBox;"],"mappings":"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"}

package/dist/components/list-detail/index.js

@@ -1,5 +1,6 @@
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/list-detail/index.tsx
 /**
@@ -14,28 +15,106 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * Material Design asks of co-planar panes: focus order has to match the
 * arrangement on screen.
 */
-function ListDetail({ detail, list, render, showing = "list", ...props }) {
-	return useRender({
-		defaultTagName: "div",
-		props: {
-			...props,
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-				...{
-					0: { className: "x9f619 xeuugli" },
-					1: { className: "x9f619 xeuugli x1s85apg x9a4l8x" }
-				}[!!(showing === "detail") << 0],
+function ListDetail(t0) {
+	const $ = c(26);
+	let render;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[0] !== t0) {
+		const { detail, list, render: t6, showing: t7, ...props } = t0;
+		render = t6;
+		const showing = t7 === void 0 ? "list" : t7;
+		t5 = useRender;
+		t4 = "div";
+		t1 = props;
+		let t8;
+		if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+			t8 = {
+				0: { className: "x9f619 xeuugli" },
+				1: { className: "x9f619 xeuugli x1s85apg x9a4l8x" }
+			};
+			$[7] = t8;
+		} else t8 = $[7];
+		const t9 = t8[!!(showing === "detail") << 0];
+		let t10;
+		if ($[8] !== list || $[9] !== t9) {
+			t10 = /* @__PURE__ */ jsx("div", {
+				...t9,
 				children: list
-			}), /* @__PURE__ */ jsx("div", {
-				...{
-					0: { className: "x9f619 xeuugli" },
-					1: { className: "x9f619 xeuugli x1s85apg x9a4l8x" }
-				}[!!(showing === "list") << 0],
+			});
+			$[8] = list;
+			$[9] = t9;
+			$[10] = t10;
+		} else t10 = $[10];
+		let t11;
+		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+			t11 = {
+				0: { className: "x9f619 xeuugli" },
+				1: { className: "x9f619 xeuugli x1s85apg x9a4l8x" }
+			};
+			$[11] = t11;
+		} else t11 = $[11];
+		const t12 = t11[!!(showing === "list") << 0];
+		let t13;
+		if ($[12] !== detail || $[13] !== t12) {
+			t13 = /* @__PURE__ */ jsx("div", {
+				...t12,
 				children: detail
-			})] }),
-			...mergeStyles({ className: "x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5" }, props)
-		},
-		render
-	});
+			});
+			$[12] = detail;
+			$[13] = t12;
+			$[14] = t13;
+		} else t13 = $[14];
+		if ($[15] !== t10 || $[16] !== t13) {
+			t2 = /* @__PURE__ */ jsxs(Fragment, { children: [t10, t13] });
+			$[15] = t10;
+			$[16] = t13;
+			$[17] = t2;
+		} else t2 = $[17];
+		t3 = mergeStyles({ className: "x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5" }, props);
+		$[0] = t0;
+		$[1] = render;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = t5;
+	} else {
+		render = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
+		t5 = $[6];
+	}
+	let t6;
+	if ($[18] !== t1 || $[19] !== t2 || $[20] !== t3) {
+		t6 = {
+			...t1,
+			children: t2,
+			...t3
+		};
+		$[18] = t1;
+		$[19] = t2;
+		$[20] = t3;
+		$[21] = t6;
+	} else t6 = $[21];
+	let t7;
+	if ($[22] !== render || $[23] !== t4 || $[24] !== t6) {
+		t7 = {
+			defaultTagName: t4,
+			props: t6,
+			render
+		};
+		$[22] = render;
+		$[23] = t4;
+		$[24] = t6;
+		$[25] = t7;
+	} else t7 = $[25];
+	return t5(t7);
 }
 //#endregion
 export { ListDetail as default };

package/dist/components/list-detail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// Material Design's recommended snap widths for a fixed pane. The list is the\n// fixed one here — Material Design points a fixed pane at \"lists with light\n// information density\" — and the detail pane is the flexible one that absorbs\n// whatever is left, which satisfies the spec's rule that every layout carry at\n// least one flexible pane.\nconst LIST_PANE = '360px';\nconst LIST_PANE_EXTRA_LARGE = '412px';\n\n// One of Material Design's canonical layouts, and the fixed-and-flexible shape\n// of its two-pane layouts. Unlike SupportingPane, the detail pane here stands\n// on its own: a message, a product, a file. That is what makes showing it\n// *instead of* the list a coherent thing to do when only one pane fits, and\n// why this layout has to be told which pane is showing while SupportingPane\n// does not.\n//\n// Material Design puts the second pane on screen from expanded up. Below that\n// the spec shows one pane at a time, with selecting an item swapping to the\n// detail and back returning to the list — app navigation rather than layout,\n// which is why `showing` is controlled rather than held here.\n\ntype ListDetailProps = {\n  /**\n   * The selected item's content. Stands on its own, and takes the flexible\n   * pane.\n   */\n  detail?: ReactNode;\n  /**\n   * The items to choose between. Takes the fixed pane — 360px wide, 412px at\n   * extra-large.\n   */\n  list?: ReactNode;\n  /**\n   * Which pane to show while only one fits, below the expanded breakpoint.\n   * Both are shown from expanded up, where this is ignored.\n   *\n   * Controlled, with no uncontrolled fallback: the layout cannot know that an\n   * item was selected or that the reader went back, so holding that state\n   * here would only ever be wrong.\n   * @default 'list'\n   */\n  showing?: 'detail' | 'list';\n} & Omit<RenderComponentProps<'div'>, 'children'>;\n\n/**\n * Material Design's list-detail layout: a fixed list pane beside a flexible\n * detail pane, collapsing to one pane at a time below the expanded breakpoint.\n *\n * Layout only — neither pane paints a surface of its own, so what goes inside\n * them is composed at the call site. `render` swaps the container's element,\n * for a layout that should be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * Material Design asks of co-planar panes: focus order has to match the\n * arrangement on screen.\n */\nfunction ListDetail({\n  detail,\n  list,\n  render,\n  showing = 'list',\n  ...props\n}: ListDetailProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":";;;;;;;;;;;;;;;;AA+DA,SAAS,WAAW,EAClB,QACA,MACA,QACA,UAAU,QACV,GAAG,SACe;CAClB,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,qBAAA,UAAA,EAAA,UAAA,CACN,oBAAC,OAAD;IAAK,GAAI;KACT,GAAG,EACD,WAAW,iBACb;KACA,GAAG,EACD,WAAW,kCACb;IACF,EAAE,CAAC,EAAE,YAAY,aAAa;IACzB,UAAA;GACE,CAAA,GACL,oBAAC,OAAD;IAAK,GAAI;KACT,GAAG,EACD,WAAW,iBACb;KACA,GAAG,EACD,WAAW,kCACb;IACF,EAAE,CAAC,EAAE,YAAY,WAAW;IACvB,UAAA;GACE,CAAA,CACP,EAAA,CAAA;GACF,GAAG,YAAY,EACb,WAAW,kDACb,GAAG,KAAK;EACV;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","media","spacing","LIST_PANE","LIST_PANE_EXTRA_LARGE","ListDetailProps","detail","list","showing","Omit","ListDetail","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","t8","Symbol","for","0","className","1","t9","t10","t11","t12","t13","children","defaultTagName"],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// Material Design's recommended snap widths for a fixed pane. The list is the\n// fixed one here — Material Design points a fixed pane at \"lists with light\n// information density\" — and the detail pane is the flexible one that absorbs\n// whatever is left, which satisfies the spec's rule that every layout carry at\n// least one flexible pane.\nconst LIST_PANE = '360px';\nconst LIST_PANE_EXTRA_LARGE = '412px';\n\n// One of Material Design's canonical layouts, and the fixed-and-flexible shape\n// of its two-pane layouts. Unlike SupportingPane, the detail pane here stands\n// on its own: a message, a product, a file. That is what makes showing it\n// *instead of* the list a coherent thing to do when only one pane fits, and\n// why this layout has to be told which pane is showing while SupportingPane\n// does not.\n//\n// Material Design puts the second pane on screen from expanded up. Below that\n// the spec shows one pane at a time, with selecting an item swapping to the\n// detail and back returning to the list — app navigation rather than layout,\n// which is why `showing` is controlled rather than held here.\n\ntype ListDetailProps = {\n  /**\n   * The selected item's content. Stands on its own, and takes the flexible\n   * pane.\n   */\n  detail?: ReactNode;\n  /**\n   * The items to choose between. Takes the fixed pane — 360px wide, 412px at\n   * extra-large.\n   */\n  list?: ReactNode;\n  /**\n   * Which pane to show while only one fits, below the expanded breakpoint.\n   * Both are shown from expanded up, where this is ignored.\n   *\n   * Controlled, with no uncontrolled fallback: the layout cannot know that an\n   * item was selected or that the reader went back, so holding that state\n   * here would only ever be wrong.\n   * @default 'list'\n   */\n  showing?: 'detail' | 'list';\n} & Omit<RenderComponentProps<'div'>, 'children'>;\n\n/**\n * Material Design's list-detail layout: a fixed list pane beside a flexible\n * detail pane, collapsing to one pane at a time below the expanded breakpoint.\n *\n * Layout only — neither pane paints a surface of its own, so what goes inside\n * them is composed at the call site. `render` swaps the container's element,\n * for a layout that should be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * Material Design asks of co-planar panes: focus order has to match the\n * arrangement on screen.\n */\nfunction ListDetail({\n  detail,\n  list,\n  render,\n  showing = 'list',\n  ...props\n}: ListDetailProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":"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"}

package/dist/components/list-item/index.js

@@ -3,6 +3,7 @@ import { mergeStyles } from "../../styles/merge.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { rowStyles } from "../../row/styles.js";
 import { RowContent } from "../../row/index.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/list-item/index.tsx
 /**
@@ -17,30 +18,56 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * here is the element around them — a `<div>` that presents, or a `<button>`
 * that ripples — and the props that fill the slots.
 */
-function ListItem({ children, interactive = false, leading, overline, supporting, trailing, ...props$1 }) {
+function ListItem(t0) {
+	const $ = c(12);
+	const { children, interactive: t1, leading, overline, supporting, trailing, ...props$1 } = t0;
+	const interactive = t1 === void 0 ? false : t1;
 	const ripple = useRipple(interactive);
 	const extraLines = (overline === void 0 ? 0 : 1) + (supporting === void 0 ? 0 : 1);
 	const twoLine = extraLines === 1;
 	const threeLine = extraLines === 2;
-	const content = /* @__PURE__ */ jsx(RowContent, {
-		leading,
-		overline,
-		supporting,
-		trailing,
-		children
-	});
+	let t2;
+	if ($[0] !== children || $[1] !== leading || $[2] !== overline || $[3] !== supporting || $[4] !== trailing) {
+		t2 = /* @__PURE__ */ jsx(RowContent, {
+			leading,
+			overline,
+			supporting,
+			trailing,
+			children
+		});
+		$[0] = children;
+		$[1] = leading;
+		$[2] = overline;
+		$[3] = supporting;
+		$[4] = trailing;
+		$[5] = t2;
+	} else t2 = $[5];
+	const content = t2;
 	if (!interactive) return /* @__PURE__ */ jsx("div", {
 		...props$1,
 		...mergeStyles(props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1),
 		children: content
 	});
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		...ripple.handlers,
-		...props$1,
-		...mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1),
-		children: [content, ripple.surface]
-	});
+	const t3 = "button";
+	const t4 = ripple.handlers;
+	const t5 = mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1);
+	let t6;
+	if ($[6] !== content || $[7] !== props$1 || $[8] !== ripple.handlers || $[9] !== ripple.surface || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("button", {
+			type: t3,
+			...t4,
+			...props$1,
+			...t5,
+			children: [content, ripple.surface]
+		});
+		$[6] = content;
+		$[7] = props$1;
+		$[8] = ripple.handlers;
+		$[9] = ripple.surface;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	return t6;
 }
 //#endregion
 export { ListItem as default };

package/dist/components/list-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n  const content = <RowContent leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n  if (!interactive) {\n    return <div {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n        {content}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;;;;;AAyCA,SAAS,SAAS,EAChB,UACA,cAAc,OACd,SACA,UACA,YACA,UACA,GAAG,WACa;CAChB,MAAM,SAAS,UAA6B,WAAW;CAWvD,MAAM,cAAc,aAAa,KAAA,IAAY,IAAI,MAAM,eAAe,KAAA,IAAY,IAAI;CACtF,MAAM,UAAU,eAAe;CAC/B,MAAM,YAAY,eAAe;CACjC,MAAM,UAAU,oBAAC,YAAD;EAAqB;EAAmB;EAAsB;EAAsB;EAC/F;CACS,CAAA;CACd,IAAI,CAAC,aACH,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,MAAM,UAAU,MAAM,WAAW,UAAU,SAAS,aAAa,UAAU,SAAS,GAAG,OAAK;EACrJ,UAAA;CACE,CAAA;CAET,OAAO,qBAAC,UAAD;EAAQ,MAAK;EAAS,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,MAAM,UAAU,MAAM,UAAU,aAAa,WAAW,UAAU,SAAS,aAAa,UAAU,SAAS,GAAG,OAAK;EAAhN,UAAA,CACF,SACA,OAAO,OACF;;AACZ"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","stylex","useRipple","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","leading","overline","supporting","trailing","HTMLElement","ListItem","t0","$","_c","t1","props","undefined","ripple","extraLines","twoLine","threeLine","t2","content","base","list","t3","t4","handlers","t5","t6","surface"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n  const content = <RowContent leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n  if (!interactive) {\n    return <div {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n        {content}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyCA,SAAAe,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAkB,MAAA,EAAAV,UAAAC,aAAAU,IAAAT,SAAAC,UAAAC,YAAAC,UAAA,GAAAO,YAAAJ;CAEhB,MAAAP,cAAAU,OAAAE,KAAAA,IAAA,QAAAF;CAOA,MAAAG,SAAenB,UAA6BM,WAAW;CAWvD,MAAAc,cAAoBZ,aAAaU,KAAAA,IAAb,IAAA,MAAmCT,eAAeS,KAAAA,IAAf,IAAA;CACvD,MAAAG,UAAgBD,eAAe;CAC/B,MAAAE,YAAkBF,eAAe;CAAE,IAAAG;CAAA,IAAAT,EAAA,OAAAT,YAAAS,EAAA,OAAAP,WAAAO,EAAA,OAAAN,YAAAM,EAAA,OAAAL,cAAAK,EAAA,OAAAJ,UAAA;EACnBa,KAAA,oBAAC,YAAD;GAAqBhB;GAAmBC;GAAsBC;GAAsBC;GAC/FL;EADsB,CAAA;EAEZS,EAAA,KAAAT;EAAAS,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAFf,MAAAU,UAAgBD;CAGhB,IAAI,CAACjB,aAAW,OACP,oBAAA,OAAA;EAEC,GAFQW;EAAK,GAAMd,YAAYJ,MAAaG,UAASuB,MAAOvB,UAASwB,MAAOL,WAAWnB,UAASmB,SAAUC,aAAapB,UAASoB,SAAU,GAAGL,OAAK;EACrJO,UAAAA;CACG,CAAA;CAEU,MAAAG,KAAA;CAAa,MAAAC,KAAAT,OAAMU;CAA0B,MAAAC,KAAA3B,YAAYJ,MAAaG,UAASuB,MAAOvB,UAASwB,MAAOxB,UAASI,aAAce,WAAWnB,UAASmB,SAAUC,aAAapB,UAASoB,SAAU,GAAGL,OAAK;CAAC,IAAAc;CAAA,IAAAjB,EAAA,OAAAU,WAAAV,EAAA,OAAAG,WAAAH,EAAA,OAAAK,OAAAU,YAAAf,EAAA,OAAAK,OAAAa,WAAAlB,EAAA,QAAAgB,IAAA;EAAjNC,KAAA,qBAAA,UAAA;GAAa,MAAAJ;GAAQ,GAAKC;GAAe,GAAMX;GAAK,GAAMa;GAA1D,UAAA,CACFN,SACAL,OAAMa,OACA;;EAAAlB,EAAA,KAAAU;EAAAV,EAAA,KAAAG;EAAAH,EAAA,KAAAK,OAAAU;EAAAf,EAAA,KAAAK,OAAAa;EAAAlB,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OAHJiB;AAGI"}

package/dist/components/menu/index.js

@@ -6,8 +6,8 @@ import { overlay, placementOf, popupOrigin } from "../../styles/overlay.js";
 import { rowStyles } from "../../row/styles.js";
 import { RowContent } from "../../row/index.js";
 import Separator$1 from "../separator/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Header, Keyboard, Menu, MenuItem, MenuLoadMoreItem, MenuSection, MenuTrigger, Popover, SubmenuTrigger, Text } from "react-aria-components";
 //#region src/components/menu/index.tsx
 const styles = { content: {
@@ -86,24 +86,103 @@ function Menu$1(t0) {
 * The call site's `className` and `style` land on the surface, which is the
 * element a layout positions.
 */
-function MenuContent({ align = "start", alignOffset, className, container, search, side = "bottom", sideOffset = 8, style, ...props }) {
-	return /* @__PURE__ */ jsxs(Popover, {
-		crossOffset: alignOffset,
-		offset: sideOffset,
-		placement: placementOf(side, align),
-		UNSTABLE_portalContainer: container,
-		...mergeStatefulStyles(surfaceStyles, {}),
-		children: [search === void 0 ? null : /* @__PURE__ */ jsx("div", {
+function MenuContent(t0) {
+	const $ = c(29);
+	let alignOffset;
+	let className;
+	let container;
+	let props;
+	let search;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({align: t1, alignOffset, className, container, search, side: t2, sideOffset: t3, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = alignOffset;
+		$[2] = className;
+		$[3] = container;
+		$[4] = props;
+		$[5] = search;
+		$[6] = style;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		alignOffset = $[1];
+		className = $[2];
+		container = $[3];
+		props = $[4];
+		search = $[5];
+		style = $[6];
+		t1 = $[7];
+		t2 = $[8];
+		t3 = $[9];
+	}
+	const align = t1 === void 0 ? "start" : t1;
+	const side = t2 === void 0 ? "bottom" : t2;
+	const sideOffset = t3 === void 0 ? 8 : t3;
+	let t4;
+	if ($[10] !== align || $[11] !== side) {
+		t4 = placementOf(side, align);
+		$[10] = align;
+		$[11] = side;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = mergeStatefulStyles(surfaceStyles, {});
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== search) {
+		t6 = search === void 0 ? null : /* @__PURE__ */ jsx("div", {
 			className: "x9f619 xqf7pud xn60lsn",
 			children: search
-		}), /* @__PURE__ */ jsx(Menu, {
+		});
+		$[14] = search;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== className || $[17] !== style) {
+		t7 = mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf x1t137rt" }, {
+			className,
+			style
+		});
+		$[16] = className;
+		$[17] = style;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== props || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Menu, {
 			...props,
-			...mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf x1t137rt" }, {
-				className,
-				style
-			})
-		})]
-	});
+			...t7
+		});
+		$[19] = props;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== alignOffset || $[23] !== container || $[24] !== sideOffset || $[25] !== t4 || $[26] !== t6 || $[27] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Popover, {
+			crossOffset: alignOffset,
+			offset: sideOffset,
+			placement: t4,
+			UNSTABLE_portalContainer: container,
+			...t5,
+			children: [t6, t8]
+		});
+		$[22] = alignOffset;
+		$[23] = container;
+		$[24] = sideOffset;
+		$[25] = t4;
+		$[26] = t6;
+		$[27] = t8;
+		$[28] = t9;
+	} else t9 = $[28];
+	return t9;
 }
 /**
 * One action. Its slots are the row's: `leading` before the label, the label
@@ -184,17 +263,54 @@ function MenuItem$1(t0) {
 * The row shown while more items are being fetched. React Aria calls
 * `onLoadMore` when it comes into view, and draws it only while `isLoading`.
 */
-function MenuLoadMore({ label = "Loading more", ...props }) {
-	return /* @__PURE__ */ jsx(MenuLoadMoreItem, {
-		...props,
-		...mergeStyles({ className: "x6s0dn4 x9f619 x78zum5 xl56j7k x1wxaq2x" }, props),
-		children: /* @__PURE__ */ jsx(ProgressIndicator, {
+function MenuLoadMore(t0) {
+	const $ = c(12);
+	let T0;
+	let label;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		const { label: t3, ...props } = t0;
+		label = t3 === void 0 ? "Loading more" : t3;
+		T0 = MenuLoadMoreItem;
+		t1 = props;
+		t2 = mergeStyles({ className: "x6s0dn4 x9f619 x78zum5 xl56j7k x1wxaq2x" }, props);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = label;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		T0 = $[1];
+		label = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== label) {
+		t3 = /* @__PURE__ */ jsx(ProgressIndicator, {
 			"aria-label": label,
 			isIndeterminate: true,
 			size: "20px",
 			variant: "circular"
-		})
-	});
+		});
+		$[5] = label;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== T0 || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			...t2,
+			children: t3
+		});
+		$[7] = T0;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
 }
 /**
 * A named group of items. `header` names it, and is what a screen reader