@astryxdesign/core 0.7.4 → 0.7.5-canary.0418c47

package/dist/FieldStatus/FieldStatus.js

@@ -41,6 +41,10 @@ const statusIconMap = {
 const ATTACHED_OVERLAP = `var(--_field-status-overlap, ${spacingVars['--spacing-1-5']})`;
 const styles = {
   base: {
+    kMeerF: "xcthrzx",
+    k3XXqK: "x815t2r",
+    kjBf7l: "x3teovq",
+    kInvED: "xvr1dqx",
     kMv6JI: "x9ynric",
     kGuDYH: "x141an7d",
     kLWn49: "x1ltkj2j",
@@ -67,17 +71,17 @@ const styles = {
 const colorStyles = {
   warning: {
     kWkggS: "x24i8r5",
-    kMwMTN: "xdhq94a",
+    kMwMTN: "xfy1f8t",
     $$css: true
   },
   error: {
     kWkggS: "x1pritpl",
-    kMwMTN: "x1joocv1",
+    kMwMTN: "xl8t7bd",
     $$css: true
   },
   success: {
     kWkggS: "xu13z74",
-    kMwMTN: "xltfdvo",
+    kMwMTN: "xvchut",
     $$css: true
   }
 };

package/dist/FieldStatus/index.d.ts

@@ -22,6 +22,6 @@ export interface FieldStatusVariantMap {
     detached: true;
     tooltip: true;
 }
-export { FieldStatus } from './FieldStatus';
-export type { FieldStatusProps, FieldStatusVariant } from './FieldStatus';
+export { FieldStatus } from './FieldStatus.js';
+export type { FieldStatusProps, FieldStatusVariant } from './FieldStatus.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/FieldStatus/useFieldStatusAnnouncement.d.ts

@@ -1,4 +1,4 @@
-import type { InputStatusType } from '../Field/types';
+import type { InputStatusType } from '../Field/types.js';
 /**
  * Speaks a field status message through the persistent live regions:
  * errors assertively, warnings and successes politely. It speaks when a

package/dist/FileInput/FileInput.d.ts

@@ -1,7 +1,7 @@
-import { type InputStatus, type FieldStatusVariant } from '../Field';
-export type { InputStatus as FileInputStatus, InputStatusType as FileInputStatusType, } from '../Field';
-import { type FieldInputBaseProps } from '../Field/fieldParts';
-import type { SizeValue } from '../utils/types';
+import { type InputStatus, type FieldStatusVariant } from '../Field/index.js';
+export type { InputStatus as FileInputStatus, InputStatusType as FileInputStatusType, } from '../Field/index.js';
+import { type FieldInputBaseProps } from '../Field/fieldParts.js';
+import type { SizeValue } from '../utils/types.js';
 export interface FileInputProps extends Omit<FieldInputBaseProps, 'onChange' | 'defaultValue' | 'value'> {
     ref?: React.Ref<HTMLInputElement>;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAUlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAmP9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,EACnB,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,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,EAAE,EAAE,MAAM,EACV,GAAG,SAAS,EACb,EAAE,cAAc,+BAmdhB;yBAlfe,SAAS"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAUlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAqP9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,EACnB,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,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,EAAE,EAAE,MAAM,EACV,GAAG,SAAS,EACb,EAAE,cAAc,+BAmdhB;yBAlfe,SAAS"}

package/dist/FileInput/FileInput.js

@@ -4,7 +4,7 @@
 
 /**
  * @file FileInput.tsx
- * @input Uses React, useId, Field, Icon, Spinner, VisuallyHidden
+ * @input Uses React, useId, Field, Icon, Spinner, VisuallyHidden, provider-bound translator
  * @output Exports FileInput component, public types, and its root/icon theme targets
  * @position Core implementation; consumed by index.ts, tested by FileInput.test.tsx
  *
@@ -34,14 +34,20 @@ import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-function formatFileSize(bytes) {
+function formatFileSize(bytes, t) {
   if (bytes < 1024) {
-    return `${bytes} B`;
+    return t('@astryx.fileInput.fileSize.bytes', {
+      size: bytes
+    });
   }
   if (bytes < 1024 * 1024) {
-    return `${(bytes / 1024).toFixed(1)} KB`;
+    return t('@astryx.fileInput.fileSize.kilobytes', {
+      size: bytes / 1024
+    });
   }
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return t('@astryx.fileInput.fileSize.megabytes', {
+    size: bytes / (1024 * 1024)
+  });
 }
 function validateFiles(files, accept, maxSize, maxFiles, isMultiple, t) {
   const errors = [];
@@ -71,7 +77,7 @@ function validateFiles(files, accept, maxSize, maxFiles, isMultiple, t) {
       if (file.size > maxSize) {
         errors.push(t('@astryx.fileInput.errorMaxSize', {
           fileName: file.name,
-          maxSize: formatFileSize(maxSize)
+          maxSize: formatFileSize(maxSize, t)
         }));
         return false;
       }
@@ -160,15 +166,15 @@ const styles = {
 };
 const statusBorderStyles = {
   warning: {
-    kVAM5u: "x8wg1ba",
+    kVAM5u: "xrwcrn0",
     $$css: true
   },
   error: {
-    kVAM5u: "x1ofxpqo",
+    kVAM5u: "xw4o254",
     $$css: true
   },
   success: {
-    kVAM5u: "x16m2moy",
+    kVAM5u: "x1cu78b5",
     $$css: true
   }
 };

package/dist/FileInput/index.d.ts

@@ -6,6 +6,6 @@
  *
  * SYNC: When modified, update this header and /packages/core/src/FileInput/FileInput.doc.mjs
  */
-export { FileInput } from './FileInput';
-export type { FileInputProps, FileInputStatus, FileInputStatusType, } from './FileInput';
+export { FileInput } from './FileInput.js';
+export type { FileInputProps, FileInputStatus, FileInputStatusType, } from './FileInput.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/FormLayout/FormLayout.d.ts

@@ -14,8 +14,8 @@
  * - /packages/cli/assets/templates/blocks/components/FormLayout/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import { type FormLayoutDirection, type FormOptionality } from './FormLayoutContext';
+import type { BaseProps } from '../BaseProps.js';
+import { type FormLayoutDirection, type FormOptionality } from './FormLayoutContext.js';
 export interface FormLayoutProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLDivElement>;

package/dist/FormLayout/index.d.ts

@@ -6,8 +6,8 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  */
-export { FormLayout } from './FormLayout';
-export type { FormLayoutProps } from './FormLayout';
-export type { FormLayoutDirection, FormOptionality } from './FormLayoutContext';
-export { FormLayoutContext } from './FormLayoutContext';
+export { FormLayout } from './FormLayout.js';
+export type { FormLayoutProps } from './FormLayout.js';
+export type { FormLayoutDirection, FormOptionality } from './FormLayoutContext.js';
+export { FormLayoutContext } from './FormLayoutContext.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Grid/Grid.d.ts

@@ -11,9 +11,9 @@
  * - /packages/cli/assets/templates/blocks/components/Grid/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { SpacingStep } from '../utils/types';
-import type { SizeValue } from '../utils/types';
+import type { BaseProps } from '../BaseProps.js';
+import type { SpacingStep } from '../utils/types.js';
+import type { SizeValue } from '../utils/types.js';
 /**
  * Grid alignment options for align-items and justify-items.
  */

package/dist/Grid/GridSpan.d.ts

@@ -11,7 +11,7 @@
  * - /packages/cli/assets/templates/blocks/components/Grid/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface GridSpanProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLDivElement>;

package/dist/Grid/index.d.ts

@@ -6,8 +6,8 @@
  *
  * SYNC: When modified, update /packages/core/src/Grid/Grid.doc.mjs
  */
-export { Grid } from './Grid';
-export type { GridProps, GridColumns, GridAlignment } from './Grid';
-export { GridSpan } from './GridSpan';
-export type { GridSpanProps } from './GridSpan';
+export { Grid } from './Grid.js';
+export type { GridProps, GridColumns, GridAlignment } from './Grid.js';
+export { GridSpan } from './GridSpan.js';
+export type { GridSpanProps } from './GridSpan.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/HStack/HStack.d.ts

@@ -9,8 +9,8 @@
  * - /packages/core/src/HStack/HStack.test.tsx
  * - /packages/cli/assets/templates/blocks/components/HStack/ (showcase blocks)
  */
-import { type StackProps } from '../Stack/Stack';
-import type { StackCrossAlignment, StackMainAlignment } from '../Stack/stack.stylex';
+import { type StackProps } from '../Stack/Stack.js';
+import type { StackCrossAlignment, StackMainAlignment } from '../Stack/stack.stylex.js';
 export interface HStackProps extends Omit<StackProps, 'direction' | 'hAlign' | 'vAlign'> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLElement>;

package/dist/HStack/index.d.ts

@@ -4,5 +4,5 @@
  * @output Exports HStack and its props type
  * @position Entry point for @astryxdesign/core/HStack subpath export
  */
-export { HStack, type HStackProps } from './HStack';
+export { HStack, type HStackProps } from './HStack.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Heading/Heading.d.ts

@@ -13,10 +13,10 @@
  * - /packages/cli/assets/templates/blocks/components/Text/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { TextColor, TextDisplay, TextJustify, WordBreak, TextWrap, TextWeight } from '../theme/types';
-import type { LayerPlacement } from '../Layer';
-import type { BaseProps } from '../BaseProps';
-import type { HeadingTypeMap } from './index';
+import type { TextColor, TextDisplay, TextJustify, WordBreak, TextWrap, TextWeight } from '../theme/types.js';
+import type { LayerPlacement } from '../Layer/index.js';
+import type { BaseProps } from '../BaseProps.js';
+import type { HeadingTypeMap } from './index.js';
 /**
  * Heading level (1-6). Determines both visual styling and semantic HTML element.
  */

package/dist/Heading/index.d.ts

@@ -22,5 +22,5 @@ export interface HeadingTypeMap {
     'display-2': true;
     'display-3': true;
 }
-export { Heading, type HeadingProps, type HeadingLevel, type HeadingType, } from './Heading';
+export { Heading, type HeadingProps, type HeadingLevel, type HeadingType, } from './Heading.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/HoverCard/HoverCard.d.ts

@@ -11,10 +11,10 @@
  * - /packages/cli/assets/templates/blocks/components/HoverCard/ (showcase blocks)
  */
 import { type ReactElement, type ReactNode } from 'react';
-import { type HoverCardFocusTrigger, type HoverCardTouchTrigger } from './useHoverCard';
-import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer';
-import type { BaseProps } from '../BaseProps';
-export type { HoverCardFocusTrigger, HoverCardTouchTrigger, } from './useHoverCard';
+import { type HoverCardFocusTrigger, type HoverCardTouchTrigger } from './useHoverCard.js';
+import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer.js';
+import type { BaseProps } from '../BaseProps.js';
+export type { HoverCardFocusTrigger, HoverCardTouchTrigger, } from './useHoverCard.js';
 export interface HoverCardProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
     /**
      * The trigger element(s). Children refs are preserved.

package/dist/HoverCard/index.d.ts

@@ -6,8 +6,8 @@
  *
  * SYNC: When adding new HoverCard files, update exports here
  */
-export { useHoverCard } from './useHoverCard';
-export type { HoverCardFocusTrigger, HoverCardTouchTrigger, HoverCardOptions, HoverCardReturn, } from './useHoverCard';
-export { HoverCard } from './HoverCard';
-export type { HoverCardProps } from './HoverCard';
+export { useHoverCard } from './useHoverCard.js';
+export type { HoverCardFocusTrigger, HoverCardTouchTrigger, HoverCardOptions, HoverCardReturn, } from './useHoverCard.js';
+export { HoverCard } from './HoverCard.js';
+export type { HoverCardProps } from './HoverCard.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/HoverCard/useHoverCard.d.ts

@@ -8,8 +8,8 @@
  * - /packages/core/src/HoverCard/index.ts
  */
 import { type ReactNode, type RefCallback } from 'react';
-import { type ContextRenderProps, type LayerAlignment, type LayerPlacement } from '../Layer/useLayer';
-import { type LayerTouchTrigger } from '../Layer/useTouchTrigger';
+import { type ContextRenderProps, type LayerAlignment, type LayerPlacement } from '../Layer/useLayer.js';
+import { type LayerTouchTrigger } from '../Layer/useTouchTrigger.js';
 /**
  * Focus trigger behavior for hover cards
  */

package/dist/Icon/Icon.d.ts

@@ -9,6 +9,12 @@
  *   directly with and spread SVG props.
  * - String mode: Pass a semantic name (e.g. 'close', 'chevronDown') — resolved from the
  *   theme's icon registry (or built-in fallback SVGs) and wrapped in a styled span.
+ *   A function registry entry receives `{size}`, the size resolved by ORD1.
+ *
+ * Both modes size the glyph from the `icon` target's private size vars
+ * (`iconSizeStyles` in IconSize.stylex.ts, `registrySizeStyles` below), so a
+ * theme's `width` and `height` on that target's size selector set the size's
+ * glyph dimension, including the font size 1em-based registry artwork follows.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Icon/Icon.doc.mjs (props table, features, implementation notes)
@@ -20,9 +26,9 @@
 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';
+import type { IconName, NamespacedIconName } from './globalIconRegistry.js';
+import { type IconSize } from './IconSize.stylex.js';
+export type { IconSize } from './IconSize.stylex.js';
 declare const colorStyles: Readonly<{
     readonly primary: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0A1317, #DFE2E5)">;
@@ -39,14 +45,17 @@ declare const colorStyles: Readonly<{
     readonly accent: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0064E0, #2694FE)">;
     }>;
+    readonly info: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-info)">;
+    }>;
     readonly success: Readonly<{
-        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0D8626, #0D8626)">;
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-success)">;
     }>;
     readonly error: Readonly<{
-        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#E3193B, #F5394F)">;
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-error)">;
     }>;
     readonly warning: Readonly<{
-        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#E9AF08, #F2C00B)">;
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-warning)">;
     }>;
     readonly inherit: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", "inherit">;
@@ -115,6 +124,9 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
      * - 'md': 1.25rem (20px at a 16px root)
      * - 'lg': 1.5rem (24px at a 16px root)
      *
+     * A theme sets a size's glyph dimension with `width` and `height`, in `px`
+     * or `rem`, on `components.icon['size:sm']` (and the other sizes).
+     *
      * 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'.
      */

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;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"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;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,EAAiB,KAAK,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAEhE,YAAY,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAiDhD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8Df,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;;;;;;;;;;;;OAYG;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

@@ -13,6 +13,12 @@
  *   directly with and spread SVG props.
  * - String mode: Pass a semantic name (e.g. 'close', 'chevronDown') — resolved from the
  *   theme's icon registry (or built-in fallback SVGs) and wrapped in a styled span.
+ *   A function registry entry receives `{size}`, the size resolved by ORD1.
+ *
+ * Both modes size the glyph from the `icon` target's private size vars
+ * (`iconSizeStyles` in IconSize.stylex.ts, `registrySizeStyles` below), so a
+ * theme's `width` and `height` on that target's size selector set the size's
+ * glyph dimension, including the font size 1em-based registry artwork follows.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Icon/Icon.doc.mjs (props table, features, implementation notes)
@@ -26,11 +32,11 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars } from "../theme/tokens.stylex.js";
 import { useThemeName } from "../theme/useTheme.js";
-import { getIcon } from "./globalIconRegistry.js";
+import { resolveIcon } 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 { iconSizeStyles } from "./IconSize.stylex.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -49,6 +55,40 @@ const styles = {
     $$css: true
   }
 };
+
+/**
+ * Size styles for string-based registry icons: the glyph dimensions
+ * `iconSizeStyles` reads from the `icon` target's private vars, plus a
+ * `fontSize`, because registry artwork is 1em-based. `fontSize` is the smaller
+ * side, which fits square artwork into a non-square box the way an SVG viewBox
+ * does.
+ */
+const registrySizeStyles = {
+  xsm: {
+    kzqmXN: "x13u0t82",
+    kZKoxP: "x89eeu2",
+    kGuDYH: "x1uq1jy3",
+    $$css: true
+  },
+  sm: {
+    kzqmXN: "xomy6nw",
+    kZKoxP: "x14eyxzr",
+    kGuDYH: "x1qzu985",
+    $$css: true
+  },
+  md: {
+    kzqmXN: "x1vvatio",
+    kZKoxP: "x1jxzzob",
+    kGuDYH: "xhhwgqx",
+    $$css: true
+  },
+  lg: {
+    kzqmXN: "x1gbskz6",
+    kZKoxP: "xol4r8t",
+    kGuDYH: "x14nqahd",
+    $$css: true
+  }
+};
 const colorStyles = {
   primary: {
     kMwMTN: "xtbr613",
@@ -70,16 +110,20 @@ const colorStyles = {
     kMwMTN: "xqwr325",
     $$css: true
   },
+  info: {
+    kMwMTN: "x1gc9m53",
+    $$css: true
+  },
   success: {
-    kMwMTN: "xtjic6",
+    kMwMTN: "x1vau044",
     $$css: true
   },
   error: {
-    kMwMTN: "xjt36v0",
+    kMwMTN: "xskb5cx",
     $$css: true
   },
   warning: {
-    kMwMTN: "xs3pv69",
+    kMwMTN: "x4z9hng",
     $$css: true
   },
   inherit: {
@@ -230,8 +274,8 @@ Icon.displayName = 'Icon';
  * Internal component that resolves a semantic icon name from the registry
  * and renders it in a styled span with proper sizing.
  *
- * Extracted as a separate component so getIcon is only called
- * when the icon prop is a string.
+ * Extracted as a separate component so the registry is only read when the
+ * icon prop is a string. A function entry receives the resolved size.
  */
 function IconFromRegistry({
   name,
@@ -244,7 +288,9 @@ function IconFromRegistry({
   spanProps
 }) {
   const themeName = useThemeName();
-  const resolvedIcon = getIcon(name, themeName);
+  const resolvedIcon = resolveIcon(name, themeName, {
+    size
+  });
   if (resolvedIcon == null) {
     return null;
   }
@@ -261,7 +307,7 @@ function IconFromRegistry({
     ...mergeProps(themeProps('icon', {
       size,
       color
-    }), stylex.props(styles.span, colorStyles[color], iconBoxSizeStyles[size], xstyle), className ?? undefined, style),
+    }), stylex.props(styles.span, colorStyles[color], registrySizeStyles[size], xstyle), className ?? undefined, style),
     children: resolvedIcon
   });
 }

package/dist/Icon/IconDefaultSizeContext.d.ts

@@ -1,4 +1,4 @@
-import type { IconSize } from './IconSize.stylex';
+import type { IconSize } from './IconSize.stylex.js';
 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/IconSize.stylex.d.ts

@@ -1,8 +1,13 @@
 /**
  * @file IconSize.stylex.ts
- * @input Defines the Icon size scale
+ * @input Defines the Icon size scale and reads the `icon` target's private
+ *   `--_icon-width` / `--_icon-height` vars
  * @output Exports shared Icon size types and StyleX styles
  * @position Internal Icon sizing source; consumed by Icon and icon-slot owners
+ *
+ * SYNC: When the private vars change, update Icon.tsx (registrySizeStyles),
+ * derivedVarRegistry.ts, and the `theming.vars` / `theming.derived` entries in
+ * Icon.doc.mjs.
  */
 import * as stylex from '@stylexjs/stylex';
 /**
@@ -19,25 +24,25 @@ 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 width: stylex.StyleXClassNameFor<"width", "var(--_icon-width, 0.75rem)">;
+        readonly height: stylex.StyleXClassNameFor<"height", "var(--_icon-height, 0.75rem)">;
     }>;
     readonly sm: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "1rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1rem">;
+        readonly width: stylex.StyleXClassNameFor<"width", "var(--_icon-width, 1rem)">;
+        readonly height: stylex.StyleXClassNameFor<"height", "var(--_icon-height, 1rem)">;
     }>;
     readonly md: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "1.25rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1.25rem">;
+        readonly width: stylex.StyleXClassNameFor<"width", "var(--_icon-width, 1.25rem)">;
+        readonly height: stylex.StyleXClassNameFor<"height", "var(--_icon-height, 1.25rem)">;
     }>;
     readonly lg: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "1.5rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1.5rem">;
+        readonly width: stylex.StyleXClassNameFor<"width", "var(--_icon-width, 1.5rem)">;
+        readonly height: stylex.StyleXClassNameFor<"height", "var(--_icon-height, 1.5rem)">;
     }>;
 }>;
 /**
- * Size styles for icon boxes and string-based registry icons. `fontSize`
- * keeps 1em-based icons in step with the box.
+ * Size styles for component-owned icon boxes. `fontSize` keeps 1em-based icons
+ * in step with the box.
  */
 export declare const iconBoxSizeStyles: Readonly<{
     readonly xsm: Readonly<{

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

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

package/dist/Icon/IconSize.stylex.js

@@ -2,9 +2,14 @@
 
 /**
  * @file IconSize.stylex.ts
- * @input Defines the Icon size scale
+ * @input Defines the Icon size scale and reads the `icon` target's private
+ *   `--_icon-width` / `--_icon-height` vars
  * @output Exports shared Icon size types and StyleX styles
  * @position Internal Icon sizing source; consumed by Icon and icon-slot owners
+ *
+ * SYNC: When the private vars change, update Icon.tsx (registrySizeStyles),
+ * derivedVarRegistry.ts, and the `theming.vars` / `theming.derived` entries in
+ * Icon.doc.mjs.
  */
 
 import * as stylex from '@stylexjs/stylex';
@@ -19,33 +24,44 @@ const iconSizeValues = {
   md: '1.25rem',
   lg: '1.5rem'
 };
+/*
+ * Icon's own glyph dimensions (these and the registry size styles in Icon.tsx)
+ * read private vars rather than being plain declarations. A theme writes
+ * `width`/`height` on the `icon` target's size selector
+ * (`components.icon['size:sm']`), and the derived-var registry emits them as
+ * `--_icon-width` / `--_icon-height` instead of as competing properties.
+ * Nothing else declares the dimensions, so the theme value lands however the
+ * consumer layers StyleX; with no theme value, each size falls back to its own
+ * rem value.
+ */
+
 /** Size styles for direct SVG icon components. */
 export const iconSizeStyles = {
   xsm: {
-    kzqmXN: "x1jw3ynk",
-    kZKoxP: "xvle69y",
+    kzqmXN: "x13u0t82",
+    kZKoxP: "x89eeu2",
     $$css: true
   },
   sm: {
-    kzqmXN: "xcdlrvm",
-    kZKoxP: "x1l36t39",
+    kzqmXN: "xomy6nw",
+    kZKoxP: "x14eyxzr",
     $$css: true
   },
   md: {
-    kzqmXN: "xwqq7k2",
-    kZKoxP: "xmll18r",
+    kzqmXN: "x1vvatio",
+    kZKoxP: "x1jxzzob",
     $$css: true
   },
   lg: {
-    kzqmXN: "xp8d6y2",
-    kZKoxP: "xam5rvr",
+    kzqmXN: "x1gbskz6",
+    kZKoxP: "xol4r8t",
     $$css: true
   }
 };
 
 /**
- * Size styles for icon boxes and string-based registry icons. `fontSize`
- * keeps 1em-based icons in step with the box.
+ * Size styles for component-owned icon boxes. `fontSize` keeps 1em-based icons
+ * in step with the box.
  */
 export const iconBoxSizeStyles = {
   xsm: {

package/dist/Icon/defaultIcons.d.ts

@@ -21,6 +21,6 @@
  * - /packages/core/src/Icon/Icon.doc.mjs (fallback icon documentation)
  */
 import type { ReactNode } from 'react';
-import type { IconName, NamespacedIconName } from './globalIconRegistry';
+import type { IconName, NamespacedIconName } from './globalIconRegistry.js';
 export declare const defaultIcons: Record<IconName, ReactNode> & Partial<Record<NamespacedIconName, ReactNode>>;
 //# sourceMappingURL=defaultIcons.d.ts.map