@luxonis/common-fe-components 1.18.0 → 1.18.2

package/dist/styled-system/patterns/grid.mjs

@@ -1,11 +1,10 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const gridConfig = {
-transform(props, { map }) {
-  const regex = /\d+(cm|in|pt|em|px|rem|vh|vmax|vmin|vw|ch|lh|%)$/;
-  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props;
-  const getValue = (v) => regex.test(v) ? v : `token(sizes.${v}, ${v})`;
+transform(props, { map, isCssUnit }) {
+  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
+  const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
   return {
     display: "grid",
     gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
@@ -14,9 +13,15 @@ transform(props, { map }) {
     rowGap,
     ...rest
   };
+},
+defaultValues(props) {
+  return { gap: props.columnGap || props.rowGap ? void 0 : "10px" };
 }}
 
-export const getGridStyle = (styles = {}) => gridConfig.transform(styles, { map: mapObject })
+export const getGridStyle = (styles = {}) => {
+  const _styles = getPatternStyles(gridConfig, styles)
+  return gridConfig.transform(_styles, patternFns)
+}
 
 export const grid = (styles) => css(getGridStyle(styles))
 grid.raw = getGridStyle

package/dist/styled-system/patterns/hstack.d.mts

@@ -1,13 +1,13 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index.d.mts';
 import type { Properties } from '../types/csstype.d.mts';
-import type { PropertyValue } from '../types/prop-type.d.mts';
+import type { SystemProperties } from '../types/style-props.d.mts';
 import type { DistributiveOmit } from '../types/system-types.d.mts';
 import type { Tokens } from '../tokens/index.d.mts';
 
 export interface HstackProperties {
-   justify?: PropertyValue<'justifyContent'>
-	gap?: PropertyValue<'gap'>
+   justify?: SystemProperties["justifyContent"]
+	gap?: SystemProperties["gap"]
 }
 
 

package/dist/styled-system/patterns/hstack.mjs

@@ -1,9 +1,9 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const hstackConfig = {
 transform(props) {
-  const { justify, gap = "10px", ...rest } = props;
+  const { justify, gap, ...rest } = props;
   return {
     display: "flex",
     alignItems: "center",
@@ -12,9 +12,13 @@ transform(props) {
     flexDirection: "row",
     ...rest
   };
-}}
+},
+defaultValues:{gap:'10px'}}
 
-export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject })
+export const getHstackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(hstackConfig, styles)
+  return hstackConfig.transform(_styles, patternFns)
+}
 
 export const hstack = (styles) => css(getHstackStyle(styles))
 hstack.raw = getHstackStyle

package/dist/styled-system/patterns/index.d.mts

@@ -8,7 +8,6 @@ export * from './spacer.d.mts';
 export * from './square.d.mts';
 export * from './circle.d.mts';
 export * from './center.d.mts';
-export * from './link-box.d.mts';
 export * from './link-overlay.d.mts';
 export * from './aspect-ratio.d.mts';
 export * from './grid.d.mts';
@@ -18,4 +17,5 @@ export * from './container.d.mts';
 export * from './divider.d.mts';
 export * from './float.d.mts';
 export * from './bleed.d.mts';
-export * from './visually-hidden.d.mts';
+export * from './visually-hidden.d.mts';
+export * from './cq.d.mts';

package/dist/styled-system/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';
@@ -17,4 +16,5 @@ export * from './container.mjs';
 export * from './divider.mjs';
 export * from './float.mjs';
 export * from './bleed.mjs';
-export * from './visually-hidden.mjs';
+export * from './visually-hidden.mjs';
+export * from './cq.mjs';

package/dist/styled-system/patterns/link-overlay.d.mts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index.d.mts';
 import type { Properties } from '../types/csstype.d.mts';
-import type { PropertyValue } from '../types/prop-type.d.mts';
+import type { SystemProperties } from '../types/style-props.d.mts';
 import type { DistributiveOmit } from '../types/system-types.d.mts';
 import type { Tokens } from '../tokens/index.d.mts';
 

package/dist/styled-system/patterns/link-overlay.mjs

@@ -1,15 +1,12 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const linkOverlayConfig = {
 transform(props) {
   return {
-    position: "static",
     _before: {
       content: '""',
-      display: "block",
       position: "absolute",
-      cursor: "inherit",
       inset: "0",
       zIndex: "0",
       ...props["_before"]
@@ -18,7 +15,10 @@ transform(props) {
   };
 }}
 
-export const getLinkOverlayStyle = (styles = {}) => linkOverlayConfig.transform(styles, { map: mapObject })
+export const getLinkOverlayStyle = (styles = {}) => {
+  const _styles = getPatternStyles(linkOverlayConfig, styles)
+  return linkOverlayConfig.transform(_styles, patternFns)
+}
 
 export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles))
 linkOverlay.raw = getLinkOverlayStyle

package/dist/styled-system/patterns/spacer.d.mts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index.d.mts';
 import type { Properties } from '../types/csstype.d.mts';
-import type { PropertyValue } from '../types/prop-type.d.mts';
+import type { SystemProperties } from '../types/style-props.d.mts';
 import type { DistributiveOmit } from '../types/system-types.d.mts';
 import type { Tokens } from '../tokens/index.d.mts';
 

package/dist/styled-system/patterns/spacer.mjs

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const spacerConfig = {
@@ -12,7 +12,10 @@ transform(props, { map }) {
   };
 }}
 
-export const getSpacerStyle = (styles = {}) => spacerConfig.transform(styles, { map: mapObject })
+export const getSpacerStyle = (styles = {}) => {
+  const _styles = getPatternStyles(spacerConfig, styles)
+  return spacerConfig.transform(_styles, patternFns)
+}
 
 export const spacer = (styles) => css(getSpacerStyle(styles))
 spacer.raw = getSpacerStyle

package/dist/styled-system/patterns/square.d.mts

@@ -1,12 +1,12 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index.d.mts';
 import type { Properties } from '../types/csstype.d.mts';
-import type { PropertyValue } from '../types/prop-type.d.mts';
+import type { SystemProperties } from '../types/style-props.d.mts';
 import type { DistributiveOmit } from '../types/system-types.d.mts';
 import type { Tokens } from '../tokens/index.d.mts';
 
 export interface SquareProperties {
-   size?: PropertyValue<'width'>
+   size?: SystemProperties["width"]
 }
 
 

package/dist/styled-system/patterns/square.mjs

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const squareConfig = {
@@ -15,7 +15,10 @@ transform(props) {
   };
 }}
 
-export const getSquareStyle = (styles = {}) => squareConfig.transform(styles, { map: mapObject })
+export const getSquareStyle = (styles = {}) => {
+  const _styles = getPatternStyles(squareConfig, styles)
+  return squareConfig.transform(_styles, patternFns)
+}
 
 export const square = (styles) => css(getSquareStyle(styles))
 square.raw = getSquareStyle

package/dist/styled-system/patterns/stack.d.mts

@@ -1,15 +1,15 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index.d.mts';
 import type { Properties } from '../types/csstype.d.mts';
-import type { PropertyValue } from '../types/prop-type.d.mts';
+import type { SystemProperties } from '../types/style-props.d.mts';
 import type { DistributiveOmit } from '../types/system-types.d.mts';
 import type { Tokens } from '../tokens/index.d.mts';
 
 export interface StackProperties {
-   align?: PropertyValue<'alignItems'>
-	justify?: PropertyValue<'justifyContent'>
-	direction?: PropertyValue<'flexDirection'>
-	gap?: PropertyValue<'gap'>
+   align?: SystemProperties["alignItems"]
+	justify?: SystemProperties["justifyContent"]
+	direction?: SystemProperties["flexDirection"]
+	gap?: SystemProperties["gap"]
 }
 
 

package/dist/styled-system/patterns/stack.mjs

@@ -1,9 +1,9 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const stackConfig = {
 transform(props) {
-  const { align, justify, direction = "column", gap = "10px", ...rest } = props;
+  const { align, justify, direction, gap, ...rest } = props;
   return {
     display: "flex",
     flexDirection: direction,
@@ -12,9 +12,13 @@ transform(props) {
     gap,
     ...rest
   };
-}}
+},
+defaultValues:{direction:'column',gap:'10px'}}
 
-export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject })
+export const getStackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(stackConfig, styles)
+  return stackConfig.transform(_styles, patternFns)
+}
 
 export const stack = (styles) => css(getStackStyle(styles))
 stack.raw = getStackStyle

package/dist/styled-system/patterns/visually-hidden.d.mts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index.d.mts';
 import type { Properties } from '../types/csstype.d.mts';
-import type { PropertyValue } from '../types/prop-type.d.mts';
+import type { SystemProperties } from '../types/style-props.d.mts';
 import type { DistributiveOmit } from '../types/system-types.d.mts';
 import type { Tokens } from '../tokens/index.d.mts';
 

package/dist/styled-system/patterns/visually-hidden.mjs

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const visuallyHiddenConfig = {
@@ -9,7 +9,10 @@ transform(props) {
   };
 }}
 
-export const getVisuallyHiddenStyle = (styles = {}) => visuallyHiddenConfig.transform(styles, { map: mapObject })
+export const getVisuallyHiddenStyle = (styles = {}) => {
+  const _styles = getPatternStyles(visuallyHiddenConfig, styles)
+  return visuallyHiddenConfig.transform(_styles, patternFns)
+}
 
 export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles))
 visuallyHidden.raw = getVisuallyHiddenStyle

package/dist/styled-system/patterns/vstack.d.mts

@@ -1,13 +1,13 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index.d.mts';
 import type { Properties } from '../types/csstype.d.mts';
-import type { PropertyValue } from '../types/prop-type.d.mts';
+import type { SystemProperties } from '../types/style-props.d.mts';
 import type { DistributiveOmit } from '../types/system-types.d.mts';
 import type { Tokens } from '../tokens/index.d.mts';
 
 export interface VstackProperties {
-   justify?: PropertyValue<'justifyContent'>
-	gap?: PropertyValue<'gap'>
+   justify?: SystemProperties["justifyContent"]
+	gap?: SystemProperties["gap"]
 }
 
 

package/dist/styled-system/patterns/vstack.mjs

@@ -1,9 +1,9 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const vstackConfig = {
 transform(props) {
-  const { justify, gap = "10px", ...rest } = props;
+  const { justify, gap, ...rest } = props;
   return {
     display: "flex",
     alignItems: "center",
@@ -12,9 +12,13 @@ transform(props) {
     flexDirection: "column",
     ...rest
   };
-}}
+},
+defaultValues:{gap:'10px'}}
 
-export const getVstackStyle = (styles = {}) => vstackConfig.transform(styles, { map: mapObject })
+export const getVstackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(vstackConfig, styles)
+  return vstackConfig.transform(_styles, patternFns)
+}
 
 export const vstack = (styles) => css(getVstackStyle(styles))
 vstack.raw = getVstackStyle

package/dist/styled-system/patterns/wrap.d.mts

@@ -1,16 +1,16 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index.d.mts';
 import type { Properties } from '../types/csstype.d.mts';
-import type { PropertyValue } from '../types/prop-type.d.mts';
+import type { SystemProperties } from '../types/style-props.d.mts';
 import type { DistributiveOmit } from '../types/system-types.d.mts';
 import type { Tokens } from '../tokens/index.d.mts';
 
 export interface WrapProperties {
-   gap?: PropertyValue<'gap'>
-	rowGap?: PropertyValue<'gap'>
-	columnGap?: PropertyValue<'gap'>
-	align?: PropertyValue<'alignItems'>
-	justify?: PropertyValue<'justifyContent'>
+   gap?: SystemProperties["gap"]
+	rowGap?: SystemProperties["gap"]
+	columnGap?: SystemProperties["gap"]
+	align?: SystemProperties["alignItems"]
+	justify?: SystemProperties["justifyContent"]
 }
 
 

package/dist/styled-system/patterns/wrap.mjs

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const wrapConfig = {
@@ -16,7 +16,10 @@ transform(props) {
   };
 }}
 
-export const getWrapStyle = (styles = {}) => wrapConfig.transform(styles, { map: mapObject })
+export const getWrapStyle = (styles = {}) => {
+  const _styles = getPatternStyles(wrapConfig, styles)
+  return wrapConfig.transform(_styles, patternFns)
+}
 
 export const wrap = (styles) => css(getWrapStyle(styles))
 wrap.raw = getWrapStyle

package/dist/styled-system/recipes/accordion.d.mts

@@ -21,7 +21,12 @@ export interface AccordionRecipe {
   variantMap: AccordionVariantMap
   variantKeys: Array<keyof AccordionVariant>
   splitVariantProps<Props extends AccordionVariantProps>(props: Props): [AccordionVariantProps, Pretty<DistributiveOmit<Props, keyof AccordionVariantProps>>]
+  getVariantProps: (props?: AccordionVariantProps) => AccordionVariantProps
 }
 
-/** Styles for the Accordion component */
+/**
+ * Styles for the Accordion component
+
+
+ */
 export declare const accordion: AccordionRecipe

package/dist/styled-system/recipes/accordion.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const accordionDefaultVariants = {}
@@ -48,11 +48,12 @@ const accordionSlotNames = [
 ]
 const accordionSlotFns = /* @__PURE__ */ accordionSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, accordionDefaultVariants, getSlotCompoundVariant(accordionCompoundVariants, slotName))])
 
-const accordionFn = (props = {}) => {
-  return Object.fromEntries(accordionSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+const accordionFn = memo((props = {}) => {
+  return Object.fromEntries(accordionSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
 
 const accordionVariantKeys = []
+const getVariantProps = (variants) => ({ ...accordionDefaultVariants, ...compact(variants) })
 
 export const accordion = /* @__PURE__ */ Object.assign(accordionFn, {
   __recipe__: false,
@@ -63,4 +64,5 @@ export const accordion = /* @__PURE__ */ Object.assign(accordionFn, {
   splitVariantProps(props) {
     return splitProps(props, accordionVariantKeys)
   },
+  getVariantProps
 })

package/dist/styled-system/recipes/alert-description.d.mts

@@ -21,7 +21,12 @@ export interface AlertDescriptionRecipe {
   variantMap: AlertDescriptionVariantMap
   variantKeys: Array<keyof AlertDescriptionVariant>
   splitVariantProps<Props extends AlertDescriptionVariantProps>(props: Props): [AlertDescriptionVariantProps, Pretty<DistributiveOmit<Props, keyof AlertDescriptionVariantProps>>]
+  getVariantProps: (props?: AlertDescriptionVariantProps) => AlertDescriptionVariantProps
 }
 
-/** Styles for the AlertDescription component */
+/**
+ * Styles for the AlertDescription component
+
+
+ */
 export declare const alertDescription: AlertDescriptionRecipe

package/dist/styled-system/recipes/alert-description.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const alertDescriptionFn = /* @__PURE__ */ createRecipe('alertDescription', {}, [])
@@ -7,9 +7,10 @@ const alertDescriptionVariantMap = {}
 
 const alertDescriptionVariantKeys = Object.keys(alertDescriptionVariantMap)
 
-export const alertDescription = /* @__PURE__ */ Object.assign(alertDescriptionFn, {
+export const alertDescription = /* @__PURE__ */ Object.assign(memo(alertDescriptionFn.recipeFn), {
   __recipe__: true,
   __name__: 'alertDescription',
+  __getCompoundVariantCss__: alertDescriptionFn.__getCompoundVariantCss__,
   raw: (props) => props,
   variantKeys: alertDescriptionVariantKeys,
   variantMap: alertDescriptionVariantMap,
@@ -19,4 +20,5 @@ export const alertDescription = /* @__PURE__ */ Object.assign(alertDescriptionFn
   splitVariantProps(props) {
     return splitProps(props, alertDescriptionVariantKeys)
   },
+  getVariantProps: alertDescriptionFn.getVariantProps,
 })

package/dist/styled-system/recipes/alert-dialog.d.mts

@@ -21,7 +21,12 @@ export interface AlertDialogRecipe {
   variantMap: AlertDialogVariantMap
   variantKeys: Array<keyof AlertDialogVariant>
   splitVariantProps<Props extends AlertDialogVariantProps>(props: Props): [AlertDialogVariantProps, Pretty<DistributiveOmit<Props, keyof AlertDialogVariantProps>>]
+  getVariantProps: (props?: AlertDialogVariantProps) => AlertDialogVariantProps
 }
 
-/** Styles for the AlertDialog component */
+/**
+ * Styles for the AlertDialog component
+
+
+ */
 export declare const alertDialog: AlertDialogRecipe

package/dist/styled-system/recipes/alert-dialog.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const alertDialogDefaultVariants = {}
@@ -96,11 +96,12 @@ const alertDialogSlotNames = [
 ]
 const alertDialogSlotFns = /* @__PURE__ */ alertDialogSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, alertDialogDefaultVariants, getSlotCompoundVariant(alertDialogCompoundVariants, slotName))])
 
-const alertDialogFn = (props = {}) => {
-  return Object.fromEntries(alertDialogSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+const alertDialogFn = memo((props = {}) => {
+  return Object.fromEntries(alertDialogSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
 
 const alertDialogVariantKeys = []
+const getVariantProps = (variants) => ({ ...alertDialogDefaultVariants, ...compact(variants) })
 
 export const alertDialog = /* @__PURE__ */ Object.assign(alertDialogFn, {
   __recipe__: false,
@@ -111,4 +112,5 @@ export const alertDialog = /* @__PURE__ */ Object.assign(alertDialogFn, {
   splitVariantProps(props) {
     return splitProps(props, alertDialogVariantKeys)
   },
+  getVariantProps
 })

package/dist/styled-system/recipes/alert-title.d.mts

@@ -21,7 +21,12 @@ export interface AlertTitleRecipe {
   variantMap: AlertTitleVariantMap
   variantKeys: Array<keyof AlertTitleVariant>
   splitVariantProps<Props extends AlertTitleVariantProps>(props: Props): [AlertTitleVariantProps, Pretty<DistributiveOmit<Props, keyof AlertTitleVariantProps>>]
+  getVariantProps: (props?: AlertTitleVariantProps) => AlertTitleVariantProps
 }
 
-/** Styles for the AlertTitle component */
+/**
+ * Styles for the AlertTitle component
+
+
+ */
 export declare const alertTitle: AlertTitleRecipe

package/dist/styled-system/recipes/alert-title.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const alertTitleFn = /* @__PURE__ */ createRecipe('alertTitle', {}, [])
@@ -7,9 +7,10 @@ const alertTitleVariantMap = {}
 
 const alertTitleVariantKeys = Object.keys(alertTitleVariantMap)
 
-export const alertTitle = /* @__PURE__ */ Object.assign(alertTitleFn, {
+export const alertTitle = /* @__PURE__ */ Object.assign(memo(alertTitleFn.recipeFn), {
   __recipe__: true,
   __name__: 'alertTitle',
+  __getCompoundVariantCss__: alertTitleFn.__getCompoundVariantCss__,
   raw: (props) => props,
   variantKeys: alertTitleVariantKeys,
   variantMap: alertTitleVariantMap,
@@ -19,4 +20,5 @@ export const alertTitle = /* @__PURE__ */ Object.assign(alertTitleFn, {
   splitVariantProps(props) {
     return splitProps(props, alertTitleVariantKeys)
   },
+  getVariantProps: alertTitleFn.getVariantProps,
 })

package/dist/styled-system/recipes/alert.d.mts

@@ -3,7 +3,10 @@ import type { ConditionalValue } from '../types/index.d.mts';
 import type { DistributiveOmit, Pretty } from '../types/system-types.d.mts';
 
 interface AlertVariant {
-  variant: "default" | "destructive"
+  /**
+ * @default "default"
+ */
+variant: "default" | "destructive"
 }
 
 type AlertVariantMap = {
@@ -21,7 +24,12 @@ export interface AlertRecipe {
   variantMap: AlertVariantMap
   variantKeys: Array<keyof AlertVariant>
   splitVariantProps<Props extends AlertVariantProps>(props: Props): [AlertVariantProps, Pretty<DistributiveOmit<Props, keyof AlertVariantProps>>]
+  getVariantProps: (props?: AlertVariantProps) => AlertVariantProps
 }
 
-/** Styles for the Alert component */
+/**
+ * Styles for the Alert component
+
+
+ */
 export declare const alert: AlertRecipe

package/dist/styled-system/recipes/alert.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const alertFn = /* @__PURE__ */ createRecipe('alert', {
@@ -14,9 +14,10 @@ const alertVariantMap = {
 
 const alertVariantKeys = Object.keys(alertVariantMap)
 
-export const alert = /* @__PURE__ */ Object.assign(alertFn, {
+export const alert = /* @__PURE__ */ Object.assign(memo(alertFn.recipeFn), {
   __recipe__: true,
   __name__: 'alert',
+  __getCompoundVariantCss__: alertFn.__getCompoundVariantCss__,
   raw: (props) => props,
   variantKeys: alertVariantKeys,
   variantMap: alertVariantMap,
@@ -26,4 +27,5 @@ export const alert = /* @__PURE__ */ Object.assign(alertFn, {
   splitVariantProps(props) {
     return splitProps(props, alertVariantKeys)
   },
+  getVariantProps: alertFn.getVariantProps,
 })

package/dist/styled-system/recipes/avatar.d.mts

@@ -21,7 +21,12 @@ export interface AvatarRecipe {
   variantMap: AvatarVariantMap
   variantKeys: Array<keyof AvatarVariant>
   splitVariantProps<Props extends AvatarVariantProps>(props: Props): [AvatarVariantProps, Pretty<DistributiveOmit<Props, keyof AvatarVariantProps>>]
+  getVariantProps: (props?: AvatarVariantProps) => AvatarVariantProps
 }
 
-/** Styles for the Avatar component */
+/**
+ * Styles for the Avatar component
+
+
+ */
 export declare const avatar: AvatarRecipe

package/dist/styled-system/recipes/avatar.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const avatarDefaultVariants = {}
@@ -32,11 +32,12 @@ const avatarSlotNames = [
 ]
 const avatarSlotFns = /* @__PURE__ */ avatarSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, avatarDefaultVariants, getSlotCompoundVariant(avatarCompoundVariants, slotName))])
 
-const avatarFn = (props = {}) => {
-  return Object.fromEntries(avatarSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+const avatarFn = memo((props = {}) => {
+  return Object.fromEntries(avatarSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
 
 const avatarVariantKeys = []
+const getVariantProps = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) })
 
 export const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   __recipe__: false,
@@ -47,4 +48,5 @@ export const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   splitVariantProps(props) {
     return splitProps(props, avatarVariantKeys)
   },
+  getVariantProps
 })