@astryxdesign/core 0.6.2 → 0.6.3-canary.0788c49

package/dist/DateTimeInput/nativePickerSegmentStyles.d.ts

@@ -29,12 +29,16 @@ export declare const nativePickerSegmentStyles: Readonly<{
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
         readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif">;
-        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-base)" | `max(1rem, ${stylex.StyleXVar<"var(--font-size-base)">})`>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-base)" | {
+            readonly '@supports (-webkit-touch-callout: none)': `max(1rem, ${stylex.StyleXVar<"var(--font-size-base)">})`;
+        }>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "1.4286">;
         readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0A1317, #DFE2E5)">;
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
         readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1lh" | `calc(max(1rem, ${stylex.StyleXVar<"var(--font-size-base)">}) * ${stylex.StyleXVar<"1.4286">})`>;
+        readonly height: stylex.StyleXClassNameFor<"height", "1lh" | `calc(${stylex.StyleXVar<"var(--font-size-base)">} * ${stylex.StyleXVar<"1.4286">})` | {
+            readonly '@supports (-webkit-touch-callout: none)': readonly ("1lh" | `calc(max(1rem, ${stylex.StyleXVar<"var(--font-size-base)">}) * ${stylex.StyleXVar<"1.4286">})`)[];
+        }>;
         readonly WebkitAppearance: stylex.StyleXClassNameFor<"WebkitAppearance", "none">;
         readonly appearance: stylex.StyleXClassNameFor<"appearance", "none">;
         readonly '::-webkit-calendar-picker-indicator': stylex.StyleXClassNameFor<"::-webkit-calendar-picker-indicator", {
@@ -78,7 +82,9 @@ export declare const nativePickerSegmentStyles: Readonly<{
         readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", 0>;
         readonly insetBlock: stylex.StyleXClassNameFor<"insetBlock", 0>;
         readonly display: stylex.StyleXClassNameFor<"display", "block">;
-        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-base)" | `max(1rem, ${stylex.StyleXVar<"var(--font-size-base)">})`>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-base)" | {
+            readonly '@supports (-webkit-touch-callout: none)': `max(1rem, ${stylex.StyleXVar<"var(--font-size-base)">})`;
+        }>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "1.4286">;
         readonly pointerEvents: stylex.StyleXClassNameFor<"pointerEvents", "none">;
         readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;

package/dist/DateTimeInput/nativePickerSegmentStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nativePickerSegmentStyles.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/nativePickerSegmentStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAQ3C,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsGpC,CAAC"}
+{"version":3,"file":"nativePickerSegmentStyles.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/nativePickerSegmentStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAQ3C,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsHpC,CAAC"}

package/dist/DateTimeInput/nativePickerSegmentStyles.js

@@ -36,12 +36,12 @@ export const nativePickerSegmentStyles = {
     ksu8eU: "xng3xce",
     kmVPX3: "x1717udv",
     kMv6JI: "x9ynric",
-    kGuDYH: "xjm74w1 x6pjikd",
+    kGuDYH: "xjm74w1 xf9zqsd",
     kLWn49: "xw6l6zx",
     kMwMTN: "x1tgivj0",
     kWkggS: "xjbqb8w",
     kI3sdo: "x1a2a7pz",
-    kZKoxP: "x1oglpa6",
+    kZKoxP: "x1mutkkf x9w4715",
     k3lkva: "x1lugfcp",
     kysU6D: "xjyslct",
     kEIlsD: "xolhmmf",
@@ -84,7 +84,7 @@ export const nativePickerSegmentStyles = {
     kt4wiu: "xtijo5x",
     kYYq5F: "x10no89f",
     k1xSpc: "x1lliihq",
-    kGuDYH: "xjm74w1 x6pjikd",
+    kGuDYH: "xjm74w1 xf9zqsd",
     kLWn49: "xw6l6zx",
     kfzvcC: "x47corl",
     kVQacm: "xb3r6kr",

package/dist/Dialog/DialogHeader.d.ts

@@ -41,6 +41,13 @@ export interface DialogHeaderProps extends BaseProps<HTMLDivElement> {
      * Content to render after the title, before the close button (e.g., action buttons).
      */
     endContent?: ReactNode;
+    /**
+     * Overrides automatic end-slot compensation. When omitted, the slot keeps its
+     * existing behavior: rendering the close action applies block and logical
+     * inline-end compensation. Use `inline`, `block`, or `all` to select the axes
+     * explicitly.
+     */
+    endContentEdgeCompensation?: 'inline' | 'block' | 'all';
     /**
      * Adds a themed border at the bottom edge.
      * When false, spacing collapse is applied automatically for seamless visual flow.
@@ -70,7 +77,7 @@ export interface DialogHeaderProps extends BaseProps<HTMLDivElement> {
  * </Dialog>
  * ```
  */
-export declare function DialogHeader({ title, subtitle, onOpenChange, startContent, endContent, hasDivider, xstyle, className, style, ref, ...rest }: DialogHeaderProps): import("react").JSX.Element;
+export declare function DialogHeader({ title, subtitle, onOpenChange, startContent, endContent, endContentEdgeCompensation, hasDivider, xstyle, className, style, ref, ...rest }: DialogHeaderProps): import("react").JSX.Element;
 export declare namespace DialogHeader {
     var displayName: string;
 }

package/dist/Dialog/DialogHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogHeader.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAmFnB;yBA/Fe,YAAY"}
+{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogHeader.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;OAKG;IACH,0BAA0B,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAuGnB;yBApHe,YAAY"}

package/dist/Dialog/DialogHeader.js

@@ -63,6 +63,7 @@ export function DialogHeader({
   onOpenChange,
   startContent,
   endContent,
+  endContentEdgeCompensation,
   hasDivider,
   xstyle,
   className,
@@ -75,6 +76,8 @@ export function DialogHeader({
   const dialogContext = useDialogContext();
   const shouldAutoFocus = dialogContext?.isInline !== true;
   const titleId = dialogContext?.titleId;
+  const shouldCompensateEndBlock = endContentEdgeCompensation == null ? onOpenChange != null : endContentEdgeCompensation === 'block' || endContentEdgeCompensation === 'all';
+  const shouldCompensateEndInline = endContentEdgeCompensation == null ? onOpenChange != null : endContentEdgeCompensation === 'inline' || endContentEdgeCompensation === 'all';
 
   // Auto-focus the title when mounted for screen reader accessibility.
   // Inline dialogs are documentation/showcase previews, so suppress focus to
@@ -98,9 +101,9 @@ export function DialogHeader({
         className: "x78zum5 x1cy8zhl x1qughib xjcht0a"
       }),
       children: [startContent && /*#__PURE__*/_jsx("div", {
-        ...{
+        ...mergeProps(themeProps('dialog-header-start-content'), {
           className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
-        },
+        }),
         children: startContent
       }), /*#__PURE__*/_jsxs("div", {
         ...mergeProps(themeProps('dialog-header-title-block'), {
@@ -120,14 +123,20 @@ export function DialogHeader({
           children: subtitle
         })]
       }), (endContent || onOpenChange) && /*#__PURE__*/_jsxs("div", {
-        ...{
+        ...mergeProps(themeProps('dialog-header-end-content'), {
           0: {
             className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
           },
+          2: {
+            className: "x78zum5 x6s0dn4 x1txdalj x2lah0s xhzvc8f"
+          },
           1: {
+            className: "x78zum5 x6s0dn4 x1txdalj x2lah0s x3kzqx6"
+          },
+          3: {
             className: "x78zum5 x6s0dn4 x1txdalj x2lah0s xhzvc8f x3kzqx6"
           }
-        }[!!onOpenChange << 0],
+        }[!!shouldCompensateEndBlock << 1 | !!shouldCompensateEndInline << 0]),
         children: [endContent, onOpenChange && /*#__PURE__*/_jsx(Button, {
           variant: "ghost",
           label: t('@astryx.dialog.close'),

package/dist/Field/InputClearButton.d.ts

@@ -1,7 +1,8 @@
 /**
  * @file InputClearButton.tsx
- * @input Uses React, Button, Icon
- * @output Exports the public InputClearButton and an internal popup-aware variant.
+ * @input Uses React, Button, and Icon
+ * @output Exports the public InputClearButton and an internal popup-aware variant,
+ *   both with a contextual tooltip matching their required label.
  * @position Shared primitive. Every input that renders a clear affordance —
  *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
  *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
@@ -12,6 +13,7 @@
 import type { ReactNode } from 'react';
 import * as stylex from '@stylexjs/stylex';
 export interface InputClearButtonProps {
+    /** Contextual accessible name for the button, such as "Clear Search". */
     label: string;
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
     xstyle?: stylex.StyleXStyles;

package/dist/Field/InputClearButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAkD3C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,6BAA8B,SAAQ,qBAAqB;IACnE,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACtD,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CACtD;AAgDD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAExE;yBAFe,gBAAgB;;;AAIhC,4EAA4E;AAC5E,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,6BAA6B,GACnC,SAAS,CAEX"}
+{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAkD3C,MAAM,WAAW,qBAAqB;IACpC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,6BAA8B,SAAQ,qBAAqB;IACnE,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACtD,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CACtD;AAiDD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAExE;yBAFe,gBAAgB;;;AAIhC,4EAA4E;AAC5E,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,6BAA6B,GACnC,SAAS,CAEX"}

package/dist/Field/InputClearButton.js

@@ -4,8 +4,9 @@
 
 /**
  * @file InputClearButton.tsx
- * @input Uses React, Button, Icon
- * @output Exports the public InputClearButton and an internal popup-aware variant.
+ * @input Uses React, Button, and Icon
+ * @output Exports the public InputClearButton and an internal popup-aware variant,
+ *   both with a contextual tooltip matching their required label.
  * @position Shared primitive. Every input that renders a clear affordance —
  *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
  *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
@@ -49,6 +50,7 @@ function renderInputClearButton({
     variant: "ghost",
     size: "sm",
     label: label,
+    tooltip: label,
     className: buttonTargetClassName,
     icon: /*#__PURE__*/_jsx(Icon, {
       icon: "close",

package/dist/Field/PanelSearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAwB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAkBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6E5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,6EAA6E;IAC7E,UAAU,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IAEd,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,wCAAwC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IAEzD,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEpD,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEnD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;CACjE;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,+BA6EvB;yBA5Fe,gBAAgB"}
+{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAwB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAkBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgF5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,6EAA6E;IAC7E,UAAU,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IAEd,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,wCAAwC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IAEzD,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEpD,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEnD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;CACjE;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,+BA6EvB;yBA5Fe,gBAAgB"}

package/dist/Field/PanelSearchInput.js

@@ -148,7 +148,7 @@ export function PanelSearchInput({
         onFocus: handleFocus,
         onBlur: handleBlur,
         ...{
-          className: "x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib xdk3u5w x1kq96og x1a2a7pz xeyghm5"
+          className: "x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib x1w61h2b x1kq96og x1a2a7pz xeyghm5"
         },
         ...props
       }), value !== '' && /*#__PURE__*/_jsx(InputClearButton, {

package/dist/FileInput/FileInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAgO9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAkbhB;yBA7ce,SAAS"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAyO9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAkbhB;yBA7ce,SAAS"}

package/dist/FileInput/FileInput.js

@@ -397,7 +397,7 @@ export function FileInput({
     if (hasFiles) {
       return /*#__PURE__*/_jsx("div", {
         ...{
-          className: "x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xb3r6kr xlyipyv x98rzlu xeuugli x2b8uid xeaf4i8"
+          className: "x9ynric xjm74w1 xf9zqsd xw6l6zx x1tgivj0 xb3r6kr xlyipyv x98rzlu xeuugli x2b8uid xeaf4i8"
         },
         children: fileNames
       });
@@ -412,7 +412,7 @@ export function FileInput({
         })
       }), /*#__PURE__*/_jsx("span", {
         ...{
-          className: "x9ynric xjm74w1 x6pjikd xw6l6zx xv1l7n4 x2b8uid x87ps6o"
+          className: "x9ynric xjm74w1 xf9zqsd xw6l6zx xv1l7n4 x2b8uid x87ps6o"
         },
         children: isDragOver ? t('@astryx.fileInput.dropHint') : displayPlaceholder
       })]
@@ -423,7 +423,7 @@ export function FileInput({
       return /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx("span", {
           ...{
-            className: "x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xb3r6kr xlyipyv xuxw1ft x98rzlu xeuugli"
+            className: "x9ynric xjm74w1 xf9zqsd xw6l6zx x1tgivj0 xb3r6kr xlyipyv xuxw1ft x98rzlu xeuugli"
           },
           children: fileNames ?? displayPlaceholder
         }), /*#__PURE__*/_jsx(Spinner, {
@@ -442,16 +442,16 @@ export function FileInput({
       }), /*#__PURE__*/_jsx("span", {
         ...{
           0: {
-            className: "x9ynric xjm74w1 x6pjikd xw6l6zx xv1l7n4 x87ps6o x1yc453h x98rzlu xeuugli"
+            className: "x9ynric xjm74w1 xf9zqsd xw6l6zx xv1l7n4 x87ps6o x1yc453h x98rzlu xeuugli"
           },
           2: {
-            className: "x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xb3r6kr xlyipyv xuxw1ft x1yc453h x98rzlu xeuugli"
+            className: "x9ynric xjm74w1 xf9zqsd xw6l6zx x1tgivj0 xb3r6kr xlyipyv xuxw1ft x1yc453h x98rzlu xeuugli"
           },
           1: {
-            className: "x9ynric xjm74w1 x6pjikd xw6l6zx xv1l7n4 x87ps6o x1yc453h"
+            className: "x9ynric xjm74w1 xf9zqsd xw6l6zx xv1l7n4 x87ps6o x1yc453h"
           },
           3: {
-            className: "x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xb3r6kr xlyipyv xuxw1ft x98rzlu xeuugli x1yc453h"
+            className: "x9ynric xjm74w1 xf9zqsd xw6l6zx x1tgivj0 xb3r6kr xlyipyv xuxw1ft x98rzlu xeuugli x1yc453h"
           }
         }[!!hasFiles << 1 | !!hasFiles << 0],
         children: fileNames ?? displayPlaceholder

package/dist/Icon/Icon.d.ts

@@ -21,6 +21,8 @@ import React, { type ComponentType, type SVGProps } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type { StyleXStyles } from '@stylexjs/stylex';
 import type { IconName, NamespacedIconName } from './globalIconRegistry';
+import { type IconSize } from './IconSize.stylex';
+export type { IconSize } from './IconSize.stylex';
 declare const colorStyles: Readonly<{
     readonly primary: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0A1317, #DFE2E5)">;
@@ -80,35 +82,7 @@ declare const colorStyles: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#5B08D8, #7952FF)">;
     }>;
 }>;
-/**
- * Size styles for direct SVG icon components.
- * Uses width/height only — SVG components handle their own viewBox scaling.
- *
- * Sizes are expressed in `rem` (relative to the root font-size) so icons scale
- * in step with text when the document font-size changes, matching the rest of
- * the design system's rem-based type scale. Values are the px-equivalents at a
- * 16px root: 12px → 0.75rem, 16px → 1rem, 20px → 1.25rem, 24px → 1.5rem.
- */
-declare const sizeStyles: Readonly<{
-    readonly xsm: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "0.75rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "0.75rem">;
-    }>;
-    readonly sm: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "1rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1rem">;
-    }>;
-    readonly md: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "1.25rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1.25rem">;
-    }>;
-    readonly lg: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "1.5rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1.5rem">;
-    }>;
-}>;
 export type IconColor = keyof typeof colorStyles;
-export type IconSize = keyof typeof sizeStyles;
 /**
  * Type for icon components that can be passed to Icon.
  * Use this type when accepting an icon prop in other components.
@@ -140,7 +114,9 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
      * - 'sm': 1rem (16px at a 16px root)
      * - 'md': 1.25rem (20px at a 16px root)
      * - 'lg': 1.5rem (24px at a 16px root)
-     * @default 'md'
+     *
+     * An explicit value wins. When omitted, Icon uses the nearest default supplied
+     * by an owning Astryx component for its icon slot, then falls back to 'md'.
      */
     size?: IconSize;
     /**
@@ -195,7 +171,7 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
  * <Icon icon="close" size="md" color="primary" />
  * ```
  */
-export declare function Icon({ icon, color, size, label, ref, className, style, xstyle, ...props }: IconProps): React.JSX.Element;
+export declare function Icon({ icon, color, size: sizeProp, label, ref, className, style, xstyle, ...props }: IconProps): React.JSX.Element;
 export declare namespace Icon {
     var displayName: string;
 }
@@ -210,5 +186,4 @@ export declare function renderIconSlot(icon: React.ReactNode | IconType, props?:
     size?: IconSize;
     color?: IconColor;
 }): React.ReactNode;
-export {};
 //# sourceMappingURL=Icon.d.ts.map

package/dist/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAqBvE,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAyCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,kBAAkB,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAyBD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,KAAK,EACL,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBA4CX;yBAtDe,IAAI;;;AA+HpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAIvE,OAAO,EAGL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAmBhD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAMH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,kBAAkB,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAyBD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,KAAK,EACL,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBAkDX;yBA5De,IAAI;;;AAqIpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}

package/dist/Icon/Icon.js

@@ -29,11 +29,13 @@ import { useThemeName } from "../theme/useTheme.js";
 import { getIcon } from "./globalIconRegistry.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-
+import { useIconSize } from "./IconDefaultSizeContext.js";
+import { iconBoxSizeStyles, iconSizeStyles } from "./IconSize.stylex.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
-import { jsx as _jsx } from "react/jsx-runtime";
+
 const styles = {
   root: {
     kmuXW: "x2lah0s",
@@ -126,72 +128,6 @@ const colorStyles = {
   }
 };
 
-/**
- * Size styles for direct SVG icon components.
- * Uses width/height only — SVG components handle their own viewBox scaling.
- *
- * Sizes are expressed in `rem` (relative to the root font-size) so icons scale
- * in step with text when the document font-size changes, matching the rest of
- * the design system's rem-based type scale. Values are the px-equivalents at a
- * 16px root: 12px → 0.75rem, 16px → 1rem, 20px → 1.25rem, 24px → 1.5rem.
- */
-const sizeStyles = {
-  xsm: {
-    kzqmXN: "x1jw3ynk",
-    kZKoxP: "xvle69y",
-    $$css: true
-  },
-  sm: {
-    kzqmXN: "xcdlrvm",
-    kZKoxP: "x1l36t39",
-    $$css: true
-  },
-  md: {
-    kzqmXN: "xwqq7k2",
-    kZKoxP: "xmll18r",
-    $$css: true
-  },
-  lg: {
-    kzqmXN: "xp8d6y2",
-    kZKoxP: "xam5rvr",
-    $$css: true
-  }
-};
-
-/**
- * Size styles for string-based (registry) icons.
- * Includes fontSize so that 1em-based icons from the registry scale correctly.
- *
- * Expressed in `rem` for the same reason as {@link sizeStyles} — icons track the
- * root font-size instead of being locked to absolute pixels.
- */
-const spanSizeStyles = {
-  xsm: {
-    kzqmXN: "x1jw3ynk",
-    kZKoxP: "xvle69y",
-    kGuDYH: "xboafo0",
-    $$css: true
-  },
-  sm: {
-    kzqmXN: "xcdlrvm",
-    kZKoxP: "x1l36t39",
-    kGuDYH: "x1jchvi3",
-    $$css: true
-  },
-  md: {
-    kzqmXN: "xwqq7k2",
-    kZKoxP: "xmll18r",
-    kGuDYH: "x1603h9y",
-    $$css: true
-  },
-  lg: {
-    kzqmXN: "xp8d6y2",
-    kZKoxP: "xam5rvr",
-    kGuDYH: "xngnso2",
-    $$css: true
-  }
-};
-
 // =============================================================================
 // Types
 // =============================================================================
@@ -241,7 +177,7 @@ function getIconA11yProps(label) {
 export function Icon({
   icon,
   color = 'inherit',
-  size = 'md',
+  size: sizeProp,
   label,
   ref,
   className,
@@ -249,6 +185,7 @@ export function Icon({
   xstyle,
   ...props
 }) {
+  const size = useIconSize(sizeProp);
   // Derive ARIA from `label`: decorative (aria-hidden) by default, or a
   // meaningful image (role="img" + aria-label) when `label` is non-empty.
   const a11yProps = getIconA11yProps(label);
@@ -279,7 +216,7 @@ export function Icon({
     ...mergeProps(themeProps('icon', {
       size,
       color
-    }), stylex.props(styles.root, colorStyles[color], sizeStyles[size], xstyle), className ?? undefined, style),
+    }), stylex.props(styles.root, colorStyles[color], iconSizeStyles[size], xstyle), className ?? undefined, style),
     ...props
   });
 }
@@ -324,7 +261,7 @@ function IconFromRegistry({
     ...mergeProps(themeProps('icon', {
       size,
       color
-    }), stylex.props(styles.span, colorStyles[color], spanSizeStyles[size], xstyle), className ?? undefined, style),
+    }), stylex.props(styles.span, colorStyles[color], iconBoxSizeStyles[size], xstyle), className ?? undefined, style),
     children: resolvedIcon
   });
 }

package/dist/Icon/IconDefaultSizeContext.d.ts

@@ -0,0 +1,4 @@
+import type { IconSize } from './IconSize.stylex';
+export declare const IconDefaultSizeProvider: import("react").Provider<"xsm" | "sm" | "lg" | "md" | null>;
+export declare function useIconSize(size: IconSize | undefined): IconSize;
+//# sourceMappingURL=IconDefaultSizeContext.d.ts.map

package/dist/Icon/IconDefaultSizeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconDefaultSizeContext.d.ts","sourceRoot":"","sources":["../../src/Icon/IconDefaultSizeContext.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAKhD,eAAO,MAAM,uBAAuB,6DAAkC,CAAC;AAEvE,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAGhE"}

package/dist/Icon/IconDefaultSizeContext.js

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file IconDefaultSizeContext.ts
+ * @input Uses React context and an optional Icon size prop
+ * @output Supplies a component-owned default size to descendant Icon instances
+ * @position Internal Icon sizing context; consumed by Icon and icon-slot owners
+ */
+import { createContext, use } from 'react';
+const IconDefaultSizeContext = /*#__PURE__*/createContext(null);
+IconDefaultSizeContext.displayName = 'IconDefaultSizeContext';
+export const IconDefaultSizeProvider = IconDefaultSizeContext.Provider;
+export function useIconSize(size) {
+  const contextualSize = use(IconDefaultSizeContext);
+  return size ?? contextualSize ?? 'md';
+}

package/dist/Icon/IconSize.stylex.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @file IconSize.stylex.ts
+ * @input Defines the Icon size scale
+ * @output Exports shared Icon size types and StyleX styles
+ * @position Internal Icon sizing source; consumed by Icon and icon-slot owners
+ */
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Icon sizes are expressed in `rem` so they scale with the root font-size.
+ * Values are the px-equivalents at a 16px root: 12, 16, 20, and 24px.
+ */
+declare const iconSizeValues: {
+    readonly xsm: "0.75rem";
+    readonly sm: "1rem";
+    readonly md: "1.25rem";
+    readonly lg: "1.5rem";
+};
+export type IconSize = keyof typeof iconSizeValues;
+/** Size styles for direct SVG icon components. */
+export declare const iconSizeStyles: Readonly<{
+    readonly xsm: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "0.75rem">;
+        readonly height: stylex.StyleXClassNameFor<"height", "0.75rem">;
+    }>;
+    readonly sm: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "1rem">;
+        readonly height: stylex.StyleXClassNameFor<"height", "1rem">;
+    }>;
+    readonly md: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "1.25rem">;
+        readonly height: stylex.StyleXClassNameFor<"height", "1.25rem">;
+    }>;
+    readonly lg: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "1.5rem">;
+        readonly height: stylex.StyleXClassNameFor<"height", "1.5rem">;
+    }>;
+}>;
+/**
+ * Size styles for icon boxes and string-based registry icons. `fontSize`
+ * keeps 1em-based icons in step with the box.
+ */
+export declare const iconBoxSizeStyles: Readonly<{
+    readonly xsm: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "0.75rem">;
+        readonly height: stylex.StyleXClassNameFor<"height", "0.75rem">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "0.75rem">;
+    }>;
+    readonly sm: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "1rem">;
+        readonly height: stylex.StyleXClassNameFor<"height", "1rem">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1rem">;
+    }>;
+    readonly md: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "1.25rem">;
+        readonly height: stylex.StyleXClassNameFor<"height", "1.25rem">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1.25rem">;
+    }>;
+    readonly lg: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "1.5rem">;
+        readonly height: stylex.StyleXClassNameFor<"height", "1.5rem">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1.5rem">;
+    }>;
+}>;
+export {};
+//# sourceMappingURL=IconSize.stylex.d.ts.map

package/dist/Icon/IconSize.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconSize.stylex.d.ts","sourceRoot":"","sources":["../../src/Icon/IconSize.stylex.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;GAGG;AACH,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,cAAc,CAAC;AAEnD,kDAAkD;AAClD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;EAiBzB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;EAqB5B,CAAC"}

package/dist/Icon/IconSize.stylex.js

@@ -0,0 +1,75 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file IconSize.stylex.ts
+ * @input Defines the Icon size scale
+ * @output Exports shared Icon size types and StyleX styles
+ * @position Internal Icon sizing source; consumed by Icon and icon-slot owners
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * Icon sizes are expressed in `rem` so they scale with the root font-size.
+ * Values are the px-equivalents at a 16px root: 12, 16, 20, and 24px.
+ */
+const iconSizeValues = {
+  xsm: '0.75rem',
+  sm: '1rem',
+  md: '1.25rem',
+  lg: '1.5rem'
+};
+/** Size styles for direct SVG icon components. */
+export const iconSizeStyles = {
+  xsm: {
+    kzqmXN: "x1jw3ynk",
+    kZKoxP: "xvle69y",
+    $$css: true
+  },
+  sm: {
+    kzqmXN: "xcdlrvm",
+    kZKoxP: "x1l36t39",
+    $$css: true
+  },
+  md: {
+    kzqmXN: "xwqq7k2",
+    kZKoxP: "xmll18r",
+    $$css: true
+  },
+  lg: {
+    kzqmXN: "xp8d6y2",
+    kZKoxP: "xam5rvr",
+    $$css: true
+  }
+};
+
+/**
+ * Size styles for icon boxes and string-based registry icons. `fontSize`
+ * keeps 1em-based icons in step with the box.
+ */
+export const iconBoxSizeStyles = {
+  xsm: {
+    kzqmXN: "x1jw3ynk",
+    kZKoxP: "xvle69y",
+    kGuDYH: "xboafo0",
+    $$css: true
+  },
+  sm: {
+    kzqmXN: "xcdlrvm",
+    kZKoxP: "x1l36t39",
+    kGuDYH: "x1jchvi3",
+    $$css: true
+  },
+  md: {
+    kzqmXN: "xwqq7k2",
+    kZKoxP: "xmll18r",
+    kGuDYH: "x1603h9y",
+    $$css: true
+  },
+  lg: {
+    kzqmXN: "xp8d6y2",
+    kZKoxP: "xam5rvr",
+    kGuDYH: "xngnso2",
+    $$css: true
+  }
+};