@kanso-labs/kanso-ui 0.26.2 → 0.26.3

package/dist/components/number-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["label","slot","children"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\nconst styles = {\n  stepper: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1fgtraw\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader.\n   * @default 'Decrease'\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader.\n   * @default 'Increase'\n   */\n  incrementLabel?: string;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel = 'Decrease',\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel = 'Increase',\n  isDisabled = false,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} />\n          <div {...{\n          0: {\n            className: \"x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x78zum5 x2lah0s x1q0g3np xdj266r x1tn5xpv\"\n          },\n          1: {\n            className: \"x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x78zum5 x2lah0s x1q0g3np x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","IconButton","styles","stepper","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","label","numeric","steppers","variant","Omit","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","t7","props","undefined","inline","validationBehavior","T0","t8","t9","root","t10","Symbol","for","0","className","1","t11","t12","t13","2","3","t14","t15","t16","t17","t18","t19","t20","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\nconst styles = {\n  stepper: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1fgtraw\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader.\n   * @default 'Decrease'\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader.\n   * @default 'Increase'\n   */\n  incrementLabel?: string;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel = 'Decrease',\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel = 'Increase',\n  isDisabled = false,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} />\n          <div {...{\n          0: {\n            className: \"x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x78zum5 x2lah0s x1q0g3np xdj266r x1tn5xpv\"\n          },\n          1: {\n            className: \"x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x78zum5 x2lah0s x1q0g3np x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}

package/dist/components/popover/index.js

@@ -1,9 +1,9 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { overlay, placementOf, popupOrigin } from "../../styles/overlay.js";
-import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { createContext, useContext, useEffect, useId, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 import { Dialog, DialogTrigger, Heading, Popover, PreviewTrigger, Text } from "react-aria-components";
 //#region src/components/popover/index.tsx
 const DEFAULT_SIDE_OFFSET = 8;
@@ -69,27 +69,98 @@ const DescriptionContext = createContext({
 * `Popover` opens it, and one given `slot="close"` inside the content closes
 * it; neither needs a part of its own.
 */
-function Popover$1({ children, closeDelay = DEFAULT_HOVER_CLOSE_DELAY, delay = DEFAULT_HOVER_DELAY, modal = false, size = "md", trigger = "press", ...props }) {
-	const context = useMemo(() => ({
-		modal,
-		size
-	}), [modal, size]);
-	if (trigger === "hover") return /* @__PURE__ */ jsx(PopoverContext, {
-		value: context,
-		children: /* @__PURE__ */ jsx(PreviewTrigger, {
-			closeDelay,
-			delay,
-			...props,
-			children
-		})
-	});
-	return /* @__PURE__ */ jsx(PopoverContext, {
-		value: context,
-		children: /* @__PURE__ */ jsx(DialogTrigger, {
+function Popover$1(t0) {
+	const $ = c(25);
+	let children;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[0] !== t0) {
+		({children, closeDelay: t1, delay: t2, modal: t3, size: t4, trigger: t5, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+		$[7] = t5;
+	} else {
+		children = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+		t4 = $[6];
+		t5 = $[7];
+	}
+	const closeDelay = t1 === void 0 ? DEFAULT_HOVER_CLOSE_DELAY : t1;
+	const delay = t2 === void 0 ? DEFAULT_HOVER_DELAY : t2;
+	const modal = t3 === void 0 ? false : t3;
+	const size = t4 === void 0 ? "md" : t4;
+	const trigger = t5 === void 0 ? "press" : t5;
+	let t6;
+	if ($[8] !== modal || $[9] !== size) {
+		t6 = {
+			modal,
+			size
+		};
+		$[8] = modal;
+		$[9] = size;
+		$[10] = t6;
+	} else t6 = $[10];
+	const context = t6;
+	if (trigger === "hover") {
+		let t7;
+		if ($[11] !== children || $[12] !== closeDelay || $[13] !== delay || $[14] !== props) {
+			t7 = /* @__PURE__ */ jsx(PreviewTrigger, {
+				closeDelay,
+				delay,
+				...props,
+				children
+			});
+			$[11] = children;
+			$[12] = closeDelay;
+			$[13] = delay;
+			$[14] = props;
+			$[15] = t7;
+		} else t7 = $[15];
+		let t8;
+		if ($[16] !== context || $[17] !== t7) {
+			t8 = /* @__PURE__ */ jsx(PopoverContext, {
+				value: context,
+				children: t7
+			});
+			$[16] = context;
+			$[17] = t7;
+			$[18] = t8;
+		} else t8 = $[18];
+		return t8;
+	}
+	let t7;
+	if ($[19] !== children || $[20] !== props) {
+		t7 = /* @__PURE__ */ jsx(DialogTrigger, {
 			...props,
 			children
-		})
-	});
+		});
+		$[19] = children;
+		$[20] = props;
+		$[21] = t7;
+	} else t7 = $[21];
+	let t8;
+	if ($[22] !== context || $[23] !== t7) {
+		t8 = /* @__PURE__ */ jsx(PopoverContext, {
+			value: context,
+			children: t7
+		});
+		$[22] = context;
+		$[23] = t7;
+		$[24] = t8;
+	} else t8 = $[24];
+	return t8;
 }
 /**
 * The panel itself. Everything the popover shows goes in here; the trigger
@@ -100,41 +171,147 @@ function Popover$1({ children, closeDelay = DEFAULT_HOVER_CLOSE_DELAY, delay = D
 * opposite side and shifts along the edge of the viewport on its own rather
 * than being clipped by it.
 */
-function PopoverContent({ align = "center", alignOffset, children, className, container, side = "bottom", sideOffset = DEFAULT_SIDE_OFFSET, style, triggerRef, ...props$1 }) {
+function PopoverContent(t0) {
+	const $ = c(40);
+	let alignOffset;
+	let children;
+	let className;
+	let container;
+	let props$1;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let triggerRef;
+	if ($[0] !== t0) {
+		({align: t1, alignOffset, children, className, container, side: t2, sideOffset: t3, style, triggerRef, ...props$1} = t0);
+		$[0] = t0;
+		$[1] = alignOffset;
+		$[2] = children;
+		$[3] = className;
+		$[4] = container;
+		$[5] = props$1;
+		$[6] = style;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = triggerRef;
+	} else {
+		alignOffset = $[1];
+		children = $[2];
+		className = $[3];
+		container = $[4];
+		props$1 = $[5];
+		style = $[6];
+		t1 = $[7];
+		t2 = $[8];
+		t3 = $[9];
+		triggerRef = $[10];
+	}
+	const align = t1 === void 0 ? "center" : t1;
+	const side = t2 === void 0 ? "bottom" : t2;
+	const sideOffset = t3 === void 0 ? DEFAULT_SIDE_OFFSET : t3;
 	const { modal, size } = useContext(PopoverContext);
 	const descriptionId = useId();
 	const [described, setDescribed] = useState(false);
-	const register = useCallback(() => {
-		setDescribed(true);
-		return () => {
-			setDescribed(false);
+	let t4;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => {
+			setDescribed(true);
+			return () => {
+				setDescribed(false);
+			};
 		};
-	}, []);
-	const description = useMemo(() => ({
-		id: descriptionId,
-		register
-	}), [descriptionId, register]);
-	return /* @__PURE__ */ jsx(Popover, {
-		crossOffset: alignOffset,
-		isNonModal: !modal,
-		offset: sideOffset,
-		placement: placementOf(side, align),
-		triggerRef,
-		UNSTABLE_portalContainer: container,
-		...mergeStatefulStyles((state) => props(overlay.popup, styles.content, styles[size], popupOrigin(state.placement)), {
+		$[11] = t4;
+	} else t4 = $[11];
+	const register = t4;
+	let t5;
+	if ($[12] !== descriptionId) {
+		t5 = {
+			id: descriptionId,
+			register
+		};
+		$[12] = descriptionId;
+		$[13] = t5;
+	} else t5 = $[13];
+	const description = t5;
+	const t6 = !modal;
+	let t7;
+	if ($[14] !== align || $[15] !== side) {
+		t7 = placementOf(side, align);
+		$[14] = align;
+		$[15] = side;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== size) {
+		t8 = (state) => props(overlay.popup, styles.content, styles[size], popupOrigin(state.placement));
+		$[17] = size;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== className || $[20] !== style || $[21] !== t8) {
+		t9 = mergeStatefulStyles(t8, {
 			className,
 			style
-		}),
-		children: /* @__PURE__ */ jsx(Dialog, {
-			"aria-describedby": described ? descriptionId : void 0,
+		});
+		$[19] = className;
+		$[20] = style;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	const t10 = described ? descriptionId : void 0;
+	let t11;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = props(overlay.popupDialog);
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== children || $[25] !== description) {
+		t12 = /* @__PURE__ */ jsx(DescriptionContext, {
+			value: description,
+			children
+		});
+		$[24] = children;
+		$[25] = description;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== props$1 || $[28] !== t10 || $[29] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Dialog, {
+			"aria-describedby": t10,
 			...props$1,
-			...props(overlay.popupDialog),
-			children: /* @__PURE__ */ jsx(DescriptionContext, {
-				value: description,
-				children
-			})
-		})
-	});
+			...t11,
+			children: t12
+		});
+		$[27] = props$1;
+		$[28] = t10;
+		$[29] = t12;
+		$[30] = t13;
+	} else t13 = $[30];
+	let t14;
+	if ($[31] !== alignOffset || $[32] !== container || $[33] !== sideOffset || $[34] !== t13 || $[35] !== t6 || $[36] !== t7 || $[37] !== t9 || $[38] !== triggerRef) {
+		t14 = /* @__PURE__ */ jsx(Popover, {
+			crossOffset: alignOffset,
+			isNonModal: t6,
+			offset: sideOffset,
+			placement: t7,
+			triggerRef,
+			UNSTABLE_portalContainer: container,
+			...t9,
+			children: t13
+		});
+		$[31] = alignOffset;
+		$[32] = container;
+		$[33] = sideOffset;
+		$[34] = t13;
+		$[35] = t6;
+		$[36] = t7;
+		$[37] = t9;
+		$[38] = triggerRef;
+		$[39] = t14;
+	} else t14 = $[39];
+	return t14;
 }
 /**
 * Supporting copy under the title. The panel's `aria-describedby` points at

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["id"],"sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, PopoverRenderProps, StyleOrFunction, TextProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from 'react';\nimport { Dialog, DialogTrigger, Heading, PreviewTrigger, Popover as RACPopover, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The gap between the anchor and the panel, matching `spacing.sm`'s default.\n// A number rather than the token, because React Aria computes the position in\n// JavaScript and so cannot read a CSS custom property — this is the one place\n// in the component where a step of the spacing scale is spelled out. React\n// Aria's own default is 8 as well, but the value is this component's decision\n// rather than an inherited one.\nconst DEFAULT_SIDE_OFFSET = 8;\n\n// The surface, its entry and the dialog's focus ring are the overlay module's,\n// shared with every anchored overlay; what is here is Popover's own — its\n// inset, its two widths, and the type of its title and description.\n//\n// Popover has no page of its own, so the inset and the type follow the rich\n// tooltip, the nearest thing the Material Design pages draw: a plain rounded\n// panel offset from its anchor, with no caret drawn between the two, holding\n// a subhead over supporting text.\n//\n// React Aria's popover is two elements — the positioned panel and the dialog\n// inside it — so the styles are split the same way: the surface, `content`\n// and a size on the panel, the dialog style on the element that carries the\n// role.\nconst styles = {\n  content: {\n    kGO01o: \"xqf7pud\",\n    kLKAdn: \"x6gmt8y\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  description: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  md: {\n    ks0D6T: \"x10u2fgw\",\n    $$css: true\n  },\n  sm: {\n    ks0D6T: \"xjjheoa\",\n    $$css: true\n  },\n  title: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  }\n};\n\n// How long a pointer rests on the trigger before a hovered popover opens,\n// and how long it has to leave before it closes. React Aria's own defaults,\n// spelled out because they are the whole feel of a hover trigger and worth\n// finding in the component rather than in a changelog.\nconst DEFAULT_HOVER_DELAY = 600;\nconst DEFAULT_HOVER_CLOSE_DELAY = 200;\n\n// The overlay module's, since which side a surface opens on is the same\n// question for every anchored overlay. Aliased rather than re-declared so\n// the names a call site imports stay this component's.\ntype PopoverAlign = OverlayAlign;\ntype PopoverSide = OverlaySide;\ntype PopoverSize = 'md' | 'sm';\n\n// `size` and `modal` are declared on the root, where a reader expects to set\n// the shape of the whole popover, but it is `Popover.Content` that has to\n// apply them. Through context rather than making the call site repeat them —\n// the same arrangement Sheet uses, and worth keeping identical between the\n// two panels a consumer is most likely to reach for in the same afternoon.\nconst PopoverContext = createContext<{\n  modal: boolean;\n  size: PopoverSize;\n}>({\n  modal: false,\n  size: 'md'\n});\n\n// React Aria points a dialog's `aria-describedby` at its description slot\n// only for an alert dialog, on the grounds that an ordinary dialog's content\n// is read anyway. A popover's description names what the panel is for, so it\n// is pointed at here: the content hands the description an id, and the\n// description reports that it is mounted, since an `aria-describedby` with\n// nothing at the other end is an invalid reference rather than a harmless one.\nconst DescriptionContext = createContext<{\n  id: string;\n  register: () => () => void;\n}>({\n  id: '',\n  register: () => () => {}\n});\ntype PopoverProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n  /**\n   * How long the pointer has to leave a hovered popover before it closes, in\n   * milliseconds. Ignored by a pressed one.\n   * @default 200\n   */\n  closeDelay?: number;\n  /**\n   * How long the pointer has to rest on the trigger before a hovered popover\n   * opens, in milliseconds. Ignored by a pressed one.\n   * @default 600\n   */\n  delay?: number;\n  /**\n   * Blocks the page behind the panel while it is open, as a dialog would.\n   * Off by default: a popover leaves the page interactive, which is the\n   * difference from `Sheet`.\n   * @default false\n   */\n  modal?: boolean;\n  /**\n   * Panel width: `sm` caps at 240px, `md` at 320px. Either way the panel is\n   * only as wide as its contents, and never wider than the viewport.\n   * @default 'md'\n   */\n  size?: PopoverSize;\n  /**\n   * What opens the panel: a press, or a pointer resting on the trigger.\n   * `hover` is the tooltips page's rich tooltip — it opens on hover, focus\n   * or a long press, and stays open while the pointer is inside it, so the\n   * panel's own buttons and links can be reached.\n   * @default 'press'\n   */\n  trigger?: PopoverTrigger;\n};\ntype PopoverTrigger = 'hover' | 'press';\n\n// React Aria names a placement by the side and, along it, the end the panel\n// is aligned to — `bottom start`, or `left top` on the sides where the axis\n// runs the other way.\n/**\n * A panel anchored to the control that opened it. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Non-modal by design — the page behind stays scrollable and clickable, which\n * is the difference from `Sheet`. Pass `modal` to change that.\n *\n * Composed rather than configured by props, because a popover's contents are\n * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and\n * `Popover.Description`. A `Button` or `IconButton` placed directly inside\n * `Popover` opens it, and one given `slot=\"close\"` inside the content closes\n * it; neither needs a part of its own.\n */\nfunction Popover({\n  children,\n  closeDelay = DEFAULT_HOVER_CLOSE_DELAY,\n  delay = DEFAULT_HOVER_DELAY,\n  modal = false,\n  size = 'md',\n  trigger = 'press',\n  ...props\n}: PopoverProps) {\n  const context = useMemo(() => ({\n    modal,\n    size\n  }), [modal, size]);\n\n  // A hovered popover is React Aria's preview trigger, which is a different\n  // element around the same parts rather than a mode of the pressed one: it\n  // opens from hover, focus or a long press, and it is always non-modal,\n  // since a panel that blocked the page while the pointer merely rested on\n  // something would be a trap. `modal` is left alone rather than refused,\n  // and `Popover.Content` reads it as it always did — the two are simply\n  // never combined by anything the page draws.\n  if (trigger === 'hover') {\n    return <PopoverContext value={context}>\n        <PreviewTrigger closeDelay={closeDelay} delay={delay} {...props}>\n          {children}\n        </PreviewTrigger>\n      </PopoverContext>;\n  }\n  return <PopoverContext value={context}>\n      <DialogTrigger {...props}>{children}</DialogTrigger>\n    </PopoverContext>;\n}\n\n/**\n * The panel itself. Everything the popover shows goes in here; the trigger\n * stays outside it, since the trigger lives in the page while this is\n * portalled out to the end of the body.\n *\n * Placement is React Aria's anchor positioning, so the panel flips to the\n * opposite side and shifts along the edge of the viewport on its own rather\n * than being clipped by it.\n */\nfunction PopoverContent({\n  align = 'center',\n  alignOffset,\n  children,\n  className,\n  container,\n  side = 'bottom',\n  sideOffset = DEFAULT_SIDE_OFFSET,\n  style,\n  triggerRef,\n  ...props\n}: PopoverContentProps) {\n  const {\n    modal,\n    size\n  } = useContext(PopoverContext);\n  const descriptionId = useId();\n  const [described, setDescribed] = useState(false);\n  const register = useCallback(() => {\n    setDescribed(true);\n    return () => {\n      setDescribed(false);\n    };\n  }, []);\n  const description = useMemo(() => ({\n    id: descriptionId,\n    register\n  }), [descriptionId, register]);\n  return <RACPopover crossOffset={alignOffset} isNonModal={!modal} offset={sideOffset} placement={placementOf(side, align)} triggerRef={triggerRef}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles((state: PopoverRenderProps) => stylex.props(overlay.popup, styles.content, styles[size], popupOrigin(state.placement)), {\n    className,\n    style\n  })}>\n      <Dialog aria-describedby={described ? descriptionId : undefined} {...props} {...stylex.props(overlay.popupDialog)}>\n        <DescriptionContext value={description}>{children}</DescriptionContext>\n      </Dialog>\n    </RACPopover>;\n}\n\n/**\n * Supporting copy under the title. The panel's `aria-describedby` points at\n * it — see DescriptionContext for why that is this component's doing.\n */\nfunction PopoverDescription(props: PopoverDescriptionProps) {\n  const {\n    id,\n    register\n  } = useContext(DescriptionContext);\n  useEffect(() => register(), [register]);\n  return <Text id={id} slot=\"description\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1ghz6dp\"\n  }, props)} />;\n}\n\n/**\n * Names the popover. Rendered through React Aria's title slot, which is what\n * points the panel's `aria-labelledby` at it — a popover without one announces\n * itself unnamed.\n */\nfunction PopoverTitle(props: PopoverTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q x1ghz6dp\"\n  }, props)} />;\n}\nPopover.Content = PopoverContent;\nPopover.Description = PopoverDescription;\nPopover.Title = PopoverTitle;\n\n// The dialog's own props, plus the four that place the panel and its\n// styling. Those belong to the positioned panel rather than to the dialog,\n// but a call site has no reason to know there are two elements — `className`\n// and `style` reach the panel, which is the one worth restyling, and\n// everything else lands on the dialog.\ntype PopoverContentProps = Omit<DialogProps, 'children' | 'className' | 'style'> & {\n  /**\n   * Where the panel sits along the side it opens on.\n   * @default 'center'\n   */\n  align?: PopoverAlign;\n  /** Moves the panel along that side, in pixels. */\n  alignOffset?: number;\n  children?: ReactNode;\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the panel. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the popover renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Which side of the trigger the panel opens on. It flips to the opposite\n   * side when there is no room.\n   * @default 'bottom'\n   */\n  side?: PopoverSide;\n  /**\n   * The gap between the trigger and the panel, in pixels.\n   * @default 8\n   */\n  sideOffset?: number;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n  /**\n   * An element to anchor the panel to other than the trigger that opened it.\n   */\n  triggerRef?: RefObject<Element | null>;\n};\ntype PopoverDescriptionProps = TextProps;\ntype PopoverTitleProps = HeadingProps;\nexport type { PopoverAlign, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitleProps, PopoverTrigger };\nexport default Popover;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","RefObject","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","PopoverRenderProps","StyleOrFunction","TextProps","stylex","createContext","useCallback","useContext","useEffect","useId","useMemo","useState","Dialog","DialogTrigger","Heading","PreviewTrigger","Popover","RACPopover","Text","OverlayAlign","OverlaySide","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","spacing","typography","DEFAULT_SIDE_OFFSET","styles","content","kGO01o","kLKAdn","kg3NbH","$$css","description","kB7OPa","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kogj98","md","ks0D6T","sm","title","DEFAULT_HOVER_DELAY","DEFAULT_HOVER_CLOSE_DELAY","PopoverAlign","PopoverSide","PopoverSize","PopoverContext","modal","size","DescriptionContext","id","register","PopoverProps","Omit","children","closeDelay","delay","trigger","PopoverTrigger","t0","$","_c","props","t1","t2","t3","t4","t5","undefined","t6","context","t7","t8","PopoverContent","alignOffset","className","container","style","triggerRef","align","side","sideOffset","descriptionId","described","setDescribed","Symbol","for","state","popup","placement","t9","t10","t11","popupDialog","t12","t13","t14","PopoverDescription","PopoverTitle","Content","Description","Title","PopoverContentProps","Element","PopoverDescriptionProps","PopoverTitleProps"],"sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, PopoverRenderProps, StyleOrFunction, TextProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from 'react';\nimport { Dialog, DialogTrigger, Heading, PreviewTrigger, Popover as RACPopover, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The gap between the anchor and the panel, matching `spacing.sm`'s default.\n// A number rather than the token, because React Aria computes the position in\n// JavaScript and so cannot read a CSS custom property — this is the one place\n// in the component where a step of the spacing scale is spelled out. React\n// Aria's own default is 8 as well, but the value is this component's decision\n// rather than an inherited one.\nconst DEFAULT_SIDE_OFFSET = 8;\n\n// The surface, its entry and the dialog's focus ring are the overlay module's,\n// shared with every anchored overlay; what is here is Popover's own — its\n// inset, its two widths, and the type of its title and description.\n//\n// Popover has no page of its own, so the inset and the type follow the rich\n// tooltip, the nearest thing the Material Design pages draw: a plain rounded\n// panel offset from its anchor, with no caret drawn between the two, holding\n// a subhead over supporting text.\n//\n// React Aria's popover is two elements — the positioned panel and the dialog\n// inside it — so the styles are split the same way: the surface, `content`\n// and a size on the panel, the dialog style on the element that carries the\n// role.\nconst styles = {\n  content: {\n    kGO01o: \"xqf7pud\",\n    kLKAdn: \"x6gmt8y\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  description: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  md: {\n    ks0D6T: \"x10u2fgw\",\n    $$css: true\n  },\n  sm: {\n    ks0D6T: \"xjjheoa\",\n    $$css: true\n  },\n  title: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  }\n};\n\n// How long a pointer rests on the trigger before a hovered popover opens,\n// and how long it has to leave before it closes. React Aria's own defaults,\n// spelled out because they are the whole feel of a hover trigger and worth\n// finding in the component rather than in a changelog.\nconst DEFAULT_HOVER_DELAY = 600;\nconst DEFAULT_HOVER_CLOSE_DELAY = 200;\n\n// The overlay module's, since which side a surface opens on is the same\n// question for every anchored overlay. Aliased rather than re-declared so\n// the names a call site imports stay this component's.\ntype PopoverAlign = OverlayAlign;\ntype PopoverSide = OverlaySide;\ntype PopoverSize = 'md' | 'sm';\n\n// `size` and `modal` are declared on the root, where a reader expects to set\n// the shape of the whole popover, but it is `Popover.Content` that has to\n// apply them. Through context rather than making the call site repeat them —\n// the same arrangement Sheet uses, and worth keeping identical between the\n// two panels a consumer is most likely to reach for in the same afternoon.\nconst PopoverContext = createContext<{\n  modal: boolean;\n  size: PopoverSize;\n}>({\n  modal: false,\n  size: 'md'\n});\n\n// React Aria points a dialog's `aria-describedby` at its description slot\n// only for an alert dialog, on the grounds that an ordinary dialog's content\n// is read anyway. A popover's description names what the panel is for, so it\n// is pointed at here: the content hands the description an id, and the\n// description reports that it is mounted, since an `aria-describedby` with\n// nothing at the other end is an invalid reference rather than a harmless one.\nconst DescriptionContext = createContext<{\n  id: string;\n  register: () => () => void;\n}>({\n  id: '',\n  register: () => () => {}\n});\ntype PopoverProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n  /**\n   * How long the pointer has to leave a hovered popover before it closes, in\n   * milliseconds. Ignored by a pressed one.\n   * @default 200\n   */\n  closeDelay?: number;\n  /**\n   * How long the pointer has to rest on the trigger before a hovered popover\n   * opens, in milliseconds. Ignored by a pressed one.\n   * @default 600\n   */\n  delay?: number;\n  /**\n   * Blocks the page behind the panel while it is open, as a dialog would.\n   * Off by default: a popover leaves the page interactive, which is the\n   * difference from `Sheet`.\n   * @default false\n   */\n  modal?: boolean;\n  /**\n   * Panel width: `sm` caps at 240px, `md` at 320px. Either way the panel is\n   * only as wide as its contents, and never wider than the viewport.\n   * @default 'md'\n   */\n  size?: PopoverSize;\n  /**\n   * What opens the panel: a press, or a pointer resting on the trigger.\n   * `hover` is the tooltips page's rich tooltip — it opens on hover, focus\n   * or a long press, and stays open while the pointer is inside it, so the\n   * panel's own buttons and links can be reached.\n   * @default 'press'\n   */\n  trigger?: PopoverTrigger;\n};\ntype PopoverTrigger = 'hover' | 'press';\n\n// React Aria names a placement by the side and, along it, the end the panel\n// is aligned to — `bottom start`, or `left top` on the sides where the axis\n// runs the other way.\n/**\n * A panel anchored to the control that opened it. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Non-modal by design — the page behind stays scrollable and clickable, which\n * is the difference from `Sheet`. Pass `modal` to change that.\n *\n * Composed rather than configured by props, because a popover's contents are\n * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and\n * `Popover.Description`. A `Button` or `IconButton` placed directly inside\n * `Popover` opens it, and one given `slot=\"close\"` inside the content closes\n * it; neither needs a part of its own.\n */\nfunction Popover({\n  children,\n  closeDelay = DEFAULT_HOVER_CLOSE_DELAY,\n  delay = DEFAULT_HOVER_DELAY,\n  modal = false,\n  size = 'md',\n  trigger = 'press',\n  ...props\n}: PopoverProps) {\n  const context = useMemo(() => ({\n    modal,\n    size\n  }), [modal, size]);\n\n  // A hovered popover is React Aria's preview trigger, which is a different\n  // element around the same parts rather than a mode of the pressed one: it\n  // opens from hover, focus or a long press, and it is always non-modal,\n  // since a panel that blocked the page while the pointer merely rested on\n  // something would be a trap. `modal` is left alone rather than refused,\n  // and `Popover.Content` reads it as it always did — the two are simply\n  // never combined by anything the page draws.\n  if (trigger === 'hover') {\n    return <PopoverContext value={context}>\n        <PreviewTrigger closeDelay={closeDelay} delay={delay} {...props}>\n          {children}\n        </PreviewTrigger>\n      </PopoverContext>;\n  }\n  return <PopoverContext value={context}>\n      <DialogTrigger {...props}>{children}</DialogTrigger>\n    </PopoverContext>;\n}\n\n/**\n * The panel itself. Everything the popover shows goes in here; the trigger\n * stays outside it, since the trigger lives in the page while this is\n * portalled out to the end of the body.\n *\n * Placement is React Aria's anchor positioning, so the panel flips to the\n * opposite side and shifts along the edge of the viewport on its own rather\n * than being clipped by it.\n */\nfunction PopoverContent({\n  align = 'center',\n  alignOffset,\n  children,\n  className,\n  container,\n  side = 'bottom',\n  sideOffset = DEFAULT_SIDE_OFFSET,\n  style,\n  triggerRef,\n  ...props\n}: PopoverContentProps) {\n  const {\n    modal,\n    size\n  } = useContext(PopoverContext);\n  const descriptionId = useId();\n  const [described, setDescribed] = useState(false);\n  const register = useCallback(() => {\n    setDescribed(true);\n    return () => {\n      setDescribed(false);\n    };\n  }, []);\n  const description = useMemo(() => ({\n    id: descriptionId,\n    register\n  }), [descriptionId, register]);\n  return <RACPopover crossOffset={alignOffset} isNonModal={!modal} offset={sideOffset} placement={placementOf(side, align)} triggerRef={triggerRef}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles((state: PopoverRenderProps) => stylex.props(overlay.popup, styles.content, styles[size], popupOrigin(state.placement)), {\n    className,\n    style\n  })}>\n      <Dialog aria-describedby={described ? descriptionId : undefined} {...props} {...stylex.props(overlay.popupDialog)}>\n        <DescriptionContext value={description}>{children}</DescriptionContext>\n      </Dialog>\n    </RACPopover>;\n}\n\n/**\n * Supporting copy under the title. The panel's `aria-describedby` points at\n * it — see DescriptionContext for why that is this component's doing.\n */\nfunction PopoverDescription(props: PopoverDescriptionProps) {\n  const {\n    id,\n    register\n  } = useContext(DescriptionContext);\n  useEffect(() => register(), [register]);\n  return <Text id={id} slot=\"description\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1ghz6dp\"\n  }, props)} />;\n}\n\n/**\n * Names the popover. Rendered through React Aria's title slot, which is what\n * points the panel's `aria-labelledby` at it — a popover without one announces\n * itself unnamed.\n */\nfunction PopoverTitle(props: PopoverTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q x1ghz6dp\"\n  }, props)} />;\n}\nPopover.Content = PopoverContent;\nPopover.Description = PopoverDescription;\nPopover.Title = PopoverTitle;\n\n// The dialog's own props, plus the four that place the panel and its\n// styling. Those belong to the positioned panel rather than to the dialog,\n// but a call site has no reason to know there are two elements — `className`\n// and `style` reach the panel, which is the one worth restyling, and\n// everything else lands on the dialog.\ntype PopoverContentProps = Omit<DialogProps, 'children' | 'className' | 'style'> & {\n  /**\n   * Where the panel sits along the side it opens on.\n   * @default 'center'\n   */\n  align?: PopoverAlign;\n  /** Moves the panel along that side, in pixels. */\n  alignOffset?: number;\n  children?: ReactNode;\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the panel. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the popover renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Which side of the trigger the panel opens on. It flips to the opposite\n   * side when there is no room.\n   * @default 'bottom'\n   */\n  side?: PopoverSide;\n  /**\n   * The gap between the trigger and the panel, in pixels.\n   * @default 8\n   */\n  sideOffset?: number;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n  /**\n   * An element to anchor the panel to other than the trigger that opened it.\n   */\n  triggerRef?: RefObject<Element | null>;\n};\ntype PopoverDescriptionProps = TextProps;\ntype PopoverTitleProps = HeadingProps;\nexport type { PopoverAlign, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitleProps, PopoverTrigger };\nexport default Popover;"],"mappings":"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"}

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

@@ -2,6 +2,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 { useImageLoadingStatus } from "../../hooks/useImageLoadingStatus.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/product-icon/index.tsx
 const styles = {
@@ -87,26 +88,58 @@ function initialFrom(name) {
 * The mark is letterboxed rather than cropped, so a logo of any aspect ratio
 * can be handed over as it was drawn.
 */
-function ProductIcon({ name, render, size = "md", src, tone = "primary", ...props$1 }) {
+function ProductIcon(t0) {
+	const $ = c(13);
+	const { name, render, size: t1, src, tone: t2, ...props$1 } = t0;
+	const size = t1 === void 0 ? "md" : t1;
+	const tone = t2 === void 0 ? "primary" : t2;
 	const status = useImageLoadingStatus(src);
-	return useRender({
-		defaultTagName: "span",
-		props: {
+	const t3 = "span";
+	const t4 = "img";
+	let t5;
+	if ($[0] !== name || $[1] !== src || $[2] !== status || $[3] !== tone) {
+		t5 = status === "loaded" ? /* @__PURE__ */ jsx("img", {
+			alt: "",
+			src,
+			className: "x5yr21d xh8yej3 x19kjcj4"
+		}) : /* @__PURE__ */ jsx("span", {
+			...props(styles.fallback, styles[tone]),
+			children: initialFrom(name)
+		});
+		$[0] = name;
+		$[1] = src;
+		$[2] = status;
+		$[3] = tone;
+		$[4] = t5;
+	} else t5 = $[4];
+	const t6 = mergeStyles(props(styles.base, styles[size]), props$1);
+	let t7;
+	if ($[5] !== name || $[6] !== props$1 || $[7] !== t5 || $[8] !== t6) {
+		t7 = {
 			"aria-label": name,
-			role: "img",
+			role: t4,
 			...props$1,
-			children: status === "loaded" ? /* @__PURE__ */ jsx("img", {
-				alt: "",
-				src,
-				className: "x5yr21d xh8yej3 x19kjcj4"
-			}) : /* @__PURE__ */ jsx("span", {
-				...props(styles.fallback, styles[tone]),
-				children: initialFrom(name)
-			}),
-			...mergeStyles(props(styles.base, styles[size]), props$1)
-		},
-		render
-	});
+			children: t5,
+			...t6
+		};
+		$[5] = name;
+		$[6] = props$1;
+		$[7] = t5;
+		$[8] = t6;
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== render || $[11] !== t7) {
+		t8 = {
+			defaultTagName: t3,
+			props: t7,
+			render
+		};
+		$[10] = render;
+		$[11] = t7;
+		$[12] = t8;
+	} else t8 = $[12];
+	return useRender(t8);
 }
 //#endregion
 export { ProductIcon as default };

package/dist/components/product-icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\n//\n// That cost is also why `tone` tints the fallback rather than the root. A mark\n// letterboxed into the square does not cover it, and neither does one drawn\n// with transparency, so a tint on the root showed as a coloured box around\n// every logo that was not an opaque square. On the fallback it is seen exactly\n// when it is meant to be: while there is no mark, or none has loaded.\n//\n// No Material Design page draws a product mark. Its sizes are the lists\n// page's leading elements, `md` the 40dp avatar and `lg` the 56dp image, and\n// `sm` matches Avatar's own small so the two fill the same slots. The\n// fallback's tint is a container role under its on-colour, the pairing every\n// filled surface in the system uses.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  fallback: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x5yr21d\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud.\n   */\n  name: string;\n  /**\n   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n   * so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint the fallback with. It is\n   * the fallback's own background, so it is gone once `src` has loaded rather\n   * than sitting behind the mark.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\n\n// One letter, where Avatar takes two. A person has a first name and a last\n// name to initialise; a thing usually has neither, so the same rule applied\n// to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n// was never two words in that sense. Array.from rather than indexing, so a\n// name starting outside the Basic Multilingual Plane yields its whole first\n// character instead of half a surrogate pair.\nfunction initialFrom(name: string) {\n  const trimmed = name.trim();\n  return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase();\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  // The mark is shown only once it has loaded, and the letter stays until\n  // then and comes back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the fallback letter be read: \"B\" is\n  // not what anyone means to announce. Marking the root as an image also\n  // makes its contents presentational, so neither the mark nor the letter\n  // is announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the letter\n  // shown when there is no mark, or none has loaded yet.\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      'aria-label': name,\n      role: 'img',\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 x19kjcj4\" /> : <span {...stylex.props(styles.fallback, styles[tone])}>\n            {initialFrom(name)}\n          </span>,\n      ...mergeStyles(stylex.props(styles.base, styles[size]), props)\n    },\n    render\n  });\n}\nexport type { ProductIconProps };\nexport default ProductIcon;"],"mappings":";;;;;;AAiCA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;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,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAkCA,SAAS,YAAY,MAAc;CACjC,MAAM,UAAU,KAAK,KAAK;CAC1B,QAAQ,MAAM,KAAK,OAAO,CAAC,CAAC,MAAM,GAAA,CAAI,kBAAkB;AAC1D;;;;;;;;AASA,SAAS,YAAY,EACnB,MACA,QACA,OAAO,MACP,KACA,OAAO,WACP,GAAG,WACgB;CAGnB,MAAM,SAAS,sBAAsB,GAAG;CAQxC,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,cAAc;GACd,MAAM;GACN,GAAG;GACH,UAAU,WAAW,WAAW,oBAAC,OAAD;IAAK,KAAI;IAAQ;IAAK,WAAU;GAA0B,CAAA,IAAM,oBAAC,QAAD;IAAM,GAAI,MAAa,OAAO,UAAU,OAAO,KAAK;IAC7I,UAAA,YAAY,IAAI;GACb,CAAA;GACV,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,KAAK,GAAG,OAAK;EAC/D;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","fallback","kZKoxP","kzqmXN","image","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","ProductIconProps","Omit","name","size","src","tone","initialFrom","trimmed","trim","Array","from","toLocaleUpperCase","ProductIcon","t0","$","_c","render","t1","t2","props","undefined","status","t3","t4","t5","t6","t7","role","children","t8","defaultTagName"],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\n//\n// That cost is also why `tone` tints the fallback rather than the root. A mark\n// letterboxed into the square does not cover it, and neither does one drawn\n// with transparency, so a tint on the root showed as a coloured box around\n// every logo that was not an opaque square. On the fallback it is seen exactly\n// when it is meant to be: while there is no mark, or none has loaded.\n//\n// No Material Design page draws a product mark. Its sizes are the lists\n// page's leading elements, `md` the 40dp avatar and `lg` the 56dp image, and\n// `sm` matches Avatar's own small so the two fill the same slots. The\n// fallback's tint is a container role under its on-colour, the pairing every\n// filled surface in the system uses.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  fallback: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x5yr21d\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud.\n   */\n  name: string;\n  /**\n   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n   * so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint the fallback with. It is\n   * the fallback's own background, so it is gone once `src` has loaded rather\n   * than sitting behind the mark.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\n\n// One letter, where Avatar takes two. A person has a first name and a last\n// name to initialise; a thing usually has neither, so the same rule applied\n// to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n// was never two words in that sense. Array.from rather than indexing, so a\n// name starting outside the Basic Multilingual Plane yields its whole first\n// character instead of half a surrogate pair.\nfunction initialFrom(name: string) {\n  const trimmed = name.trim();\n  return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase();\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  // The mark is shown only once it has loaded, and the letter stays until\n  // then and comes back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the fallback letter be read: \"B\" is\n  // not what anyone means to announce. Marking the root as an image also\n  // makes its contents presentational, so neither the mark nor the letter\n  // is announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the letter\n  // shown when there is no mark, or none has loaded yet.\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      'aria-label': name,\n      role: 'img',\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 x19kjcj4\" /> : <span {...stylex.props(styles.fallback, styles[tone])}>\n            {initialFrom(name)}\n          </span>,\n      ...mergeStyles(stylex.props(styles.base, styles[size]), props)\n    },\n    render\n  });\n}\nexport type { ProductIconProps };\nexport default ProductIcon;"],"mappings":"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"}