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

package/src/Calendar/Calendar.tsx

@@ -72,7 +72,7 @@ import {
 
 export type {ISODateString, DayOfWeek, DateRange} from '../utils/dateTypes';
 import type {ISODateString, DayOfWeek, DateRange} from '../utils/dateTypes';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 /** Imperative handle for Calendar handleRef */
 
@@ -398,7 +398,7 @@ export function Calendar({ref, ...props}: CalendarProps) {
     <div
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('calendar', {mode}),
+        themeProps('calendar', {mode}),
         stylex.props(calendarStyles.calendar, xstyle),
         className,
         style,
@@ -874,7 +874,7 @@ function DayCell({
         onMouseEnter={() => !state.effectivelyDisabled && onDayHover(date)}
         onMouseLeave={() => onDayHover(null)}
         {...mergeProps(
-          xdsThemeProps('calendar-day', {
+          themeProps('calendar-day', {
             selected: endpoint ? 'selected' : null,
             today: state.isToday ? 'today' : null,
             disabled: state.effectivelyDisabled ? 'disabled' : null,

package/src/Card/Card.tsx

@@ -30,7 +30,7 @@ import {
 import type {SizeValue, SpacingStep} from '../utils/types';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Variant type
@@ -262,7 +262,7 @@ export function Card({
     <div
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('card', {variant}),
+        themeProps('card', {variant}),
         stylex.props(
           styles.card,
           variantStyles[variant],

package/src/Carousel/Carousel.tsx

@@ -33,7 +33,7 @@ import {useScrollOverflow} from '../hooks/useScrollOverflow';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps, mergeRefs} from '../utils';
 import type {SpacingStep} from '../utils/types';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export interface CarouselProps extends BaseProps<HTMLDivElement> {
   ref?: React.Ref<HTMLDivElement>;
@@ -325,7 +325,7 @@ export function Carousel({
       aria-label={ariaLabel}
       aria-roledescription="carousel"
       {...mergeProps(
-        xdsThemeProps('carousel'),
+        themeProps('carousel'),
         stylex.props(styles.root, xstyle),
         className,
         style,

package/src/Center/Center.tsx

@@ -20,7 +20,7 @@ import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import type {SizeValue} from '../utils/types';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   base: {
@@ -110,7 +110,7 @@ export function Center({
   ...props
 }: CenterProps) {
   const stylexProps = mergeProps(
-    xdsThemeProps('center', {axis}),
+    themeProps('center', {axis}),
     stylex.props(
       isInline ? styles.inline : styles.base,
       (axis === 'both' || axis === 'vertical') && styles.alignItemsCenter,

package/src/Chat/ChatComposer.tsx

@@ -48,7 +48,7 @@ import {Icon} from '../Icon';
 import {ChatComposerInput} from './ChatComposerInput';
 import {ChatComposerContext} from './ChatContext';
 import {ChatSendButton} from './ChatSendButton';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Types
@@ -384,7 +384,7 @@ export function ChatComposer(props: ChatComposerProps) {
       <div
         ref={ref}
         {...mergeProps(
-          xdsThemeProps('chat-composer', {density}),
+          themeProps('chat-composer', {density}),
           stylex.props(styles.root, isDisabled && styles.rootDisabled),
           className,
           style,

package/src/Chat/ChatComposerDrawer.tsx

@@ -29,7 +29,7 @@ import {
 import {Badge} from '../Badge';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export interface ChatComposerDrawerProps extends BaseProps<HTMLDivElement> {
   ref?: React.Ref<HTMLDivElement>;
@@ -250,7 +250,7 @@ export function ChatComposerDrawer({
       ref={ref}
       data-testid={testId}
       {...mergeProps(
-        xdsThemeProps('chat-composer-drawer', {
+        themeProps('chat-composer-drawer', {
           collapsed: isCollapsed ? 'collapsed' : null,
         }),
         stylex.props(styles.root, xstyle),

package/src/Chat/ChatComposerInput.tsx

@@ -55,7 +55,7 @@ import {
 } from './useChatPasteAsToken';
 import {Badge, type BadgeProps} from '../Badge';
 import {useChatComposerContext} from './ChatContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Types
@@ -619,7 +619,7 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
     <div
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('chat-composer-input'),
+        themeProps('chat-composer-input'),
         stylex.props(styles.root, isDisabled && styles.disabled, xstyle),
         className,
         style,

package/src/Chat/ChatLayout.tsx

@@ -31,7 +31,7 @@ import {useChatStreamScroll} from './useChatStreamScroll';
 import {useChatNewMessages} from './useChatNewMessages';
 import {ChatLayoutScrollButton} from './ChatLayoutScrollButton';
 import {ChatLayoutContext} from './ChatContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Types
@@ -330,7 +330,7 @@ export function ChatLayout({
         ref={mergeRefs(ref, rootRef)}
         data-testid={testId}
         {...mergeProps(
-          xdsThemeProps('chat-layout', {density}),
+          themeProps('chat-layout', {density}),
           stylex.props(
             styles.root,
             isSelfScrolling && styles.rootScrollable,

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -90,6 +90,12 @@ const styles = stylex.create({
     whiteSpace: 'nowrap',
     paddingInline: spacingVars['--spacing-2'],
   },
+  // When a label is shown, the icon sits on the leading edge and the text on
+  // the trailing edge. Symmetric padding leaves the text cramped against the
+  // pill's rounded edge, so give the trailing side extra breathing room.
+  buttonWithLabel: {
+    paddingInlineEnd: spacingVars['--spacing-3'],
+  },
 });
 
 // =============================================================================
@@ -130,7 +136,7 @@ export function ChatLayoutScrollButton({
           variant="ghost"
           size="md"
           onClick={onClick}
-          xstyle={styles.button}>
+          xstyle={[styles.button, label ? styles.buttonWithLabel : null]}>
           {label ?? undefined}
         </Button>
       </div>

package/src/Chat/ChatMessage.tsx

@@ -35,7 +35,7 @@ import {
 } from './ChatContext';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export interface ChatMessageProps extends BaseProps<HTMLElement> {
   ref?: React.Ref<HTMLElement>;
@@ -221,7 +221,7 @@ export function ChatMessage({
         aria-label={!hasName ? `Message from ${sender}` : undefined}
         aria-labelledby={hasName ? nameId : undefined}
         {...mergeProps(
-          xdsThemeProps('chat-message', {sender, density}),
+          themeProps('chat-message', {sender, density}),
           stylex.props(
             styles.root,
             rootAlignment,

package/src/Chat/ChatMessageBubble.tsx

@@ -37,7 +37,7 @@ import {
 import {useChatMessageContext} from './ChatContext';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export type ChatMessageBubbleVariant = 'filled' | 'ghost';
 
@@ -277,7 +277,7 @@ export function ChatMessageBubble({
         ref={ref}
         data-testid={testId}
         {...mergeProps(
-          xdsThemeProps('chat-message-bubble', {sender, variant, density}),
+          themeProps('chat-message-bubble', {sender, variant, density}),
           stylex.props(
             styles.content,
             density === 'compact' && styles.radiusCompact,

package/src/Chat/ChatMessageList.tsx

@@ -34,7 +34,7 @@ import {mergeProps} from '../utils';
 import {Spinner} from '../Spinner';
 import type {BaseProps} from '../BaseProps';
 import type {SpacingStep} from '../utils/types';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export interface ChatMessageListProps extends BaseProps<HTMLDivElement> {
   /** Ref forwarded to the root element */
@@ -255,7 +255,7 @@ export function ChatMessageList({
         tabIndex={0}
         data-testid={testId}
         {...mergeProps(
-          xdsThemeProps('chat-message-list', {density}),
+          themeProps('chat-message-list', {density}),
           stylex.props(styles.root, xstyle),
           className,
           style,

package/src/Chat/ChatMessageMetadata.tsx

@@ -25,7 +25,7 @@ import {Icon} from '../Icon';
 import type {IconName} from '../Icon/globalIconRegistry';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export type ChatMessageStatus =
   | 'sending'
@@ -134,7 +134,7 @@ export function ChatMessageMetadata({
     <div
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('chat-message-metadata'),
+        themeProps('chat-message-metadata'),
         stylex.props(
           styles.meta,
           sender === 'user' ? styles.metaUser : styles.metaAssistant,

package/src/Chat/ChatSendButton.tsx

@@ -24,7 +24,7 @@ import {getIcon} from '../Icon/globalIconRegistry';
 import {useChatComposerContext} from './ChatContext';
 
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Types
@@ -105,7 +105,7 @@ export function ChatSendButton(props: ChatSendButtonProps): ReactNode {
       isIconOnly
       isDisabled={!isStopShown && isDisabled}
       onClick={isStopShown ? onStop : handleSend}
-      {...xdsThemeProps('chat-send-button')}
+      {...themeProps('chat-send-button')}
       xstyle={[styles.root, xstyle]}
     />
   );

package/src/Chat/ChatSystemMessage.tsx

@@ -31,7 +31,7 @@ import {
 import {mergeProps} from '../utils';
 import {Divider} from '../Divider';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export type ChatSystemMessageVariant = 'default' | 'divider';
 
@@ -130,7 +130,7 @@ export function ChatSystemMessage({
         role="status"
         data-testid={testId}
         {...mergeProps(
-          xdsThemeProps('chat-system-message', {variant}),
+          themeProps('chat-system-message', {variant}),
           stylex.props(styles.dividerWrap, xstyle),
           className,
           styleProp,
@@ -146,7 +146,7 @@ export function ChatSystemMessage({
       role="status"
       data-testid={testId}
       {...mergeProps(
-        xdsThemeProps('chat-system-message', {variant}),
+        themeProps('chat-system-message', {variant}),
         stylex.props(styles.root, xstyle),
         className,
         styleProp,

package/src/Chat/ChatTokenizedText.tsx

@@ -23,7 +23,7 @@ import {Badge} from '../Badge';
 import type {ChatComposerToken} from './ChatComposerInput';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Styles
@@ -97,7 +97,7 @@ export function ChatTokenizedText({
       <span
         ref={ref}
         {...mergeProps(
-          xdsThemeProps('chat-tokenized-text'),
+          themeProps('chat-tokenized-text'),
           stylex.props(styles.root),
         )}>
         {children ?? ''}
@@ -110,7 +110,7 @@ export function ChatTokenizedText({
     <span
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('chat-tokenized-text'),
+        themeProps('chat-tokenized-text'),
         stylex.props(styles.root),
       )}>
       {parts}

package/src/Chat/ChatToolCalls.tsx

@@ -35,7 +35,7 @@ import {getKey, mergeProps} from '../utils';
 import {Badge} from '../Badge';
 import {Icon, type IconName} from '../Icon';
 import {Spinner} from '../Spinner';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Types
@@ -518,7 +518,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
       <div
         ref={ref}
         {...mergeProps(
-          xdsThemeProps('chat-tool-calls'),
+          themeProps('chat-tool-calls'),
           stylex.props(styles.root, xstyle),
           className,
           style,
@@ -537,7 +537,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
     <div
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('chat-tool-calls'),
+        themeProps('chat-tool-calls'),
         stylex.props(styles.root, xstyle),
         className,
         style,

package/src/Chat/useTriggerMenu.tsx

@@ -39,7 +39,7 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps, groupItems} from '../utils';
 import type {SearchableItem} from '../Typeahead/types';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 import type {
   ChatComposerTrigger,
   ChatComposerToken,
@@ -684,7 +684,7 @@ export function useTriggerMenu(
         role="listbox"
         aria-label={trigger?.menuLabel ?? 'Suggestions'}
         {...mergeProps(
-          xdsThemeProps('trigger-menu'),
+          themeProps('trigger-menu'),
           stylex.props(styles.dropdown),
         )}>
         {listContent}

package/src/CheckboxInput/CheckboxInput.tsx

@@ -46,7 +46,7 @@ import type {InputStatus} from '../Field/types';
 import {Spinner} from '../Spinner';
 import {mergeProps, mergeRefs} from '../utils';
 import {checkboxScope} from './checkbox.markers.stylex';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   container: {
@@ -401,7 +401,7 @@ export function CheckboxInput({
   return (
     <div
       {...mergeProps(
-        xdsThemeProps('checkbox-input', {size}),
+        themeProps('checkbox-input', {size}),
         stylex.props(width != null && dynamicWidthStyles.width(width), xstyle),
         className,
         style,
@@ -450,7 +450,7 @@ export function CheckboxInput({
           <div
             aria-hidden="true"
             {...mergeProps(
-              xdsThemeProps('checkbox', {
+              themeProps('checkbox', {
                 size,
                 checked: isChecked
                   ? 'checked'

package/src/CheckboxList/CheckboxList.tsx

@@ -31,7 +31,7 @@ import type {InputStatus} from '../Field/types';
 import {List} from '../List/List';
 import type {ListDensity} from '../List/ListContext';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 import {
   CheckboxListContext,
   type CheckboxListContextValue,
@@ -224,7 +224,7 @@ export function CheckboxList({
       statusVariant="detached"
       width={width}
       xstyle={xstyle}
-      {...mergeProps(xdsThemeProps('checkbox-list'), {className, style})}>
+      {...mergeProps(themeProps('checkbox-list'), {className, style})}>
       <CheckboxListContext value={contextValue}>
         <List density={density} hasDividers={hasDividers}>
           {children}

package/src/Citation/Citation.tsx

@@ -27,7 +27,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';
 
 export interface CitationSource {
   title?: string;
@@ -173,7 +173,7 @@ export function Citation({
         data-testid={testId}
         {...linkProps}
         {...mergeProps(
-          xdsThemeProps('citation', {variant}),
+          themeProps('citation', {variant}),
           stylex.props(
             styles.number,
             href != null && styles.numberHover,
@@ -196,7 +196,7 @@ export function Citation({
       data-testid={testId}
       {...linkProps}
       {...mergeProps(
-        xdsThemeProps('citation', {variant}),
+        themeProps('citation', {variant}),
         stylex.props(
           styles.label,
           icon != null && styles.labelWithIcon,

package/src/ClickableCard/ClickableCard.tsx

@@ -39,7 +39,7 @@ import type {CardVariant} from '../Card/Card';
 import {useClickableContainer} from '../hooks/useClickableContainer';
 import type {BaseProps} from '../BaseProps';
 import {useLinkComponent} from '../Link/useLinkComponent';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Styles — only the interactive layer, Card handles everything else
@@ -256,7 +256,7 @@ export function ClickableCard({
       maxWidth={maxWidth}
       padding={padding}
       variant={variant}
-      {...mergeProps(xdsThemeProps('clickable-card', {variant}), {
+      {...mergeProps(themeProps('clickable-card', {variant}), {
         className: classNameProp,
         style,
       })}

package/src/Code/Code.tsx

@@ -25,7 +25,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({
   base: {
@@ -74,7 +74,7 @@ export function Code({
     <code
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('code'),
+        themeProps('code'),
         stylex.props(styles.base, xstyle),
         className,
         style,

package/src/CodeBlock/CodeBlock.tsx

@@ -42,7 +42,7 @@ import {
 import type {SyntaxToken, TokenLine} from './tokenizer';
 import {ensureHighlightStyles} from './highlightStyles';
 import {applyHighlightRangesChunked} from './highlightRanges';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // ---------------------------------------------------------------------------
 // Styles
@@ -776,7 +776,7 @@ export function CodeBlock({
     <pre
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('codeblock', {size, language, container}),
+        themeProps('codeblock', {size, language, container}),
         stylex.props(
           styles.root,
           dynamicStyles.width(widthProp),

package/src/Collapsible/Collapsible.tsx

@@ -36,7 +36,7 @@ import {useCollapsible} from './useCollapsible';
 import {getIcon} from '../Icon/globalIconRegistry';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   root: {
@@ -198,7 +198,7 @@ export function Collapsible({
     <div
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('collapsible'),
+        themeProps('collapsible'),
         stylex.props(styles.root, xstyle),
         className,
         style,

package/src/Collapsible/useCollapsible.doc.mjs

@@ -38,7 +38,7 @@ export const docs = {
   usage: {
     description: 'Reusable hook that encapsulates the collapsible state machine. Supports three modes: group-controlled (inside CollapsibleGroup), controlled (isOpen + onOpenChange), and uncontrolled (self-managed with defaultIsOpen). Used internally by Card and Section.',
     bestPractices: [
-      {guidance: true, description: 'Use the hook directly when building custom collapsible components that need XDS collapsible behavior without Collapsible wrapper.'},
+      {guidance: true, description: 'Use the hook directly when building custom collapsible components that need Astryx collapsible behavior without Collapsible wrapper.'},
       {guidance: true, description: 'For accordion behavior, wrap items in CollapsibleGroup and pass unique value props.'},
       {guidance: false, description: 'Implement your own open/close state when useCollapsible already provides it; the hook handles group coordination automatically.'},
     ],
@@ -64,7 +64,7 @@ export const docsDense = {
   usage: {
     description: 'Encapsulates collapsible state machine. 3 modes: group-controlled (inside CollapsibleGroup), controlled (isOpen + onOpenChange), uncontrolled (self-managed w/ defaultIsOpen). Used internally by Card + Section.',
     bestPractices: [
-      {guidance: true, description: 'Use directly when building custom collapsible components needing XDS collapsible behavior w/o Collapsible wrapper.'},
+      {guidance: true, description: 'Use directly when building custom collapsible components needing Astryx collapsible behavior w/o Collapsible wrapper.'},
       {guidance: true, description: 'For accordion behavior, wrap items in CollapsibleGroup + pass unique value props.'},
       {guidance: false, description: 'Implement your own open/close state when useCollapsible already provides it; hook handles group coordination automatically.'},
     ],

package/src/CommandPalette/CommandPaletteFooter.tsx

@@ -23,7 +23,7 @@ import {
   typographyVars,
 } from '../theme/tokens.stylex';
 import {Kbd} from '../Kbd';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   footer: {
@@ -89,7 +89,7 @@ export function CommandPaletteFooter({
     <div
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('command-palette-footer'),
+        themeProps('command-palette-footer'),
         stylex.props(styles.footer, xstyle),
         className,
         style,

package/src/CommandPalette/CommandPaletteGroup.tsx

@@ -16,7 +16,7 @@ import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 import {
   colorVars,
   spacingVars,
@@ -84,7 +84,7 @@ export function CommandPaletteGroup({
       role="group"
       aria-label={heading}
       {...mergeProps(
-        xdsThemeProps('command-palette-group'),
+        themeProps('command-palette-group'),
         stylex.props(styles.group, xstyle),
         className,
         style,

package/src/CommandPalette/CommandPaletteInput.tsx

@@ -26,7 +26,7 @@ import {
 import {useCommandPaletteContext} from './CommandPaletteContext';
 import {useDialogContext} from '../Dialog/DialogContext';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   wrapper: {
@@ -193,7 +193,7 @@ export function CommandPaletteInput({
   return (
     <div
       {...mergeProps(
-        xdsThemeProps('command-palette-input'),
+        themeProps('command-palette-input'),
         stylex.props(styles.wrapper, xstyle),
       )}>
       <span {...stylex.props(styles.icon)}>

package/src/CommandPalette/CommandPaletteItem.tsx

@@ -24,7 +24,7 @@ import {
 } from '../theme/tokens.stylex';
 import {useCommandPaletteContext} from './CommandPaletteContext';
 import {useDialogContext} from '../Dialog/DialogContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const HOVER_HOVER = '@media (hover: hover)';
 
@@ -194,7 +194,7 @@ export function CommandPaletteItem({
       onClick={handleClick}
       onMouseEnter={handleMouseEnter}
       {...mergeProps(
-        xdsThemeProps('command-palette-item'),
+        themeProps('command-palette-item'),
         stylex.props(
           styles.item,
           !isDisabled && styles.itemHover,

package/src/CommandPalette/CommandPaletteList.tsx

@@ -19,7 +19,7 @@ import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
 import {spacingVars} from '../theme/tokens.stylex';
 import {useCommandPaletteContext} from './CommandPaletteContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   list: {
@@ -88,7 +88,7 @@ export function CommandPaletteList({
       role="listbox"
       aria-label={label}
       {...mergeProps(
-        xdsThemeProps('command-palette-list'),
+        themeProps('command-palette-list'),
         stylex.props(styles.list, xstyle),
         className,
         style,