@stokelp/styled-system 1.9.0 → 1.10.0

package/css/css.d.ts

@@ -1,9 +1,22 @@
 /* eslint-disable */
 import type { SystemStyleObject } from '../types/index';
 
+type Styles = SystemStyleObject | undefined | null | false
+
+interface CssRawFunction {
+  (styles: Styles): SystemStyleObject
+  (styles: Styles[]): SystemStyleObject
+  (...styles: Array<Styles | Styles[]>): SystemStyleObject
+  (styles: Styles): SystemStyleObject
+}
+
 interface CssFunction {
-  (...styles: Array<SystemStyleObject | undefined | null | false>): string
-  raw: (...styles: Array<SystemStyleObject | undefined | null | false>) => SystemStyleObject
+  (styles: Styles): string
+  (styles: Styles[]): string
+  (...styles: Array<Styles | Styles[]>): string
+  (styles: Styles): string
+
+  raw: CssRawFunction
 }
 
 export declare const css: CssFunction;

package/helpers.mjs

@@ -180,7 +180,7 @@ function createCss(context) {
   });
 }
 function compactStyles(...styles) {
-  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
+  return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
 }
 function createMergeCss(context) {
   function resolve(styles) {

package/jsx/aspect-ratio.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs';
 import { styled } from './factory.mjs';

package/jsx/bleed.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getBleedStyle } from '../patterns/bleed.mjs';
 import { styled } from './factory.mjs';

package/jsx/box.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getBoxStyle } from '../patterns/box.mjs';
 import { styled } from './factory.mjs';

package/jsx/center.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getCenterStyle } from '../patterns/center.mjs';
 import { styled } from './factory.mjs';

package/jsx/circle.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getCircleStyle } from '../patterns/circle.mjs';
 import { styled } from './factory.mjs';

package/jsx/container.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getContainerStyle } from '../patterns/container.mjs';
 import { styled } from './factory.mjs';

package/jsx/cq.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getCqStyle } from '../patterns/cq.mjs';
 import { styled } from './factory.mjs';

package/jsx/divider.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getDividerStyle } from '../patterns/divider.mjs';
 import { styled } from './factory.mjs';

package/jsx/flex.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getFlexStyle } from '../patterns/flex.mjs';
 import { styled } from './factory.mjs';

package/jsx/float.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getFloatStyle } from '../patterns/float.mjs';
 import { styled } from './factory.mjs';

package/jsx/grid-item.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getGridItemStyle } from '../patterns/grid-item.mjs';
 import { styled } from './factory.mjs';

package/jsx/grid.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getGridStyle } from '../patterns/grid.mjs';
 import { styled } from './factory.mjs';

package/jsx/hstack.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getHstackStyle } from '../patterns/hstack.mjs';
 import { styled } from './factory.mjs';

package/jsx/index.d.ts

@@ -10,7 +10,6 @@ export * from './spacer';
 export * from './square';
 export * from './circle';
 export * from './center';
-export * from './link-box';
 export * from './link-overlay';
 export * from './aspect-ratio';
 export * from './grid';

package/jsx/index.mjs

@@ -9,7 +9,6 @@ export * from './spacer.mjs';
 export * from './square.mjs';
 export * from './circle.mjs';
 export * from './center.mjs';
-export * from './link-box.mjs';
 export * from './link-overlay.mjs';
 export * from './aspect-ratio.mjs';
 export * from './grid.mjs';

package/jsx/link-overlay.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs';
 import { styled } from './factory.mjs';

package/jsx/spacer.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getSpacerStyle } from '../patterns/spacer.mjs';
 import { styled } from './factory.mjs';

package/jsx/square.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getSquareStyle } from '../patterns/square.mjs';
 import { styled } from './factory.mjs';

package/jsx/stack.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getStackStyle } from '../patterns/stack.mjs';
 import { styled } from './factory.mjs';

package/jsx/visually-hidden.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs';
 import { styled } from './factory.mjs';

package/jsx/vstack.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getVstackStyle } from '../patterns/vstack.mjs';
 import { styled } from './factory.mjs';

package/jsx/wrap.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getWrapStyle } from '../patterns/wrap.mjs';
 import { styled } from './factory.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokelp/styled-system",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Stokelp UI styled-system",
   "type": "module",
   "publishConfig": {
@@ -56,7 +56,7 @@
     "./panda.buildinfo.json": "./panda.buildinfo.json"
   },
   "devDependencies": {
-    "@pandacss/dev": "^0.37.2"
+    "@pandacss/dev": "^0.41.0"
   },
   "release": {
     "monorepo": {

package/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "0.37.2",
+  "schemaVersion": "0.41.0",
   "styles": {
     "atomic": [
       "padding]___[value:space-8",

package/patterns/index.d.ts

@@ -8,7 +8,6 @@ export * from './spacer';
 export * from './square';
 export * from './circle';
 export * from './center';
-export * from './link-box';
 export * from './link-overlay';
 export * from './aspect-ratio';
 export * from './grid';

package/patterns/index.mjs

@@ -7,7 +7,6 @@ export * from './spacer.mjs';
 export * from './square.mjs';
 export * from './circle.mjs';
 export * from './center.mjs';
-export * from './link-box.mjs';
 export * from './link-overlay.mjs';
 export * from './aspect-ratio.mjs';
 export * from './grid.mjs';

package/patterns/link-overlay.mjs

@@ -4,12 +4,9 @@ import { css } from '../css/index.mjs';
 const linkOverlayConfig = {
 transform(props8) {
   return {
-    position: "static",
     _before: {
       content: '""',
-      display: "block",
       position: "absolute",
-      cursor: "inherit",
       inset: "0",
       zIndex: "0",
       ...props8["_before"]

package/recipes/accordion.d.ts

@@ -3,7 +3,10 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface AccordionVariant {
-  size: "md"
+  /**
+ * @default "md"
+ */
+size: "md"
 }
 
 type AccordionVariantMap = {

package/recipes/button.d.ts

@@ -3,8 +3,17 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface ButtonVariant {
-  size: "lg" | "md" | "sm"
+  /**
+ * @default "lg"
+ */
+size: "lg" | "md" | "sm"
+/**
+ * @default "primary"
+ */
 variant: "primary" | "secondary" | "tertiary"
+/**
+ * @default "none"
+ */
 severity: "none" | "danger"
 }
 
@@ -26,5 +35,9 @@ export interface ButtonRecipe {
   getVariantProps: (props?: ButtonVariantProps) => ButtonVariantProps
 }
 
-/** The styles for the Button component */
+/**
+ * The styles for the Button component
+
+
+ */
 export declare const button: ButtonRecipe

package/recipes/checkbox.d.ts

@@ -3,7 +3,10 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface CheckboxVariant {
-  size: "md"
+  /**
+ * @default "md"
+ */
+size: "md"
 }
 
 type CheckboxVariantMap = {
@@ -16,7 +19,7 @@ export type CheckboxVariantProps = {
 
 export interface CheckboxRecipe {
   __type: CheckboxVariantProps
-  (props?: CheckboxVariantProps): Pretty<Record<"root" | "label" | "control" | "indicator", string>>
+  (props?: CheckboxVariantProps): Pretty<Record<"root" | "label" | "control" | "indicator" | "group", string>>
   raw: (props?: CheckboxVariantProps) => CheckboxVariantProps
   variantMap: CheckboxVariantMap
   variantKeys: Array<keyof CheckboxVariant>

package/recipes/checkbox.mjs

@@ -22,6 +22,10 @@ const checkboxSlotNames = [
   [
     "indicator",
     "checkbox__indicator"
+  ],
+  [
+    "group",
+    "checkbox__group"
   ]
 ]
 const checkboxSlotFns = /* @__PURE__ */ checkboxSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, checkboxDefaultVariants, getSlotCompoundVariant(checkboxCompoundVariants, slotName))])

package/recipes/drawer.d.ts

@@ -3,7 +3,10 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface DrawerVariant {
-  variant: "left" | "right"
+  /**
+ * @default "right"
+ */
+variant: "left" | "right"
 }
 
 type DrawerVariantMap = {

package/recipes/form-control.d.ts

@@ -24,5 +24,9 @@ export interface FormControlRecipe {
   getVariantProps: (props?: FormControlVariantProps) => FormControlVariantProps
 }
 
-/** The styles for the FormControl component */
+/**
+ * The styles for the FormControl component
+
+
+ */
 export declare const formControl: FormControlRecipe

package/recipes/form-helper-text.d.ts

@@ -24,5 +24,9 @@ export interface FormHelperTextRecipe {
   getVariantProps: (props?: FormHelperTextVariantProps) => FormHelperTextVariantProps
 }
 
-/** The styles for the FormHelperText component */
+/**
+ * The styles for the FormHelperText component
+
+
+ */
 export declare const formHelperText: FormHelperTextRecipe

package/recipes/form-label.d.ts

@@ -3,7 +3,10 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface FormLabelVariant {
-  variant: "static" | "absolute"
+  /**
+ * @default "absolute"
+ */
+variant: "static" | "absolute"
 }
 
 type FormLabelVariantMap = {
@@ -24,5 +27,9 @@ export interface FormLabelRecipe {
   getVariantProps: (props?: FormLabelVariantProps) => FormLabelVariantProps
 }
 
-/** The styles for the FormLabel component */
+/**
+ * The styles for the FormLabel component
+
+
+ */
 export declare const formLabel: FormLabelRecipe

package/recipes/heading.d.ts

@@ -5,6 +5,9 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 interface HeadingVariant {
   italic: boolean
 underline: boolean
+/**
+ * @default "h2"
+ */
 size: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
 }
 

package/recipes/input-addon.d.ts

@@ -24,5 +24,9 @@ export interface InputAddonRecipe {
   getVariantProps: (props?: InputAddonVariantProps) => InputAddonVariantProps
 }
 
-/** The styles for the InputAddon component */
+/**
+ * The styles for the InputAddon component
+
+
+ */
 export declare const inputAddon: InputAddonRecipe

package/recipes/input-group.d.ts

@@ -24,5 +24,9 @@ export interface InputGroupRecipe {
   getVariantProps: (props?: InputGroupVariantProps) => InputGroupVariantProps
 }
 
-/** The styles for the InputGroup component */
+/**
+ * The styles for the InputGroup component
+
+
+ */
 export declare const inputGroup: InputGroupRecipe

package/recipes/input.d.ts

@@ -3,7 +3,10 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface InputVariant {
-  size: "md"
+  /**
+ * @default "md"
+ */
+size: "md"
 }
 
 type InputVariantMap = {
@@ -24,5 +27,9 @@ export interface InputRecipe {
   getVariantProps: (props?: InputVariantProps) => InputVariantProps
 }
 
-/** The styles for the Input component */
+/**
+ * The styles for the Input component
+
+
+ */
 export declare const input: InputRecipe

package/recipes/select.d.ts

@@ -3,7 +3,10 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface SelectVariant {
-  size: "md"
+  /**
+ * @default "md"
+ */
+size: "md"
 }
 
 type SelectVariantMap = {
@@ -16,7 +19,7 @@ export type SelectVariantProps = {
 
 export interface SelectRecipe {
   __type: SelectVariantProps
-  (props?: SelectVariantProps): Pretty<Record<"label" | "positioner" | "trigger" | "indicator" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "content" | "root" | "control" | "valueText", string>>
+  (props?: SelectVariantProps): Pretty<Record<"label" | "positioner" | "trigger" | "indicator" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "list" | "content" | "root" | "control" | "valueText", string>>
   raw: (props?: SelectVariantProps) => SelectVariantProps
   variantMap: SelectVariantMap
   variantKeys: Array<keyof SelectVariant>

package/recipes/select.mjs

@@ -47,6 +47,10 @@ const selectSlotNames = [
     "itemGroupLabel",
     "select__itemGroupLabel"
   ],
+  [
+    "list",
+    "select__list"
+  ],
   [
     "content",
     "select__content"

package/recipes/switch-recipe.d.ts

@@ -3,7 +3,10 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface SwitchRecipeVariant {
-  size: "md"
+  /**
+ * @default "md"
+ */
+size: "md"
 }
 
 type SwitchRecipeVariantMap = {

package/recipes/tabs.d.ts

@@ -3,7 +3,10 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface TabsVariant {
-  variant: "line"
+  /**
+ * @default "line"
+ */
+variant: "line"
 }
 
 type TabsVariantMap = {

package/recipes/tag.d.ts

@@ -3,7 +3,13 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface TagVariant {
-  size: "lg" | "md" | "sm"
+  /**
+ * @default "md"
+ */
+size: "lg" | "md" | "sm"
+/**
+ * @default "neutral"
+ */
 severity: "success" | "warning" | "error" | "neutral"
 }
 
@@ -25,5 +31,9 @@ export interface TagRecipe {
   getVariantProps: (props?: TagVariantProps) => TagVariantProps
 }
 
-/** The styles for the Tag component */
+/**
+ * The styles for the Tag component
+
+
+ */
 export declare const tag: TagRecipe

package/recipes/text.d.ts

@@ -6,6 +6,9 @@ interface TextVariant {
   bold: boolean
 italic: boolean
 underline: boolean
+/**
+ * @default "md"
+ */
 size: "lg" | "md" | "sm"
 }
 

package/tokens/tokens.d.ts

@@ -37,8 +37,6 @@ export type ZIndexToken = "banner" | "base" | "docked" | "dropdown" | "hide" | "
 
 export type BreakpointToken = "xl" | "lg" | "md" | "sm"
 
-export type AnimationName = "blob" | "bounce" | "fade-in" | "fade-out" | "fadeIn" | "fadeInFromRight" | "fadeInSkew" | "fadeOut" | "fadeOutFromRight" | "fadeOutSkew" | "ping" | "pulse" | "skeleton-pulse" | "slide-in" | "slide-in-left" | "slide-in-modal" | "slide-in-right" | "slide-out" | "slide-out-left" | "slide-out-modal" | "slide-out-right" | "slideInFromBottom" | "slideOutToBottom" | "collapse-in" | "collapse-out" | "spin"
-
 export type Tokens = {
 		animations: AnimationToken
 		aspectRatios: AspectRatioToken
@@ -57,7 +55,6 @@ export type Tokens = {
 		spacing: SpacingToken
 		zIndex: ZIndexToken
 		breakpoints: BreakpointToken
-		animationName: AnimationName
 } & { [token: string]: never }
 
 export type TokenCategory = "aspectRatios" | "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "borderWidths" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets"

package/types/composition.d.ts

@@ -15,34 +15,61 @@ interface Recursive<T> {
  * -----------------------------------------------------------------------------*/
 
 type TextStyleProperty =
+  | 'font'
+  | 'fontFamily'
+  | 'fontFeatureSettings'
+  | 'fontKerning'
+  | 'fontLanguageOverride'
+  | 'fontOpticalSizing'
+  | 'fontPalette'
   | 'fontSize'
   | 'fontSizeAdjust'
-  | 'fontVariationSettings'
-  | 'fontVariantPosition'
-  | 'fontVariantCaps'
-  | 'fontVariantNumeric'
+  | 'fontStretch'
+  | 'fontStyle'
+  | 'fontSynthesis'
+  | 'fontVariant'
   | 'fontVariantAlternates'
+  | 'fontVariantCaps'
   | 'fontVariantLigatures'
-  | 'fontFamily'
+  | 'fontVariantNumeric'
+  | 'fontVariantPosition'
+  | 'fontVariationSettings'
   | 'fontWeight'
-  | 'fontSynthesis'
-  | 'fontStyle'
-  | 'fontVariant'
-  | 'lineHeight'
+  | 'hypens'
+  | 'hyphenateCharacter'
+  | 'hyphenateLimitChars'
   | 'letterSpacing'
+  | 'lineBreak'
+  | 'lineHeight'
+  | 'quotes'
+  | 'overflowWrap'
+  | 'textCombineUpright'
   | 'textDecoration'
-  | 'textTransform'
-  | 'textIndent'
   | 'textDecorationColor'
   | 'textDecorationLine'
+  | 'textDecorationSkipInk'
   | 'textDecorationStyle'
+  | 'textDecorationThickness'
+  | 'textEmphasis'
   | 'textEmphasisColor'
   | 'textEmphasisPosition'
   | 'textEmphasisStyle'
-  | 'hyphenateCharacter'
+  | 'textIndent'
+  | 'textJustify'
   | 'textOrientation'
   | 'textOverflow'
   | 'textRendering'
+  | 'textShadow'
+  | 'textTransform'
+  | 'textUnderlineOffset'
+  | 'textUnderlinePosition'
+  | 'textWrap'
+  | 'textWrapMode'
+  | 'textWrapStyle'
+  | 'verticalAlign'
+  | 'whiteSpace'
+  | 'wordBreak'
+  | 'wordSpacing'
 
 export type TextStyle = CompositionStyleObject<TextStyleProperty>
 

package/types/pattern.d.ts

@@ -50,6 +50,10 @@ export interface PatternConfig<T extends PatternProperties = PatternProperties>
    * The css object this pattern will generate.
    */
   transform?: (props: InferProps<T>, helpers: PatternHelpers) => SystemStyleObject
+  /**
+   * Whether the pattern is deprecated.
+   */
+  deprecated?: boolean | string
   /**
    * The jsx element name this pattern will generate.
    */

package/types/prop-type.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import type { Conditional } from './conditions';
+import type { ConditionalValue } from './conditions';
 import type { CssProperties } from './system-types';
 import type { Tokens } from '../tokens/index';
 
@@ -17,7 +17,7 @@ export interface UtilityValues {
 	insetInlineStart: Tokens["spacing"];
 	right: Tokens["spacing"];
 	bottom: Tokens["spacing"];
-	float: "left" | "right" | "start" | "end";
+	float: "start" | "end" | CssProperties["float"];
 	hideFrom: Tokens["breakpoints"];
 	hideBelow: Tokens["breakpoints"];
 	flexBasis: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "full";
@@ -146,6 +146,7 @@ export interface UtilityValues {
 	transitionDuration: Tokens["durations"];
 	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
+	animationName: "blob" | "bounce" | "fade-in" | "fade-out" | "fadeIn" | "fadeInFromRight" | "fadeInSkew" | "fadeOut" | "fadeOutFromRight" | "fadeOutSkew" | "ping" | "pulse" | "skeleton-pulse" | "slide-in" | "slide-in-left" | "slide-in-modal" | "slide-in-right" | "slide-out" | "slide-out-left" | "slide-out-modal" | "slide-out-right" | "slideInFromBottom" | "slideOutToBottom" | "collapse-in" | "collapse-out" | "spin";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];

package/types/recipe.d.ts

@@ -64,6 +64,10 @@ export interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantR
    * The base styles of the recipe.
    */
   base?: SystemStyleObject
+  /**
+   * Whether the recipe is deprecated.
+   */
+  deprecated?: boolean | string
   /**
    * The multi-variant styles of the recipe.
    */
@@ -141,6 +145,10 @@ export interface SlotRecipeDefinition<
    * An optional class name that can be used to target slots in the DOM.
    */
   className?: string
+  /**
+   * Whether the recipe is deprecated.
+   */
+  deprecated?: boolean | string
   /**
    * The parts/slots of the recipe.
    */

package/types/style-props.d.ts

@@ -429,7 +429,7 @@ animationIterationCount?: ConditionalValue<CssProperties["animationIterationCoun
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/animation-name
    */
-animationName?: ConditionalValue<CssProperties["animationName"] | AnyString>
+animationName?: ConditionalValue<UtilityValues["animationName"] | CssVars | CssProperties["animationName"] | AnyString>
  /**
    * The **`animation-play-state`** CSS property sets whether an animation is running or paused.
    *

package/types/system-types.d.ts

@@ -66,11 +66,10 @@ export type CompositionStyleObject<Property extends string> = Nested<FilterStyle
  * Jsx style props
  * -----------------------------------------------------------------------------*/
 interface WithCss {
-  css?: SystemStyleObject
+  css?: SystemStyleObject | SystemStyleObject[]
 }
-type StyleProps = SystemStyleObject & WithCss
 
-export type JsxStyleProps = StyleProps & WithCss
+export type JsxStyleProps = SystemStyleObject & WithCss
 
 export interface PatchedHTMLProps {
   htmlWidth?: string | number

package/jsx/link-box.d.ts

@@ -1,10 +0,0 @@
-/* eslint-disable */
-import type { FunctionComponent } from 'react'
-import type { LinkBoxProperties } from '../patterns/link-box';
-import type { HTMLStyledProps } from '../types/jsx';
-import type { DistributiveOmit } from '../types/system-types';
-
-export interface LinkBoxProps extends LinkBoxProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof LinkBoxProperties > {}
-
-
-export declare const LinkBox: FunctionComponent<LinkBoxProps>

package/jsx/link-box.mjs

@@ -1,14 +0,0 @@
-import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
-import { splitProps } from '../helpers.mjs';
-import { getLinkBoxStyle } from '../patterns/link-box.mjs';
-import { styled } from './factory.mjs';
-
-export const LinkBox = /* @__PURE__ */ forwardRef(function LinkBox(props, ref) {
-  const [patternProps, restProps] = splitProps(props, [])
-
-const styleProps = getLinkBoxStyle(patternProps)
-const mergedProps = { ref, ...styleProps, ...restProps }
-
-return createElement(styled.div, mergedProps)
-  })

package/patterns/link-box.d.ts

@@ -1,21 +0,0 @@
-/* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types/index';
-import type { Properties } from '../types/csstype';
-import type { SystemProperties } from '../types/style-props';
-import type { DistributiveOmit } from '../types/system-types';
-import type { Tokens } from '../tokens/index';
-
-export interface LinkBoxProperties {
-   
-}
-
-
-interface LinkBoxStyles extends LinkBoxProperties, DistributiveOmit<SystemStyleObject, keyof LinkBoxProperties > {}
-
-interface LinkBoxPatternFn {
-  (styles?: LinkBoxStyles): string
-  raw: (styles?: LinkBoxStyles) => SystemStyleObject
-}
-
-
-export declare const linkBox: LinkBoxPatternFn;

package/patterns/link-box.mjs

@@ -1,22 +0,0 @@
-import { getPatternStyles, patternFns } from '../helpers.mjs';
-import { css } from '../css/index.mjs';
-
-const linkBoxConfig = {
-transform(props8) {
-  return {
-    position: "relative",
-    "& :where(a, abbr)": {
-      position: "relative",
-      zIndex: "1"
-    },
-    ...props8
-  };
-}}
-
-export const getLinkBoxStyle = (styles = {}) => {
-  const _styles = getPatternStyles(linkBoxConfig, styles)
-  return linkBoxConfig.transform(_styles, patternFns)
-}
-
-export const linkBox = (styles) => css(getLinkBoxStyle(styles))
-linkBox.raw = getLinkBoxStyle