@astryxdesign/core 0.0.15 → 0.1.0-canary.0b5b49f

package/dist/NavIcon/NavIcon.js

@@ -18,7 +18,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * NavIcon styles
@@ -67,7 +67,7 @@ export function NavIcon({
 }) {
   return /*#__PURE__*/_jsx("span", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('navicon'), stylex.props(styles.base, xstyle), className, style),
+    ...mergeProps(themeProps('navicon'), stylex.props(styles.base, xstyle), className, style),
     ...props,
     children: icon
   });

package/dist/NavMenu/NavHeadingMenu.js

@@ -17,7 +17,7 @@ import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useListFocus } from "../hooks/useListFocus.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { NavHeadingMenuContext, useNavHeadingCloseContext } from "./NavMenuContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -98,7 +98,7 @@ export function NavHeadingMenu({
       role: "menu",
       onKeyDown: handleKeyDown,
       "data-testid": testId,
-      ...mergeProps(xdsThemeProps('nav-heading-menu', {
+      ...mergeProps(themeProps('nav-heading-menu', {
         size
       }), stylex.props(styles.root, sizeStyles[size], xstyle), className, inlineStyle),
       children: children

package/dist/NavMenu/NavHeadingMenuItem.js

@@ -20,7 +20,7 @@ import { colorVars, spacingVars, typographyVars, typeScaleVars, radiusVars } fro
 import { mergeProps } from "../utils/index.js";
 import { useNavHeadingMenuContext } from "./NavMenuContext.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: {
@@ -110,7 +110,7 @@ export function NavHeadingMenuItem({
     href: href,
     onClick: handleClick,
     "data-testid": testId,
-    ...mergeProps(xdsThemeProps('nav-heading-menu-item', {
+    ...mergeProps(themeProps('nav-heading-menu-item', {
       size
     }), stylex.props(styles.root, sizeStyles[size], isDisabled && styles.disabled, xstyle), className, style),
     children: [icon && renderIconSlot(icon, {

package/dist/NumberInput/NumberInput.js

@@ -49,7 +49,7 @@ import { groupStyles } from "../InputGroup/groupStyles.js";
 // Re-export shared types for convenience
 
 import { mergeProps, mergeRefs } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * Without `hasClear`, onChange only receives valid numbers.
@@ -258,7 +258,7 @@ export function NumberInput({
     ref: containerRef,
     onClick: handleWrapperClick,
     onMouseUp: handleWrapperMouseUp,
-    ...mergeProps(xdsThemeProps('number-input', {
+    ...mergeProps(themeProps('number-input', {
       size,
       status: status?.type ?? null
     }), stylex.props(inputWrapperStyles.base, styles.wrapper, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),

package/dist/Outline/Outline.js

@@ -26,7 +26,7 @@ import { colorVars, durationVars, easeVars, radiusVars, spacingVars, typeScaleVa
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useScrollSpy } from "./useScrollSpy.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -186,7 +186,7 @@ export function Outline({
     ref: mergeRefs(rootRef, ref),
     "aria-label": label,
     "data-testid": testId,
-    ...mergeProps(xdsThemeProps('outline', {
+    ...mergeProps(themeProps('outline', {
       density
     }), stylex.props(styles.root, xstyle), className, style),
     children: [/*#__PURE__*/_jsx("ul", {
@@ -205,7 +205,7 @@ export function Outline({
             href: `#${item.id}`,
             "aria-current": isActive ? 'true' : undefined,
             onClick: handleClick(item.id),
-            ...mergeProps(xdsThemeProps('outline-item', {
+            ...mergeProps(themeProps('outline-item', {
               active: isActive ? 'active' : null,
               level: item.level
             }), stylex.props(styles.link, densityStyles[density], getIndentStyle(item.level), isActive && styles.activeLink, isActive && styles.activeAnchor)),
@@ -229,7 +229,7 @@ export function Outline({
         }
       })
     }), /*#__PURE__*/_jsx("span", {
-      ...mergeProps(xdsThemeProps('outline-indicator'), {
+      ...mergeProps(themeProps('outline-indicator'), {
         className: "x10l6tqk x1o0tod xfo62xy xowkcby xjspbzw x47corl x1vjfegm x1tsffl5 x1ltwjim x1qjb5ga x1xuz8iz xkvfbh3 xlr8y92"
       }),
       "aria-hidden": "true"

package/dist/OverflowList/OverflowList.js

@@ -22,7 +22,7 @@ import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useOverflow } from "../hooks/useOverflow.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {
   container: {
@@ -192,7 +192,7 @@ export function OverflowList({
       })]
     }), /*#__PURE__*/_jsxs("div", {
       ref: mergeRefs(ref, containerRef),
-      ...mergeProps(xdsThemeProps('overflow-list'), stylex.props(styles.container, gapStyles[gap], observeParent && hasOverflow && styles.fillParent, xstyle), className, style),
+      ...mergeProps(themeProps('overflow-list'), stylex.props(styles.container, gapStyles[gap], observeParent && hasOverflow && styles.fillParent, xstyle), className, style),
       ...props,
       children: [collapseFrom === 'start' && hasOverflow && overflowRenderer?.(overflowItems), visibleItems.map(({
         child

package/dist/Overlay/Overlay.js

@@ -19,7 +19,7 @@ import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useOverlay } from "./useOverlay.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import { overlayScope, overlayContainerStyles } from "./overlay.markers.stylex.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Overlay — renders content on top of media with a scrim background
@@ -81,7 +81,7 @@ export function Overlay({
   }, []);
   return /*#__PURE__*/_jsxs("div", {
     ref: mergeRefs(ref, overlay.containerRef),
-    ...mergeProps(xdsThemeProps('overlay'), stylex.props(overlayScope, overlayContainerStyles.root, xstyle), className, style),
+    ...mergeProps(themeProps('overlay'), stylex.props(overlayScope, overlayContainerStyles.root, xstyle), className, style),
     onClick: overlay.containerProps.onClick,
     onMouseUp: overlay.containerProps.onMouseUp,
     children: [children, overlay.element]

package/dist/Overlay/OverlayScrim.js

@@ -18,7 +18,7 @@ import { MediaTheme } from "../theme/MediaTheme.js";
 import { mergeProps } from "../utils/index.js";
 import "./overlay.markers.stylex.js";
 import { overlayScope } from "./overlay.markers.stylex.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Types (re-exported from index.ts for consumers)
@@ -220,7 +220,7 @@ export function OverlayScrim({
   }) : children;
   const visibility = isControlled ? getControlledVisibility(isOpen, position) : getShowOnVisibility(showOn, position);
   return /*#__PURE__*/_jsx("div", {
-    ...mergeProps(xdsThemeProps('overlay-scrim', {
+    ...mergeProps(themeProps('overlay-scrim', {
       position
     }), stylex.props(styles.base, positionMap[position], alignMap[align], scrim === 'dark' && styles.scrimDark, scrim === 'light' && styles.scrimLight, visibility.base, visibility.bottom, visibility.top)),
     inert: isControlled && !isOpen ? true : undefined,

package/dist/Pagination/Pagination.js

@@ -27,7 +27,7 @@ import { Icon } from "../Icon/index.js";
 import { Selector } from "../Selector/index.js";
 import { Text } from "../Text/index.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Types
@@ -319,7 +319,7 @@ export function Pagination({
               "aria-current": i + 1 === page ? 'page' : undefined,
               onClick: () => handlePageChange(i + 1),
               disabled: isDisabled,
-              ...mergeProps(xdsThemeProps('pagination-dot', {
+              ...mergeProps(themeProps('pagination-dot', {
                 active: i + 1 === page ? 'active' : null,
                 size
               }), {
@@ -360,7 +360,7 @@ export function Pagination({
     ref: ref,
     "aria-label": label,
     "data-testid": testId,
-    ...mergeProps(xdsThemeProps('pagination', {
+    ...mergeProps(themeProps('pagination', {
       variant,
       size
     }), stylex.props(styles.root, xstyle), className, style),

package/dist/Popover/Popover.js

@@ -25,7 +25,7 @@ import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { InteractiveRoleContext } from "../InteractiveRoleContext/InteractiveRoleContext.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Helpers
@@ -296,7 +296,7 @@ export function Popover({
     return /*#__PURE__*/_jsx(_Fragment, {
       children: popover.render(/*#__PURE__*/_jsx("div", {
         "data-testid": testId,
-        ...mergeProps(xdsThemeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
+        ...mergeProps(themeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
         children: content
       }), {
         placement,
@@ -319,7 +319,7 @@ export function Popover({
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [children(triggerProps), popover.render(/*#__PURE__*/_jsx("div", {
         "data-testid": testId,
-        ...mergeProps(xdsThemeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
+        ...mergeProps(themeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
         children: content
       }), {
         placement,
@@ -342,7 +342,7 @@ export function Popover({
       })
     }), popover.render(/*#__PURE__*/_jsx("div", {
       "data-testid": testId,
-      ...mergeProps(xdsThemeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
+      ...mergeProps(themeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
       children: content
     }), {
       placement,

package/dist/PowerSearch/PowerSearch.js

@@ -30,7 +30,7 @@ import { useInternalConfig } from "./useInternalConfig.js";
 import { usePowerSearchSource } from "./usePowerSearchSource.js";
 import { formatFilterValue } from "./formatFilterValue.js";
 import { PowerSearchEditPopover } from "./PowerSearchEditPopover.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // =============================================================================
 // Icon mapping for typeahead entries
@@ -724,7 +724,7 @@ export function PowerSearch({
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
       ref: mergeRefs(ref, popover.triggerRef),
-      ...xdsThemeProps('power-search'),
+      ...themeProps('power-search'),
       children: /*#__PURE__*/_jsx(Tokenizer, {
         handleRef: tokenizerRef,
         label: label,

package/dist/ProgressBar/ProgressBar.js

@@ -20,7 +20,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, fontWeightVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * Extensible variant map for ProgressBar.
@@ -157,7 +157,7 @@ export function ProgressBar({
   const fillVariant = isDisabled ? 'disabled' : variant;
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('progressbar', {
+    ...mergeProps(themeProps('progressbar', {
       variant
     }), stylex.props(styles.container, xstyle), className, style),
     "data-testid": dataTestId,
@@ -207,15 +207,15 @@ export function ProgressBar({
       "aria-valuemax": isIndeterminate ? undefined : max,
       "aria-labelledby": labelId,
       "aria-valuetext": isIndeterminate ? undefined : valueText,
-      ...mergeProps(xdsThemeProps('progressbar-track'), {
+      ...mergeProps(themeProps('progressbar-track'), {
         className: "xh8yej3 xdk7pt xwmxj5m xjspbzw xb3r6kr"
       }),
       children: isIndeterminate ? /*#__PURE__*/_jsx("div", {
-        ...mergeProps(xdsThemeProps('progressbar-fill', {
+        ...mergeProps(themeProps('progressbar-fill', {
           variant: fillVariant
         }), stylex.props(styles.indeterminateFill, variantStyles[fillVariant]))
       }) : /*#__PURE__*/_jsx("div", {
-        ...mergeProps(xdsThemeProps('progressbar-fill', {
+        ...mergeProps(themeProps('progressbar-fill', {
           variant: fillVariant
         }), stylex.props(styles.fill, variantStyles[fillVariant])),
         style: {

package/dist/RadioList/RadioList.js

@@ -21,7 +21,7 @@ import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { Field } from "../Field/Field.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * Size of the radio controls, matching CheckboxInput sizes.
@@ -106,7 +106,7 @@ export function RadioList({
       "aria-describedby": [description ? descriptionID : null, status?.message ? statusMessageID : null].filter(Boolean).join(' ') || undefined,
       "aria-invalid": status?.type === 'error' ? true : undefined,
       "aria-required": isRequired || undefined,
-      ...mergeProps(xdsThemeProps('radio-list', {
+      ...mergeProps(themeProps('radio-list', {
         orientation,
         size
       }), {

package/dist/RadioList/RadioListItem.js

@@ -26,7 +26,7 @@ import { mergeProps } from "../utils/index.js";
 import "./radio.markers.stylex.js";
 import { radioScope } from "./radio.markers.stylex.js";
 import { Item } from "../Item/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {
   container: {
@@ -194,13 +194,13 @@ export function RadioListItem({
       ...stylex.props(styles.input, wrapperSizeStyles[size], isDisabled && styles.inputDisabled)
     }), /*#__PURE__*/_jsx("div", {
       "aria-hidden": "true",
-      ...mergeProps(xdsThemeProps('radio', {
+      ...mergeProps(themeProps('radio', {
         size,
         checked: isChecked ? 'checked' : null,
         disabled: isDisabled ? 'disabled' : null
       }), stylex.props(styles.radio, radioSizeStyles[size], isChecked ? styles.radioChecked : styles.radioUnchecked, isDisabled && styles.radioDisabled, isDisabled && !isChecked && styles.radioDisabledUnchecked)),
       children: isChecked && /*#__PURE__*/_jsx("div", {
-        ...mergeProps(xdsThemeProps('radio-dot', {
+        ...mergeProps(themeProps('radio-dot', {
           size
         }), stylex.props(styles.innerDot, dotSizeStyles[size]))
       })
@@ -212,7 +212,7 @@ export function RadioListItem({
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     "data-testid": dataTestId,
-    ...mergeProps(xdsThemeProps('radio-list-item'), stylex.props(styles.container, !isDisabled && radioScope)),
+    ...mergeProps(themeProps('radio-list-item'), stylex.props(styles.container, !isDisabled && radioScope)),
     children: /*#__PURE__*/_jsx(Item, {
       startContent: mediaContent,
       label: /*#__PURE__*/_jsx("label", {

package/dist/Resizable/ResizeHandle.js

@@ -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.
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -23,7 +23,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const KEYBOARD_STEP = 10;
 const KEYBOARD_LARGE_STEP = 50;
@@ -403,7 +403,7 @@ export function ResizeHandle({
     onFocus: () => setIsFocused(true),
     onBlur: () => setIsFocused(false),
     "data-resizing": isDragging || undefined,
-    ...mergeProps(xdsThemeProps('resize-handle'), stylex.props(styles.handle, isOverlay && styles.overlay, isOverlay && (isHorizontal ? styles.overlayHorizontal : styles.overlayVertical), !isOverlay && (isHorizontal ? styles.horizontal : styles.vertical), !isOverlay && !hasDivider && (isHorizontal ? styles.noDividerHorizontal : styles.noDividerVertical), !isOverlay && hasDivider && isInteracting && !isDragging && styles.handleHover, !isOverlay && hasDivider && isDragging && styles.handleActive, isDisabled && styles.disabled, xstyle), className),
+    ...mergeProps(themeProps('resize-handle'), stylex.props(styles.handle, isOverlay && styles.overlay, isOverlay && (isHorizontal ? styles.overlayHorizontal : styles.overlayVertical), !isOverlay && (isHorizontal ? styles.horizontal : styles.vertical), !isOverlay && !hasDivider && (isHorizontal ? styles.noDividerHorizontal : styles.noDividerVertical), !isOverlay && hasDivider && isInteracting && !isDragging && styles.handleHover, !isOverlay && hasDivider && isDragging && styles.handleActive, isDisabled && styles.disabled, xstyle), className),
     ...props,
     children: [/*#__PURE__*/_jsx("div", {
       ...stylex.props(styles.hitArea, isHorizontal ? styles.hitAreaHorizontal : styles.hitAreaVertical, isHorizontal ? dynamicStyles.hitAreaBiasX(hitAreaBias(effectiveSide)) : dynamicStyles.hitAreaBiasY(hitAreaBias(effectiveSide)), isDisabled && styles.disabled),
@@ -416,7 +416,7 @@ export function ResizeHandle({
       },
       onKeyDown: handleKeyDown
     }), children ?? /*#__PURE__*/_jsx("div", {
-      ...mergeProps(xdsThemeProps('resize-handle-pill'), stylex.props(styles.pill, isHorizontal ? styles.pillHorizontal : styles.pillVertical, effectiveSide !== 'center' && (isHorizontal ? dynamicStyles.pillOffsetX(effectiveSide === 'start' ? -1 : 1) : dynamicStyles.pillOffsetY(effectiveSide === 'start' ? -1 : 1)), isAlwaysVisible ? styles.pillVisible : styles.pillHidden, isInteracting && !isDragging && styles.pillHover, isDragging && styles.pillActive))
+      ...mergeProps(themeProps('resize-handle-pill'), stylex.props(styles.pill, isHorizontal ? styles.pillHorizontal : styles.pillVertical, effectiveSide !== 'center' && (isHorizontal ? dynamicStyles.pillOffsetX(effectiveSide === 'start' ? -1 : 1) : dynamicStyles.pillOffsetY(effectiveSide === 'start' ? -1 : 1)), isAlwaysVisible ? styles.pillVisible : styles.pillHidden, isInteracting && !isDragging && styles.pillHover, isDragging && styles.pillActive))
     })]
   });
 }

package/dist/Section/Section.js

@@ -20,7 +20,7 @@ import { colorVars } from "../theme/tokens.stylex.js";
 import { container } from "../Layout/container.stylex.js";
 import { paddingStyles, paddingBlockStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, sectionPaddingPropagationStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * Extensible variant map for Section.
@@ -166,7 +166,7 @@ export function Section({
     } : style || outerStylex.style,
     ...props,
     children: /*#__PURE__*/_jsx("div", {
-      ...mergeProps(xdsThemeProps('section', {
+      ...mergeProps(themeProps('section', {
         variant
       }), stylex.props(nestedStyles.inner, ...container(useThemeDefault ? {
         useThemeDefault: 'section'

package/dist/SegmentedControl/SegmentedControl.js

@@ -21,7 +21,7 @@ import { colorVars, spacingVars, radiusVars } from "../theme/tokens.stylex.js";
 import { SegmentedControlContext } from "./SegmentedControlContext.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -147,7 +147,7 @@ export function SegmentedControl({
       "aria-label": label,
       "aria-disabled": isDisabled || undefined,
       onKeyDown: handleKeyDown,
-      ...mergeProps(xdsThemeProps('segmented-control', {
+      ...mergeProps(themeProps('segmented-control', {
         size
       }), stylex.props(styles.container, sizeStyles[size], layout === 'fill' && styles.fill, isDisabled && styles.disabled, xstyle), className, style),
       children: children

package/dist/SegmentedControl/SegmentedControlItem.js

@@ -20,7 +20,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, sizeVars, durationVars, easeVars, fontWeightVars, shadowVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { useSegmentedControlContext } from "./SegmentedControlContext.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -160,7 +160,7 @@ export function SegmentedControlItem({
     "data-value": value,
     tabIndex: isSelected ? 0 : -1,
     onClick: handleClick,
-    ...mergeProps(xdsThemeProps('segmented-control-item', {
+    ...mergeProps(themeProps('segmented-control-item', {
       size,
       selected: isSelected ? 'selected' : null,
       disabled: isItemDisabled ? 'disabled' : null

package/dist/SelectableCard/SelectableCard.js

@@ -32,7 +32,7 @@ import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { Card } from "../Card/Card.js";
 import { useClickableContainer } from "../hooks/useClickableContainer.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Styles — selection + interaction; Card handles the rest
@@ -244,7 +244,7 @@ export function SelectableCard({
     maxWidth: maxWidth,
     padding: padding,
     variant: variant,
-    ...mergeProps(xdsThemeProps('selectable-card', {
+    ...mergeProps(themeProps('selectable-card', {
       variant,
       selected: isSelected ? 'true' : 'false'
     }), {

package/dist/Selector/Selector.js

@@ -28,7 +28,7 @@ import { useCombobox, useSelectedItemOffset } from "./hooks.js";
 import { SelectorOption } from "./SelectorOption.js";
 import { mergeProps } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   triggerContainer: {
@@ -461,7 +461,7 @@ export function Selector(props) {
       },
       onClick: onTriggerClick,
       "data-testid": testId,
-      ...mergeProps(xdsThemeProps('selector', {
+      ...mergeProps(themeProps('selector', {
         size,
         status: status?.type ?? null
       }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, !selectedItem && styles.triggerPlaceholder, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], xstyle), className, style),

package/dist/Selector/SelectorOption.js

@@ -12,7 +12,7 @@ import * as stylex from '@stylexjs/stylex';
 import { renderIconSlot } from "../Icon/index.js";
 import { Item } from "../Item/index.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const embeddedStyles = {
   root: {
@@ -63,7 +63,7 @@ export function SelectorOption({
     description: description,
     endContent: endContent,
     xstyle: [embeddedStyles.root, xstyle],
-    ...mergeProps(xdsThemeProps('selector-option'), {
+    ...mergeProps(themeProps('selector-option'), {
       className,
       style
     })

package/dist/SideNav/SideNav.js

@@ -31,7 +31,7 @@ import { useSideNavRenderMode } from "./SideNavRenderContext.js";
 import { MobileNav } from "../MobileNav/MobileNav.js";
 import { useResizable } from "../Resizable/useResizable.js";
 import { ResizeHandle } from "../Resizable/ResizeHandle.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Constants
@@ -195,7 +195,7 @@ export function SideNav({
   if (renderMode === 'topbar') {
     return /*#__PURE__*/_jsxs("div", {
       "data-testid": testId,
-      ...mergeProps(xdsThemeProps('side-nav', {
+      ...mergeProps(themeProps('side-nav', {
         mode: 'topbar'
       }), stylex.props(styles.topbar, xstyle), className, style),
       children: [header, /*#__PURE__*/_jsx("div", {
@@ -265,7 +265,7 @@ export function SideNav({
     role: "navigation",
     "aria-label": "Side navigation",
     "data-testid": testId,
-    ...mergeProps(xdsThemeProps('side-nav'), stylex.props(styles.root, collapsed && styles.rootCollapsed, xstyle), className, resizableNavStyle),
+    ...mergeProps(themeProps('side-nav'), stylex.props(styles.root, collapsed && styles.rootCollapsed, xstyle), className, resizableNavStyle),
     ...props,
     children: [hasStickyTop && /*#__PURE__*/_jsxs("div", {
       ...{

package/dist/SideNav/SideNavHeading.js

@@ -35,7 +35,7 @@ import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useMenuHover } from "../hooks/useMenuHover.js";
 import { NavHeadingCloseContext } from "../NavMenu/NavMenuContext.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Styles
@@ -190,7 +190,7 @@ export function SideNavHeading({
         href: headingHref,
         "aria-label": heading,
         "data-testid": testId,
-        ...mergeProps(xdsThemeProps('side-nav-heading'), stylex.props(navItemStyles.item, styles.rootCollapsed, xstyle), className, style),
+        ...mergeProps(themeProps('side-nav-heading'), stylex.props(navItemStyles.item, styles.rootCollapsed, xstyle), className, style),
         children: collapsedIcon
       });
     } else if (menu) {
@@ -202,7 +202,7 @@ export function SideNavHeading({
           "data-testid": testId,
           ...popover.triggerProps,
           ...triggerProps,
-          ...mergeProps(xdsThemeProps('side-nav-heading'), stylex.props(navItemStyles.item, styles.rootCollapsed, styles.menuTrigger, xstyle), className, style),
+          ...mergeProps(themeProps('side-nav-heading'), stylex.props(navItemStyles.item, styles.rootCollapsed, styles.menuTrigger, xstyle), className, style),
           children: collapsedIcon
         }), popover.render(/*#__PURE__*/_jsxs("div", {
           ref: menuRef,
@@ -272,7 +272,7 @@ export function SideNavHeading({
       collapsedElement = /*#__PURE__*/_jsx("div", {
         ref: collapsedSetRef,
         "data-testid": testId,
-        ...mergeProps(xdsThemeProps('side-nav-heading'), stylex.props(styles.root, styles.rootCollapsed, xstyle), className, style),
+        ...mergeProps(themeProps('side-nav-heading'), stylex.props(styles.root, styles.rootCollapsed, xstyle), className, style),
         ...props,
         children: collapsedIcon
       });
@@ -376,7 +376,7 @@ export function SideNavHeading({
       ref: ref,
       href: headingHref,
       "data-testid": testId,
-      ...mergeProps(xdsThemeProps('side-nav-heading'), stylex.props(styles.root, styles.menuTrigger, xstyle), className, style),
+      ...mergeProps(themeProps('side-nav-heading'), stylex.props(styles.root, styles.menuTrigger, xstyle), className, style),
       ...props,
       children: [icon && /*#__PURE__*/_jsx("span", {
         ...{
@@ -394,7 +394,7 @@ export function SideNavHeading({
         ref: setRef,
         "data-testid": testId,
         ...triggerProps,
-        ...mergeProps(xdsThemeProps('side-nav-heading'), stylex.props(styles.root, styles.menuTrigger, xstyle), className, style),
+        ...mergeProps(themeProps('side-nav-heading'), stylex.props(styles.root, styles.menuTrigger, xstyle), className, style),
         children: [icon && /*#__PURE__*/_jsx("span", {
           ...{
             className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
@@ -438,7 +438,7 @@ export function SideNavHeading({
         ref: setRef,
         "data-testid": testId,
         ...triggerProps,
-        ...mergeProps(xdsThemeProps('side-nav-heading'), stylex.props(styles.root, xstyle), className, style),
+        ...mergeProps(themeProps('side-nav-heading'), stylex.props(styles.root, xstyle), className, style),
         children: [icon && (headingHref ? /*#__PURE__*/_jsx(LinkComponent, {
           href: headingHref,
           ...{
@@ -484,7 +484,7 @@ export function SideNavHeading({
     return /*#__PURE__*/_jsxs("div", {
       ref: ref,
       "data-testid": testId,
-      ...mergeProps(xdsThemeProps('side-nav-heading'), stylex.props(styles.root, xstyle), className, style),
+      ...mergeProps(themeProps('side-nav-heading'), stylex.props(styles.root, xstyle), className, style),
       ...props,
       children: [icon && (headingHref ? /*#__PURE__*/_jsx(LinkComponent, {
         href: headingHref,
@@ -545,7 +545,7 @@ export function SideNavHeading({
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     "data-testid": testId,
-    ...mergeProps(xdsThemeProps('side-nav-heading'), stylex.props(styles.root, xstyle), className, style),
+    ...mergeProps(themeProps('side-nav-heading'), stylex.props(styles.root, xstyle), className, style),
     ...props,
     children: [icon && /*#__PURE__*/_jsx("span", {
       ...{

package/dist/SideNav/SideNavItem.js

@@ -31,7 +31,7 @@ import { useSideNavCollapse, SideNavCollapseContext } from "./SideNavCollapseCon
 import { getIcon } from "../Icon/globalIconRegistry.js";
 import { useSideNavRenderMode } from "./SideNavRenderContext.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Styles
@@ -254,7 +254,7 @@ export function SideNavItem({
     });
 
     // Shared collapsed item styles — used by trigger, link, and button
-    const collapsedItemStyles = mergeProps(xdsThemeProps('side-nav-item', {
+    const collapsedItemStyles = mergeProps(themeProps('side-nav-item', {
       size,
       selected: isSelected ? 'selected' : null
     }), stylex.props(navItemStyles.item, navItemStyles[size], styles.itemCollapsed, size === 'sm' && styles.itemCollapsedSm, size === 'lg' && styles.itemCollapsedLg, isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled));
@@ -354,7 +354,7 @@ export function SideNavItem({
       children: getIcon('chevronDown')
     })]
   });
-  const navItemStyleProps = mergeProps(xdsThemeProps('side-nav-item', {
+  const navItemStyleProps = mergeProps(themeProps('side-nav-item', {
     size,
     selected: isSelected ? 'selected' : null
   }), stylex.props(navItemStyles.item, navItemStyles[size], isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled));