@choco-vanille/ui 1.1.2 → 1.2.0

package/dist/components/forms/text-field/constants/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/forms/text-field/constants/index.ts"],"sourcesContent":["import type { TextFieldSize } from '@components'\r\n\r\n/** Maps field size to the IconButton size used in the end-action slot. */\r\nexport const fieldSizeToActionSize: Record<NonNullable<TextFieldSize>, 'sm' | 'md'> = {\r\n    sm: 'sm',\r\n    md: 'sm',\r\n    lg: 'md',\r\n}\r\n"],"names":["fieldSizeToActionSize"],"mappings":"AAGO,MAAMA,IAAyE;AAAA,EAClF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/forms/text-field/constants/index.ts"],"sourcesContent":["import type { TextFieldSize } from '@components'\r\n\r\n/** Maps field size to the IconButton size used in the end-action slot. */\r\nexport const fieldSizeToActionSize: Record<NonNullable<TextFieldSize>, 'sm' | 'md'> = {\r\n    sm: 'sm',\r\n    md: 'sm',\r\n    lg: 'md',\r\n}\r\n\r\nexport const TEXT_FIELD_SIZES = {\r\n    sm: 'sm',\r\n    md: 'md',\r\n    lg: 'lg',\r\n} as const\r\n"],"names":["fieldSizeToActionSize"],"mappings":"AAGO,MAAMA,IAAyE;AAAA,EAClF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;"}

package/dist/components/forms/text-field/index.d.ts

@@ -7,3 +7,4 @@ export type { TextFieldProps } from './types/TextField.props.ts';
 export type { TextFieldSize } from './types/TextField.types.ts';
 export type { TextFieldLabelProps } from './components/text-field-label/types/TextFieldLabel.props.ts';
 export type { TextFieldStartIconProps } from './components/text-field-start-icon/types/TextFieldStartIcon.types.ts';
+export type { TextFieldEndActionProps } from './components/text-field-end-action/types/TextFieldEndAction.props.ts';

package/dist/components/forms/text-field/styles/TextField.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const TEXT_FIELD_STYLES: {
     recipe: RuntimeFn<{
         size: {
@@ -47,4 +47,3 @@ export declare const TEXT_FIELD_STYLES: {
         };
     }>;
 };
-export type TextFieldInputRecipeVariants = NonNullable<RecipeVariants<typeof TEXT_FIELD_STYLES.recipe>>;

package/dist/components/forms/text-field/types/TextField.props.d.ts

@@ -1,7 +1,9 @@
 import { RefAttributes } from 'react';
-import { TextFieldInputRecipeVariants } from '../styles/TextField.css.ts';
+import { TextFieldSize } from './TextField.types.ts';
 import type * as React from 'react';
-export type TextFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & RefAttributes<HTMLInputElement> & Pick<TextFieldInputRecipeVariants, 'size'> & {
+export type TextFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & RefAttributes<HTMLInputElement> & {
+    /** Input size. @default 'md' */
+    size?: TextFieldSize;
     /** Text label rendered above the input, linked via Radix Label for accessibility. */
     label?: string;
     /** Helper text rendered below the input. Hidden when `error` is provided. */

package/dist/components/forms/text-field/types/TextField.types.d.ts

@@ -1,2 +1,3 @@
+import { TEXT_FIELD_SIZES } from '../constants';
 /** Size variants for the TextField component. */
-export type TextFieldSize = 'sm' | 'md' | 'lg';
+export type TextFieldSize = (typeof TEXT_FIELD_SIZES)[keyof typeof TEXT_FIELD_SIZES];

package/dist/components/foundation/icon/Icon.cjs

@@ -1,2 +1,2 @@
-"use strict";const c=require("react/jsx-runtime"),j=require("@iconify/react"),v=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const S=require("./styles/Icon.css.cjs"),h=require("../../../utils/cn.cjs"),C=require("react"),r=C.memo(({icon:i,size:n,spin:o,color:t,padding:a,borderColor:l,backgroundColor:u,borderWidth:d,borderStyle:m,borderRadius:p,"aria-label":e,className:q,style:x,...I})=>{const s=e===void 0,y=S.ICON_STYLES.recipe({size:n,spin:o,color:t}),N={...x};return c.jsx(v,{as:"span",display:"inline-flex",padding:a,borderColor:l,backgroundColor:u,borderWidth:d,borderStyle:m,borderRadius:p,children:c.jsx(j.Icon,{icon:i,"aria-hidden":s,"aria-label":e,role:s?void 0:"img",className:h.cn(y,q),style:N,...I})})});r.displayName="Icon";module.exports=r;
+"use strict";const r=require("react/jsx-runtime"),j=require("@iconify/react"),v=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const S=require("./styles/Icon.css.cjs"),h=require("../../../utils/cn.cjs"),C=require("react"),c=C.memo(({icon:i,size:n,spin:o,color:t,padding:a,borderColor:l,backgroundColor:u,borderWidth:d,borderStyle:m,borderRadius:p,"aria-label":e,className:q,style:x,...I})=>{const s=e===void 0,y=S.ICON_STYLES.recipe({size:n,spin:o,color:t}),N={...x};return r.jsx(v,{as:"span",display:"inline-flex",padding:a,borderColor:l,backgroundColor:u,borderWidth:d,borderStyle:m,borderRadius:p,children:r.jsx(j.Icon,{icon:i,"aria-hidden":s,"aria-label":e,role:s?void 0:"img",className:h.cn(y,q),style:N,...I})})});c.displayName="Icon";module.exports=c;
 //# sourceMappingURL=Icon.cjs.map

package/dist/components/foundation/icon/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Icon } from './Icon.tsx';
 export { ICON_STYLES } from './styles/Icon.css.ts';
 export type { IconProps } from './types/Icon.props.ts';
-export type { IconSize } from './types/Icon.types.ts';
+export type { IconColor, IconSize } from './types/Icon.types.ts';

package/dist/components/foundation/icon/types/Icon.props.d.ts

@@ -1,21 +1,24 @@
 import { IconProps as IconifyProps } from '@iconify/react';
 import { CSSProperties } from 'react';
-import { IconRecipeVariants } from '../styles/Icon.css.ts';
-import { BoxRecipeVariants } from '../../../layout/box';
-import { ThemeColor } from '../../../../theme';
-export type IconProps = Omit<IconifyProps, 'aria-hidden' | 'role'> & IconRecipeVariants & {
+import { BoxBorderRadius, BoxColor, BoxSpace } from '../../../layout/box/types/Box.types.ts';
+import { IconColor, IconSize } from './Icon.types.ts';
+export type IconProps = Omit<IconifyProps, 'aria-hidden' | 'role'> & {
+    /** Icon size. Defaults to `md`. */
+    size?: IconSize;
+    /** Whether the icon should continuously rotate. */
+    spin?: boolean;
     /** Optional theme color token applied to the icon's `color` CSS property. */
-    color?: ThemeColor;
+    color?: IconColor;
     /** Padding token applied to the wrapper around the icon. */
-    padding?: BoxRecipeVariants['padding'];
+    padding?: BoxSpace;
     /** Theme color token applied to the wrapper's border color. */
-    borderColor?: BoxRecipeVariants['borderColor'];
+    borderColor?: BoxColor;
     /** Theme color token applied to the wrapper's background color. */
-    backgroundColor?: BoxRecipeVariants['backgroundColor'];
+    backgroundColor?: BoxColor;
     /** The CSS `border-width` value of the wrapper. */
     borderWidth?: CSSProperties['borderWidth'];
     /** The CSS `border-style` value of the wrapper. */
     borderStyle?: CSSProperties['borderStyle'];
     /** Border radius token applied to the wrapper. */
-    borderRadius?: BoxRecipeVariants['borderRadius'];
+    borderRadius?: BoxBorderRadius;
 };

package/dist/components/foundation/icon/types/Icon.types.d.ts

@@ -1 +1,4 @@
+import { ThemeColorValue } from '../../../../theme';
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** Theme color tokens supported by the Icon recipe. */
+export type IconColor = ThemeColorValue;

package/dist/components/foundation/typography/Typography.cjs

@@ -1,2 +1,2 @@
-"use strict";const S=require("react/jsx-runtime"),h=require("./styles/Typography.css.cjs"),A=require("./constants/index.cjs"),N=require("../../../utils/cn.cjs"),j=require("../../../theme/contract.css.cjs"),G=require("react"),r=G.memo(({as:t,variant:e,fontSize:c,fontWeight:n,color:o,textTransform:p,display:i,width:a,minWidth:u,maxWidth:y,opacity:m,flex:T,flexGrow:l,flexShrink:q,letterSpacing:s,ellipsis:E,maxLines:P,className:Y,style:_,ref:d,...g})=>{const x=t??A.TYPOGRAPHY_ELEMENT_MAP[e??"span"]??"span",R={textTransform:p,display:i,width:a,minWidth:u,maxWidth:y,opacity:m,flex:T,flexGrow:l,flexShrink:q,letterSpacing:s?j.vars.letterSpacing[s]:void 0,..._};return S.jsx(x,{ref:d,className:N.cn(h.TYPOGRAPHY_STYLES.recipe({variant:e,fontSize:c,fontWeight:n,ellipsis:E,maxLines:P,color:o}),Y),style:R,...g})});r.displayName="Typography";module.exports=r;
+"use strict";const h=require("react/jsx-runtime"),A=require("./styles/Typography.css.cjs"),N=require("./constants/index.cjs"),R=require("../../../utils/cn.cjs"),j=require("../../../theme/contract.css.cjs"),G=require("react"),r=G.memo(({as:t,variant:e,fontSize:c,fontWeight:n,color:o,textTransform:p,display:i,width:a,minWidth:u,maxWidth:y,opacity:m,flex:T,flexGrow:l,flexShrink:q,letterSpacing:s,ellipsis:E,maxLines:P,className:Y,style:_,ref:d,...g})=>{const x=t??N.TYPOGRAPHY_ELEMENT_MAP[e??"span"]??"span",S={textTransform:p,display:i,width:a,minWidth:u,maxWidth:y,opacity:m,flex:T,flexGrow:l,flexShrink:q,letterSpacing:s?j.vars.letterSpacing[s]:void 0,..._};return h.jsx(x,{ref:d,className:R.cn(A.TYPOGRAPHY_STYLES.recipe({variant:e,fontSize:c,fontWeight:n,ellipsis:E,maxLines:P,color:o}),Y),style:S,...g})});r.displayName="Typography";module.exports=r;
 //# sourceMappingURL=Typography.cjs.map

package/dist/components/foundation/typography/styles/Typography.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const TYPOGRAPHY_STYLES: {
     recipe: RuntimeFn<{
         variant: {
@@ -263,4 +263,3 @@ export declare const TYPOGRAPHY_STYLES: {
         color: Record<"background" | "foreground" | "text" | "textSecondary" | "textTertiary" | "card" | "cardForeground" | "popover" | "popoverForeground" | "muted" | "mutedForeground" | "overlay" | "primary" | "primaryHover" | "primaryActive" | "primaryForeground" | "primarySubtle" | "primarySubtleHover" | "primarySubtleActive" | "primarySubtleForeground" | "primarySubtleBorder" | "link" | "linkHover" | "linkActive" | "secondary" | "secondaryHover" | "secondaryActive" | "secondaryForeground" | "secondarySubtle" | "secondarySubtleHover" | "secondarySubtleActive" | "secondarySubtleForeground" | "secondarySubtleBorder" | "tertiary" | "tertiaryHover" | "tertiaryActive" | "tertiaryForeground" | "tertiarySubtle" | "tertiarySubtleHover" | "tertiarySubtleActive" | "tertiarySubtleForeground" | "tertiarySubtleBorder" | "success" | "successHover" | "successActive" | "successForeground" | "successSubtle" | "successSubtleHover" | "successSubtleActive" | "successSubtleForeground" | "successSubtleBorder" | "warning" | "warningHover" | "warningActive" | "warningForeground" | "warningSubtle" | "warningSubtleHover" | "warningSubtleActive" | "warningSubtleForeground" | "warningSubtleBorder" | "info" | "infoHover" | "infoActive" | "infoForeground" | "infoSubtle" | "infoSubtleHover" | "infoSubtleActive" | "infoSubtleForeground" | "infoSubtleBorder" | "destructive" | "destructiveHover" | "destructiveActive" | "destructiveForeground" | "destructiveSubtle" | "destructiveSubtleHover" | "destructiveSubtleActive" | "destructiveSubtleForeground" | "destructiveSubtleBorder" | "purple" | "purpleHover" | "purpleActive" | "purpleForeground" | "purpleSubtle" | "purpleSubtleHover" | "purpleSubtleActive" | "purpleSubtleForeground" | "purpleSubtleBorder" | "pink" | "pinkHover" | "pinkActive" | "pinkForeground" | "pinkSubtle" | "pinkSubtleHover" | "pinkSubtleActive" | "pinkSubtleForeground" | "pinkSubtleBorder" | "orange" | "orangeHover" | "orangeActive" | "orangeForeground" | "orangeSubtle" | "orangeSubtleHover" | "orangeSubtleActive" | "orangeSubtleForeground" | "orangeSubtleBorder" | "teal" | "tealHover" | "tealActive" | "tealForeground" | "tealSubtle" | "tealSubtleHover" | "tealSubtleActive" | "tealSubtleForeground" | "tealSubtleBorder" | "cyan" | "cyanHover" | "cyanActive" | "cyanForeground" | "cyanSubtle" | "cyanSubtleHover" | "cyanSubtleActive" | "cyanSubtleForeground" | "cyanSubtleBorder" | "indigo" | "indigoHover" | "indigoActive" | "indigoForeground" | "indigoSubtle" | "indigoSubtleHover" | "indigoSubtleActive" | "indigoSubtleForeground" | "indigoSubtleBorder" | "border" | "borderStrong" | "input" | "ring" | "highlight" | "highlightForeground" | "skeleton" | "skeletonForeground" | "transparent", Record<string, string>>;
     }>;
 };
-export type TypographyRecipeVariants = NonNullable<RecipeVariants<typeof TYPOGRAPHY_STYLES.recipe>>;

package/dist/components/foundation/typography/types/Typography.props.d.ts

@@ -1,11 +1,18 @@
-import { TypographyRecipeVariants } from '../styles/Typography.css.ts';
-import { TypographyLetterSpacing } from './Typography.types.ts';
+import { TypographyLetterSpacing, TypographySize, TypographyVariant, TypographyWeight } from './Typography.types.ts';
 import { CSSProperties, RefAttributes } from 'react';
 import { ThemeColor } from '../../../../theme';
 import type * as React from 'react';
-export type TypographyProps = Omit<React.HTMLAttributes<HTMLElement>, 'color'> & RefAttributes<HTMLElement> & TypographyRecipeVariants & {
+export type TypographyProps = Omit<React.HTMLAttributes<HTMLElement>, 'color'> & RefAttributes<HTMLElement> & {
     /** Override the rendered HTML element. */
     as?: React.ElementType;
+    /** Semantic HTML element variant used for default rendering and styles. */
+    variant?: TypographyVariant;
+    /** Font-size token applied to the text. */
+    fontSize?: TypographySize;
+    /** Font-weight token applied to the text. */
+    fontWeight?: TypographyWeight;
+    /** Whether overflowing text should be truncated on one line. */
+    ellipsis?: boolean;
     /** Optional theme color token applied to the text's `color` CSS property. */
     color?: ThemeColor;
     /** CSS `text-transform` value applied to the text. */

package/dist/components/layout/box/Box.cjs

@@ -1,2 +1,2 @@
-"use strict";const g=require("react/jsx-runtime"),ee=require("./styles/Box.css.cjs"),se=require("../../../utils/cn.cjs"),F=require("react"),H=F.memo(({as:I="div",borderRadius:e,padding:s,paddingX:c,paddingY:t,paddingTop:u,paddingRight:x,paddingBottom:q,paddingLeft:N,margin:j,marginX:y,marginY:B,marginTop:_,marginRight:l,marginBottom:v,marginLeft:E,gap:M,columnGap:O,rowGap:S,borderColor:z,backgroundColor:A,boxShadow:D,display:J,width:K,minWidth:P,maxWidth:Q,height:U,minHeight:V,maxHeight:W,overflow:Z,overflowX:$,overflowY:k,position:r,flex:C,flexDirection:L,flexWrap:R,alignSelf:T,alignItems:X,alignContent:Y,justifyContent:f,borderWidth:w,borderTopWidth:G,borderRightWidth:h,borderBottomWidth:m,borderLeftWidth:b,borderStyle:o,className:n,style:i,ref:p,...a})=>{const d=F.useMemo(()=>ee.BOX_STYLES.recipe({borderRadius:e,padding:s,paddingX:c,paddingY:t,paddingTop:u,paddingRight:x,paddingBottom:q,paddingLeft:N,margin:j,marginX:y,marginY:B,marginTop:_,marginRight:l,marginBottom:v,marginLeft:E,gap:M,columnGap:O,rowGap:S,borderColor:z,backgroundColor:A,boxShadow:D}),[e,s,c,t,u,x,q,N,j,y,B,_,l,v,E,M,O,S,z,A,D]);return g.jsx(I,{ref:p,className:se.cn(d,n),style:{display:J,width:K,minWidth:P,maxWidth:Q,height:U,minHeight:V,maxHeight:W,overflow:Z,overflowX:$,overflowY:k,position:r,flex:C,flexDirection:L,flexWrap:R,alignSelf:T,alignItems:X,alignContent:Y,justifyContent:f,borderWidth:w,borderTopWidth:G,borderRightWidth:h,borderBottomWidth:m,borderLeftWidth:b,borderStyle:o,...i},...a})});H.displayName="Box";module.exports=H;
+"use strict";const g=require("react/jsx-runtime"),ee=require("./styles/Box.css.cjs"),se=require("../../../utils/cn.cjs"),D=require("react"),F=D.memo(({as:H="div",borderRadius:e,padding:s,paddingX:c,paddingY:t,paddingTop:u,paddingRight:x,paddingBottom:q,paddingLeft:N,margin:j,marginX:y,marginY:B,marginTop:_,marginRight:l,marginBottom:v,marginLeft:E,gap:M,columnGap:O,rowGap:S,borderColor:r,backgroundColor:z,boxShadow:A,display:I,width:J,minWidth:K,maxWidth:P,height:Q,minHeight:U,maxHeight:V,overflow:W,overflowX:Z,overflowY:$,position:k,flex:C,flexDirection:L,flexWrap:T,alignSelf:X,alignItems:Y,alignContent:f,justifyContent:w,borderWidth:G,borderTopWidth:R,borderRightWidth:h,borderBottomWidth:m,borderLeftWidth:b,borderStyle:o,className:n,style:i,ref:p,...a})=>{const d=D.useMemo(()=>ee.BOX_STYLES.recipe({borderRadius:e,padding:s,paddingX:c,paddingY:t,paddingTop:u,paddingRight:x,paddingBottom:q,paddingLeft:N,margin:j,marginX:y,marginY:B,marginTop:_,marginRight:l,marginBottom:v,marginLeft:E,gap:M,columnGap:O,rowGap:S,borderColor:r,backgroundColor:z,boxShadow:A}),[e,s,c,t,u,x,q,N,j,y,B,_,l,v,E,M,O,S,r,z,A]);return g.jsx(H,{ref:p,className:se.cn(d,n),style:{display:I,width:J,minWidth:K,maxWidth:P,height:Q,minHeight:U,maxHeight:V,overflow:W,overflowX:Z,overflowY:$,position:k,flex:C,flexDirection:L,flexWrap:T,alignSelf:X,alignItems:Y,alignContent:f,justifyContent:w,borderWidth:G,borderTopWidth:R,borderRightWidth:h,borderBottomWidth:m,borderLeftWidth:b,borderStyle:o,...i},...a})});F.displayName="Box";module.exports=F;
 //# sourceMappingURL=Box.cjs.map

package/dist/components/layout/box/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Box } from './Box.tsx';
 export { BOX_STYLES } from './styles/Box.css.ts';
-export type { BoxRecipeVariants } from './styles/Box.css.ts';
 export type { BoxProps } from './types/Box.props.ts';
-export type { BoxVariant } from './types/Box.types.ts';
+export type { BoxBorderRadius, BoxColor, BoxMargin, BoxShadow, BoxSpace, BoxVariant, } from './types/Box.types.ts';

package/dist/components/layout/box/styles/Box.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const BOX_STYLES: {
     recipe: RuntimeFn<{
         borderRadius: {
@@ -928,4 +928,3 @@ export declare const BOX_STYLES: {
         };
     }>;
 };
-export type BoxRecipeVariants = NonNullable<RecipeVariants<typeof BOX_STYLES.recipe>>;

package/dist/components/layout/box/types/Box.props.d.ts

@@ -1,6 +1,5 @@
 import { CSSProperties, HTMLAttributes, RefAttributes } from 'react';
-import { BoxRecipeVariants } from '../styles/Box.css.ts';
-import { BoxVariant } from './Box.types.ts';
+import { BoxBorderRadius, BoxColor, BoxMargin, BoxShadow, BoxSpace, BoxVariant } from './Box.types.ts';
 import type * as React from 'react';
 export type BoxProps = HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
     /** The HTML element to render. Defaults to `div`. */
@@ -54,45 +53,45 @@ export type BoxProps = HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>
     /** The CSS `border-style` value of the element. */
     borderStyle?: CSSProperties['borderStyle'];
     /** The border radius token applied to the element. */
-    borderRadius?: BoxRecipeVariants['borderRadius'];
+    borderRadius?: BoxBorderRadius;
     /** The padding token applied to all sides of the element. */
-    padding?: BoxRecipeVariants['padding'];
+    padding?: BoxSpace;
     /** The padding token applied to the inline (horizontal) axis of the element. */
-    paddingX?: BoxRecipeVariants['paddingX'];
+    paddingX?: BoxSpace;
     /** The padding token applied to the block (vertical) axis of the element. */
-    paddingY?: BoxRecipeVariants['paddingY'];
+    paddingY?: BoxSpace;
     /** The padding token applied to the top of the element. */
-    paddingTop?: BoxRecipeVariants['paddingTop'];
+    paddingTop?: BoxSpace;
     /** The padding token applied to the right of the element. */
-    paddingRight?: BoxRecipeVariants['paddingRight'];
+    paddingRight?: BoxSpace;
     /** The padding token applied to the bottom of the element. */
-    paddingBottom?: BoxRecipeVariants['paddingBottom'];
+    paddingBottom?: BoxSpace;
     /** The padding token applied to the left of the element. */
-    paddingLeft?: BoxRecipeVariants['paddingLeft'];
+    paddingLeft?: BoxSpace;
     /** The margin token applied to all sides of the element. Supports `auto`. */
-    margin?: BoxRecipeVariants['margin'];
+    margin?: BoxMargin;
     /** The margin token applied to the inline (horizontal) axis of the element. Supports `auto`. */
-    marginX?: BoxRecipeVariants['marginX'];
+    marginX?: BoxMargin;
     /** The margin token applied to the block (vertical) axis of the element. Supports `auto`. */
-    marginY?: BoxRecipeVariants['marginY'];
+    marginY?: BoxMargin;
     /** The margin token applied to the top of the element. Supports `auto`. */
-    marginTop?: BoxRecipeVariants['marginTop'];
+    marginTop?: BoxMargin;
     /** The margin token applied to the right of the element. Supports `auto`. */
-    marginRight?: BoxRecipeVariants['marginRight'];
+    marginRight?: BoxMargin;
     /** The margin token applied to the bottom of the element. Supports `auto`. */
-    marginBottom?: BoxRecipeVariants['marginBottom'];
+    marginBottom?: BoxMargin;
     /** The margin token applied to the left of the element. Supports `auto`. */
-    marginLeft?: BoxRecipeVariants['marginLeft'];
+    marginLeft?: BoxMargin;
     /** The gap token between flex or grid children. */
-    gap?: BoxRecipeVariants['gap'];
+    gap?: BoxSpace;
     /** The column gap token between flex or grid children. */
-    columnGap?: BoxRecipeVariants['columnGap'];
+    columnGap?: BoxSpace;
     /** The row gap token between flex or grid children. */
-    rowGap?: BoxRecipeVariants['rowGap'];
+    rowGap?: BoxSpace;
     /** The theme color token applied to the element's border color. */
-    borderColor?: BoxRecipeVariants['borderColor'];
+    borderColor?: BoxColor;
     /** The theme color token applied to the element's background color. */
-    backgroundColor?: BoxRecipeVariants['backgroundColor'];
+    backgroundColor?: BoxColor;
     /** The shadow token applied to the element. */
-    boxShadow?: BoxRecipeVariants['boxShadow'];
+    boxShadow?: BoxShadow;
 };

package/dist/components/layout/box/types/Box.types.d.ts

@@ -1,2 +1,16 @@
+import { Radius } from '../../../../theme/tokens/radii.ts';
+import { Shadows } from '../../../../theme/tokens/shadows.ts';
+import { Space } from '../../../../theme/tokens/spacing.ts';
+import { ThemeColorValue } from '../../../../theme/types/index.ts';
 /** HTML container elements supported by the Box component. */
 export type BoxVariant = 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav' | 'ul' | 'ol' | 'li' | 'form' | 'fieldset' | 'figure' | 'figcaption' | 'details' | 'summary' | 'dialog' | 'address' | 'span';
+/** Border-radius tokens supported by the Box component. */
+export type BoxBorderRadius = keyof Radius;
+/** Spacing tokens supported by padding and gap props. */
+export type BoxSpace = keyof Space;
+/** Spacing tokens supported by margin props. */
+export type BoxMargin = 'auto' | BoxSpace;
+/** Theme color tokens supported by color props. */
+export type BoxColor = ThemeColorValue;
+/** Shadow tokens supported by the Box component. */
+export type BoxShadow = keyof Shadows;

package/dist/components/layout/flex/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Flex } from './Flex.tsx';
 export { FLEX_STYLES } from './styles/Flex.css.ts';
-export type { FlexRecipeVariants } from './styles/Flex.css.ts';
 export type { FlexProps } from './types/Flex.props.ts';
 export type { FlexDirection, FlexWrap, FlexAlign, FlexJustify } from './types/Flex.types.ts';

package/dist/components/layout/flex/styles/Flex.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const FLEX_STYLES: {
     recipe: RuntimeFn<{
         inline: {
@@ -8,4 +8,3 @@ export declare const FLEX_STYLES: {
         };
     }>;
 };
-export type FlexRecipeVariants = NonNullable<RecipeVariants<typeof FLEX_STYLES.recipe>>;

package/dist/components/layout/flex/types/Flex.props.d.ts

@@ -1,6 +1,5 @@
-import { FlexRecipeVariants } from '../styles/Flex.css.ts';
 import { BoxProps } from '../../box/types/Box.props.ts';
 export type FlexProps = Omit<BoxProps, 'display'> & {
     /** Renders the flex container as `inline-flex` instead of `flex`. */
-    inline?: FlexRecipeVariants['inline'];
+    inline?: boolean;
 };

package/dist/components/layout/grid/Grid.cjs

@@ -1,2 +1,2 @@
-"use strict";const q=require("react/jsx-runtime"),x=require("./styles/Grid.css.cjs"),G=require("../../../utils/cn.cjs"),p=require("react"),R=require("../box/Box.cjs"),e=p.memo(({columns:r,gridAutoRows:s,gridTemplateRows:c,gridAutoFlow:i,alignItems:t,justifyItems:n,alignContent:o,justifyContent:u,gap:m="md",className:a,...d})=>q.jsx(R,{gap:m,className:G.cn(x.GRID_STYLES.recipe({columns:r,gridAutoRows:s,gridTemplateRows:c,gridAutoFlow:i,alignItems:t,justifyItems:n,alignContent:o,justifyContent:u}),a),...d}));e.displayName="Grid";module.exports=e;
+"use strict";const q=require("react/jsx-runtime"),x=require("./styles/Grid.css.cjs"),G=require("../../../utils/cn.cjs"),p=require("react"),j=require("../box/Box.cjs"),e=p.memo(({columns:r,gridAutoRows:s,gridTemplateRows:c,gridAutoFlow:i,alignItems:t,justifyItems:n,alignContent:o,justifyContent:u,gap:m="md",className:a,...d})=>q.jsx(j,{gap:m,className:G.cn(x.GRID_STYLES.recipe({columns:r,gridAutoRows:s,gridTemplateRows:c,gridAutoFlow:i,alignItems:t,justifyItems:n,alignContent:o,justifyContent:u}),a),...d}));e.displayName="Grid";module.exports=e;
 //# sourceMappingURL=Grid.cjs.map

package/dist/components/layout/grid/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Grid } from './Grid.tsx';
 export { GRID_STYLES } from './styles/Grid.css.ts';
-export type { GridRecipeVariants } from './styles/Grid.css.ts';
 export type { GridProps } from './types/Grid.props.ts';
-export type { GridColumns, GridAutoRows, GridFlow, GridAlign, GridJustifyItems, GridAlignContent, GridJustifyContent } from './types/Grid.types.ts';
+export type { GridColumns, GridAutoRows, GridTemplateRows, GridFlow, GridAlign, GridJustifyItems, GridAlignContent, GridJustifyContent, } from './types/Grid.types.ts';

package/dist/components/layout/grid/styles/Grid.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const GRID_STYLES: {
     recipe: RuntimeFn<{
         columns: {
@@ -172,4 +172,3 @@ export declare const GRID_STYLES: {
         };
     }>;
 };
-export type GridRecipeVariants = NonNullable<RecipeVariants<typeof GRID_STYLES.recipe>>;

package/dist/components/layout/grid/types/Grid.props.d.ts

@@ -1,20 +1,20 @@
-import { GridRecipeVariants } from '../styles/Grid.css.ts';
 import { BoxProps } from '../../box/types/Box.props.ts';
+import { GridAlign, GridAlignContent, GridAutoRows, GridColumns, GridFlow, GridJustifyContent, GridJustifyItems, GridTemplateRows } from './Grid.types.ts';
 export type GridProps = Omit<BoxProps, 'display' | 'alignItems' | 'alignContent' | 'justifyContent'> & {
     /** The number of equal-width columns in the grid. */
-    columns?: GridRecipeVariants['columns'];
+    columns?: GridColumns;
     /** The track size for implicitly created grid rows. */
-    gridAutoRows?: GridRecipeVariants['gridAutoRows'];
+    gridAutoRows?: GridAutoRows;
     /** The explicit row track sizing for the grid. */
-    gridTemplateRows?: GridRecipeVariants['gridTemplateRows'];
+    gridTemplateRows?: GridTemplateRows;
     /** The auto-placement algorithm for grid items. */
-    gridAutoFlow?: GridRecipeVariants['gridAutoFlow'];
+    gridAutoFlow?: GridFlow;
     /** The default alignment of grid items along the block axis. */
-    alignItems?: GridRecipeVariants['alignItems'];
+    alignItems?: GridAlign;
     /** The default alignment of grid items along the inline axis. */
-    justifyItems?: GridRecipeVariants['justifyItems'];
+    justifyItems?: GridJustifyItems;
     /** The alignment of the grid tracks along the block axis. */
-    alignContent?: GridRecipeVariants['alignContent'];
+    alignContent?: GridAlignContent;
     /** The alignment of the grid tracks along the inline axis. */
-    justifyContent?: GridRecipeVariants['justifyContent'];
+    justifyContent?: GridJustifyContent;
 };

package/dist/components/layout/image/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Image } from './Image.tsx';
 export { IMAGE_STYLES } from './styles/Image.css.ts';
-export type { ImageRecipeVariants } from './styles/Image.css.ts';
 export type { ImageProps } from './types/Image.props.ts';
 export type { ImageObjectFit, ImageObjectPosition } from './types/Image.types.ts';

package/dist/components/layout/image/styles/Image.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const IMAGE_STYLES: {
     recipe: RuntimeFn<{
         objectFit: {
@@ -161,4 +161,3 @@ export declare const IMAGE_STYLES: {
         backgroundColor: Record<"background" | "foreground" | "text" | "textSecondary" | "textTertiary" | "card" | "cardForeground" | "popover" | "popoverForeground" | "muted" | "mutedForeground" | "overlay" | "primary" | "primaryHover" | "primaryActive" | "primaryForeground" | "primarySubtle" | "primarySubtleHover" | "primarySubtleActive" | "primarySubtleForeground" | "primarySubtleBorder" | "link" | "linkHover" | "linkActive" | "secondary" | "secondaryHover" | "secondaryActive" | "secondaryForeground" | "secondarySubtle" | "secondarySubtleHover" | "secondarySubtleActive" | "secondarySubtleForeground" | "secondarySubtleBorder" | "tertiary" | "tertiaryHover" | "tertiaryActive" | "tertiaryForeground" | "tertiarySubtle" | "tertiarySubtleHover" | "tertiarySubtleActive" | "tertiarySubtleForeground" | "tertiarySubtleBorder" | "success" | "successHover" | "successActive" | "successForeground" | "successSubtle" | "successSubtleHover" | "successSubtleActive" | "successSubtleForeground" | "successSubtleBorder" | "warning" | "warningHover" | "warningActive" | "warningForeground" | "warningSubtle" | "warningSubtleHover" | "warningSubtleActive" | "warningSubtleForeground" | "warningSubtleBorder" | "info" | "infoHover" | "infoActive" | "infoForeground" | "infoSubtle" | "infoSubtleHover" | "infoSubtleActive" | "infoSubtleForeground" | "infoSubtleBorder" | "destructive" | "destructiveHover" | "destructiveActive" | "destructiveForeground" | "destructiveSubtle" | "destructiveSubtleHover" | "destructiveSubtleActive" | "destructiveSubtleForeground" | "destructiveSubtleBorder" | "purple" | "purpleHover" | "purpleActive" | "purpleForeground" | "purpleSubtle" | "purpleSubtleHover" | "purpleSubtleActive" | "purpleSubtleForeground" | "purpleSubtleBorder" | "pink" | "pinkHover" | "pinkActive" | "pinkForeground" | "pinkSubtle" | "pinkSubtleHover" | "pinkSubtleActive" | "pinkSubtleForeground" | "pinkSubtleBorder" | "orange" | "orangeHover" | "orangeActive" | "orangeForeground" | "orangeSubtle" | "orangeSubtleHover" | "orangeSubtleActive" | "orangeSubtleForeground" | "orangeSubtleBorder" | "teal" | "tealHover" | "tealActive" | "tealForeground" | "tealSubtle" | "tealSubtleHover" | "tealSubtleActive" | "tealSubtleForeground" | "tealSubtleBorder" | "cyan" | "cyanHover" | "cyanActive" | "cyanForeground" | "cyanSubtle" | "cyanSubtleHover" | "cyanSubtleActive" | "cyanSubtleForeground" | "cyanSubtleBorder" | "indigo" | "indigoHover" | "indigoActive" | "indigoForeground" | "indigoSubtle" | "indigoSubtleHover" | "indigoSubtleActive" | "indigoSubtleForeground" | "indigoSubtleBorder" | "border" | "borderStrong" | "input" | "ring" | "highlight" | "highlightForeground" | "skeleton" | "skeletonForeground" | "transparent", Record<string, string>>;
     }>;
 };
-export type ImageRecipeVariants = NonNullable<RecipeVariants<typeof IMAGE_STYLES.recipe>>;

package/dist/components/layout/image/types/Image.props.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, ImgHTMLAttributes, RefAttributes } from 'react';
-import { ImageRecipeVariants } from '../styles/Image.css.ts';
+import { BoxBorderRadius, BoxColor } from '../../box/types/Box.types.ts';
+import { ImageMargin, ImageObjectFit, ImageObjectPosition, ImageSpace } from './Image.types.ts';
 export type ImageProps = ImgHTMLAttributes<HTMLImageElement> & RefAttributes<HTMLImageElement> & {
     /** The CSS `width` of the image. */
     width?: CSSProperties['width'];
@@ -16,15 +17,15 @@ export type ImageProps = ImgHTMLAttributes<HTMLImageElement> & RefAttributes<HTM
     /** The CSS `aspect-ratio` of the image. */
     aspectRatio?: CSSProperties['aspectRatio'];
     /** The CSS `object-fit` value of the image. */
-    objectFit?: ImageRecipeVariants['objectFit'];
+    objectFit?: ImageObjectFit;
     /** The CSS `object-position` value of the image. */
-    objectPosition?: ImageRecipeVariants['objectPosition'];
+    objectPosition?: ImageObjectPosition;
     /** The border radius token applied to the image. */
-    borderRadius?: ImageRecipeVariants['borderRadius'];
+    borderRadius?: BoxBorderRadius;
     /** The padding token applied to the image. */
-    padding?: ImageRecipeVariants['padding'];
+    padding?: ImageSpace;
     /** The margin token applied to the image. Supports `auto`. */
-    margin?: ImageRecipeVariants['margin'];
+    margin?: ImageMargin;
     /** The theme color token applied to the image's background color. */
-    backgroundColor?: ImageRecipeVariants['backgroundColor'];
+    backgroundColor?: BoxColor;
 };

package/dist/components/layout/image/types/Image.types.d.ts

@@ -2,3 +2,7 @@
 export type ImageObjectFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
 /** Object-position values supported by the Image component. */
 export type ImageObjectPosition = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** Spacing tokens supported by the Image component's recipe. */
+export type ImageSpace = 'none' | 'px' | 'xxs' | 'xs' | 'xs2' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+/** Margin tokens supported by the Image component's recipe. */
+export type ImageMargin = 'auto' | ImageSpace;

package/dist/components/layout/separator/Separator.cjs

@@ -1,2 +1,2 @@
-"use strict";const a=require("react/jsx-runtime"),c=require("../box/Box.cjs"),i=require("./styles/Separator.css.cjs"),n=require("../../../utils/cn.cjs"),u=require("react"),e=u.memo(({orientation:r="horizontal",color:s,className:t,...o})=>a.jsx(c,{as:"div",role:"separator",className:n.cn(i.SEPARATOR_STYLES.recipe({orientation:r,color:s}),t),...o}));e.displayName="Separator";module.exports=e;
+"use strict";const o=require("react/jsx-runtime"),c=require("../box/Box.cjs"),i=require("./styles/Separator.css.cjs"),n=require("../../../utils/cn.cjs"),u=require("react"),e=u.memo(({orientation:r="horizontal",color:s,className:a,...t})=>o.jsx(c,{as:"div",role:"separator",className:n.cn(i.SEPARATOR_STYLES.recipe({orientation:r,color:s}),a),...t,"aria-orientation":r}));e.displayName="Separator";module.exports=e;
 //# sourceMappingURL=Separator.cjs.map

package/dist/components/layout/separator/Separator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.cjs","sources":["../../../../src/components/layout/separator/Separator.tsx"],"sourcesContent":["import Box from '@components/layout/box/Box.tsx'\r\nimport { SEPARATOR_STYLES } from '@components/layout/separator/styles/Separator.css.ts'\r\nimport type { SeparatorProps } from '@components/layout/separator/types/Separator.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * A thin visual divider used to separate content.\r\n * Renders a horizontal line by default; use `orientation=\"vertical\"` for a vertical rule.\r\n */\r\nconst Separator: FC<SeparatorProps> = memo(({\r\n    orientation = 'horizontal',\r\n    color,\r\n    className,\r\n    ...props\r\n}) => {\r\n    return (\r\n        <Box\r\n            as={'div'}\r\n            role={'separator'}\r\n            className={cn(SEPARATOR_STYLES.recipe({ orientation, color }), className)}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\n\r\nSeparator.displayName = 'Separator'\r\n\r\nexport default Separator\r\n"],"names":["Separator","memo","orientation","color","className","props","jsx","Box","cn","SEPARATOR_STYLES"],"mappings":"4KAUMA,EAAgCC,EAAAA,KAAK,CAAC,CACxC,YAAAC,EAAc,aACd,MAAAC,EACA,UAAAC,EACA,GAAGC,CACP,IAEQC,EAAAA,IAACC,EAAA,CACG,GAAI,MACJ,KAAM,YACN,UAAWC,EAAAA,GAAGC,EAAAA,iBAAiB,OAAO,CAAE,YAAAP,EAAa,MAAAC,CAAA,CAAO,EAAGC,CAAS,EACvE,GAAGC,CAAA,CAAA,CAGf,EAEDL,EAAU,YAAc"}
+{"version":3,"file":"Separator.cjs","sources":["../../../../src/components/layout/separator/Separator.tsx"],"sourcesContent":["import Box from '@components/layout/box/Box.tsx'\r\nimport { SEPARATOR_STYLES } from '@components/layout/separator/styles/Separator.css.ts'\r\nimport type { SeparatorProps } from '@components/layout/separator/types/Separator.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * A thin visual divider used to separate content.\r\n * Renders a horizontal line by default; use `orientation=\"vertical\"` for a vertical rule.\r\n */\r\nconst Separator: FC<SeparatorProps> = memo(({\r\n    orientation = 'horizontal',\r\n    color,\r\n    className,\r\n    ...props\r\n}) => {\r\n    return (\r\n        <Box\r\n            as={'div'}\r\n            role={'separator'}\r\n            className={cn(SEPARATOR_STYLES.recipe({ orientation, color }), className)}\r\n            {...props}\r\n            aria-orientation={orientation}\r\n        />\r\n    )\r\n})\r\n\r\nSeparator.displayName = 'Separator'\r\n\r\nexport default Separator\r\n"],"names":["Separator","memo","orientation","color","className","props","jsx","Box","cn","SEPARATOR_STYLES"],"mappings":"4KAUMA,EAAgCC,EAAAA,KAAK,CAAC,CACxC,YAAAC,EAAc,aACd,MAAAC,EACA,UAAAC,EACA,GAAGC,CACP,IAEQC,EAAAA,IAACC,EAAA,CACG,GAAI,MACJ,KAAM,YACN,UAAWC,EAAAA,GAAGC,EAAAA,iBAAiB,OAAO,CAAE,YAAAP,EAAa,MAAAC,CAAA,CAAO,EAAGC,CAAS,EACvE,GAAGC,EACJ,mBAAkBH,CAAA,CAAA,CAG7B,EAEDF,EAAU,YAAc"}

package/dist/components/layout/separator/Separator.js

@@ -14,7 +14,8 @@ const f = s(({
     as: "div",
     role: "separator",
     className: i(p.recipe({ orientation: r, color: o }), a),
-    ...m
+    ...m,
+    "aria-orientation": r
   }
 ));
 f.displayName = "Separator";

package/dist/components/layout/separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","sources":["../../../../src/components/layout/separator/Separator.tsx"],"sourcesContent":["import Box from '@components/layout/box/Box.tsx'\r\nimport { SEPARATOR_STYLES } from '@components/layout/separator/styles/Separator.css.ts'\r\nimport type { SeparatorProps } from '@components/layout/separator/types/Separator.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * A thin visual divider used to separate content.\r\n * Renders a horizontal line by default; use `orientation=\"vertical\"` for a vertical rule.\r\n */\r\nconst Separator: FC<SeparatorProps> = memo(({\r\n    orientation = 'horizontal',\r\n    color,\r\n    className,\r\n    ...props\r\n}) => {\r\n    return (\r\n        <Box\r\n            as={'div'}\r\n            role={'separator'}\r\n            className={cn(SEPARATOR_STYLES.recipe({ orientation, color }), className)}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\n\r\nSeparator.displayName = 'Separator'\r\n\r\nexport default Separator\r\n"],"names":["Separator","memo","orientation","color","className","props","jsx","Box","cn","SEPARATOR_STYLES"],"mappings":";;;;;AAUA,MAAMA,IAAgCC,EAAK,CAAC;AAAA,EACxC,aAAAC,IAAc;AAAA,EACd,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,WAAWC,EAAGC,EAAiB,OAAO,EAAE,aAAAP,GAAa,OAAAC,EAAA,CAAO,GAAGC,CAAS;AAAA,IACvE,GAAGC;AAAA,EAAA;AAAA,CAGf;AAEDL,EAAU,cAAc;"}
+{"version":3,"file":"Separator.js","sources":["../../../../src/components/layout/separator/Separator.tsx"],"sourcesContent":["import Box from '@components/layout/box/Box.tsx'\r\nimport { SEPARATOR_STYLES } from '@components/layout/separator/styles/Separator.css.ts'\r\nimport type { SeparatorProps } from '@components/layout/separator/types/Separator.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * A thin visual divider used to separate content.\r\n * Renders a horizontal line by default; use `orientation=\"vertical\"` for a vertical rule.\r\n */\r\nconst Separator: FC<SeparatorProps> = memo(({\r\n    orientation = 'horizontal',\r\n    color,\r\n    className,\r\n    ...props\r\n}) => {\r\n    return (\r\n        <Box\r\n            as={'div'}\r\n            role={'separator'}\r\n            className={cn(SEPARATOR_STYLES.recipe({ orientation, color }), className)}\r\n            {...props}\r\n            aria-orientation={orientation}\r\n        />\r\n    )\r\n})\r\n\r\nSeparator.displayName = 'Separator'\r\n\r\nexport default Separator\r\n"],"names":["Separator","memo","orientation","color","className","props","jsx","Box","cn","SEPARATOR_STYLES"],"mappings":";;;;;AAUA,MAAMA,IAAgCC,EAAK,CAAC;AAAA,EACxC,aAAAC,IAAc;AAAA,EACd,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,WAAWC,EAAGC,EAAiB,OAAO,EAAE,aAAAP,GAAa,OAAAC,EAAA,CAAO,GAAGC,CAAS;AAAA,IACvE,GAAGC;AAAA,IACJ,oBAAkBH;AAAA,EAAA;AAAA,CAG7B;AAEDF,EAAU,cAAc;"}

package/dist/components/layout/separator/constants/index.d.ts

@@ -0,0 +1,4 @@
+export declare const SEPARATOR_ORIENTATIONS: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};

package/dist/components/layout/separator/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Separator } from './Separator.tsx';
 export { SEPARATOR_STYLES } from './styles/Separator.css.ts';
-export type { SeparatorRecipeVariants } from './styles/Separator.css.ts';
 export type { SeparatorProps } from './types/Separator.props.ts';
-export type { SeparatorOrientation } from './types/Separator.types.ts';
+export type { SeparatorColor, SeparatorOrientation, } from './types/Separator.types.ts';

package/dist/components/layout/separator/styles/Separator.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const SEPARATOR_STYLES: {
     recipe: RuntimeFn<{
         orientation: {
@@ -14,4 +14,3 @@ export declare const SEPARATOR_STYLES: {
         color: Record<"background" | "foreground" | "text" | "textSecondary" | "textTertiary" | "card" | "cardForeground" | "popover" | "popoverForeground" | "muted" | "mutedForeground" | "overlay" | "primary" | "primaryHover" | "primaryActive" | "primaryForeground" | "primarySubtle" | "primarySubtleHover" | "primarySubtleActive" | "primarySubtleForeground" | "primarySubtleBorder" | "link" | "linkHover" | "linkActive" | "secondary" | "secondaryHover" | "secondaryActive" | "secondaryForeground" | "secondarySubtle" | "secondarySubtleHover" | "secondarySubtleActive" | "secondarySubtleForeground" | "secondarySubtleBorder" | "tertiary" | "tertiaryHover" | "tertiaryActive" | "tertiaryForeground" | "tertiarySubtle" | "tertiarySubtleHover" | "tertiarySubtleActive" | "tertiarySubtleForeground" | "tertiarySubtleBorder" | "success" | "successHover" | "successActive" | "successForeground" | "successSubtle" | "successSubtleHover" | "successSubtleActive" | "successSubtleForeground" | "successSubtleBorder" | "warning" | "warningHover" | "warningActive" | "warningForeground" | "warningSubtle" | "warningSubtleHover" | "warningSubtleActive" | "warningSubtleForeground" | "warningSubtleBorder" | "info" | "infoHover" | "infoActive" | "infoForeground" | "infoSubtle" | "infoSubtleHover" | "infoSubtleActive" | "infoSubtleForeground" | "infoSubtleBorder" | "destructive" | "destructiveHover" | "destructiveActive" | "destructiveForeground" | "destructiveSubtle" | "destructiveSubtleHover" | "destructiveSubtleActive" | "destructiveSubtleForeground" | "destructiveSubtleBorder" | "purple" | "purpleHover" | "purpleActive" | "purpleForeground" | "purpleSubtle" | "purpleSubtleHover" | "purpleSubtleActive" | "purpleSubtleForeground" | "purpleSubtleBorder" | "pink" | "pinkHover" | "pinkActive" | "pinkForeground" | "pinkSubtle" | "pinkSubtleHover" | "pinkSubtleActive" | "pinkSubtleForeground" | "pinkSubtleBorder" | "orange" | "orangeHover" | "orangeActive" | "orangeForeground" | "orangeSubtle" | "orangeSubtleHover" | "orangeSubtleActive" | "orangeSubtleForeground" | "orangeSubtleBorder" | "teal" | "tealHover" | "tealActive" | "tealForeground" | "tealSubtle" | "tealSubtleHover" | "tealSubtleActive" | "tealSubtleForeground" | "tealSubtleBorder" | "cyan" | "cyanHover" | "cyanActive" | "cyanForeground" | "cyanSubtle" | "cyanSubtleHover" | "cyanSubtleActive" | "cyanSubtleForeground" | "cyanSubtleBorder" | "indigo" | "indigoHover" | "indigoActive" | "indigoForeground" | "indigoSubtle" | "indigoSubtleHover" | "indigoSubtleActive" | "indigoSubtleForeground" | "indigoSubtleBorder" | "border" | "borderStrong" | "input" | "ring" | "highlight" | "highlightForeground" | "skeleton" | "skeletonForeground" | "transparent", Record<string, string>>;
     }>;
 };
-export type SeparatorRecipeVariants = NonNullable<RecipeVariants<typeof SEPARATOR_STYLES.recipe>>;

package/dist/components/layout/separator/types/Separator.props.d.ts

@@ -1,8 +1,8 @@
 import { BoxProps } from '../../box/types/Box.props.ts';
-import { SeparatorRecipeVariants } from '../styles/Separator.css.ts';
-export type SeparatorProps = Omit<BoxProps, 'children'> & {
+import { SeparatorColor, SeparatorOrientation } from './Separator.types.ts';
+export type SeparatorProps = Omit<BoxProps, 'children' | 'aria-orientation'> & {
     /** The orientation of the separator. Defaults to `horizontal`. */
-    orientation?: SeparatorRecipeVariants['orientation'];
+    orientation?: SeparatorOrientation;
     /** The theme color token applied to the separator's background color. */
-    color?: SeparatorRecipeVariants['color'];
+    color?: SeparatorColor;
 };

package/dist/components/layout/separator/types/Separator.types.d.ts

@@ -1,2 +1,6 @@
+import { ThemeColorValue } from '../../../../theme/types/index.ts';
+import { SEPARATOR_ORIENTATIONS } from '../constants';
 /** Orientation values for the Separator component. */
-export type SeparatorOrientation = 'horizontal' | 'vertical';
+export type SeparatorOrientation = (typeof SEPARATOR_ORIENTATIONS)[keyof typeof SEPARATOR_ORIENTATIONS];
+/** Theme colors supported by the Separator component. */
+export type SeparatorColor = ThemeColorValue;

package/dist/components/navigation/tabs/components/tabs-content/TabsContent.cjs

@@ -1,2 +1,2 @@
-"use strict";const n=require("react/jsx-runtime"),o=require("react"),r=require("@base-ui/react/tabs"),c=require("./styles/TabsContent.css.cjs"),a=require("../../../../../utils/cn.cjs"),e=o.memo(({className:s,...t})=>n.jsx(r.Tabs.Panel,{className:a.cn(c.TABS_CONTENT_STYLES.root,s),...t}));e.displayName="Tabs.Content";module.exports=e;
+"use strict";const n=require("react/jsx-runtime"),r=require("react"),o=require("@base-ui/react/tabs"),c=require("./styles/TabsContent.css.cjs"),a=require("../../../../../utils/cn.cjs"),e=r.memo(({className:s,...t})=>n.jsx(o.Tabs.Panel,{className:a.cn(c.TABS_CONTENT_STYLES.root,s),...t}));e.displayName="Tabs.Content";module.exports=e;
 //# sourceMappingURL=TabsContent.cjs.map

package/dist/components/navigation/tabs/components/tabs-list/TabsList.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),n=require("react"),o=require("@base-ui/react/tabs"),u=require("./styles/TabsList.css.cjs"),T=require("../../context/TabsVariant.context.cjs"),b=require("../../../../../utils/cn.cjs"),t=n.memo(({className:a,variant:s="default",bordered:c=!1,activationMode:i,...r})=>e.jsx(T.TabsVariantContext.Provider,{value:{variant:s},children:e.jsx(o.Tabs.List,{className:b.cn(u.TABS_LIST_STYLES.recipe({variant:s,bordered:c}),a),activateOnFocus:i==="automatic",...r})}));t.displayName="Tabs.List";module.exports=t;
+"use strict";const e=require("react/jsx-runtime"),n=require("react"),o=require("@base-ui/react/tabs"),u=require("./styles/TabsList.css.cjs"),T=require("../../context/TabsVariant.context.cjs"),b=require("../../../../../utils/cn.cjs"),t=n.memo(({className:a,variant:s="default",bordered:r=!1,activationMode:c,...i})=>e.jsx(T.TabsVariantContext.Provider,{value:{variant:s},children:e.jsx(o.Tabs.List,{className:b.cn(u.TABS_LIST_STYLES.recipe({variant:s,bordered:r}),a),activateOnFocus:c==="automatic",...i})}));t.displayName="Tabs.List";module.exports=t;
 //# sourceMappingURL=TabsList.cjs.map

package/dist/components/navigation/tabs/components/tabs-trigger/types/TabsTrigger.props.d.ts

@@ -4,7 +4,7 @@ export type TabsTriggerProps = Omit<Tabs.Tab.Props, 'children' | 'render'> & {
     /** Overrides the default content-based (`fit-content`) width of the trigger. */
     width?: CSSProperties['width'];
     /** The text content rendered inside the trigger via the Typography component. */
-    label?: string;
+    label: string;
     /** Iconify icon name rendered before the label. */
     startIcon?: string;
     /** Iconify icon name rendered after the label. */

package/dist/components/overlay/dialog/components/dialog-close/DialogClose.cjs

@@ -1,2 +1,2 @@
-"use strict";const i=require("react/jsx-runtime"),r=require("@base-ui/react/dialog"),t=require("react"),e=t.memo(({children:o,...s})=>i.jsx(r.Dialog.Close,{...s,render:o}));e.displayName="Dialog.Close";module.exports=e;
+"use strict";const r=require("react/jsx-runtime"),i=require("@base-ui/react/dialog"),t=require("react"),e=t.memo(({children:o,...s})=>r.jsx(i.Dialog.Close,{...s,render:o}));e.displayName="Dialog.Close";module.exports=e;
 //# sourceMappingURL=DialogClose.cjs.map

package/dist/components/overlay/dialog/components/dialog-content/DialogContent.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),a=require("@base-ui/react/dialog"),g=require("react"),o=require("../../styles/Dialog.css.cjs"),m=require("../../../../../utils/cn.cjs"),i=g.memo(({className:l,size:t="md","aria-label":r,"aria-labelledby":s,defaultAriaLabel:c="Dialog",children:n,...D})=>{const u=r??(s?void 0:c);return e.jsxs(a.Dialog.Portal,{children:[e.jsx(a.Dialog.Backdrop,{className:o.DIALOG_STYLES.overlay}),e.jsx(a.Dialog.Popup,{className:m.cn(o.DIALOG_STYLES.content,o.DIALOG_STYLES.contentSize[t],l),"aria-label":u,"aria-labelledby":s,...D,children:n})]})});i.displayName="Dialog.Content";module.exports=i;
+"use strict";const e=require("react/jsx-runtime"),a=require("@base-ui/react/dialog"),g=require("react"),o=require("../../styles/Dialog.css.cjs"),m=require("../../../../../utils/cn.cjs"),i=g.memo(({className:l,size:r="md","aria-label":t,"aria-labelledby":s,defaultAriaLabel:c="Dialog",children:n,...D})=>{const u=t??(s?void 0:c);return e.jsxs(a.Dialog.Portal,{children:[e.jsx(a.Dialog.Backdrop,{className:o.DIALOG_STYLES.overlay}),e.jsx(a.Dialog.Popup,{className:m.cn(o.DIALOG_STYLES.content,o.DIALOG_STYLES.contentSize[r],l),"aria-label":u,"aria-labelledby":s,...D,children:n})]})});i.displayName="Dialog.Content";module.exports=i;
 //# sourceMappingURL=DialogContent.cjs.map

package/dist/components/overlay/dialog/components/dialog-footer/DialogFooter.cjs

@@ -1,2 +1,2 @@
-"use strict";const c=require("react/jsx-runtime"),a=require("react"),l=require("../../../../layout/flex/Flex.cjs");require("../../../../layout/flex/styles/Flex.css.cjs");const e=a.memo(({as:o="div",justifyContent:r="end",gap:t="sm",padding:s="lg",paddingTop:i="none",...n})=>c.jsx(l,{as:o,alignItems:"center",justifyContent:r,gap:t,padding:s,paddingTop:i,...n}));e.displayName="Dialog.Footer";module.exports=e;
+"use strict";const c=require("react/jsx-runtime"),a=require("react"),l=require("../../../../layout/flex/Flex.cjs");require("../../../../layout/flex/styles/Flex.css.cjs");const e=a.memo(({as:r="div",justifyContent:o="end",gap:t="sm",padding:s="lg",paddingTop:i="none",...n})=>c.jsx(l,{as:r,alignItems:"center",justifyContent:o,gap:t,padding:s,paddingTop:i,...n}));e.displayName="Dialog.Footer";module.exports=e;
 //# sourceMappingURL=DialogFooter.cjs.map