@kanso-labs/kanso-ui 0.14.0 → 0.15.0

package/dist/components/chip/index.js

@@ -49,8 +49,8 @@ function Chip(t0) {
 }
 function propsFor(state) {
 	return {
-		0: { className: "x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh x1eaenvl xpc4ca7 x1a42vn9 x6gcojk xjbqb8w xd8uu4e x1fwvt7v xhfb3ry x1w5n3ug" },
-		1: { className: "x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh x1eaenvl xpc4ca7 xctpbsp x1n0xrd1 x1qndd53 x15dekr4 x9r1u3d xhfb3ry x1sawysd" }
+		0: { className: "x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1qno0dh x1eaenvl xpc4ca7 x1a42vn9 x6gcojk xjbqb8w xd8uu4e x133yhug xhfb3ry x1w5n3ug" },
+		1: { className: "x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1qno0dh x1eaenvl xpc4ca7 xctpbsp x1n0xrd1 x1qndd53 x15dekr4 x9r1u3d xhfb3ry x1sawysd" }
 	}[!!state.isSelected << 0];
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["props","children"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Each state composites an 'on-color' over its own container at the\n// interaction state's opacity rather than swapping in a separate hover color.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes, and it is inlined at each property because\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n\ntype ChipProps = ToggleButtonProps;\n\n/**\n * A chip is a two-state button, so its selected state is React Aria's\n * `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to\n * let it keep its own state. Selection is announced through `aria-pressed`\n * rather than a role of its own.\n */\nfunction Chip({\n  children,\n  ...props\n}: ChipProps) {\n  return <ToggleButton {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {children}\n    </ToggleButton>;\n}\n\n// StyleX has no way to target [data-selected] on the element it is styling,\n// so the selected styles cannot be chosen in CSS. React Aria's answer is to\n// let className and style be functions of the component's own render state,\n// which is what this is — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// mergeStatefulStyles takes the function rather than a computed result for\n// exactly that reason, and combines it with whatever the call site passed.\nfunction propsFor(state: ToggleButtonRenderProps) {\n  return {\n    0: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh x1eaenvl xpc4ca7 x1a42vn9 x6gcojk xjbqb8w xd8uu4e x1fwvt7v xhfb3ry x1w5n3ug\"\n    },\n    1: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh x1eaenvl xpc4ca7 xctpbsp x1n0xrd1 x1qndd53 x15dekr4 x9r1u3d xhfb3ry x1sawysd\"\n    }\n  }[!!state.isSelected << 0];\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;AA0BA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,MAAA,EAAA,UAAA,IAAA,GAAA,UAAA;EAAA,WAAA;EAIJ,KAAA;EAAiBA,KAAA;EAAW,KAAA,oBAAoB,UAAU,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,WAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,YAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAAjE,KAAA,oBAAC,IAAD;GAAa,GAAKA;GAAK,GAAM;GAC/B;EADe,CAAA;EAEH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFV;AAEU;AAWnB,SAAS,SAAS,OAAgC;CAChD,OAAO;EACL,GAAG,EACD,WAAW,4RACb;EACA,GAAG,EACD,WAAW,6RACb;CACF,EAAE,CAAC,CAAC,MAAM,cAAc;AAC1B"}
+{"version":3,"file":"index.js","names":["props","children"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Each state composites an 'on-color' over its own container at the\n// interaction state's opacity rather than swapping in a separate hover color.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes, and it is inlined at each property because\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline. The roles and measurements are the chips\n// spec page's filter chip: a 32dp container with an 8dp corner and 16dp of\n// inline padding, an outline variant border while unselected, the secondary\n// container pair once selected.\n\ntype ChipProps = ToggleButtonProps;\n\n/**\n * A chip is a two-state button, so its selected state is React Aria's\n * `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to\n * let it keep its own state. Selection is announced through `aria-pressed`\n * rather than a role of its own.\n */\nfunction Chip({\n  children,\n  ...props\n}: ChipProps) {\n  return <ToggleButton {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {children}\n    </ToggleButton>;\n}\n\n// StyleX has no way to target [data-selected] on the element it is styling,\n// so the selected styles cannot be chosen in CSS. React Aria's answer is to\n// let className and style be functions of the component's own render state,\n// which is what this is — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// mergeStatefulStyles takes the function rather than a computed result for\n// exactly that reason, and combines it with whatever the call site passed.\nfunction propsFor(state: ToggleButtonRenderProps) {\n  return {\n    0: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1qno0dh x1eaenvl xpc4ca7 x1a42vn9 x6gcojk xjbqb8w xd8uu4e x133yhug xhfb3ry x1w5n3ug\"\n    },\n    1: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1qno0dh x1eaenvl xpc4ca7 xctpbsp x1n0xrd1 x1qndd53 x15dekr4 x9r1u3d xhfb3ry x1sawysd\"\n    }\n  }[!!state.isSelected << 0];\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;AA6BA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,MAAA,EAAA,UAAA,IAAA,GAAA,UAAA;EAAA,WAAA;EAIJ,KAAA;EAAiBA,KAAA;EAAW,KAAA,oBAAoB,UAAU,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,WAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,YAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAAjE,KAAA,oBAAC,IAAD;GAAa,GAAKA;GAAK,GAAM;GAC/B;EADe,CAAA;EAEH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFV;AAEU;AAWnB,SAAS,SAAS,OAAgC;CAChD,OAAO;EACL,GAAG,EACD,WAAW,2RACb;EACA,GAAG,EACD,WAAW,4RACb;CACF,EAAE,CAAC,CAAC,MAAM,cAAc;AAC1B"}

package/dist/components/list-item/index.d.ts

@@ -17,10 +17,12 @@ type ListItemProps = {
   trailing?: ReactNode;
 } & HTMLAttributes<HTMLElement>;
 /**
- * A static row: the row every list draws, on its own. The layout and the
- * states are the row module's in `src/row`, shared with every collection
- * item; what is here is the element around them — a `<div>` that presents,
- * or a `<button>` that ripples — and the props that fill the slots.
+ * A static row: the row every list draws, on its own, as the lists spec page
+ * gives it — a 56px floor, a body-large headline and a body-medium
+ * supporting line. The layout and the states are the row module's in
+ * `src/row`, shared with every collection item; what is here is the element
+ * around them — a `<div>` that presents, or a `<button>` that ripples — and
+ * the props that fill the slots.
  */
 declare function ListItem({ children, interactive, leading, supporting, trailing, ...props }: ListItemProps): import("react").JSX.Element;
 //#endregion

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

@@ -6,10 +6,12 @@ import { RowContent } from "../../row/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/list-item/index.tsx
 /**
-* A static row: the row every list draws, on its own. The layout and the
-* states are the row module's in `src/row`, shared with every collection
-* item; what is here is the element around them — a `<div>` that presents,
-* or a `<button>` that ripples — and the props that fill the slots.
+* A static row: the row every list draws, on its own, as the lists spec page
+* gives it — a 56px floor, a body-large headline and a body-medium
+* supporting line. The layout and the states are the row module's in
+* `src/row`, shared with every collection item; what is 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, supporting, trailing, ...props$1 }) {
 	const ripple = useRipple(interactive);
@@ -21,14 +23,14 @@ function ListItem({ children, interactive = false, leading, supporting, trailing
 	});
 	if (!interactive) return /* @__PURE__ */ jsx("div", {
 		...props$1,
-		...mergeStyles(props(rowStyles.base), props$1),
+		...mergeStyles(props(rowStyles.base, rowStyles.list), props$1),
 		children: content
 	});
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		...ripple.handlers,
 		...props$1,
-		...mergeStyles(props(rowStyles.base, rowStyles.interactive), props$1),
+		...mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive), props$1),
 		children: [content, ripple.surface]
 	});
 }

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  /** 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. The layout and the\n * states are the row module's in `src/row`, shared with every collection\n * item; what is here is the element around them — a `<div>` that presents,\n * or a `<button>` that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  leading,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\n  const content = <RowContent leading={leading} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n  if (!interactive) {\n    return <div {...props} {...mergeStyles(stylex.props(rowStyles.base), props)}>\n        {content}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.interactive), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;AA6BA,SAAS,SAAS,EAChB,UACA,cAAc,OACd,SACA,YACA,UACA,GAAG,WACa;CAChB,MAAM,SAAS,UAA6B,WAAW;CACvD,MAAM,UAAU,oBAAC,YAAD;EAAqB;EAAqB;EAAsB;EAC3E;CACS,CAAA;CACd,IAAI,CAAC,aACH,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,IAAI,GAAG,OAAK;EACrE,UAAA;CACE,CAAA;CAET,OAAO,qBAAC,UAAD;EAAQ,MAAK;EAAS,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,MAAM,UAAU,WAAW,GAAG,OAAK;EAAhI,UAAA,CACF,SACA,OAAO,OACF;;AACZ"}
+{"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  /** 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 floor, a body-large headline and a body-medium\n * supporting line. The layout and the states are the row module's in\n * `src/row`, shared with every collection item; what is here is the element\n * around them — a `<div>` that presents, or a `<button>` that ripples — and\n * the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  leading,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\n  const content = <RowContent leading={leading} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n  if (!interactive) {\n    return <div {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list), props)}>\n        {content}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;AA+BA,SAAS,SAAS,EAChB,UACA,cAAc,OACd,SACA,YACA,UACA,GAAG,WACa;CAChB,MAAM,SAAS,UAA6B,WAAW;CACvD,MAAM,UAAU,oBAAC,YAAD;EAAqB;EAAqB;EAAsB;EAC3E;CACS,CAAA;CACd,IAAI,CAAC,aACH,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,MAAM,UAAU,IAAI,GAAG,OAAK;EACrF,UAAA;CACE,CAAA;CAET,OAAO,qBAAC,UAAD;EAAQ,MAAK;EAAS,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,MAAM,UAAU,MAAM,UAAU,WAAW,GAAG,OAAK;EAAhJ,UAAA,CACF,SACA,OAAO,OACF;;AACZ"}

package/dist/row/index.js

@@ -1,91 +1,39 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { rowStyles } from "./styles.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { c } from "react/compiler-runtime";
 //#region src/row/index.tsx
 /**
 * The inside of a row: the leading slot, the headline with its supporting
 * line, and the trailing slot, each rendered only when given. The element
 * around it is the caller's — ListItem's div or button, a collection's item —
-* and takes `rowStyles.base` with whichever states apply; this is what every
-* one of them puts inside it, so a list, a menu and a tree draw the same row.
+* and takes `rowStyles.base`, the variant's `rowStyles.list` or
+* `rowStyles.menu`, and whichever states apply; this is what every one of
+* them puts inside it, so a list, a menu and a tree draw the same row.
 *
 * Not a component of the library's own and not exported; see `src/field` for
 * the same arrangement around a field.
 */
-function RowContent(t0) {
-	const $ = c(17);
-	const { children, leading, supporting, trailing } = t0;
-	let t1;
-	if ($[0] !== leading) {
-		t1 = leading === void 0 ? null : /* @__PURE__ */ jsx("span", {
+function RowContent({ children, leading, supporting, trailing, variant = "list" }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		leading === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			...props(rowStyles.slot),
 			children: leading
-		});
-		$[0] = leading;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	let t3;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = props(rowStyles.main);
-		t3 = props(rowStyles.headline);
-		$[2] = t2;
-		$[3] = t3;
-	} else {
-		t2 = $[2];
-		t3 = $[3];
-	}
-	let t4;
-	if ($[4] !== children) {
-		t4 = /* @__PURE__ */ jsx("span", {
-			...t3,
-			children
-		});
-		$[4] = children;
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] !== supporting) {
-		t5 = supporting === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			...props(rowStyles.supporting),
-			children: supporting
-		});
-		$[6] = supporting;
-		$[7] = t5;
-	} else t5 = $[7];
-	let t6;
-	if ($[8] !== t4 || $[9] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("span", {
-			...t2,
-			children: [t4, t5]
-		});
-		$[8] = t4;
-		$[9] = t5;
-		$[10] = t6;
-	} else t6 = $[10];
-	let t7;
-	if ($[11] !== trailing) {
-		t7 = trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			...props(rowStyles.main),
+			children: [/* @__PURE__ */ jsx("span", {
+				...props(variant === "menu" ? rowStyles.headlineMenu : rowStyles.headlineList),
+				children
+			}), supporting === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				...props(rowStyles.supporting),
+				children: supporting
+			})]
+		}),
+		trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			...props(rowStyles.slot),
 			children: trailing
-		});
-		$[11] = trailing;
-		$[12] = t7;
-	} else t7 = $[12];
-	let t8;
-	if ($[13] !== t1 || $[14] !== t6 || $[15] !== t7) {
-		t8 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t1,
-			t6,
-			t7
-		] });
-		$[13] = t1;
-		$[14] = t6;
-		$[15] = t7;
-		$[16] = t8;
-	} else t8 = $[16];
-	return t8;
+		})
+	] });
 }
 //#endregion
 export { RowContent };

package/dist/row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["leading","children","supporting","trailing"],"sources":["../../src/row/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from './styles';\ninterface RowContentProps {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: 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}\n\n/**\n * The inside of a row: the leading slot, the headline with its supporting\n * line, and the trailing slot, each rendered only when given. The element\n * around it is the caller's — ListItem's div or button, a collection's item —\n * and takes `rowStyles.base` with whichever states apply; this is what every\n * one of them puts inside it, so a list, a menu and a tree draw the same row.\n *\n * Not a component of the library's own and not exported; see `src/field` for\n * the same arrangement around a field.\n */\nfunction RowContent({\n  children,\n  leading,\n  supporting,\n  trailing\n}: RowContentProps) {\n  return <>\n      {leading === undefined ? null : <span {...stylex.props(rowStyles.slot)}>{leading}</span>}\n      <span {...stylex.props(rowStyles.main)}>\n        <span {...stylex.props(rowStyles.headline)}>{children}</span>\n        {supporting === undefined ? null : <span {...stylex.props(rowStyles.supporting)}>{supporting}</span>}\n      </span>\n      {trailing === undefined ? null : <span {...stylex.props(rowStyles.slot)}>{trailing}</span>}\n    </>;\n}\nexport type { RowContentProps };\nexport { RowContent };"],"mappings":";;;;;;;;;;;;;;;AAwBA,SAAA,WAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAoB,MAAA,EAAA,UAAA,SAAA,YAAA,aAAA;CAKF,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EAEX,KAAA,YAAY,KAAA,IAAZ,OAA+B,oBAAA,QAAA;GAAwD,GAA9C,MAAa,UAAS,IAAK;GAAI,UAAA;EAAe,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAC9E,KAAA,MAAa,UAAS,IAAK;EACzB,KAAA,MAAa,UAAS,QAAS;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA;EAA1C,KAAA,oBAAA,QAAA;GAA6D,GAAnD;GAAmC;EAAgB,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA;EAC5D,KAAA,eAAe,KAAA,IAAf,OAAkC,oBAAA,QAAA;GAAiE,GAAvD,MAAa,UAAS,UAAW;GAAI,UAAA;EAAkB,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAFtG,KAAA,qBAAA,QAAA;GAGO,GAHG;GAAV,UAAA,CACE,IACC,EACI;;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,UAAA;EACN,KAAA,aAAa,KAAA,IAAb,OAAgC,oBAAA,QAAA;GAAyD,GAA/C,MAAa,UAAS,IAAK;GAAI,UAAA;EAAgB,CAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EANvF,KAAA,qBAAA,UAAA,EAAA,UAAA;GACF;GACD;GAIC;EAAyF,EAAA,CAAA;EACzF,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAPE;AAOF"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/row/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from './styles';\ninterface RowContentProps {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: 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  /**\n   * Which spec page's row this is. A list item's headline is body-large; a\n   * menu item's label is label-large. The element around the content applies\n   * the matching `rowStyles.list` or `rowStyles.menu` beside `rowStyles.base`.\n   * @default 'list'\n   */\n  variant?: RowVariant;\n}\ntype RowVariant = 'list' | 'menu';\n\n/**\n * The inside of a row: the leading slot, the headline with its supporting\n * line, and the trailing slot, each rendered only when given. The element\n * around it is the caller's — ListItem's div or button, a collection's item —\n * and takes `rowStyles.base`, the variant's `rowStyles.list` or\n * `rowStyles.menu`, and whichever states apply; this is what every one of\n * them puts inside it, so a list, a menu and a tree draw the same row.\n *\n * Not a component of the library's own and not exported; see `src/field` for\n * the same arrangement around a field.\n */\nfunction RowContent({\n  children,\n  leading,\n  supporting,\n  trailing,\n  variant = 'list'\n}: RowContentProps) {\n  return <>\n      {leading === undefined ? null : <span {...stylex.props(rowStyles.slot)}>{leading}</span>}\n      <span {...stylex.props(rowStyles.main)}>\n        <span {...stylex.props(variant === 'menu' ? rowStyles.headlineMenu : rowStyles.headlineList)}>\n          {children}\n        </span>\n        {supporting === undefined ? null : <span {...stylex.props(rowStyles.supporting)}>{supporting}</span>}\n      </span>\n      {trailing === undefined ? null : <span {...stylex.props(rowStyles.slot)}>{trailing}</span>}\n    </>;\n}\nexport type { RowContentProps, RowVariant };\nexport { RowContent };"],"mappings":";;;;;;;;;;;;;;;AAiCA,SAAS,WAAW,EAClB,UACA,SACA,YACA,UACA,UAAU,UACQ;CAClB,OAAO,qBAAA,UAAA,EAAA,UAAA;EACF,YAAY,KAAA,IAAY,OAAO,oBAAC,QAAD;GAAM,GAAI,MAAa,UAAU,IAAI;GAAI,UAAA;EAAc,CAAA;EACvF,qBAAC,QAAD;GAAM,GAAI,MAAa,UAAU,IAAI;GAArC,UAAA,CACE,oBAAC,QAAD;IAAM,GAAI,MAAa,YAAY,SAAS,UAAU,eAAe,UAAU,YAAY;IACxF;GACG,CAAA,GACL,eAAe,KAAA,IAAY,OAAO,oBAAC,QAAD;IAAM,GAAI,MAAa,UAAU,UAAU;IAAI,UAAA;GAAiB,CAAA,CAC/F;;EACL,aAAa,KAAA,IAAY,OAAO,oBAAC,QAAD;GAAM,GAAI,MAAa,UAAU,IAAI;GAAI,UAAA;EAAe,CAAA;CAC3F,EAAA,CAAA;AACJ"}

package/dist/row/styles.js

@@ -9,7 +9,6 @@ const rowStyles = {
 		k1xSpc: "x78zum5",
 		kOIVth: "xxj4525",
 		kzqmXN: "xh8yej3",
-		kAzted: "xbktkl8",
 		k8WAf4: "x1uvvd8r",
 		kg3NbH: "x790zyz",
 		kVAEAm: "x1n2onr6",
@@ -22,7 +21,15 @@ const rowStyles = {
 		kkrTdU: "x1h6gzvc",
 		$$css: true
 	},
-	headline: {
+	headlineList: {
+		kMv6JI: "x16svsjw",
+		kGuDYH: "x1848etk",
+		k63SB2: "x1c52epr",
+		kb6lSQ: "x1qn8t5l",
+		kLWn49: "xh7dzej",
+		$$css: true
+	},
+	headlineMenu: {
 		kMv6JI: "xkknnkr",
 		kGuDYH: "x14zspaw",
 		k63SB2: "x1v9cpvo",
@@ -40,6 +47,10 @@ const rowStyles = {
 		kMeerF: "x1de99jn",
 		$$css: true
 	},
+	list: {
+		kAzted: "xbktkl8",
+		$$css: true
+	},
 	main: {
 		k1xSpc: "x78zum5",
 		kXwgrk: "xdt5ytf",
@@ -48,9 +59,18 @@ const rowStyles = {
 		k7Eaqz: "xeuugli",
 		$$css: true
 	},
-	selected: {
-		kWkggS: "xnqsvhv xlizrex x15dekr4",
-		kMwMTN: "x1sawysd",
+	menu: {
+		kAzted: "x1wxaq2x",
+		$$css: true
+	},
+	selectedList: {
+		kWkggS: "xxwd9aw x1hei0q8 xp89om9",
+		kMwMTN: "xscdzaa",
+		$$css: true
+	},
+	selectedMenu: {
+		kWkggS: "xoc6x28 x2p4cas xs6yvni",
+		kMwMTN: "x3cbcwg",
 		$$css: true
 	},
 	slot: {
@@ -61,11 +81,11 @@ const rowStyles = {
 	},
 	supporting: {
 		kMwMTN: "x1w5n3ug",
-		kMv6JI: "x1yicsit",
-		kGuDYH: "x1b35g6e",
-		k63SB2: "x9d6959",
-		kb6lSQ: "xwth0xh",
-		kLWn49: "xybisxh",
+		kMv6JI: "xpo2rfv",
+		kGuDYH: "x193rfdd",
+		k63SB2: "x1hews6w",
+		kb6lSQ: "xn43zvd",
+		kLWn49: "xv61bfh",
 		$$css: true
 	}
 };

package/dist/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":[],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row every list draws: ListItem's, and from here on the item of every\n// collection the coverage plan adds — ListBox, Menu, List, Tree, the options\n// of Select and ComboBox. Apart from the RowContent component in ./index.tsx\n// so that file exports components alone, which is what keeps fast refresh\n// working for it.\n//\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, a menu, or the page.\n// `selected` is the one state that brings a container of its own, the\n// secondary one Chip's selected state uses, so a selected row and a selected\n// chip in the same view read as the same thing.\nconst rowStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    kAzted: \"xbktkl8\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  headline: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  interactive: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  main: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"x14qo01y\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  slot: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  supporting: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  }\n};\nexport { rowStyles };"],"mappings":";AA0BA,MAAM,YAAY;CAChB,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,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,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,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":[],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row every list draws: ListItem's, and from here on the item of every\n// collection the coverage plan adds — ListBox, Menu, List, Tree, the options\n// of Select and ComboBox. Apart from the RowContent component in ./index.tsx\n// so that file exports components alone, which is what keeps fast refresh\n// working for it.\n//\n// Two variants, because two spec pages draw two rows. The lists page gives a\n// list item a 56dp floor, a body-large headline and a body-medium supporting\n// line, and primary container when selected. The menus page gives a menu\n// item 48dp, a label-large label, and tertiary container when selected. The\n// layout, the padding, the state layers and the disabled treatment are one\n// row; `list` and `menu` carry only what the two pages disagree on, and a\n// consumer applies one of them beside `base`.\n//\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, a menu, or the page.\n// The two selected states are the ones that bring a container of their own.\nconst rowStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  headlineList: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  interactive: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  list: {\n    kAzted: \"xbktkl8\",\n    $$css: true\n  },\n  main: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"x14qo01y\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  },\n  menu: {\n    kAzted: \"x1wxaq2x\",\n    $$css: true\n  },\n  selectedList: {\n    kWkggS: \"xxwd9aw x1hei0q8 xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  selectedMenu: {\n    kWkggS: \"xoc6x28 x2p4cas xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  },\n  slot: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  supporting: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  }\n};\nexport { rowStyles };"],"mappings":";AAgCA,MAAM,YAAY;CAChB,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,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/dist/styles.css

@@ -1161,6 +1161,10 @@
     background-color: color-mix(in srgb,var(--x1p425jc) calc(var(--x8z5t6h) * 100%),var(--x17f4f9w));
   }
 
+  .x2p4cas:hover {
+    background-color: color-mix(in srgb,var(--x1pzkjol) calc(var(--x8z5t6h) * 100%),var(--x1p33ujy));
+  }
+
   .x1728qcm:hover {
     background-color: color-mix(in srgb,var(--x28n2pw) calc(var(--x8z5t6h) * 100%),transparent);
   }
@@ -1214,6 +1218,14 @@
     background-color: color-mix(in srgb,var(--x1f7qwsz) calc(var(--xhaltwz) * 100%),var(--x1cjupv7));
   }
 
+  .xxwd9aw:active {
+    background-color: color-mix(in srgb,var(--x1p425jc) calc(var(--xhaltwz) * 100%),var(--x17f4f9w));
+  }
+
+  .xoc6x28:active {
+    background-color: color-mix(in srgb,var(--x1pzkjol) calc(var(--xhaltwz) * 100%),var(--x1p33ujy));
+  }
+
   .x1dg9itu:active {
     background-color: color-mix(in srgb,var(--x28n2pw) calc(var(--xhaltwz) * 100%),transparent);
   }
@@ -1338,6 +1350,10 @@
     max-width: var(--x-maxInlineSize);
   }
 
+  .x1wxaq2x {
+    min-height: 48px;
+  }
+
   .xbktkl8 {
     min-height: 56px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",