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

package/dist/DropdownMenu/DropdownMenu.js

@@ -26,14 +26,14 @@ import * as stylex from '@stylexjs/stylex';
 import { usePopover } from "../Popover/usePopover.js";
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
-import { renderXDSDropdownItems } from "./renderXDSDropdownItems.js";
+import { renderDropdownItems } from "./renderDropdownItems.js";
 import { DropdownMenuContext } from "./DropdownMenuContext.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars, radiusVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   dropdown: {
@@ -265,7 +265,7 @@ export function DropdownMenu({
   }), [closeMenu, menuSize]);
 
   // Resolve menu content: data-driven items become components
-  const menuContent = props.items !== undefined ? renderXDSDropdownItems(items) : children;
+  const menuContent = props.items !== undefined ? renderDropdownItems(items) : children;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       ...button,
@@ -294,7 +294,7 @@ export function DropdownMenu({
       id: menuId,
       role: "menu",
       onKeyDown: listKeyDown,
-      ...mergeProps(xdsThemeProps('dropdown-menu'), stylex.props(styles.dropdown, xstyle), className, style),
+      ...mergeProps(themeProps('dropdown-menu'), stylex.props(styles.dropdown, xstyle), className, style),
       children: /*#__PURE__*/_jsx(DropdownMenuContext, {
         value: contextValue,
         children: menuContent

package/dist/DropdownMenu/DropdownMenuItem.js

@@ -30,7 +30,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const menuItemStyles = {
   root: {
@@ -115,7 +115,7 @@ export function DropdownMenuItem({
     onClick: handleClick,
     isDisabled: isDisabled,
     xstyle: [menuItemStyles.root, itemSizeStyles[menuSize], isDisabled && menuItemStyles.disabled, xstyle],
-    ...mergeProps(xdsThemeProps('dropdown-menu-item', {
+    ...mergeProps(themeProps('dropdown-menu-item', {
       size: menuSize
     }), {
       className,

package/dist/DropdownMenu/{renderXDSDropdownItems.d.ts → renderDropdownItems.d.ts}

@@ -1,5 +1,5 @@
 /**
- * @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
  */
@@ -9,5 +9,5 @@ import type { DropdownMenuOption } from './DropdownMenu';
  * Converts data-driven items into DropdownMenuItem components,
  * so both modes share the same rendering and keyboard navigation path.
  */
-export declare function renderXDSDropdownItems(items: DropdownMenuOption[]): ReactNode;
-//# sourceMappingURL=renderXDSDropdownItems.d.ts.map
+export declare function renderDropdownItems(items: DropdownMenuOption[]): ReactNode;
+//# sourceMappingURL=renderDropdownItems.d.ts.map

package/dist/DropdownMenu/renderDropdownItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderDropdownItems.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/renderDropdownItems.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAUrC,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AAyBxB;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,kBAAkB,EAAE,GAC1B,SAAS,CA8CX"}

package/dist/DropdownMenu/{renderXDSDropdownItems.js → renderDropdownItems.js}

@@ -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
  */
@@ -29,7 +29,7 @@ function getSectionKey(section, index) {
  * Converts data-driven items into DropdownMenuItem components,
  * so both modes share the same rendering and keyboard navigation path.
  */
-export function renderXDSDropdownItems(items) {
+export function renderDropdownItems(items) {
   const elements = [];
   for (let i = 0; i < items.length; i++) {
     const option = items[i];

package/dist/EmptyState/EmptyState.js

@@ -19,7 +19,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.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";
 const styles = {
   container: {
@@ -78,7 +78,7 @@ export function EmptyState({
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     role: "status",
-    ...mergeProps(xdsThemeProps('empty-state', {
+    ...mergeProps(themeProps('empty-state', {
       variant: isCompact ? 'compact' : null
     }), stylex.props(styles.container, isCompact && styles.containerCompact, xstyle), className, style),
     ...props,

package/dist/Field/Field.js

@@ -24,7 +24,7 @@ import { spacingVars, borderVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
 import { Text } from "../Text/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: {
@@ -121,7 +121,7 @@ export function Field({
   if (isHorizontalLabels) {
     return /*#__PURE__*/_jsxs("div", {
       ref: ref,
-      ...mergeProps(xdsThemeProps('field', {
+      ...mergeProps(themeProps('field', {
         layout: 'horizontal-labels'
       }), stylex.props(styles.horizontalLabels, xstyle), className, style),
       ...props,
@@ -147,7 +147,7 @@ export function Field({
   // ─── Default mode (vertical / horizontal) ─────────────────────────────
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('field'), stylex.props(styles.container, !isLabelHidden && styles.containerGap, width != null && dynamicStyles.width(width), xstyle), className, style),
+    ...mergeProps(themeProps('field'), stylex.props(styles.container, !isLabelHidden && styles.containerGap, width != null && dynamicStyles.width(width), xstyle), className, style),
     ...props,
     children: [labelNode, statusVariant === 'attached' ? /*#__PURE__*/_jsxs("div", {
       ...{

package/dist/Field/FieldLabel.js

@@ -18,7 +18,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, fontWeightVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Icon, renderIconSlot } from "../Icon/index.js";
 import { Tooltip } from "../Tooltip/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";
 /**
  * Label + description group for form fields. Handles sr-only hiding,
@@ -51,7 +51,7 @@ export function FieldLabel({
     children: [/*#__PURE__*/_jsxs("label", {
       ref: ref,
       htmlFor: inputID,
-      ...mergeProps(xdsThemeProps('field-label'), {
+      ...mergeProps(themeProps('field-label'), {
         0: {
           className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib x1e4wzip xv1l7n4 x1ypdohk"
         },

package/dist/FieldStatus/FieldStatus.js

@@ -22,7 +22,7 @@ import { mergeProps } from "../utils/index.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { useEntryAnimation } from "../hooks/useEntryAnimation.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   base: {
@@ -118,7 +118,7 @@ export function FieldStatus({
     role: type === 'error' ? 'alert' : 'status',
     "aria-live": type === 'error' ? 'assertive' : 'polite',
     ...rest,
-    ...mergeProps(xdsThemeProps('field-status', {
+    ...mergeProps(themeProps('field-status', {
       type,
       variant
     }), stylex.props(styles.base, entryStyle, variant === 'attached' ? styles.attached : styles.detached, colorStyles[type], xstyle), className, style),

package/dist/FileInput/FileInput.js

@@ -23,7 +23,7 @@ import { Field, InputClearButton } from "../Field/index.js";
 import { Icon } from "../Icon/index.js";
 import { Spinner } from "../Spinner/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function formatFileSize(bytes) {
   if (bytes < 1024) {
@@ -399,7 +399,7 @@ export function FileInput({
       "aria-label": label,
       "aria-busy": isLoading || undefined,
       ...dragDropProps,
-      ...mergeProps(xdsThemeProps('file-input', {
+      ...mergeProps(themeProps('file-input', {
         mode,
         status: status?.type ?? null
       }), stylex.props(isDropzone ? styles.dropzone : styles.compact, isDropzone && !isDisabled && styles.dropzoneHover, isDropzone && isDragOver && styles.dropzoneActive, isDropzone && isDisabled && styles.dropzoneDisabled, !isDropzone && isDisabled && styles.compactDisabled, status && statusBorderStyles[status.type], xstyle), className, style),

package/dist/FormLayout/FormLayout.js

@@ -20,7 +20,7 @@ import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { FormLayoutContext } from "./FormLayoutContext.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Responsive breakpoint for horizontal-labels collapse
@@ -99,7 +99,7 @@ export function FormLayout({
     value: contextValue,
     children: /*#__PURE__*/_jsx("div", {
       ref: ref,
-      ...mergeProps(xdsThemeProps('form-layout', {
+      ...mergeProps(themeProps('form-layout', {
         direction
       }), stylex.props(styles.base, direction === 'horizontal' && styles.horizontal, direction === 'horizontal-labels' && styles.horizontalLabels, xstyle), className, style),
       ...props,

package/dist/Grid/Grid.js

@@ -18,7 +18,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * Grid alignment options for align-items and justify-items.
@@ -325,11 +325,11 @@ 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 : typeof columns === 'object' ? undefined : undefined;
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('grid', {
+    ...mergeProps(themeProps('grid', {
       columns: columnsVariant,
       gap,
       align,

package/dist/Grid/GridSpan.js

@@ -15,7 +15,7 @@
 
 import * as stylex from '@stylexjs/stylex';
 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 baseStyles = {
   span: {
@@ -61,7 +61,7 @@ export function GridSpan({
   };
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('grid-span'), stylex.props(baseStyles.span, xstyle), className, {
+    ...mergeProps(themeProps('grid-span'), stylex.props(baseStyles.span, xstyle), className, {
       ...style,
       ...inlineStyle
     }),

package/dist/Heading/Heading.js

@@ -21,7 +21,7 @@ import * as stylex from '@stylexjs/stylex';
 import { colorStyles, sizeByLevelStyles, sizeByTypeStyles, defaultWeightByTypeStyles, displayStyles, justifyStyles, truncationStyles, wordBreakStyles, textWrapStyles, capsizeStyles, decorationStyles, truncationTooltipStyles } from "../Text/text.stylex.js";
 import { useTruncation } from "../Text/useTruncation.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import('../Tooltip/Tooltip').then(mod => ({
   default: mod.Tooltip
@@ -113,7 +113,7 @@ export function Heading({
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Component, {
       ref: mergeRefs(ref, truncation.ref, headingRef),
-      ...mergeProps(xdsThemeProps('heading', {
+      ...mergeProps(themeProps('heading', {
         level,
         color,
         ...(type && {

package/dist/HoverCard/useHoverCard.js

@@ -18,7 +18,7 @@ import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, shadowVars, radiusVars, spacingVars } from "../theme/tokens.stylex.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 styles = {
   container: {
@@ -264,7 +264,7 @@ export function useHoverCard(options = {}) {
       xstyle: [popoverXstyle, layerAnimations[renderPlacement]]
     };
     return layer.render(/*#__PURE__*/_jsx("div", {
-      ...mergeProps(xdsThemeProps('hovercard'), {
+      ...mergeProps(themeProps('hovercard'), {
         className: "x1vlblms xvmdzux x126nfab x1t818jl"
       }),
       onMouseEnter: () => {

package/dist/Icon/Icon.js

@@ -27,7 +27,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars } from "../theme/tokens.stylex.js";
 import { getIcon } from "./globalIconRegistry.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Styles
@@ -231,7 +231,7 @@ export function Icon({
   return /*#__PURE__*/_jsx(IconComponent, {
     ref: ref,
     "aria-hidden": "true",
-    ...mergeProps(xdsThemeProps('icon', {
+    ...mergeProps(themeProps('icon', {
       size,
       color
     }), stylex.props(styles.root, colorStyles[color], sizeStyles[size])),
@@ -263,7 +263,7 @@ function IconFromRegistry({
   }
   return /*#__PURE__*/_jsx("span", {
     ...spanProps,
-    ...mergeProps(xdsThemeProps('icon', {
+    ...mergeProps(themeProps('icon', {
       size,
       color
     }), stylex.props(styles.span, colorStyles[color], spanSizeStyles[size])),

package/dist/InputGroup/InputGroup.js

@@ -27,7 +27,7 @@ import { Field } from "../Field/index.js";
 import { SizeProvider, useSize } from "../SizeContext/SizeContext.js";
 import { mergeProps } from "../utils/index.js";
 import { InputGroupContext } from "./InputGroupContext.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   group: {
@@ -117,7 +117,7 @@ export function InputGroup({
           "aria-label": label,
           "data-testid": testId,
           ...rest,
-          ...mergeProps(xdsThemeProps('input-group', {
+          ...mergeProps(themeProps('input-group', {
             size,
             status: status?.type ?? null
           }), stylex.props(styles.group, sizeStyles[size], isDisabled && styles.disabled, xstyle), className, style),

package/dist/InputGroup/InputGroupText.js

@@ -18,7 +18,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.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 styles = {
   text: {
@@ -65,7 +65,7 @@ export function InputGroupText({
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     ...rest,
-    ...mergeProps(xdsThemeProps('input-group-text'), stylex.props(styles.text, xstyle), className, style),
+    ...mergeProps(themeProps('input-group-text'), stylex.props(styles.text, xstyle), className, style),
     children: children
   });
 }

package/dist/Item/Item.js

@@ -21,7 +21,7 @@ import { colorVars, radiusVars, spacingVars, durationVars, easeVars, typeScaleVa
 import { mergeProps } from "../utils/index.js";
 import { computeTargetAndRel } from "../Link/computeTargetAndRel.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Types
@@ -283,7 +283,7 @@ export function Item({
     "aria-selected": isSelected || undefined,
     "aria-disabled": isDisabled || undefined,
     ...restProps,
-    ...mergeProps(xdsThemeProps('item', {
+    ...mergeProps(themeProps('item', {
       density,
       align
     }), stylex.props(styles.root, densityStyles[density], align === 'start' && styles.alignStart, isInteractive && styles.interactive, isInteractive && styles.focusVisibleOutline, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, xstyle), className, style),

package/dist/Kbd/Kbd.js

@@ -15,7 +15,7 @@
 import React, { useSyncExternalStore } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typographyVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -118,7 +118,7 @@ export function Kbd({
   return /*#__PURE__*/_jsx("span", {
     ref: ref,
     ...rest,
-    ...mergeProps(xdsThemeProps('kbd'), stylex.props(styles.wrapper, xstyle), className, style),
+    ...mergeProps(themeProps('kbd'), stylex.props(styles.wrapper, xstyle), className, style),
     "aria-hidden": "true",
     children: parts.map(key => /*#__PURE__*/_jsx("kbd", {
       ...{

package/dist/Layer/useLayer.d.ts

@@ -30,7 +30,7 @@ export interface ContextRenderProps {
     xstyle?: StyleXStyles;
     /**
      * Additional CSS class name(s) for the popover container.
-     * Use with xdsThemeProps() for theme targeting when reflecting visual props.
+     * Use with themeProps() for theme targeting when reflecting visual props.
      */
     className?: string;
     /**
@@ -51,7 +51,7 @@ export interface FixedRenderProps {
     xstyle?: StyleXStyles;
     /**
      * Additional CSS class name(s) for the popover container.
-     * Use with xdsThemeProps() for theme targeting when reflecting visual props.
+     * Use with themeProps() for theme targeting when reflecting visual props.
      */
     className?: string;
     /**

package/dist/Layout/Layout.js

@@ -24,7 +24,7 @@ import { LayoutDividerContext } from "./LayoutDividerContext.js";
 import { stack } from "../Stack/stack.stylex.js";
 import { stackItem } from "../Stack/stackItem.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { layoutPaddingOuterXVarStyles, layoutPaddingOuterYVarStyles } from "./padding.stylex.js";
 
 /**
@@ -189,7 +189,7 @@ export function Layout({
     value: slotsValue,
     children: /*#__PURE__*/_jsx("div", {
       ref: ref,
-      ...mergeProps(xdsThemeProps('layout', {
+      ...mergeProps(themeProps('layout', {
         height
       }), stylex.props(styles.layoutOuter, isFill ? styles.fill : styles.auto, xstyle), className, style),
       children: /*#__PURE__*/_jsxs("div", {

package/dist/Layout/LayoutContent.js

@@ -20,7 +20,7 @@ import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -134,7 +134,7 @@ export function LayoutContent({
     ref: ref,
     role: role,
     "aria-label": label,
-    ...mergeProps(xdsThemeProps('layout-content'), stylex.props(styles.content,
+    ...mergeProps(themeProps('layout-content'), stylex.props(styles.content,
     // Outer padding on container edges (unless content is full bleed)
     !hasStart && !isZeroPadding && padding == null && styles.noStart, !hasEnd && !isZeroPadding && padding == null && styles.noEnd, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], xstyle), className, style),
     ...props,

package/dist/Layout/LayoutFooter.js

@@ -20,7 +20,7 @@ import { LayoutDividerContext } from "./LayoutDividerContext.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -108,7 +108,7 @@ export function LayoutFooter({
     role: role,
     "aria-label": label,
     "data-divider": resolvedHasDivider || undefined,
-    ...mergeProps(xdsThemeProps('layout-footer'), stylex.props(styles.footer, dynamicStyles.sizing(height ?? null), resolvedHasDivider && styles.divider, xstyle), className, style),
+    ...mergeProps(themeProps('layout-footer'), stylex.props(styles.footer, dynamicStyles.sizing(height ?? null), resolvedHasDivider && styles.divider, xstyle), className, style),
     ...props,
     children: /*#__PURE__*/_jsx("div", {
       ...stylex.props(styles.inner, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding]),

package/dist/Layout/LayoutHeader.js

@@ -20,7 +20,7 @@ import { LayoutDividerContext } from "./LayoutDividerContext.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -108,7 +108,7 @@ export function LayoutHeader({
     role: role,
     "aria-label": label,
     "data-divider": resolvedHasDivider || undefined,
-    ...mergeProps(xdsThemeProps('layout-header'), stylex.props(styles.header, dynamicStyles.sizing(height ?? null), resolvedHasDivider && styles.divider, xstyle), className, style),
+    ...mergeProps(themeProps('layout-header'), stylex.props(styles.header, dynamicStyles.sizing(height ?? null), resolvedHasDivider && styles.divider, xstyle), className, style),
     ...props,
     children: /*#__PURE__*/_jsx("div", {
       ...stylex.props(styles.inner, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding]),

package/dist/Layout/LayoutPanel.js

@@ -21,7 +21,7 @@ import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { LayoutAreaContext } from "./LayoutAreaContext.js";
 import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -170,7 +170,7 @@ export function LayoutPanel({
     ref: ref,
     role: role,
     "aria-label": label,
-    ...mergeProps(xdsThemeProps('layout-panel'), stylex.props(styles.panel, dynamicStyles.sizing(effectiveWidth ?? null),
+    ...mergeProps(themeProps('layout-panel'), stylex.props(styles.panel, dynamicStyles.sizing(effectiveWidth ?? null),
     // Outer padding on container edges (unless component is full bleed)
     isStartPanel && !isZeroPadding && padding == null && styles.startPanel, isEndPanel && !isZeroPadding && padding == null && styles.endPanel, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], hasDivider && dividerStyle, shouldCollapseSpacing && collapseStyle, xstyle), className, style),
     ...props,

package/dist/Lightbox/Lightbox.js

@@ -24,7 +24,7 @@ import { IconButton } from "../IconButton/index.js";
 import { useScrollLock } from "../hooks/useScrollLock.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * Media type for lightbox items.
@@ -313,7 +313,7 @@ export function Lightbox({
       onKeyDownProp?.(e);
     },
     "aria-label": currentItem.alt || 'Media viewer',
-    ...mergeProps(xdsThemeProps('lightbox'), stylex.props(styles.dialog, xstyle), className, style),
+    ...mergeProps(themeProps('lightbox'), stylex.props(styles.dialog, xstyle), className, style),
     ...props,
     children: /*#__PURE__*/_jsxs("div", {
       ...{

package/dist/Link/Link.js

@@ -25,7 +25,7 @@ import { useLinkComponent } from "./useLinkComponent.js";
 import { mergeProps } from "../utils/index.js";
 import { computeTargetAndRel } from "./computeTargetAndRel.js";
 import { useInteractiveRole } from "../hooks/useInteractiveRole.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * Base link styles
@@ -184,7 +184,7 @@ export function Link({
       "aria-disabled": isDisabled || undefined,
       tabIndex: isDisabled ? -1 : undefined,
       disabled: isDisabled,
-      ...mergeProps(xdsThemeProps('link', {
+      ...mergeProps(themeProps('link', {
         color
       }), stylex.props(styles.base, styles.buttonReset, linkColorStyles[color], hasUnderline && styles.hasUnderline, isStandalone && styles.standalone, isDisabled && styles.disabled, xstyle), className, style),
       ...props,
@@ -200,7 +200,7 @@ export function Link({
       "aria-label": label || undefined,
       "aria-disabled": isDisabled || undefined,
       tabIndex: isDisabled ? -1 : undefined,
-      ...mergeProps(xdsThemeProps('link', {
+      ...mergeProps(themeProps('link', {
         color
       }), stylex.props(styles.base, linkColorStyles[color], hasUnderline && styles.hasUnderline, isStandalone && styles.standalone, isDisabled && styles.disabled, xstyle), className, style),
       ...props,

package/dist/List/List.js

@@ -21,7 +21,7 @@ import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { ListContext } from "./ListContext.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
@@ -109,7 +109,7 @@ export function List({
     ...(listStyle === 'none' && !isOrdered ? {
       role: 'list'
     } : {}),
-    ...mergeProps(xdsThemeProps('list', {
+    ...mergeProps(themeProps('list', {
       density,
       listStyle
     }), stylex.props(styles.list, hasDividers && styles.withDividers, listStyle !== 'none' && (start != null && start !== 1 ? dynamicStyles.counterStart(start - 1) : styles.withCounter), xstyle), className, style),

package/dist/List/ListItem.js

@@ -25,7 +25,7 @@ import { colorVars, spacingVars, typeScaleVars, borderVars } from "../theme/toke
 import { ListContext } from "./ListContext.js";
 import { mergeProps } from "../utils/index.js";
 import { Item } from "../Item/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Types
@@ -140,7 +140,7 @@ export function ListItem({
     isSelected: isSelected,
     density: density,
     xstyle: [hasMarkers && styles.withCounter, hasDividers && styles.withDivider, hasDividers && embeddedStyles.noRadius, xstyle],
-    ...mergeProps(xdsThemeProps('list-item'), {
+    ...mergeProps(themeProps('list-item'), {
       className,
       style
     }),

package/dist/Markdown/Markdown.js

@@ -32,7 +32,7 @@ import { useTheme } from "../theme/useTheme.js";
 import { Citation } from "../Citation/Citation.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { parseInline, parseMarkdown, parseMarkdownIncremental, createIncrementalState, trimStreamingArtifacts } from "./parser.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // ---------------------------------------------------------------------------
 // Props
@@ -1092,7 +1092,7 @@ export function Markdown({
     const renderedInline = /*#__PURE__*/_jsx("span", {
       ref: ref,
       "data-testid": testId,
-      ...mergeProps(xdsThemeProps('markdown', {
+      ...mergeProps(themeProps('markdown', {
         density
       }), stylex.props(styles.root, styles.inlineRoot, xstyle), className, style),
       children: inlineNodes.map((node, i) => renderInline(node, i, onLinkClick, cursor, citationCtx, LinkComponent, inlinePlugins, components))
@@ -1107,7 +1107,7 @@ export function Markdown({
     role: "document",
     ref: ref,
     "data-testid": testId,
-    ...mergeProps(xdsThemeProps('markdown', {
+    ...mergeProps(themeProps('markdown', {
       density
     }), stylex.props(styles.root, xstyle), className, style),
     children: blocks.map((block, i) => renderBlock(block, i, blocks.length, density, headingLevelStart, onLinkClick, cursor, citationCtx, contentWidth ? typeof contentWidth === 'number' ? `${contentWidth}px` : contentWidth : null, contentAlign, LinkComponent, inlinePlugins, components))