@luxonis/common-fe-components 1.18.2 → 1.19.0

package/dist/styled-system/types/prop-type.d.mts

@@ -3,24 +3,31 @@ import type { ConditionalValue } from './conditions.d.mts';
 import type { CssProperties } from './system-types.d.mts';
 import type { Tokens } from '../tokens/index.d.mts';
 
-export interface UtilityValues {
-	aspectRatio: Tokens["aspectRatios"];
+interface PropertyValueTypes {
+	aspectRatio: "auto" | "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden";
+	zIndex: Tokens["zIndex"];
 	top: Tokens["spacing"];
 	left: Tokens["spacing"];
-	inset: "auto" | Tokens["spacing"];
 	insetInline: Tokens["spacing"];
 	insetBlock: Tokens["spacing"];
+	inset: "auto" | Tokens["spacing"];
 	insetBlockEnd: Tokens["spacing"];
 	insetBlockStart: Tokens["spacing"];
 	insetInlineEnd: Tokens["spacing"];
 	insetInlineStart: Tokens["spacing"];
 	right: Tokens["spacing"];
 	bottom: Tokens["spacing"];
-	float: "start" | "end" | CssProperties["float"];
+	insetX: Tokens["spacing"] | CssProperties["insetInline"];
+	insetY: Tokens["spacing"] | CssProperties["insetBlock"];
+	float: "left" | "right" | "start" | "end";
 	hideFrom: Tokens["breakpoints"];
 	hideBelow: Tokens["breakpoints"];
-	flexBasis: Tokens["sizes"] | "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";
+	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";
 	flex: "1" | "auto" | "initial" | "none";
+	gridTemplateColumns: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+	gridTemplateRows: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+	gridColumn: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full";
+	gridRow: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full";
 	gridAutoColumns: "min" | "max" | "fr";
 	gridAutoRows: "min" | "max" | "fr";
 	gap: Tokens["spacing"];
@@ -51,11 +58,12 @@ export interface UtilityValues {
 	marginInline: "auto" | Tokens["spacing"];
 	marginInlineEnd: "auto" | Tokens["spacing"];
 	marginInlineStart: "auto" | Tokens["spacing"];
-	spaceX: Tokens["spacing"] | CssProperties["marginInlineStart"];
-	spaceY: Tokens["spacing"] | CssProperties["marginBlockStart"];
+	outlineWidth: Tokens["borderWidths"];
 	outlineColor: Tokens["colors"];
 	outline: Tokens["borders"];
 	outlineOffset: Tokens["spacing"];
+	divideX: string;
+	divideY: string;
 	divideColor: Tokens["colors"];
 	divideStyle: CssProperties["borderStyle"];
 	width: "auto" | Tokens["sizes"] | "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" | "screen";
@@ -81,13 +89,14 @@ export interface UtilityValues {
 	textEmphasisColor: Tokens["colors"];
 	textIndent: Tokens["spacing"];
 	textShadow: Tokens["shadows"];
-	textShadowColor: Tokens["colors"];
 	textWrap: "wrap" | "balance" | "nowrap";
 	truncate: boolean;
+	listStyleImage: Tokens["assets"];
 	background: Tokens["colors"];
 	backgroundColor: Tokens["colors"];
-	backgroundGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
-	textGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+	backgroundImage: Tokens["assets"];
+	backgroundGradient: Tokens["gradients"] | "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+	textGradient: Tokens["gradients"] | "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
 	gradientFrom: Tokens["colors"];
 	gradientTo: Tokens["colors"];
 	gradientVia: Tokens["colors"];
@@ -107,18 +116,27 @@ export interface UtilityValues {
 	borderEndEndRadius: Tokens["radii"];
 	borderEndRadius: Tokens["radii"] | CssProperties["borderRadius"];
 	border: Tokens["borders"];
+	borderWidth: Tokens["borderWidths"];
+	borderTopWidth: Tokens["borderWidths"];
+	borderLeftWidth: Tokens["borderWidths"];
+	borderRightWidth: Tokens["borderWidths"];
+	borderBottomWidth: Tokens["borderWidths"];
 	borderColor: Tokens["colors"];
 	borderInline: Tokens["borders"];
+	borderInlineWidth: Tokens["borderWidths"];
 	borderInlineColor: Tokens["colors"];
 	borderBlock: Tokens["borders"];
+	borderBlockWidth: Tokens["borderWidths"];
 	borderBlockColor: Tokens["colors"];
 	borderLeft: Tokens["borders"];
 	borderLeftColor: Tokens["colors"];
 	borderInlineStart: Tokens["borders"];
+	borderInlineStartWidth: Tokens["borderWidths"];
 	borderInlineStartColor: Tokens["colors"];
 	borderRight: Tokens["borders"];
 	borderRightColor: Tokens["colors"];
 	borderInlineEnd: Tokens["borders"];
+	borderInlineEndWidth: Tokens["borderWidths"];
 	borderInlineEndColor: Tokens["colors"];
 	borderTop: Tokens["borders"];
 	borderTopColor: Tokens["colors"];
@@ -132,10 +150,11 @@ export interface UtilityValues {
 	boxShadow: Tokens["shadows"];
 	boxShadowColor: Tokens["colors"];
 	filter: "auto";
+	dropShadow: Tokens["dropShadows"];
 	blur: Tokens["blurs"];
 	backdropFilter: "auto";
 	backdropBlur: "none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | CssProperties["backdropFilter"];
-	borderSpacing: Tokens["spacing"] | "auto";
+	borderSpacing: Tokens["spacing"];
 	borderSpacingX: Tokens["spacing"];
 	borderSpacingY: Tokens["spacing"];
 	transitionTimingFunction: Tokens["easings"];
@@ -143,25 +162,18 @@ export interface UtilityValues {
 	transitionDuration: Tokens["durations"];
 	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
-	animationName: "spin" | "ping" | "pulse" | "bounce" | "enter" | "exit" | "accordion-down" | "accordion-up";
-	animationTimingFunction: Tokens["easings"];
-	animationDuration: Tokens["durations"];
+	animationName: Tokens["animationName"];
 	animationDelay: Tokens["durations"];
-	rotate: "auto" | "auto-3d" | CssProperties["rotate"];
-	rotateX: CssProperties["rotate"];
-	rotateY: CssProperties["rotate"];
-	rotateZ: CssProperties["rotate"];
 	scale: "auto" | CssProperties["scale"];
 	translate: Tokens["spacing"] | CssProperties["translate"];
 	translateX: Tokens["spacing"];
 	translateY: Tokens["spacing"];
-	translateZ: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
 	accentColor: Tokens["colors"];
 	caretColor: Tokens["colors"];
 	scrollbar: "visible" | "hidden";
-	scrollbarColor: Tokens["colors"];
-	scrollbarWidth: Tokens["sizes"];
 	scrollMargin: Tokens["spacing"];
+	scrollMarginX: Tokens["spacing"] | CssProperties["scrollMarginInline"];
+	scrollMarginY: Tokens["spacing"] | CssProperties["scrollMarginBlock"];
 	scrollMarginLeft: Tokens["spacing"];
 	scrollMarginRight: Tokens["spacing"];
 	scrollMarginTop: Tokens["spacing"];
@@ -179,6 +191,8 @@ export interface UtilityValues {
 	scrollPaddingInline: Tokens["spacing"];
 	scrollPaddingInlineEnd: Tokens["spacing"];
 	scrollPaddingInlineStart: Tokens["spacing"];
+	scrollPaddingX: Tokens["spacing"] | CssProperties["scrollPaddingInline"];
+	scrollPaddingY: Tokens["spacing"] | CssProperties["scrollPaddingBlock"];
 	scrollPaddingLeft: Tokens["spacing"];
 	scrollPaddingRight: Tokens["spacing"];
 	scrollPaddingTop: Tokens["spacing"];
@@ -192,10 +206,9 @@ export interface UtilityValues {
 	scrollSnapMarginRight: Tokens["spacing"];
 	fill: Tokens["colors"];
 	stroke: Tokens["colors"];
+	strokeWidth: Tokens["borderWidths"];
 	srOnly: boolean;
 	debug: boolean;
-	container: boolean;
-	containerName: CssProperties["containerName"];
 	animateIn: boolean;
 	animateOut: boolean;
 	fadeIn: Tokens["opacity"];
@@ -212,53 +225,213 @@ export interface UtilityValues {
 	gradientFromAlpha: string;
 	gradientToAlpha: string;
 	borderAlpha: CssProperties["borderColor"];
+	container: boolean;
 	focusRingWidth: "0" | "1" | "2" | "4" | "8" | "base";
 	focusRingColor: Tokens["colors"];
 	focusRingOffsetWidth: "0" | "1" | "2" | "4" | "8";
 	focusRingOffsetColor: Tokens["colors"];
 	focusRingInset: boolean;
+	spaceY: Tokens["spacing"];
+	spaceX: Tokens["spacing"];
 	textAlpha: CssProperties["color"];
-	colorPalette: "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "gray" | "slate" | "grayscale" | "hover" | "hover.light" | "hover.dark" | "light" | "dark" | "text" | "decoration" | "background" | "foreground" | "muted" | "card" | "popover" | "border" | "input" | "secondary" | "accent" | "destructive" | "ring" | "primary";
+	colorPalette: "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "gray" | "slate" | "hover" | "hover.light" | "hover.dark" | "light" | "dark" | "text" | "decoration" | "grayscale" | "background" | "foreground" | "muted" | "card" | "popover" | "border" | "input" | "primary" | "secondary" | "accent" | "destructive" | "ring";
 	textStyle: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "h1" | "h2" | "h3" | "h4" | "p" | "lead" | "large" | "small";
+	layerStyle: string;
 }
 
 
 
-type WithColorOpacityModifier<T> = [T] extends [string] ? `${T}/${string}` & { __colorOpacityModifier?: true } : never
+  type CssValue<T> = T extends keyof CssProperties ? CssProperties[T] : never
 
-type ImportantMark = "!" | "!important"
-type WhitespaceImportant = ` ${ImportantMark}`
-type Important = ImportantMark | WhitespaceImportant
-type WithImportant<T> = [T] extends [string] ? `${T}${Important}` & { __important?: true } : never
+  type Shorthand<T> = T extends keyof PropertyValueTypes ? PropertyValueTypes[T] | CssValue<T> : CssValue<T>
 
-/**
- * Only relevant when using `strictTokens` or `strictPropertyValues` in your config.
- * - Allows you to use an escape hatch (e.g. `[123px]`) to use any string as a value.
- * - Allows you to use a color opacity modifier (e.g. `red/300`) with known color values.
- * - Allows you to use an important mark (e.g. `!` or `!important`) in the value.
- *
- * This is useful when you want to use a value that is not defined in the config or want to opt-out of the defaults.
- *
- * @example
- * css({
- *   fontSize: '[123px]', // ⚠️ will not throw even if you haven't defined 123px as a token
- * })
- *
- * @see https://panda-css.com/docs/concepts/writing-styles#stricttokens
- * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues
- */
-export type WithEscapeHatch<T> = T | `[${string}]` | WithColorOpacityModifier<T> | WithImportant<T>
+  export interface PropertyTypes extends PropertyValueTypes {
+  
+	pos: Shorthand<"position">;
+	insetEnd: Shorthand<"insetInlineEnd">;
+	end: Shorthand<"insetInlineEnd">;
+	insetStart: Shorthand<"insetInlineStart">;
+	start: Shorthand<"insetInlineStart">;
+	flexDir: Shorthand<"flexDirection">;
+	p: Shorthand<"padding">;
+	pl: Shorthand<"paddingLeft">;
+	pr: Shorthand<"paddingRight">;
+	pt: Shorthand<"paddingTop">;
+	pb: Shorthand<"paddingBottom">;
+	py: Shorthand<"paddingBlock">;
+	paddingY: Shorthand<"paddingBlock">;
+	paddingX: Shorthand<"paddingInline">;
+	px: Shorthand<"paddingInline">;
+	pe: Shorthand<"paddingInlineEnd">;
+	paddingEnd: Shorthand<"paddingInlineEnd">;
+	ps: Shorthand<"paddingInlineStart">;
+	paddingStart: Shorthand<"paddingInlineStart">;
+	ml: Shorthand<"marginLeft">;
+	mr: Shorthand<"marginRight">;
+	mt: Shorthand<"marginTop">;
+	mb: Shorthand<"marginBottom">;
+	m: Shorthand<"margin">;
+	my: Shorthand<"marginBlock">;
+	marginY: Shorthand<"marginBlock">;
+	mx: Shorthand<"marginInline">;
+	marginX: Shorthand<"marginInline">;
+	me: Shorthand<"marginInlineEnd">;
+	marginEnd: Shorthand<"marginInlineEnd">;
+	ms: Shorthand<"marginInlineStart">;
+	marginStart: Shorthand<"marginInlineStart">;
+	ringWidth: Shorthand<"outlineWidth">;
+	ringColor: Shorthand<"outlineColor">;
+	ring: Shorthand<"outline">;
+	ringOffset: Shorthand<"outlineOffset">;
+	w: Shorthand<"width">;
+	minW: Shorthand<"minWidth">;
+	maxW: Shorthand<"maxWidth">;
+	h: Shorthand<"height">;
+	minH: Shorthand<"minHeight">;
+	maxH: Shorthand<"maxHeight">;
+	tracking: Shorthand<"letterSpacing">;
+	leading: Shorthand<"lineHeight">;
+	bgPosition: Shorthand<"backgroundPosition">;
+	bgPositionX: Shorthand<"backgroundPositionX">;
+	bgPositionY: Shorthand<"backgroundPositionY">;
+	bgAttachment: Shorthand<"backgroundAttachment">;
+	bgClip: Shorthand<"backgroundClip">;
+	bg: Shorthand<"background">;
+	bgColor: Shorthand<"backgroundColor">;
+	bgOrigin: Shorthand<"backgroundOrigin">;
+	bgImage: Shorthand<"backgroundImage">;
+	bgRepeat: Shorthand<"backgroundRepeat">;
+	bgBlendMode: Shorthand<"backgroundBlendMode">;
+	bgSize: Shorthand<"backgroundSize">;
+	bgGradient: Shorthand<"backgroundGradient">;
+	rounded: Shorthand<"borderRadius">;
+	roundedTopLeft: Shorthand<"borderTopLeftRadius">;
+	roundedTopRight: Shorthand<"borderTopRightRadius">;
+	roundedBottomRight: Shorthand<"borderBottomRightRadius">;
+	roundedBottomLeft: Shorthand<"borderBottomLeftRadius">;
+	roundedTop: Shorthand<"borderTopRadius">;
+	roundedRight: Shorthand<"borderRightRadius">;
+	roundedBottom: Shorthand<"borderBottomRadius">;
+	roundedLeft: Shorthand<"borderLeftRadius">;
+	roundedStartStart: Shorthand<"borderStartStartRadius">;
+	roundedStartEnd: Shorthand<"borderStartEndRadius">;
+	roundedStart: Shorthand<"borderStartRadius">;
+	roundedEndStart: Shorthand<"borderEndStartRadius">;
+	roundedEndEnd: Shorthand<"borderEndEndRadius">;
+	roundedEnd: Shorthand<"borderEndRadius">;
+	borderX: Shorthand<"borderInline">;
+	borderXWidth: Shorthand<"borderInlineWidth">;
+	borderXColor: Shorthand<"borderInlineColor">;
+	borderY: Shorthand<"borderBlock">;
+	borderYWidth: Shorthand<"borderBlockWidth">;
+	borderYColor: Shorthand<"borderBlockColor">;
+	borderStart: Shorthand<"borderInlineStart">;
+	borderStartWidth: Shorthand<"borderInlineStartWidth">;
+	borderStartColor: Shorthand<"borderInlineStartColor">;
+	borderEnd: Shorthand<"borderInlineEnd">;
+	borderEndWidth: Shorthand<"borderInlineEndWidth">;
+	borderEndColor: Shorthand<"borderInlineEndColor">;
+	shadow: Shorthand<"boxShadow">;
+	shadowColor: Shorthand<"boxShadowColor">;
+	x: Shorthand<"translateX">;
+	y: Shorthand<"translateY">;
+	bga: Shorthand<"backgroundAlpha">;
+	bca: Shorthand<"borderAlpha">;
+	ca: Shorthand<"textAlpha">;
+}
 
-/**
- * Will restrict the value of properties that have predefined values to those values only.
- *
- * @example
- * css({
- *   display: 'abc', // ❌ will throw
- * })
- *
- * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues
- */
-export type OnlyKnown<Key, Value> = Value extends boolean
+type StrictableProps =
+  | 'alignContent'
+  | 'alignItems'
+  | 'alignSelf'
+  | 'all'
+  | 'animationComposition'
+  | 'animationDirection'
+  | 'animationFillMode'
+  | 'appearance'
+  | 'backfaceVisibility'
+  | 'backgroundAttachment'
+  | 'backgroundClip'
+  | 'borderCollapse'
+  | 'border'
+  | 'borderBlock'
+  | 'borderBlockEnd'
+  | 'borderBlockStart'
+  | 'borderBottom'
+  | 'borderInline'
+  | 'borderInlineEnd'
+  | 'borderInlineStart'
+  | 'borderLeft'
+  | 'borderRight'
+  | 'borderTop'
+  | 'borderBlockEndStyle'
+  | 'borderBlockStartStyle'
+  | 'borderBlockStyle'
+  | 'borderBottomStyle'
+  | 'borderInlineEndStyle'
+  | 'borderInlineStartStyle'
+  | 'borderInlineStyle'
+  | 'borderLeftStyle'
+  | 'borderRightStyle'
+  | 'borderTopStyle'
+  | 'boxDecorationBreak'
+  | 'boxSizing'
+  | 'breakAfter'
+  | 'breakBefore'
+  | 'breakInside'
+  | 'captionSide'
+  | 'clear'
+  | 'columnFill'
+  | 'columnRuleStyle'
+  | 'contentVisibility'
+  | 'direction'
+  | 'display'
+  | 'emptyCells'
+  | 'flexDirection'
+  | 'flexWrap'
+  | 'float'
+  | 'fontKerning'
+  | 'forcedColorAdjust'
+  | 'isolation'
+  | 'lineBreak'
+  | 'mixBlendMode'
+  | 'objectFit'
+  | 'outlineStyle'
+  | 'overflow'
+  | 'overflowX'
+  | 'overflowY'
+  | 'overflowBlock'
+  | 'overflowInline'
+  | 'overflowWrap'
+  | 'pointerEvents'
+  | 'position'
+  | 'resize'
+  | 'scrollBehavior'
+  | 'touchAction'
+  | 'transformBox'
+  | 'transformStyle'
+  | 'userSelect'
+  | 'visibility'
+  | 'wordBreak'
+  | 'writingMode'
+type WithEscapeHatch<T> = T | `[${string}]`
+type FilterVagueString<Key, Value> = Value extends boolean
   ? Value
-  : Value extends `${infer _}` ? Value : never
+  : Key extends StrictableProps
+    ? Value extends `${infer _}` ? Value : never
+    : Value
+type PropOrCondition<Key, Value> = ConditionalValue<Value | (string & {})>
+
+type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
+  ? PropOrCondition<T, PropertyTypes[T] | CssValue<T>>
+  : never;
+
+type CssPropertyValue<T extends string> = T extends keyof CssProperties
+  ? PropOrCondition<T, CssProperties[T]>
+  : never;
+
+export type PropertyValue<T extends string> = T extends keyof PropertyTypes
+  ? PropertyTypeValue<T>
+  : T extends keyof CssProperties
+    ? CssPropertyValue<T>
+    : PropOrCondition<T, string | number>

package/dist/styled-system/types/recipe.d.mts

@@ -14,21 +14,10 @@ export type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends k
 
 export type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string
 
-/**
- * Extract the variant as optional props from a `cva` function.
- * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.
- */
 export type RecipeVariantProps<
   T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,
 > = Pretty<Parameters<T>[0]>
 
-/**
- * Extract the variants from a `cva` function.
- */
-export type RecipeVariant<
-  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,
-> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>
-
 type RecipeVariantMap<T extends RecipeVariantRecord> = {
   [K in keyof T]: Array<keyof T[K]>
 }
@@ -46,7 +35,6 @@ export interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVa
   splitVariantProps<Props extends RecipeSelection<T>>(
     props: Props,
   ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]
-  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>
 }
 
 type OneOrMore<T> = T | Array<T>
@@ -64,10 +52,6 @@ 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.
    */
@@ -80,13 +64,17 @@ export interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantR
    * The styles to apply when a combination of variants is selected.
    */
   compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]
+  /**
+   * Variants to pre-generate, will be include in the final `config.staticCss`
+   */
+  staticCss?: RecipeRule[]
 }
 
 export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>
 
 interface RecipeConfigMeta {
   /**
-   * The class name of the recipe.
+   * The name of the recipe.
    */
   className: string
   /**
@@ -100,10 +88,6 @@ interface RecipeConfigMeta {
    * @example ['Button', 'Link', /Button$/]
    */
   jsx?: Array<string | RegExp>
-  /**
-   * Variants to pre-generate, will be include in the final `config.staticCss`
-   */
-  staticCss?: RecipeRule[]
 }
 
 export interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>
@@ -127,10 +111,7 @@ export interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVaria
   raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>
   variantKeys: (keyof T)[]
   variantMap: RecipeVariantMap<T>
-  splitVariantProps<Props extends RecipeSelection<T>>(
-    props: Props,
-  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]
-  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>
+  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]
 }
 
 export type SlotRecipeCompoundVariant<S extends string, T> = T & {
@@ -141,14 +122,6 @@ export interface SlotRecipeDefinition<
   S extends string = string,
   T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
 > {
-  /**
-   * 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.
    */
@@ -169,6 +142,10 @@ export interface SlotRecipeDefinition<
    * The styles to apply when a combination of variants is selected.
    */
   compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]
+  /**
+   * Variants to pre-generate, will be include in the final `config.staticCss`
+   */
+  staticCss?: RecipeRule[]
 }
 
 export type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(

package/dist/styled-system/types/selectors.d.mts

@@ -53,7 +53,7 @@ type DataAttributes =
 type AttributeSelector = `&${Pseudos | DataAttributes | AriaAttributes}`
 type ParentSelector = `${DataAttributes | AriaAttributes} &`
 
-type AtRuleType = 'media' | 'layer' | 'container' | 'supports' | 'page' | 'scope' | 'starting-style'
+type AtRuleType = 'media' | 'layer' | 'container' | 'supports' | 'page'
 
 export type AnySelector = `${string}&` | `&${string}` | `@${AtRuleType}${string}`
 export type Selectors = AttributeSelector | ParentSelector

package/dist/styled-system/types/static-css.d.mts

@@ -1,17 +1,14 @@
 /* eslint-disable */
-interface ConditionOptions {
+interface WithConditions {
   /**
-   * The conditions to generate for the rule.
+   * The css conditions to generate for the rule.
    * @example ['hover', 'focus']
    */
   conditions?: string[]
-  /**
-   * Whether to generate responsive styles for the rule.
-   */
   responsive?: boolean
 }
 
-export interface CssRule extends ConditionOptions {
+export interface CssRule extends WithConditions {
   /**
    * The css properties to generate utilities for.
    * @example ['margin', 'padding']
@@ -25,9 +22,7 @@ interface RecipeRuleVariants {
   [variant: string]: boolean | string[]
 }
 
-export type RecipeRuleObject = RecipeRuleVariants & ConditionOptions
-export type RecipeRule = '*' | RecipeRuleObject
-
+export type RecipeRule = '*' | (RecipeRuleVariants & WithConditions)
 export type PatternRule = '*' | CssRule
 
 export interface StaticCssOptions {
@@ -49,8 +44,4 @@ export interface StaticCssOptions {
   patterns?: {
     [pattern: string]: PatternRule[]
   }
-  /**
-   * The CSS themes to generate
-   */
-  themes?: string[]
 }