@astryxdesign/core 0.0.15 → 0.1.0-canary.08d4cf4

package/src/ContextMenu/ContextMenu.tsx

@@ -36,7 +36,7 @@ import React, {
 import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {useLayer} from '../Layer/useLayer';
-import {renderXDSDropdownItems} from '../DropdownMenu/renderXDSDropdownItems';
+import {renderDropdownItems} from '../DropdownMenu/renderDropdownItems';
 import {
   DropdownMenuContext,
   type DropdownMenuContextValue,
@@ -53,7 +53,7 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 import type {
   DropdownMenuOption,
   DropdownMenuItemData,
@@ -278,7 +278,7 @@ export function ContextMenu({
   );
 
   const resolvedMenuContent =
-    props.items !== undefined ? renderXDSDropdownItems(items) : menuContent;
+    props.items !== undefined ? renderDropdownItems(items) : menuContent;
 
   return (
     <>
@@ -297,7 +297,7 @@ export function ContextMenu({
           role="menu"
           onKeyDown={listKeyDown}
           {...mergeProps(
-            xdsThemeProps('context-menu'),
+            themeProps('context-menu'),
             stylex.props(styles.menu, xstyle),
             className,
             style,

package/src/DateInput/DateInput.test.tsx

@@ -21,19 +21,13 @@ describe('DateInput', () => {
 
   it('renders with placeholder', () => {
     render(
-      <DateInput
-        label="Date"
-        onChange={() => {}}
-        placeholder="Pick a date"
-      />,
+      <DateInput label="Date" onChange={() => {}} placeholder="Pick a date" />,
     );
     expect(screen.getByPlaceholderText('Pick a date')).toBeInTheDocument();
   });
 
   it('displays formatted date when value is provided', () => {
-    render(
-      <DateInput label="Date" value="2026-01-25" onChange={() => {}} />,
-    );
+    render(<DateInput label="Date" value="2026-01-25" onChange={() => {}} />);
     expect(screen.getByDisplayValue('January 25, 2026')).toBeInTheDocument();
   });
 
@@ -118,9 +112,7 @@ describe('DateInput', () => {
 
   it('reverts to previous value on blur when input is invalid', async () => {
     const onChange = vi.fn();
-    render(
-      <DateInput label="Date" value="2026-01-25" onChange={onChange} />,
-    );
+    render(<DateInput label="Date" value="2026-01-25" onChange={onChange} />);
 
     const input = screen.getByRole('combobox');
     fireEvent.change(input, {target: {value: 'not a date'}});
@@ -299,9 +291,7 @@ describe('DateInput', () => {
   // --- P1: Tab order: calendar button first, then input ---
 
   it('renders calendar button before input in DOM order', () => {
-    const {container} = render(
-      <DateInput label="Date" onChange={() => {}} />,
-    );
+    const {container} = render(<DateInput label="Date" onChange={() => {}} />);
     const input = container.querySelector('input');
     const button = container.querySelector('button');
     // Calendar button should come before input in the DOM
@@ -389,9 +379,7 @@ describe('DateInput', () => {
 
   it('calls onChange with undefined when input is cleared and blurred', () => {
     const onChange = vi.fn();
-    render(
-      <DateInput label="Date" value="2026-01-25" onChange={onChange} />,
-    );
+    render(<DateInput label="Date" value="2026-01-25" onChange={onChange} />);
 
     const input = screen.getByRole('combobox');
     fireEvent.change(input, {target: {value: ''}});
@@ -476,9 +464,7 @@ describe('DateInput', () => {
     });
 
     it('does not show clear button when hasClear is false', () => {
-      render(
-        <DateInput label="Date" value="2026-01-15" onChange={() => {}} />,
-      );
+      render(<DateInput label="Date" value="2026-01-15" onChange={() => {}} />);
       expect(
         screen.queryByRole('button', {name: 'Clear Date'}),
       ).not.toBeInTheDocument();
@@ -514,6 +500,68 @@ describe('DateInput', () => {
     });
   });
 
+  // --- Regression: in-progress / leading-zero input must not crash ---
+
+  describe('incomplete typed input', () => {
+    it('does not crash or fire onChange when first digit typed is 0', () => {
+      const onChange = vi.fn();
+      render(<DateInput label="Date" onChange={onChange} />);
+
+      const input = screen.getByRole('combobox');
+      // Typing a leading "0" (e.g. starting "01" for January) must be treated
+      // as incomplete input, not coerced into an (invalid) date that crashes.
+      expect(() =>
+        fireEvent.change(input, {target: {value: '0'}}),
+      ).not.toThrow();
+
+      expect(onChange).not.toHaveBeenCalled();
+      expect(input).toHaveValue('0');
+    });
+
+    it('does not crash or fire onChange when first digit typed is 1', () => {
+      const onChange = vi.fn();
+      render(<DateInput label="Date" onChange={onChange} />);
+
+      const input = screen.getByRole('combobox');
+      expect(() =>
+        fireEvent.change(input, {target: {value: '1'}}),
+      ).not.toThrow();
+
+      expect(onChange).not.toHaveBeenCalled();
+      expect(input).toHaveValue('1');
+    });
+
+    it('does not crash while progressively typing a numeric date', () => {
+      const onChange = vi.fn();
+      render(<DateInput label="Date" onChange={onChange} />);
+
+      const input = screen.getByRole('combobox');
+      // Simulate keystroke-by-keystroke entry of "01/15/2026". The leading
+      // single-digit keystrokes must not crash (the original bug).
+      for (const partial of ['0', '01', '01/', '01/1', '01/15', '01/15/']) {
+        expect(() =>
+          fireEvent.change(input, {target: {value: partial}}),
+        ).not.toThrow();
+      }
+
+      // Completing the date commits it without error.
+      expect(() =>
+        fireEvent.change(input, {target: {value: '01/15/2026'}}),
+      ).not.toThrow();
+      expect(onChange).toHaveBeenCalledWith('2026-01-15');
+    });
+
+    it('does not crash on blur after typing an incomplete value', () => {
+      const onChange = vi.fn();
+      render(<DateInput label="Date" onChange={onChange} />);
+
+      const input = screen.getByRole('combobox');
+      fireEvent.change(input, {target: {value: '0'}});
+      expect(() => fireEvent.blur(input)).not.toThrow();
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
   describe('external value changes', () => {
     it('clears pending input when value changes externally', () => {
       const onChange = vi.fn();

package/src/DateInput/DateInput.tsx

@@ -135,7 +135,7 @@ export type {
 import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export interface DateInputProps extends Omit<
   BaseProps,
@@ -516,7 +516,7 @@ export function DateInput({
         ref={popover.triggerRef}
         {...rest}
         {...mergeProps(
-          xdsThemeProps('date-input', {size, status: status?.type ?? null}),
+          themeProps('date-input', {size, status: status?.type ?? null}),
           stylex.props(
             inputWrapperStyles.base,
             sizeStyles[size],

package/src/DateRangeInput/DateRangeInput.tsx

@@ -52,7 +52,7 @@ import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export type {DateRange} from '../Calendar';
 
@@ -490,7 +490,7 @@ export function DateRangeInput({
         ref={popover.triggerRef}
         {...rest}
         {...mergeProps(
-          xdsThemeProps('date-range-input', {
+          themeProps('date-range-input', {
             size,
             status: status?.type ?? null,
           }),

package/src/DateTimeInput/DateTimeInput.tsx

@@ -78,7 +78,7 @@ import type {StyleXStyles} from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export type ISODateTimeString = string & {
   readonly __brand: 'ISODateTimeString';
@@ -790,7 +790,7 @@ export function DateTimeInput({
       <div
         {...rest}
         {...mergeProps(
-          xdsThemeProps('date-time-input', {
+          themeProps('date-time-input', {
             size,
             status: status?.type ?? null,
           }),

package/src/Dialog/Dialog.tsx

@@ -39,7 +39,7 @@ import {
 import type {SpacingStep} from '../utils/types';
 import {mergeProps, mergeRefs} from '../utils';
 import {DialogContext} from './DialogContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 /**
  * Calculate a directional translate offset for dialog entry animation.
@@ -505,7 +505,7 @@ export function Dialog({
     return (
       <div
         {...mergeProps(
-          xdsThemeProps('dialog', {variant}),
+          themeProps('dialog', {variant}),
           stylex.props(
             styles.inlineWrapper,
             !isFullscreen && dynamicStyles.sizing(width, maxHeight),
@@ -539,7 +539,7 @@ export function Dialog({
       aria-modal="true"
       role={purpose === 'required' ? 'alertdialog' : undefined}
       {...mergeProps(
-        xdsThemeProps('dialog', {variant}),
+        themeProps('dialog', {variant}),
         stylex.props(
           styles.dialog,
           isOpen && styles.open,

package/src/Divider/Divider.doc.mjs

@@ -108,7 +108,7 @@ export const docsZh = {
 
 /** @type {import('../docs-types').TranslationDoc} */
 export const docsDense = {
-  description: 'visual separator w/ optional label, using XDS design tokens',
+  description: 'visual separator w/ optional label, using Astryx design tokens',
   usage: {
     description: 'A visual separator that divides content into distinct sections. Use to create clear boundaries between groups of related content, or to demarcate interactive regions within a layout.',
     bestPractices: [

package/src/Divider/Divider.tsx

@@ -26,7 +26,7 @@ import {
   borderVars,
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 /**
  * Extensible variant map for Divider.
@@ -197,7 +197,7 @@ export function Divider({
       role="separator"
       aria-orientation={orientation}
       {...mergeProps(
-        xdsThemeProps('divider', {variant, orientation}),
+        themeProps('divider', {variant, orientation}),
         stylex.props(
           isHorizontal ? baseStyles.horizontal : baseStyles.vertical,
           isFullBleed &&

package/src/DropdownMenu/DropdownMenu.tsx

@@ -37,7 +37,7 @@ import {Button, type ButtonProps} from '../Button';
 import {Icon} from '../Icon';
 import type {IconType} from '../Icon';
 
-import {renderXDSDropdownItems} from './renderXDSDropdownItems';
+import {renderDropdownItems} from './renderDropdownItems';
 import {
   DropdownMenuContext,
   type DropdownMenuContextValue,
@@ -53,7 +53,7 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   dropdown: {
@@ -366,7 +366,7 @@ export function DropdownMenu({
 
   // Resolve menu content: data-driven items become components
   const menuContent =
-    props.items !== undefined ? renderXDSDropdownItems(items) : children;
+    props.items !== undefined ? renderDropdownItems(items) : children;
 
   return (
     <>
@@ -401,7 +401,7 @@ export function DropdownMenu({
           role="menu"
           onKeyDown={listKeyDown}
           {...mergeProps(
-            xdsThemeProps('dropdown-menu'),
+            themeProps('dropdown-menu'),
             stylex.props(styles.dropdown, xstyle),
             className,
             style,

package/src/DropdownMenu/DropdownMenuItem.tsx

@@ -36,7 +36,7 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import {useDropdownMenuContext} from './DropdownMenuContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const menuItemStyles = stylex.create({
   root: {
@@ -161,7 +161,7 @@ export function DropdownMenuItem({
         isDisabled && menuItemStyles.disabled,
         xstyle,
       ]}
-      {...mergeProps(xdsThemeProps('dropdown-menu-item', {size: menuSize}), {
+      {...mergeProps(themeProps('dropdown-menu-item', {size: menuSize}), {
         className,
         style,
       })}

package/src/DropdownMenu/{renderXDSDropdownItems.tsx → renderDropdownItems.tsx}

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * @file renderXDSDropdownItems.tsx
+ * @file renderDropdownItems.tsx
  * @output Converts data-driven menu items into DropdownMenuItem components
  * @position Utility; used by DropdownMenu to unify data-driven and compound paths
  */
@@ -49,7 +49,7 @@ function getSectionKey(section: DropdownMenuSection, index: number): string {
  * Converts data-driven items into DropdownMenuItem components,
  * so both modes share the same rendering and keyboard navigation path.
  */
-export function renderXDSDropdownItems(
+export function renderDropdownItems(
   items: DropdownMenuOption[],
 ): ReactNode {
   const elements: ReactNode[] = [];

package/src/EmptyState/EmptyState.tsx

@@ -24,7 +24,7 @@ import {
 } from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   container: {
@@ -156,7 +156,7 @@ export function EmptyState({
       ref={ref}
       role="status"
       {...mergeProps(
-        xdsThemeProps('empty-state', {variant: isCompact ? 'compact' : null}),
+        themeProps('empty-state', {variant: isCompact ? 'compact' : null}),
         stylex.props(
           styles.container,
           isCompact && styles.containerCompact,

package/src/Field/Field.tsx

@@ -27,7 +27,7 @@ import type {IconType} from '../Icon';
 import {mergeProps} from '../utils';
 import {FormLayoutContext} from '../FormLayout/FormLayoutContext';
 import {Text} from '../Text';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   container: {
@@ -236,7 +236,7 @@ export function Field({
       <div
         ref={ref}
         {...mergeProps(
-          xdsThemeProps('field', {layout: 'horizontal-labels'}),
+          themeProps('field', {layout: 'horizontal-labels'}),
           stylex.props(styles.horizontalLabels, xstyle),
           className,
           style,
@@ -264,7 +264,7 @@ export function Field({
     <div
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('field'),
+        themeProps('field'),
         stylex.props(
           styles.container,
           !isLabelHidden && styles.containerGap,

package/src/Field/FieldLabel.tsx

@@ -26,7 +26,7 @@ import {
 } from '../theme/tokens.stylex';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
 import {Tooltip} from '../Tooltip';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   label: {
@@ -158,7 +158,7 @@ export function FieldLabel({
         ref={ref}
         htmlFor={inputID}
         {...mergeProps(
-          xdsThemeProps('field-label'),
+          themeProps('field-label'),
           stylex.props(
             styles.label,
             isDisabled && styles.labelDisabled,

package/src/FieldStatus/FieldStatus.tsx

@@ -29,7 +29,7 @@ import {
 } from '../theme/tokens.stylex';
 import type {InputStatusType} from '../Field/types';
 import {useEntryAnimation} from '../hooks/useEntryAnimation';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   base: {
@@ -147,7 +147,7 @@ export function FieldStatus({
       aria-live={type === 'error' ? 'assertive' : 'polite'}
       {...rest}
       {...mergeProps(
-        xdsThemeProps('field-status', {type, variant}),
+        themeProps('field-status', {type, variant}),
         stylex.props(
           styles.base,
           entryStyle,

package/src/FileInput/FileInput.tsx

@@ -52,7 +52,7 @@ export type {
 import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 function formatFileSize(bytes: number): string {
   if (bytes < 1024) {
@@ -674,7 +674,7 @@ export function FileInput({
         aria-busy={isLoading || undefined}
         {...dragDropProps}
         {...mergeProps(
-          xdsThemeProps('file-input', {mode, status: status?.type ?? null}),
+          themeProps('file-input', {mode, status: status?.type ?? null}),
           stylex.props(
             isDropzone ? styles.dropzone : styles.compact,
             isDropzone && !isDisabled && styles.dropzoneHover,

package/src/FormLayout/FormLayout.doc.mjs

@@ -20,7 +20,7 @@ export const docs = {
       name: 'children',
       type: 'ReactNode',
       description:
-        'Form fields to arrange. Accepts XDS inputs (TextInput, Selector, etc.) and Field-wrapped custom controls.',
+        'Form fields to arrange. Accepts Astryx inputs (TextInput, Selector, etc.) and Field-wrapped custom controls.',
     },
     {
       name: 'xstyle',
@@ -68,7 +68,7 @@ export const docsZh = {
       name: 'children',
       type: 'ReactNode',
       description:
-        '要排列的表单字段。接受 XDS 输入组件（TextInput、Selector 等）和 Field 包装的自定义控件。',
+        '要排列的表单字段。接受 Astryx 输入组件（TextInput、Selector 等）和 Field 包装的自定义控件。',
     },
     {
       name: 'xstyle',
@@ -122,7 +122,7 @@ export const docsDense = {
   },
   propDescriptions: {
     direction: 'Field arrangement. Vertical stacks top-to-bottom, horizontal arranges left-to-right w/ equal flex-grow, horizontal-labels uses CSS Grid w/ labels left of inputs (collapses <=480px).',
-    children: 'Form fields to arrange. Accepts XDS inputs + Field-wrapped custom controls.',
+    children: 'Form fields to arrange. Accepts Astryx inputs + Field-wrapped custom controls.',
     xstyle: 'StyleX styles for layout customization. Must be stylex.create() value.',
   },
 };

package/src/FormLayout/FormLayout.tsx

@@ -24,7 +24,7 @@ import {
   type FormLayoutDirection,
 } from './FormLayoutContext';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Responsive breakpoint for horizontal-labels collapse
@@ -125,7 +125,7 @@ export function FormLayout({
       <div
         ref={ref}
         {...mergeProps(
-          xdsThemeProps('form-layout', {direction}),
+          themeProps('form-layout', {direction}),
           stylex.props(
             styles.base,
             direction === 'horizontal' && styles.horizontal,

package/src/Grid/Grid.tsx

@@ -22,7 +22,7 @@ import {spacingVars} from '../theme/tokens.stylex';
 import type {SpacingStep} from '../utils/types';
 import type {SizeValue} from '../utils/types';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 /**
  * Grid alignment options for align-items and justify-items.
@@ -411,7 +411,7 @@ export function Grid({
     }),
   };
 
-  // For xdsThemeProps, extract numeric columns value for variant tracking
+  // For themeProps, extract numeric columns value for variant tracking
   const columnsVariant =
     typeof columns === 'number'
       ? columns
@@ -423,7 +423,7 @@ export function Grid({
     <div
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('grid', {columns: columnsVariant, gap, align, justify}),
+        themeProps('grid', {columns: columnsVariant, gap, align, justify}),
         stylex.props(
           baseStyles.grid,
           gap != null && gapStyles[gap],

package/src/Grid/GridSpan.tsx

@@ -17,7 +17,7 @@ import type {ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export interface GridSpanProps extends BaseProps<HTMLDivElement> {
   /** Ref forwarded to the root element */
@@ -89,7 +89,7 @@ export function GridSpan({
     <div
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('grid-span'),
+        themeProps('grid-span'),
         stylex.props(baseStyles.span, xstyle),
         className,
         {...style, ...inlineStyle},

package/src/Heading/Heading.tsx

@@ -44,7 +44,7 @@ import {useTruncation} from '../Text/useTruncation';
 import type {LayerPlacement} from '../Layer';
 import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const LazyXDSTooltip = lazy(async () =>
   import('../Tooltip/Tooltip').then(mod => ({default: mod.Tooltip})),
@@ -249,7 +249,7 @@ export function Heading({
       <Component
         ref={mergeRefs(ref, truncation.ref, headingRef)}
         {...mergeProps(
-          xdsThemeProps('heading', {level, color, ...(type && {type})}),
+          themeProps('heading', {level, color, ...(type && {type})}),
           stylex.props(
             colorStyles[color],
             type ? sizeByTypeStyles[type] : sizeByLevelStyles[level],

package/src/HoverCard/useHoverCard.tsx

@@ -35,7 +35,7 @@ import {
   spacingVars,
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   // Base container styles passed to useLayer
@@ -459,7 +459,7 @@ export function useHoverCard(
       return layer.render(
         <div
           {...mergeProps(
-            xdsThemeProps('hovercard'),
+            themeProps('hovercard'),
             stylex.props(styles.content),
           )}
           onMouseEnter={() => {

package/src/Icon/Icon.doc.mjs

@@ -17,7 +17,7 @@ export const docs = {
     {
       name: 'color',
       type: "'primary' | 'secondary' | 'tertiary' | 'disabled' | 'accent' | 'success' | 'error' | 'warning' | 'inherit'",
-      description: 'Color variant mapped to XDS icon color tokens.',
+      description: 'Color variant mapped to Astryx icon color tokens.',
       default: "'inherit'",
     },
     {
@@ -62,7 +62,7 @@ export const docsZh = {
     {
       name: 'color',
       type: "'primary' | 'secondary' | 'tertiary' | 'disabled' | 'accent' | 'success' | 'error' | 'warning' | 'inherit'",
-      description: '映射到 XDS 图标颜色令牌的颜色变体。',
+      description: '映射到 Astryx 图标颜色令牌的颜色变体。',
       default: "'inherit'",
     },
     {
@@ -96,7 +96,7 @@ export const docsZh = {
 /** @type {import('../docs-types').TranslationDoc} */
 export const docsDense = {
   description:
-    'Renders icons w/ XDS design system colors + sizes. Supports direct SVG icon components + semantic icon names that adapt to active theme.',
+    'Renders icons w/ Astryx design system colors + sizes. Supports direct SVG icon components + semantic icon names that adapt to active theme.',
   usage: {
     description: 'Icons are small visual symbols that represent actions, objects, or concepts. They improve scannability and reinforce meaning alongside text. Supports both direct SVG components and semantic icon names that adapt to the active theme.',
     bestPractices: [
@@ -113,7 +113,7 @@ export const docsDense = {
   },
   propDescriptions: {
     icon: 'Semantic icon name or SVG component. Valid names: close, chevronDown, chevronLeft, chevronRight, check, success, error, warning, info, calendar, clock, externalLink, menu, moreHorizontal, search, arrowUp, arrowDown, arrowsUpDown, funnel, eyeSlash, viewColumns, copy, checkDouble, wrench, stop, microphone. For others, pass an SVG component.',
-    color: 'Color variant mapped to XDS icon color tokens.',
+    color: 'Color variant mapped to Astryx icon color tokens.',
     size: 'Icon size.',
   },
 };

package/src/Icon/Icon.tsx

@@ -28,7 +28,7 @@ import {colorVars} from '../theme/tokens.stylex';
 import {getIcon} from './globalIconRegistry';
 import type {IconName} from './globalIconRegistry';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Styles
@@ -241,7 +241,7 @@ export function Icon({
       ref={ref}
       aria-hidden="true"
       {...mergeProps(
-        xdsThemeProps('icon', {size, color}),
+        themeProps('icon', {size, color}),
         stylex.props(styles.root, colorStyles[color], sizeStyles[size]),
       )}
       {...props}
@@ -283,7 +283,7 @@ function IconFromRegistry({
     <span
       {...(spanProps as React.HTMLAttributes<HTMLSpanElement>)}
       {...mergeProps(
-        xdsThemeProps('icon', {size, color}),
+        themeProps('icon', {size, color}),
         stylex.props(styles.span, colorStyles[color], spanSizeStyles[size]),
       )}
       aria-hidden="true">