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

package/src/Popover/Popover.tsx

@@ -32,7 +32,7 @@ import type {LayerAlignment, LayerPlacement} from '../Layer/useLayer';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import {spacingVars} from '../theme/tokens.stylex';
 import {InteractiveRoleContext} from '../InteractiveRoleContext/InteractiveRoleContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Helpers
@@ -472,7 +472,7 @@ export function Popover({
           <div
             data-testid={testId}
             {...mergeProps(
-              xdsThemeProps('popover'),
+              themeProps('popover'),
               stylex.props(styles.contentPadding, xstyle),
               className,
               style,
@@ -508,7 +508,7 @@ export function Popover({
           <div
             data-testid={testId}
             {...mergeProps(
-              xdsThemeProps('popover'),
+              themeProps('popover'),
               stylex.props(styles.contentPadding, xstyle),
               className,
               style,
@@ -537,7 +537,7 @@ export function Popover({
         <div
           data-testid={testId}
           {...mergeProps(
-            xdsThemeProps('popover'),
+            themeProps('popover'),
             stylex.props(styles.contentPadding, xstyle),
             className,
             style,

package/src/PowerSearch/PowerSearch.tsx

@@ -50,7 +50,7 @@ import {useInternalConfig} from './useInternalConfig';
 import {usePowerSearchSource} from './usePowerSearchSource';
 import {formatFilterValue} from './formatFilterValue';
 import {PowerSearchEditPopover} from './PowerSearchEditPopover';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 import type {
   PowerSearchConfig,
   PowerSearchFilter,
@@ -966,7 +966,7 @@ export function PowerSearch({
     <>
       <div
         ref={mergeRefs(ref, popover.triggerRef as React.Ref<HTMLDivElement>)}
-        {...xdsThemeProps('power-search')}>
+        {...themeProps('power-search')}>
         <Tokenizer
           handleRef={tokenizerRef}
           label={label}

package/src/ProgressBar/ProgressBar.tsx

@@ -30,7 +30,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';
 
 /**
  * Extensible variant map for ProgressBar.
@@ -283,7 +283,7 @@ export function ProgressBar({
     <div
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('progressbar', {variant}),
+        themeProps('progressbar', {variant}),
         stylex.props(styles.container, xstyle),
         className,
         style,
@@ -327,13 +327,13 @@ export function ProgressBar({
         aria-labelledby={labelId}
         aria-valuetext={isIndeterminate ? undefined : valueText}
         {...mergeProps(
-          xdsThemeProps('progressbar-track'),
+          themeProps('progressbar-track'),
           stylex.props(styles.track),
         )}>
         {isIndeterminate ? (
           <div
             {...mergeProps(
-              xdsThemeProps('progressbar-fill', {variant: fillVariant}),
+              themeProps('progressbar-fill', {variant: fillVariant}),
               stylex.props(
                 styles.indeterminateFill,
                 variantStyles[fillVariant],
@@ -343,7 +343,7 @@ export function ProgressBar({
         ) : (
           <div
             {...mergeProps(
-              xdsThemeProps('progressbar-fill', {variant: fillVariant}),
+              themeProps('progressbar-fill', {variant: fillVariant}),
               stylex.props(styles.fill, variantStyles[fillVariant]),
             )}
             style={{width: `${percentage}%`}}

package/src/RadioList/RadioList.tsx

@@ -24,7 +24,7 @@ import type {InputStatus} from '../Field/types';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 /**
  * Size of the radio controls, matching CheckboxInput sizes.
@@ -224,7 +224,7 @@ export function RadioList({
         aria-invalid={status?.type === 'error' ? true : undefined}
         aria-required={isRequired || undefined}
         {...mergeProps(
-          xdsThemeProps('radio-list', {orientation, size}),
+          themeProps('radio-list', {orientation, size}),
           stylex.props(
             styles.radiogroup,
             orientation === 'vertical' ? styles.vertical : styles.horizontal,

package/src/RadioList/RadioListItem.tsx

@@ -32,7 +32,7 @@ import {RadioListContext} from './RadioList';
 import {mergeProps} from '../utils';
 import {radioScope} from './radio.markers.stylex';
 import {Item} from '../Item';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   container: {
@@ -259,7 +259,7 @@ export function RadioListItem({
       <div
         aria-hidden="true"
         {...mergeProps(
-          xdsThemeProps('radio', {
+          themeProps('radio', {
             size,
             checked: isChecked ? 'checked' : null,
             disabled: isDisabled ? 'disabled' : null,
@@ -275,7 +275,7 @@ export function RadioListItem({
         {isChecked && (
           <div
             {...mergeProps(
-              xdsThemeProps('radio-dot', {size}),
+              themeProps('radio-dot', {size}),
               stylex.props(styles.innerDot, dotSizeStyles[size]),
             )}
           />
@@ -299,7 +299,7 @@ export function RadioListItem({
       ref={ref}
       data-testid={dataTestId}
       {...mergeProps(
-        xdsThemeProps('radio-list-item'),
+        themeProps('radio-list-item'),
         stylex.props(styles.container, !isDisabled && radioScope),
       )}>
       <Item

package/src/Resizable/Resizable.doc.mjs

@@ -27,7 +27,7 @@ export const docs = {
       {
         guidance: true,
         description:
-          'Use useResizable() with existing XDS layout components. ' +
+          'Use useResizable() with existing Astryx layout components. ' +
           'Pass the returned props to the resizable prop on LayoutPanel or SideNav.',
       },
       {
@@ -195,7 +195,7 @@ export const docsDense = {
     description:
       'Hook-based resizable panel system. useResizable() manages size state; ResizeHandle provides interactive pill-grip separator. Pass resize props to existing layout components via their resizable prop.',
     bestPractices: [
-      {guidance: true, description: 'Use useResizable() w/ existing XDS layout components. Pass returned props to resizable prop on LayoutPanel or SideNav.'},
+      {guidance: true, description: 'Use useResizable() w/ existing Astryx layout components. Pass returned props to resizable prop on LayoutPanel or SideNav.'},
       {guidance: true, description: 'Provide accessible label on each ResizeHandle when multiple handles exist (e.g. "Resize sidebar", "Resize terminal").'},
       {guidance: false, description: 'Wrap panels in extra container components for resize. Hook-first architecture avoids extra DOM; use it directly on existing components.'},
     ],

package/src/Resizable/ResizeHandle.tsx

@@ -15,7 +15,7 @@
  * flips when the panel collapses to 0px so it stays accessible.
  *
  * Pill placement uses a single stylex dynamic style that accepts a direction
- * multiplier (-1 or 1). The pill element has its own xdsThemeProps
+ * multiplier (-1 or 1). The pill element has its own themeProps
  * ('resize-handle-pill') so themes can target size/shape directly.
  */
 
@@ -32,7 +32,7 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps, mergeRefs} from '../utils';
 import type {ResizableProps} from './useResizable';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const KEYBOARD_STEP = 10;
 const KEYBOARD_LARGE_STEP = 50;
@@ -487,7 +487,7 @@ export function ResizeHandle({
       onBlur={() => setIsFocused(false)}
       data-resizing={isDragging || undefined}
       {...mergeProps(
-        xdsThemeProps('resize-handle'),
+        themeProps('resize-handle'),
         stylex.props(
           styles.handle,
           isOverlay && styles.overlay,
@@ -534,7 +534,7 @@ export function ResizeHandle({
       {children ?? (
         <div
           {...mergeProps(
-            xdsThemeProps('resize-handle-pill'),
+            themeProps('resize-handle-pill'),
             stylex.props(
               styles.pill,
               isHorizontal ? styles.pillHorizontal : styles.pillVertical,

package/src/Resizable/useResizable.ts

@@ -107,10 +107,6 @@ export interface ResizableProps {
 const DEFAULT_MIN = 50;
 const DEFAULT_COLLAPSED_SIZE = 40;
 const STORAGE_PREFIX = 'astryx-resizable:';
-// Legacy key prefix read during the compat window so persisted panel sizes
-// survive the xds -> astryx rename. Read-only fallback; we always write the
-// new prefix. Removed at final cutover.
-const LEGACY_STORAGE_PREFIX = 'xds-resizable:';
 
 // =============================================================================
 // Helpers
@@ -147,9 +143,7 @@ function loadPersistedSize(key: string): number | null {
     return null;
   }
   try {
-    const raw =
-      localStorage.getItem(STORAGE_PREFIX + key) ??
-      localStorage.getItem(LEGACY_STORAGE_PREFIX + key);
+    const raw = localStorage.getItem(STORAGE_PREFIX + key);
     if (raw != null) {
       const parsed = JSON.parse(raw);
       if (typeof parsed === 'number') {

package/src/Section/Section.tsx

@@ -32,7 +32,7 @@ import {
 } from '../Layout/padding.stylex';
 import type {SizeValue, SpacingStep} from '../utils/types';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 /**
  * Extensible variant map for Section.
@@ -268,7 +268,7 @@ export function Section({
       {...props}>
       <div
         {...mergeProps(
-          xdsThemeProps('section', {variant}),
+          themeProps('section', {variant}),
           stylex.props(
             nestedStyles.inner,
             ...container(

package/src/SegmentedControl/SegmentedControl.tsx

@@ -26,7 +26,7 @@ import type {
 import {mergeProps, mergeRefs} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export interface SegmentedControlProps extends Omit<
   BaseProps<HTMLDivElement>,
@@ -206,7 +206,7 @@ export function SegmentedControl({
         aria-disabled={isDisabled || undefined}
         onKeyDown={handleKeyDown}
         {...mergeProps(
-          xdsThemeProps('segmented-control', {size}),
+          themeProps('segmented-control', {size}),
           stylex.props(
             styles.container,
             sizeStyles[size],

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -31,7 +31,7 @@ import {useSegmentedControlContext} from './SegmentedControlContext';
 import type {SegmentedControlSize} from './SegmentedControlContext';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export interface SegmentedControlItemProps extends BaseProps<HTMLButtonElement> {
   ref?: React.Ref<HTMLButtonElement>;
@@ -198,7 +198,7 @@ export function SegmentedControlItem({
       tabIndex={isSelected ? 0 : -1}
       onClick={handleClick}
       {...mergeProps(
-        xdsThemeProps('segmented-control-item', {
+        themeProps('segmented-control-item', {
           size,
           selected: isSelected ? 'selected' : null,
           disabled: isItemDisabled ? 'disabled' : null,

package/src/SelectableCard/SelectableCard.tsx

@@ -42,7 +42,7 @@ import {Card} from '../Card/Card';
 import type {CardVariant} from '../Card/Card';
 import {useClickableContainer} from '../hooks/useClickableContainer';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Styles — selection + interaction; Card handles the rest
@@ -329,7 +329,7 @@ export function SelectableCard({
       padding={padding}
       variant={variant}
       {...mergeProps(
-        xdsThemeProps('selectable-card', {
+        themeProps('selectable-card', {
           variant,
           selected: isSelected ? 'true' : 'false',
         }),

package/src/Selector/Selector.tsx

@@ -65,7 +65,7 @@ import {mergeProps} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   // Trigger container — the enhanced click target wrapping the combobox button and clear button as siblings
@@ -107,12 +107,11 @@ const styles = stylex.create({
     lineHeight: 'inherit',
     color: 'inherit',
     cursor: 'pointer',
-    outline: {
-      default: 'none',
-      ':focus-visible': `${borderVars['--border-width']} solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: '0',
-    borderRadius: radiusVars['--radius-element'],
+    // The wrapper (inputWrapperStyles.base) renders the focus ring via
+    // :focus-within when this button is focused, matching TextInput/NumberInput.
+    // The button must not draw its own :focus-visible outline or the two stack
+    // into a doubled ring over the trigger.
+    outline: 'none',
   },
   triggerPlaceholder: {
     color: colorVars['--color-text-secondary'],
@@ -873,7 +872,7 @@ export function Selector<T extends SelectorOptionType>(
         onClick={onTriggerClick}
         data-testid={testId}
         {...mergeProps(
-          xdsThemeProps('selector', {size, status: status?.type ?? null}),
+          themeProps('selector', {size, status: status?.type ?? null}),
           stylex.props(
             inputWrapperStyles.base,
             styles.triggerContainer,

package/src/Selector/SelectorOption.tsx

@@ -14,7 +14,7 @@ import type {StyleXStyles} from '@stylexjs/stylex';
 import {renderIconSlot, type IconType} from '../Icon';
 import {Item} from '../Item';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const embeddedStyles = stylex.create({
   root: {
@@ -111,7 +111,7 @@ export function SelectorOption({
       description={description}
       endContent={endContent}
       xstyle={[embeddedStyles.root, xstyle]}
-      {...mergeProps(xdsThemeProps('selector-option'), {className, style})}
+      {...mergeProps(themeProps('selector-option'), {className, style})}
     />
   );
 }

package/src/SideNav/SideNav.tsx

@@ -44,7 +44,7 @@ import {MobileNav} from '../MobileNav/MobileNav';
 import {useResizable} from '../Resizable/useResizable';
 import type {ResizableConfig} from '../Resizable/useResizable';
 import {ResizeHandle} from '../Resizable/ResizeHandle';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Constants
@@ -427,7 +427,7 @@ export function SideNav({
       <div
         data-testid={testId}
         {...mergeProps(
-          xdsThemeProps('side-nav', {mode: 'topbar'}),
+          themeProps('side-nav', {mode: 'topbar'}),
           stylex.props(styles.topbar, xstyle),
           className,
           style,
@@ -503,7 +503,7 @@ export function SideNav({
       aria-label="Side navigation"
       data-testid={testId}
       {...mergeProps(
-        xdsThemeProps('side-nav'),
+        themeProps('side-nav'),
         stylex.props(styles.root, collapsed && styles.rootCollapsed, xstyle),
         className,
         resizableNavStyle,

package/src/SideNav/SideNavHeading.tsx

@@ -43,7 +43,7 @@ import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {useMenuHover} from '../hooks/useMenuHover';
 import {NavHeadingCloseContext} from '../NavMenu/NavMenuContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Styles
@@ -392,7 +392,7 @@ export function SideNavHeading({
           aria-label={heading}
           data-testid={testId}
           {...mergeProps(
-            xdsThemeProps('side-nav-heading'),
+            themeProps('side-nav-heading'),
             stylex.props(navItemStyles.item, styles.rootCollapsed, xstyle),
             className,
             style,
@@ -411,7 +411,7 @@ export function SideNavHeading({
             {...popover.triggerProps}
             {...triggerProps}
             {...mergeProps(
-              xdsThemeProps('side-nav-heading'),
+              themeProps('side-nav-heading'),
               stylex.props(
                 navItemStyles.item,
                 styles.rootCollapsed,
@@ -473,7 +473,7 @@ export function SideNavHeading({
           ref={collapsedSetRef}
           data-testid={testId}
           {...mergeProps(
-            xdsThemeProps('side-nav-heading'),
+            themeProps('side-nav-heading'),
             stylex.props(styles.root, styles.rootCollapsed, xstyle),
             className,
             style,
@@ -571,7 +571,7 @@ export function SideNavHeading({
         href={headingHref}
         data-testid={testId}
         {...mergeProps(
-          xdsThemeProps('side-nav-heading'),
+          themeProps('side-nav-heading'),
           stylex.props(styles.root, styles.menuTrigger, xstyle),
           className,
           style,
@@ -594,7 +594,7 @@ export function SideNavHeading({
           data-testid={testId}
           {...triggerProps}
           {...mergeProps(
-            xdsThemeProps('side-nav-heading'),
+            themeProps('side-nav-heading'),
             stylex.props(styles.root, styles.menuTrigger, xstyle),
             className,
             style,
@@ -645,7 +645,7 @@ export function SideNavHeading({
           data-testid={testId}
           {...triggerProps}
           {...mergeProps(
-            xdsThemeProps('side-nav-heading'),
+            themeProps('side-nav-heading'),
             stylex.props(styles.root, xstyle),
             className,
             style,
@@ -701,7 +701,7 @@ export function SideNavHeading({
         ref={ref}
         data-testid={testId}
         {...mergeProps(
-          xdsThemeProps('side-nav-heading'),
+          themeProps('side-nav-heading'),
           stylex.props(styles.root, xstyle),
           className,
           style,
@@ -758,7 +758,7 @@ export function SideNavHeading({
       ref={ref}
       data-testid={testId}
       {...mergeProps(
-        xdsThemeProps('side-nav-heading'),
+        themeProps('side-nav-heading'),
         stylex.props(styles.root, xstyle),
         className,
         style,

package/src/SideNav/SideNavItem.tsx

@@ -53,7 +53,7 @@ import {
 import {getIcon} from '../Icon/globalIconRegistry';
 import {useSideNavRenderMode} from './SideNavRenderContext';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Styles
@@ -482,7 +482,7 @@ export function SideNavItem({
 
     // Shared collapsed item styles — used by trigger, link, and button
     const collapsedItemStyles = mergeProps(
-      xdsThemeProps('side-nav-item', {
+      themeProps('side-nav-item', {
         size,
         selected: isSelected ? 'selected' : null,
       }),
@@ -583,7 +583,7 @@ export function SideNavItem({
   );
 
   const navItemStyleProps = mergeProps(
-    xdsThemeProps('side-nav-item', {
+    themeProps('side-nav-item', {
       size,
       selected: isSelected ? 'selected' : null,
     }),

package/src/SideNav/SideNavSection.tsx

@@ -29,7 +29,7 @@ import {
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {useSideNavCollapse} from './SideNavCollapseContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 // =============================================================================
 // Styles
 // =============================================================================
@@ -187,7 +187,7 @@ export function SideNavSection({
       aria-labelledby={titleId}
       data-testid={testId}
       {...mergeProps(
-        xdsThemeProps('side-nav-section'),
+        themeProps('side-nav-section'),
         stylex.props(styles.root, xstyle),
         className,
         style,

package/src/Skeleton/Skeleton.tsx

@@ -19,7 +19,7 @@ import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {colorVars, radiusVars, durationVars} from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Animation Timing Constants
@@ -182,7 +182,7 @@ export function Skeleton({
       ref={ref}
       data-testid={testId}
       {...mergeProps(
-        xdsThemeProps('skeleton'),
+        themeProps('skeleton'),
         stylex.props(
           styles.root,
           styles.animate,

package/src/Slider/Slider.tsx

@@ -41,7 +41,7 @@ import type {InputStatus} from '../Field/types';
 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';
 
 // =============================================================================
 // Types
@@ -661,7 +661,7 @@ export function Slider({ref, ...props}: SliderProps) {
         aria-describedby={ariaDescribedBy}
         onKeyDown={e => handleKeyDown(thumbIndex, e)}
         {...mergeProps(
-          xdsThemeProps('slider-thumb', {
+          themeProps('slider-thumb', {
             orientation,
             disabled: isDisabled ? 'disabled' : null,
           }),
@@ -751,7 +751,7 @@ export function Slider({ref, ...props}: SliderProps) {
       style={style}>
       <div
         {...mergeProps(
-          xdsThemeProps('slider', {
+          themeProps('slider', {
             orientation,
             disabled: isDisabled ? 'disabled' : null,
           }),
@@ -775,7 +775,7 @@ export function Slider({ref, ...props}: SliderProps) {
           <div
             aria-hidden="true"
             {...mergeProps(
-              xdsThemeProps('slider-track', {orientation}),
+              themeProps('slider-track', {orientation}),
               stylex.props(
                 styles.track,
                 isHorizontal ? styles.trackHorizontal : styles.trackVertical,

package/src/Spinner/Spinner.tsx

@@ -23,7 +23,7 @@ import {useTheme} from '../theme/useTheme';
 import type {BaseProps} from '../BaseProps';
 import {Text} from '../Text/Text';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Constants
@@ -261,7 +261,7 @@ export function Spinner({
       data-testid={hasLabel ? undefined : testId}
       {...(hasLabel ? {} : restProps)}
       {...mergeProps(
-        hasLabel ? '' : xdsThemeProps('spinner', {size, shade}),
+        hasLabel ? '' : themeProps('spinner', {size, shade}),
         stylex.props(styles.spinner, !hasLabel && xstyle),
         hasLabel ? undefined : className,
         {...(hasLabel ? {} : style), width: frameSize, height: frameSize},
@@ -280,7 +280,7 @@ export function Spinner({
       data-testid={testId}
       {...restProps}
       {...mergeProps(
-        xdsThemeProps('spinner', {size, shade}),
+        themeProps('spinner', {size, shade}),
         stylex.props(styles.wrapper, xstyle),
         className,
         style,

package/src/Stack/Stack.tsx

@@ -26,7 +26,7 @@ import {
 } from './stack.stylex';
 import type {SizeValue} from '../utils/types';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 /**
  * Alignment values accepted by Stack.
@@ -233,7 +233,7 @@ export function Stack({
     {
       ref: ref as Ref<Element>,
       ...mergeProps(
-        xdsThemeProps('stack', {direction, gap, wrap}),
+        themeProps('stack', {direction, gap, wrap}),
         stylexProps,
         className,
         {...style, ...sizingStyle},

package/src/Stack/StackItem.tsx

@@ -21,7 +21,7 @@ import {
   type StackItemSize,
 } from './stackItem.stylex';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export interface StackItemProps extends BaseProps<HTMLElement> {
   /** Ref forwarded to the root element */
@@ -110,7 +110,7 @@ export function StackItem({
     {
       ref: ref as Ref<Element>,
       ...mergeProps(
-        xdsThemeProps('stack-item', {size}),
+        themeProps('stack-item', {size}),
         stylexProps,
         className,
         style,

package/src/StatusDot/StatusDot.tsx

@@ -21,7 +21,7 @@ import {colorVars} from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
 import {Tooltip} from '../Tooltip/Tooltip';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 /**
  * Pulse animation keyframes
@@ -160,7 +160,7 @@ export function StatusDot({
       role="img"
       aria-label={label}
       {...mergeProps(
-        xdsThemeProps('statusdot', {variant}),
+        themeProps('statusdot', {variant}),
         stylex.props(
           styles.base,
           variants[variant],