@mekari/pixel3-styled-system 0.0.5-dev.1 → 0.0.5-dev.3

package/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/patterns/index.d.ts

@@ -18,4 +18,5 @@ export * from './container';
 export * from './divider';
 export * from './float';
 export * from './bleed';
-export * from './visually-hidden';
+export * from './visually-hidden';
+export * from './cq';

package/patterns/index.mjs

@@ -17,4 +17,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/patterns/link-box.mjs

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

package/patterns/link-overlay.mjs

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const linkOverlayConfig = {
@@ -18,7 +18,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/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/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/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/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/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/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/recipes/accordion.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const accordionDefaultVariants = {
@@ -26,9 +26,9 @@ const accordionSlotNames = [
 ]
 const accordionSlotFns = /* @__PURE__ */ accordionSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, accordionDefaultVariants, getSlotCompoundVariant(accordionCompoundVariants, slotName))])
 
-const accordionFn = (props = {}) => {
+const accordionFn = memo((props = {}) => {
   return Object.fromEntries(accordionSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const accordionVariantKeys = [
   "size"

package/recipes/avatar-group-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const avatarGroupSlotRecipeDefaultVariants = {}
@@ -16,9 +16,9 @@ const avatarGroupSlotRecipeSlotNames = [
 ]
 const avatarGroupSlotRecipeSlotFns = /* @__PURE__ */ avatarGroupSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, avatarGroupSlotRecipeDefaultVariants, getSlotCompoundVariant(avatarGroupSlotRecipeCompoundVariants, slotName))])
 
-const avatarGroupSlotRecipeFn = (props = {}) => {
+const avatarGroupSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(avatarGroupSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const avatarGroupSlotRecipeVariantKeys = [
   "size"

package/recipes/avatar-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const avatarSlotRecipeDefaultVariants = {
@@ -72,9 +72,9 @@ const avatarSlotRecipeSlotNames = [
 ]
 const avatarSlotRecipeSlotFns = /* @__PURE__ */ avatarSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, avatarSlotRecipeDefaultVariants, getSlotCompoundVariant(avatarSlotRecipeCompoundVariants, slotName))])
 
-const avatarSlotRecipeFn = (props = {}) => {
+const avatarSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(avatarSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const avatarSlotRecipeVariantKeys = [
   "variant",

package/recipes/badge-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const badgeRecipeFn = /* @__PURE__ */ createRecipe('badge', {
@@ -145,7 +145,7 @@ const badgeRecipeVariantMap = {
 
 const badgeRecipeVariantKeys = Object.keys(badgeRecipeVariantMap)
 
-export const badgeRecipe = /* @__PURE__ */ Object.assign(badgeRecipeFn, {
+export const badgeRecipe = /* @__PURE__ */ Object.assign(memo(badgeRecipeFn), {
   __recipe__: true,
   __name__: 'badgeRecipe',
   raw: (props) => props,

package/recipes/banner-close-button-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const bannerCloseButtonRecipeFn = /* @__PURE__ */ createRecipe('banner-close-button', {}, [])
@@ -7,7 +7,7 @@ const bannerCloseButtonRecipeVariantMap = {}
 
 const bannerCloseButtonRecipeVariantKeys = Object.keys(bannerCloseButtonRecipeVariantMap)
 
-export const bannerCloseButtonRecipe = /* @__PURE__ */ Object.assign(bannerCloseButtonRecipeFn, {
+export const bannerCloseButtonRecipe = /* @__PURE__ */ Object.assign(memo(bannerCloseButtonRecipeFn), {
   __recipe__: true,
   __name__: 'bannerCloseButtonRecipe',
   raw: (props) => props,

package/recipes/banner-description-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const bannerDescriptionRecipeFn = /* @__PURE__ */ createRecipe('banner-description', {}, [])
@@ -7,7 +7,7 @@ const bannerDescriptionRecipeVariantMap = {}
 
 const bannerDescriptionRecipeVariantKeys = Object.keys(bannerDescriptionRecipeVariantMap)
 
-export const bannerDescriptionRecipe = /* @__PURE__ */ Object.assign(bannerDescriptionRecipeFn, {
+export const bannerDescriptionRecipe = /* @__PURE__ */ Object.assign(memo(bannerDescriptionRecipeFn), {
   __recipe__: true,
   __name__: 'bannerDescriptionRecipe',
   raw: (props) => props,

package/recipes/banner-icon-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const bannerIconSlotRecipeDefaultVariants = {}
@@ -16,9 +16,9 @@ const bannerIconSlotRecipeSlotNames = [
 ]
 const bannerIconSlotRecipeSlotFns = /* @__PURE__ */ bannerIconSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, bannerIconSlotRecipeDefaultVariants, getSlotCompoundVariant(bannerIconSlotRecipeCompoundVariants, slotName))])
 
-const bannerIconSlotRecipeFn = (props = {}) => {
+const bannerIconSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(bannerIconSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const bannerIconSlotRecipeVariantKeys = []
 

package/recipes/banner-link-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const bannerLinkRecipeFn = /* @__PURE__ */ createRecipe('banner-link', {}, [])
@@ -7,7 +7,7 @@ const bannerLinkRecipeVariantMap = {}
 
 const bannerLinkRecipeVariantKeys = Object.keys(bannerLinkRecipeVariantMap)
 
-export const bannerLinkRecipe = /* @__PURE__ */ Object.assign(bannerLinkRecipeFn, {
+export const bannerLinkRecipe = /* @__PURE__ */ Object.assign(memo(bannerLinkRecipeFn), {
   __recipe__: true,
   __name__: 'bannerLinkRecipe',
   raw: (props) => props,

package/recipes/banner-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const bannerSlotRecipeDefaultVariants = {
@@ -18,9 +18,9 @@ const bannerSlotRecipeSlotNames = [
 ]
 const bannerSlotRecipeSlotFns = /* @__PURE__ */ bannerSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, bannerSlotRecipeDefaultVariants, getSlotCompoundVariant(bannerSlotRecipeCompoundVariants, slotName))])
 
-const bannerSlotRecipeFn = (props = {}) => {
+const bannerSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(bannerSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const bannerSlotRecipeVariantKeys = [
   "variant"

package/recipes/banner-title-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const bannerTitleRecipeFn = /* @__PURE__ */ createRecipe('banner-title', {}, [])
@@ -7,7 +7,7 @@ const bannerTitleRecipeVariantMap = {}
 
 const bannerTitleRecipeVariantKeys = Object.keys(bannerTitleRecipeVariantMap)
 
-export const bannerTitleRecipe = /* @__PURE__ */ Object.assign(bannerTitleRecipeFn, {
+export const bannerTitleRecipe = /* @__PURE__ */ Object.assign(memo(bannerTitleRecipeFn), {
   __recipe__: true,
   __name__: 'bannerTitleRecipe',
   raw: (props) => props,

package/recipes/broadcast-slot-recipe.d.ts

@@ -16,7 +16,7 @@ export type BroadcastSlotRecipeVariantProps = {
 
 export interface BroadcastSlotRecipeRecipe {
   __type: BroadcastSlotRecipeVariantProps
-  (props?: BroadcastSlotRecipeVariantProps): Pretty<Record<"root" | "container" | "wrapper" | "icon" | "content" | "textLink" | "action" | "close", string>>
+  (props?: BroadcastSlotRecipeVariantProps): Pretty<Record<"root" | "container" | "wrapper" | "icon" | "label" | "textLink" | "action" | "close", string>>
   raw: (props?: BroadcastSlotRecipeVariantProps) => BroadcastSlotRecipeVariantProps
   variantMap: BroadcastSlotRecipeVariantMap
   variantKeys: Array<keyof BroadcastSlotRecipeVariant>

package/recipes/broadcast-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const broadcastSlotRecipeDefaultVariants = {
@@ -24,8 +24,8 @@ const broadcastSlotRecipeSlotNames = [
     "broadcast__icon"
   ],
   [
-    "content",
-    "broadcast__content"
+    "label",
+    "broadcast__label"
   ],
   [
     "textLink",
@@ -42,9 +42,9 @@ const broadcastSlotRecipeSlotNames = [
 ]
 const broadcastSlotRecipeSlotFns = /* @__PURE__ */ broadcastSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, broadcastSlotRecipeDefaultVariants, getSlotCompoundVariant(broadcastSlotRecipeCompoundVariants, slotName))])
 
-const broadcastSlotRecipeFn = (props = {}) => {
+const broadcastSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(broadcastSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const broadcastSlotRecipeVariantKeys = [
   "variant"

package/recipes/button-group-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const buttonGroupRecipeFn = /* @__PURE__ */ createRecipe('pixel-button-group', {}, [])
@@ -7,7 +7,7 @@ const buttonGroupRecipeVariantMap = {}
 
 const buttonGroupRecipeVariantKeys = Object.keys(buttonGroupRecipeVariantMap)
 
-export const buttonGroupRecipe = /* @__PURE__ */ Object.assign(buttonGroupRecipeFn, {
+export const buttonGroupRecipe = /* @__PURE__ */ Object.assign(memo(buttonGroupRecipeFn), {
   __recipe__: true,
   __name__: 'buttonGroupRecipe',
   raw: (props) => props,

package/recipes/button-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const buttonRecipeFn = /* @__PURE__ */ createRecipe('button', {
@@ -77,7 +77,7 @@ const buttonRecipeVariantMap = {
 
 const buttonRecipeVariantKeys = Object.keys(buttonRecipeVariantMap)
 
-export const buttonRecipe = /* @__PURE__ */ Object.assign(buttonRecipeFn, {
+export const buttonRecipe = /* @__PURE__ */ Object.assign(memo(buttonRecipeFn), {
   __recipe__: true,
   __name__: 'buttonRecipe',
   raw: (props) => props,

package/recipes/checkbox-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const checkboxSlotRecipeDefaultVariants = {}
@@ -20,9 +20,9 @@ const checkboxSlotRecipeSlotNames = [
 ]
 const checkboxSlotRecipeSlotFns = /* @__PURE__ */ checkboxSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, checkboxSlotRecipeDefaultVariants, getSlotCompoundVariant(checkboxSlotRecipeCompoundVariants, slotName))])
 
-const checkboxSlotRecipeFn = (props = {}) => {
+const checkboxSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(checkboxSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const checkboxSlotRecipeVariantKeys = []
 

package/recipes/divider-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const dividerRecipeFn = /* @__PURE__ */ createRecipe('divider', {
@@ -14,7 +14,7 @@ const dividerRecipeVariantMap = {
 
 const dividerRecipeVariantKeys = Object.keys(dividerRecipeVariantMap)
 
-export const dividerRecipe = /* @__PURE__ */ Object.assign(dividerRecipeFn, {
+export const dividerRecipe = /* @__PURE__ */ Object.assign(memo(dividerRecipeFn), {
   __recipe__: true,
   __name__: 'dividerRecipe',
   raw: (props) => props,

package/recipes/dropzone-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const dropzoneSlotRecipeDefaultVariants = {}
@@ -52,9 +52,9 @@ const dropzoneSlotRecipeSlotNames = [
 ]
 const dropzoneSlotRecipeSlotFns = /* @__PURE__ */ dropzoneSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dropzoneSlotRecipeDefaultVariants, getSlotCompoundVariant(dropzoneSlotRecipeCompoundVariants, slotName))])
 
-const dropzoneSlotRecipeFn = (props = {}) => {
+const dropzoneSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(dropzoneSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const dropzoneSlotRecipeVariantKeys = []
 

package/recipes/form-control-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const formControlSlotRecipeDefaultVariants = {}
@@ -28,9 +28,9 @@ const formControlSlotRecipeSlotNames = [
 ]
 const formControlSlotRecipeSlotFns = /* @__PURE__ */ formControlSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, formControlSlotRecipeDefaultVariants, getSlotCompoundVariant(formControlSlotRecipeCompoundVariants, slotName))])
 
-const formControlSlotRecipeFn = (props = {}) => {
+const formControlSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(formControlSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const formControlSlotRecipeVariantKeys = []
 

package/recipes/icon-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const iconRecipeFn = /* @__PURE__ */ createRecipe('icon', {
@@ -14,7 +14,7 @@ const iconRecipeVariantMap = {
 
 const iconRecipeVariantKeys = Object.keys(iconRecipeVariantMap)
 
-export const iconRecipe = /* @__PURE__ */ Object.assign(iconRecipeFn, {
+export const iconRecipe = /* @__PURE__ */ Object.assign(memo(iconRecipeFn), {
   __recipe__: true,
   __name__: 'iconRecipe',
   raw: (props) => props,

package/recipes/input-addon-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const inputAddonSlotRecipeDefaultVariants = {
@@ -15,9 +15,9 @@ const inputAddonSlotRecipeSlotNames = [
 ]
 const inputAddonSlotRecipeSlotFns = /* @__PURE__ */ inputAddonSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, inputAddonSlotRecipeDefaultVariants, getSlotCompoundVariant(inputAddonSlotRecipeCompoundVariants, slotName))])
 
-const inputAddonSlotRecipeFn = (props = {}) => {
+const inputAddonSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(inputAddonSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const inputAddonSlotRecipeVariantKeys = [
   "placement",

package/recipes/input-group-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const inputGroupSlotRecipeDefaultVariants = {}
@@ -12,9 +12,9 @@ const inputGroupSlotRecipeSlotNames = [
 ]
 const inputGroupSlotRecipeSlotFns = /* @__PURE__ */ inputGroupSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, inputGroupSlotRecipeDefaultVariants, getSlotCompoundVariant(inputGroupSlotRecipeCompoundVariants, slotName))])
 
-const inputGroupSlotRecipeFn = (props = {}) => {
+const inputGroupSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(inputGroupSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const inputGroupSlotRecipeVariantKeys = []
 

package/recipes/input-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const inputSlotRecipeDefaultVariants = {
@@ -23,9 +23,9 @@ const inputSlotRecipeSlotNames = [
 ]
 const inputSlotRecipeSlotFns = /* @__PURE__ */ inputSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, inputSlotRecipeDefaultVariants, getSlotCompoundVariant(inputSlotRecipeCompoundVariants, slotName))])
 
-const inputSlotRecipeFn = (props = {}) => {
+const inputSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(inputSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const inputSlotRecipeVariantKeys = [
   "variant",

package/recipes/input-tag-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const inputTagSlotRecipeDefaultVariants = {}
@@ -52,9 +52,9 @@ const inputTagSlotRecipeSlotNames = [
 ]
 const inputTagSlotRecipeSlotFns = /* @__PURE__ */ inputTagSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, inputTagSlotRecipeDefaultVariants, getSlotCompoundVariant(inputTagSlotRecipeCompoundVariants, slotName))])
 
-const inputTagSlotRecipeFn = (props = {}) => {
+const inputTagSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(inputTagSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const inputTagSlotRecipeVariantKeys = []
 

package/recipes/modal-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const modalSlotRecipeDefaultVariants = {
@@ -50,9 +50,9 @@ const modalSlotRecipeSlotNames = [
 ]
 const modalSlotRecipeSlotFns = /* @__PURE__ */ modalSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, modalSlotRecipeDefaultVariants, getSlotCompoundVariant(modalSlotRecipeCompoundVariants, slotName))])
 
-const modalSlotRecipeFn = (props = {}) => {
+const modalSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(modalSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const modalSlotRecipeVariantKeys = [
   "full"