@mage-ui/preset 1.0.49 → 1.0.51

package/dist/recipes/navigations/sidebars/sidebar/sidebar.mjs

@@ -1,2 +1,2 @@
-import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`sidebar`,jsx:[`Sidebar`],base:{"--sidebar-grid-area":`sidebar`,"--sidebar-position":`fixed`,"--sidebar-background":`{colors.neutral.background.2.enabled}`,"--sidebar-gap":`{spacing.200}`,"--sidebar-width":`16.5rem`,"--sidebar-height":`100dvh`,"--sidebar-top":`{spacing.100}`,"--sidebar-padding-block":`{spacing.400}`,"--sidebar-padding-inline-base":`{spacing.350}`,"--sidebar-padding-inline":`var(--sidebar-padding-inline-start, var(--sidebar-padding-inline-base))`,"--sidebar-padding-inline-start":`max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-start, 0px)))`,"--sidebar-padding-inline-end":`max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-end, 0px)))`,"--sidebar-radii":`{radii.200}`,"--sidebar-transition":`{animations.base.100}`,"--sidebar-zindex":`{zIndex.nav}`,"--sidebar-slot-gap":`{spacing.200}`,"--sidebar-slot-padding-block":`{spacing.0}`,"--sidebar-slot-padding-inline":`var(--sidebar-padding-inline-base)`,"--sidebar-slot-padding-inline-start":`var(--sidebar-slot-padding-inline)`,"--sidebar-slot-padding-inline-end":`var(--sidebar-slot-padding-inline)`,"--sidebar-nav-gap":`{spacing.300}`,"--sidebar-nav-padding-top":`{spacing.400}`,"--sidebar-nav-height":`calc(100dvh - token(spacing.1000))`,"--sidebar-nav-background":`transparent`,"--sidebar-nav-border-color":`transparent`,"--sidebar-nav-border-top-width":`{borders.0}`,"--sidebar-nav-border-bottom-width":`{borders.0}`,"--sidebar-nav-border-left-width":`{borders.0}`,"--sidebar-nav-border-right-width":`{borders.0}`,"--sidebar-nav-border-radius":`{radii.0}`,"--sidebar-nav-focus-safe-padding-inline":`calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))`,"--sidebar-nav-focus-safe-padding-block":`calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))`,"--sidebar-nav-focus-safe-padding-inline-start":`var(--sidebar-nav-focus-safe-padding-inline)`,"--sidebar-nav-focus-safe-padding-inline-end":`calc(var(--sidebar-nav-focus-safe-padding-inline) + var(--sidebar-scrollarea-autosize-scrollbar-size))`,"--sidebar-scrollarea-autosize-height":`100%`,"--sidebar-scrollarea-autosize-max-height":`100%`,"--sidebar-scrollarea-autosize-scrollbar-size":`{sizes.50}`,"--sidebar-scrollarea-autosize-scrollbar-inline-offset":`0`,"--sidebar-scrollarea-autosize-scrollbar-background":`{colors.neutral.background.alpha.1.enabled}`,"--sidebar-scrollarea-autosize-scrollbar-background-hover":`{colors.neutral.background.alpha.2.enabled}`,"--sidebar-scrollarea-autosize-thumb-background":`{colors.neutral.background.4.enabled}`,"--sidebar-scrollarea-autosize-thumb-background-hover":`{colors.neutral.background.5.enabled}`,"--sidebar-scrollarea-autosize-overflow-y-behavior":`auto`,"--sidebar-scrollarea-autosize-overflow-x-behavior":`hidden`,"--sidebar-scrollarea-autosize-viewport-padding-block-start":`var(--sidebar-nav-focus-safe-padding-block)`,"--sidebar-scrollarea-autosize-viewport-padding-block-end":`var(--sidebar-nav-focus-safe-padding-block)`,"--sidebar-scrollarea-autosize-viewport-padding-inline-start":`var(--sidebar-nav-focus-safe-padding-inline-start)`,"--sidebar-scrollarea-autosize-viewport-padding-inline-end":`var(--sidebar-nav-focus-safe-padding-inline-end)`,"--sidebar-nav-group-gap":`{spacing.300}`,"--sidebar-nav-group-padding-top":`{spacing.200}`,"--sidebar-nav-group-padding-bottom":`{spacing.400}`,"--sidebar-nav-group-padding-inline":`{spacing.0}`,"--sidebar-nav-group-background":`transparent`,"--sidebar-nav-group-border-color":`{colors.neutral.stroke.7.enabled}`,"--sidebar-nav-group-border-top-width":`{borders.0}`,"--sidebar-nav-group-border-bottom-width":`{borders.100}`,"--sidebar-nav-group-border-left-width":`{borders.0}`,"--sidebar-nav-group-border-right-width":`{borders.0}`,"--sidebar-nav-group-radii":`{radii.0}`,"--sidebar-nav-group-title-font-size":`{fontSizes.200}`,"--sidebar-nav-group-title-font-weight":`{fontWeights.medium}`,"--sidebar-nav-group-title-color":`{colors.neutral.foreground.3.enabled}`,"--sidebar-nav-group-title-text-transform":`uppercase`,"--sidebar-nav-group-title-padding-block":`{spacing.0}`,"--sidebar-nav-group-title-padding-inline":`var(--sidebar-nav-list-item-padding-inline, {spacing.300})`,"--sidebar-nav-list-gap":`{spacing.200}`,"--sidebar-nav-list-padding":`{spacing.0}`,"--sidebar-nav-list-margin":`{spacing.0}`,"--sidebar-nav-list-item-height":`2.5rem`,"--sidebar-nav-list-item-gap":`{spacing.300}`,"--sidebar-nav-list-item-transition":`{animations.base.100}`,"--sidebar-nav-list-item-padding-inline":`{spacing.300}`,"--sidebar-nav-list-item-radii":`{radii.100}`,"--sidebar-nav-list-item-background":`transparent`,"--sidebar-nav-list-item-background-hovered":`{colors.neutral.background.2.hovered}`,"--sidebar-nav-list-item-background-active":`{colors.neutral.background.2.selected}`,"--sidebar-nav-list-item-background-selected":`{colors.neutral.background.2.primary.selected}`,"--sidebar-nav-list-item-background-selected-hovered":`{colors.neutral.background.2.primary.selectedHovered}`,"--sidebar-nav-list-item-background-expanded":`{colors.neutral.background.2.primary.selected}`,"--sidebar-nav-list-item-background-expanded-hovered":`{colors.neutral.background.2.primary.selectedHovered}`,"--sidebar-nav-list-item-foreground":`{colors.neutral.foreground.2.enabled}`,"--sidebar-nav-list-item-foreground-hovered":`{colors.neutral.foreground.2.primary.hovered}`,"--sidebar-nav-list-item-foreground-active":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-nav-list-item-foreground-selected":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-nav-list-item-foreground-selected-hovered":`{colors.neutral.foreground.2.primary.selectedHovered}`,"--sidebar-nav-list-item-foreground-expanded":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-nav-list-item-foreground-expanded-hovered":`{colors.neutral.foreground.2.primary.selectedHovered}`,"--sidebar-nav-item-button-icon-toggle-size":`{sizes.300}`,"--sidebar-nav-item-label-font-size":`{fontSizes.400}`,"--sidebar-nav-item-label-font-weight":`{fontWeights.medium}`,"--sidebar-nav-item-label-text-transform":`none`,"--sidebar-nav-list-item-focus-outline-width":`{borders.200}`,"--sidebar-nav-list-item-focus-outline-style":`solid`,"--sidebar-nav-list-item-focus-outline-color":`{colors.primary.stroke.1.focused}`,"--sidebar-nav-list-item-focus-outline-offset":`{spacing.50}`,"--sidebar-subnav-list-stroke-color":`{colors.neutral.stroke.6.enabled}`,"--sidebar-subnav-zindex":`{zIndex.dropdown}`,"--sidebar-subnav-animation-name":`expandY`,"--sidebar-subnav-animation-duration":`150ms`,"--sidebar-subnav-animation-timing-function":`ease-out`,"--sidebar-subnav-animation-fill-mode":`both`,"--sidebar-subnav-padding-left":`{spacing.450}`,"--sidebar-subnav-list-gap":`{spacing.0}`,"--sidebar-subnav-list-padding-top":`{spacing.100}`,"--sidebar-subnav-collapsed-background":`{colors.neutral.background.2.enabled}`,"--sidebar-subnav-collapsed-padding-block":`{spacing.400}`,"--sidebar-subnav-collapsed-padding-inline":`{spacing.450}`,"--sidebar-subnav-collapsed-margin-left":`{spacing.50}`,"--sidebar-subnav-collapsed-border-radius":`{radii.200}`,"--sidebar-subnav-list-item-height":`2rem`,"--sidebar-subnav-list-item-padding-left":`{spacing.300}`,"--sidebar-subnav-list-item-padding-right":`{spacing.300}`,"--sidebar-subnav-list-item-padding-block":`{spacing.100}`,"--sidebar-subnav-list-item-border-radius":`{radii.100}`,"--sidebar-subnav-list-item-transition":`{animations.base.100}`,"--sidebar-subnav-list-stroke-width":`{borders.100}`,"--sidebar-subnav-list-item-gap":`{spacing.0}`,"--sidebar-subnav-list-item-background":`{colors.neutral.background.2.enabled}`,"--sidebar-subnav-list-item-background-hovered":`{colors.neutral.background.2.hovered}`,"--sidebar-subnav-list-item-background-active":`{colors.neutral.background.2.selected}`,"--sidebar-subnav-list-item-background-selected":`{colors.neutral.background.2.primary.selected}`,"--sidebar-subnav-list-item-background-selected-hovered":`{colors.neutral.background.2.primary.selectedHovered}`,"--sidebar-subnav-list-item-foreground":`{colors.neutral.foreground.3.enabled}`,"--sidebar-subnav-list-item-foreground-hovered":`{colors.neutral.foreground.2.primary.hovered}`,"--sidebar-subnav-list-item-foreground-active":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-subnav-list-item-foreground-selected":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-subnav-list-item-foreground-selected-hovered":`{colors.neutral.foreground.2.primary.selectedHovered}`,"--sidebar-subnav-list-item-focus-outline-width":`{borders.200}`,"--sidebar-subnav-list-item-focus-outline-style":`solid`,"--sidebar-subnav-list-item-focus-outline-color":`{colors.primary.stroke.1.focused}`,"--sidebar-subnav-list-item-focus-outline-offset":`{spacing.50}`,"--sidebar-subnav-list-item-label-font-size":`{fontSizes.300}`,"--sidebar-subnav-list-item-label-font-weight":`{fontWeights.medium}`,"--sidebar-subnav-list-item-label-text-transform":`none`,tablet:{"--sidebar-position":`sticky`,"--sidebar-height":`calc(100dvh - 0.5rem)`,"--sidebar-nav-list-item-height":`2.75rem`,"--sidebar-nav-item-label-font-size":`{fontSizes.300}`,"&[data-collapsed=true]":{"--sidebar-width":`3.5rem`,"--sidebar-padding-inline-base":`{spacing.100}`,"--sidebar-nav-focus-safe-padding-inline-start":`calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))`,"--sidebar-nav-focus-safe-padding-inline-end":`calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))`}}}});export{t as sidebar};
+import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`sidebar`,jsx:[`Sidebar`],base:{"--sidebar-grid-area":`sidebar`,"--sidebar-position":`fixed`,"--sidebar-background":`{colors.neutral.background.2.enabled}`,"--sidebar-gap":`{spacing.200}`,"--sidebar-width":`16.5rem`,"--sidebar-height":`100dvh`,"--sidebar-top":`{spacing.100}`,"--sidebar-padding-block":`{spacing.400}`,"--sidebar-padding-inline-base":`{spacing.350}`,"--sidebar-padding-inline":`var(--sidebar-padding-inline-start, var(--sidebar-padding-inline-base))`,"--sidebar-padding-inline-start":`max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-start, 0px)))`,"--sidebar-padding-inline-end":`max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-end, 0px)))`,"--sidebar-radii":`{radii.200}`,"--sidebar-transition":`{animations.base.100}`,"--sidebar-zindex":`{zIndex.nav}`,"--sidebar-slot-gap":`{spacing.200}`,"--sidebar-slot-padding-block":`{spacing.0}`,"--sidebar-slot-padding-inline":`var(--sidebar-padding-inline-base)`,"--sidebar-slot-padding-inline-start":`var(--sidebar-slot-padding-inline)`,"--sidebar-slot-padding-inline-end":`var(--sidebar-slot-padding-inline)`,"--sidebar-nav-gap":`{spacing.300}`,"--sidebar-nav-padding-top":`{spacing.400}`,"--sidebar-nav-height":`calc(100dvh - token(spacing.1000))`,"--sidebar-nav-background":`transparent`,"--sidebar-nav-border-color":`transparent`,"--sidebar-nav-border-top-width":`{borders.0}`,"--sidebar-nav-border-bottom-width":`{borders.0}`,"--sidebar-nav-border-left-width":`{borders.0}`,"--sidebar-nav-border-right-width":`{borders.0}`,"--sidebar-nav-border-radius":`{radii.0}`,"--sidebar-nav-focus-safe-padding-inline":`calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))`,"--sidebar-nav-focus-safe-padding-block":`calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))`,"--sidebar-nav-focus-safe-padding-inline-start":`var(--sidebar-nav-focus-safe-padding-inline)`,"--sidebar-nav-focus-safe-padding-inline-end":`calc(var(--sidebar-nav-focus-safe-padding-inline) + var(--sidebar-scrollarea-autosize-scrollbar-size))`,"--sidebar-scrollarea-autosize-height":`100%`,"--sidebar-scrollarea-autosize-max-height":`100%`,"--sidebar-scrollarea-autosize-scrollbar-size":`{sizes.50}`,"--sidebar-scrollarea-autosize-scrollbar-inline-offset":`0`,"--sidebar-scrollarea-autosize-scrollbar-background":`{colors.neutral.background.alpha.1.enabled}`,"--sidebar-scrollarea-autosize-scrollbar-background-hover":`{colors.neutral.background.alpha.2.enabled}`,"--sidebar-scrollarea-autosize-thumb-background":`{colors.neutral.background.4.enabled}`,"--sidebar-scrollarea-autosize-thumb-background-hover":`{colors.neutral.background.5.enabled}`,"--sidebar-scrollarea-autosize-overflow-y-behavior":`auto`,"--sidebar-scrollarea-autosize-overflow-x-behavior":`hidden`,"--sidebar-scrollarea-autosize-viewport-padding-block-start":`var(--sidebar-nav-focus-safe-padding-block)`,"--sidebar-scrollarea-autosize-viewport-padding-block-end":`var(--sidebar-nav-focus-safe-padding-block)`,"--sidebar-scrollarea-autosize-viewport-padding-inline-start":`var(--sidebar-nav-focus-safe-padding-inline-start)`,"--sidebar-scrollarea-autosize-viewport-padding-inline-end":`var(--sidebar-nav-focus-safe-padding-inline-end)`,"--sidebar-nav-group-gap":`{spacing.300}`,"--sidebar-nav-group-padding-top":`{spacing.200}`,"--sidebar-nav-group-padding-bottom":`{spacing.400}`,"--sidebar-nav-group-padding-inline":`{spacing.0}`,"--sidebar-nav-group-background":`transparent`,"--sidebar-nav-group-border-color":`{colors.neutral.stroke.7.enabled}`,"--sidebar-nav-group-border-top-width":`{borders.0}`,"--sidebar-nav-group-border-bottom-width":`{borders.100}`,"--sidebar-nav-group-border-left-width":`{borders.0}`,"--sidebar-nav-group-border-right-width":`{borders.0}`,"--sidebar-nav-group-radii":`{radii.0}`,"--sidebar-nav-group-title-font-size":`{fontSizes.200}`,"--sidebar-nav-group-title-font-weight":`{fontWeights.medium}`,"--sidebar-nav-group-title-color":`{colors.neutral.foreground.3.enabled}`,"--sidebar-nav-group-title-text-transform":`uppercase`,"--sidebar-nav-group-title-padding-block":`{spacing.0}`,"--sidebar-nav-group-title-padding-inline":`var(--sidebar-nav-list-item-padding-inline, {spacing.300})`,"--sidebar-nav-list-gap":`{spacing.200}`,"--sidebar-nav-list-padding":`{spacing.0}`,"--sidebar-nav-list-margin":`{spacing.0}`,"--sidebar-nav-list-item-height":`{sizes.600}`,"--sidebar-nav-list-item-gap":`{spacing.300}`,"--sidebar-nav-list-item-transition":`{animations.base.100}`,"--sidebar-nav-list-item-padding-inline":`{spacing.300}`,"--sidebar-nav-list-item-radii":`{radii.100}`,"--sidebar-nav-list-item-background":`transparent`,"--sidebar-nav-list-item-background-hovered":`{colors.neutral.background.2.hovered}`,"--sidebar-nav-list-item-background-active":`{colors.neutral.background.2.selected}`,"--sidebar-nav-list-item-background-selected":`{colors.neutral.background.2.primary.selected}`,"--sidebar-nav-list-item-background-selected-hovered":`{colors.neutral.background.2.primary.selectedHovered}`,"--sidebar-nav-list-item-background-expanded":`{colors.neutral.background.2.primary.selected}`,"--sidebar-nav-list-item-background-expanded-hovered":`{colors.neutral.background.2.primary.selectedHovered}`,"--sidebar-nav-list-item-foreground":`{colors.neutral.foreground.2.enabled}`,"--sidebar-nav-list-item-foreground-hovered":`{colors.neutral.foreground.2.primary.hovered}`,"--sidebar-nav-list-item-foreground-active":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-nav-list-item-foreground-selected":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-nav-list-item-foreground-selected-hovered":`{colors.neutral.foreground.2.primary.selectedHovered}`,"--sidebar-nav-list-item-foreground-expanded":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-nav-list-item-foreground-expanded-hovered":`{colors.neutral.foreground.2.primary.selectedHovered}`,"--sidebar-nav-item-button-icon-toggle-size":`{sizes.300}`,"--sidebar-nav-item-label-font-size":`{fontSizes.400}`,"--sidebar-nav-item-label-font-weight":`{fontWeights.medium}`,"--sidebar-nav-item-label-text-transform":`none`,"--sidebar-nav-list-item-focus-outline-width":`{borders.200}`,"--sidebar-nav-list-item-focus-outline-style":`solid`,"--sidebar-nav-list-item-focus-outline-color":`{colors.primary.stroke.1.focused}`,"--sidebar-nav-list-item-focus-outline-offset":`{spacing.50}`,"--sidebar-subnav-list-stroke-color":`{colors.neutral.stroke.6.enabled}`,"--sidebar-subnav-zindex":`{zIndex.dropdown}`,"--sidebar-subnav-animation-name":`expandY`,"--sidebar-subnav-animation-duration":`150ms`,"--sidebar-subnav-animation-timing-function":`ease-out`,"--sidebar-subnav-animation-fill-mode":`both`,"--sidebar-subnav-padding-left":`{spacing.450}`,"--sidebar-subnav-list-gap":`{spacing.0}`,"--sidebar-subnav-list-padding-top":`{spacing.100}`,"--sidebar-subnav-collapsed-background":`{colors.neutral.background.2.enabled}`,"--sidebar-subnav-collapsed-padding-block":`{spacing.400}`,"--sidebar-subnav-collapsed-padding-inline":`{spacing.450}`,"--sidebar-subnav-collapsed-margin-left":`{spacing.50}`,"--sidebar-subnav-collapsed-border-radius":`{radii.200}`,"--sidebar-subnav-list-item-height":`{sizes.500}`,"--sidebar-subnav-list-item-padding-left":`{spacing.300}`,"--sidebar-subnav-list-item-padding-right":`{spacing.300}`,"--sidebar-subnav-list-item-padding-block":`{spacing.100}`,"--sidebar-subnav-list-item-border-radius":`{radii.100}`,"--sidebar-subnav-list-item-transition":`{animations.base.100}`,"--sidebar-subnav-list-stroke-width":`{borders.100}`,"--sidebar-subnav-list-item-gap":`{spacing.0}`,"--sidebar-subnav-list-item-background":`{colors.neutral.background.2.enabled}`,"--sidebar-subnav-list-item-background-hovered":`{colors.neutral.background.2.hovered}`,"--sidebar-subnav-list-item-background-active":`{colors.neutral.background.2.selected}`,"--sidebar-subnav-list-item-background-selected":`{colors.neutral.background.2.primary.selected}`,"--sidebar-subnav-list-item-background-selected-hovered":`{colors.neutral.background.2.primary.selectedHovered}`,"--sidebar-subnav-list-item-foreground":`{colors.neutral.foreground.3.enabled}`,"--sidebar-subnav-list-item-foreground-hovered":`{colors.neutral.foreground.2.primary.hovered}`,"--sidebar-subnav-list-item-foreground-active":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-subnav-list-item-foreground-selected":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-subnav-list-item-foreground-selected-hovered":`{colors.neutral.foreground.2.primary.selectedHovered}`,"--sidebar-subnav-list-item-focus-outline-width":`{borders.200}`,"--sidebar-subnav-list-item-focus-outline-style":`solid`,"--sidebar-subnav-list-item-focus-outline-color":`{colors.primary.stroke.1.focused}`,"--sidebar-subnav-list-item-focus-outline-offset":`{spacing.50}`,"--sidebar-subnav-list-item-label-font-size":`{fontSizes.300}`,"--sidebar-subnav-list-item-label-font-weight":`{fontWeights.medium}`,"--sidebar-subnav-list-item-label-text-transform":`none`,md:{"--sidebar-position":`sticky`,"--sidebar-height":`calc(100dvh - 0.5rem)`,"--sidebar-nav-list-item-height":`2.75rem`,"--sidebar-nav-item-label-font-size":`{fontSizes.300}`,"&[data-collapsed=true]":{"--sidebar-width":`3.5rem`,"--sidebar-padding-inline-base":`{spacing.100}`,"--sidebar-nav-focus-safe-padding-inline-start":`calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))`,"--sidebar-nav-focus-safe-padding-inline-end":`calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))`}}}});export{t as sidebar};
 //# sourceMappingURL=sidebar.mjs.map

package/dist/recipes/navigations/sidebars/sidebar/sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.mjs","names":[],"sources":["../../../../../src/recipes/navigations/sidebars/sidebar/sidebar.ts"],"sourcesContent":["import {\n  defineRecipe,\n  type RecipeBuilder,\n  type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const sidebar = defineRecipe({\n  className: 'sidebar',\n  jsx: ['Sidebar'],\n  base: {\n    /* root */\n    '--sidebar-grid-area': 'sidebar',\n\n    '--sidebar-position': 'fixed',\n    '--sidebar-background': '{colors.neutral.background.2.enabled}',\n    '--sidebar-gap': '{spacing.200}',\n    '--sidebar-width': '16.5rem',\n    '--sidebar-height': '100dvh',\n    '--sidebar-top': '{spacing.100}',\n    '--sidebar-padding-block': '{spacing.400}',\n    '--sidebar-padding-inline-base': '{spacing.350}',\n    '--sidebar-padding-inline':\n      'var(--sidebar-padding-inline-start, var(--sidebar-padding-inline-base))',\n    '--sidebar-padding-inline-start':\n      'max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-start, 0px)))',\n    '--sidebar-padding-inline-end':\n      'max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-end, 0px)))',\n    '--sidebar-radii': '{radii.200}',\n    '--sidebar-transition': '{animations.base.100}',\n    '--sidebar-zindex': '{zIndex.nav}',\n\n    /* slots */\n    '--sidebar-slot-gap': '{spacing.200}',\n    '--sidebar-slot-padding-block': '{spacing.0}',\n    '--sidebar-slot-padding-inline': 'var(--sidebar-padding-inline-base)',\n    '--sidebar-slot-padding-inline-start': 'var(--sidebar-slot-padding-inline)',\n    '--sidebar-slot-padding-inline-end': 'var(--sidebar-slot-padding-inline)',\n\n    /* nav */\n    '--sidebar-nav-gap': '{spacing.300}',\n    '--sidebar-nav-padding-top': '{spacing.400}',\n    '--sidebar-nav-height': 'calc(100dvh - token(spacing.1000))',\n    '--sidebar-nav-background': 'transparent',\n    '--sidebar-nav-border-color': 'transparent',\n    '--sidebar-nav-border-top-width': '{borders.0}',\n    '--sidebar-nav-border-bottom-width': '{borders.0}',\n    '--sidebar-nav-border-left-width': '{borders.0}',\n    '--sidebar-nav-border-right-width': '{borders.0}',\n    '--sidebar-nav-border-radius': '{radii.0}',\n    '--sidebar-nav-focus-safe-padding-inline':\n      'calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))',\n    '--sidebar-nav-focus-safe-padding-block':\n      'calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))',\n    '--sidebar-nav-focus-safe-padding-inline-start':\n      'var(--sidebar-nav-focus-safe-padding-inline)',\n    '--sidebar-nav-focus-safe-padding-inline-end':\n      'calc(var(--sidebar-nav-focus-safe-padding-inline) + var(--sidebar-scrollarea-autosize-scrollbar-size))',\n\n    /* nav scroll area autosize */\n    '--sidebar-scrollarea-autosize-height': '100%',\n    '--sidebar-scrollarea-autosize-max-height': '100%',\n    '--sidebar-scrollarea-autosize-scrollbar-size': '{sizes.50}',\n    '--sidebar-scrollarea-autosize-scrollbar-inline-offset': '0',\n    '--sidebar-scrollarea-autosize-scrollbar-background':\n      '{colors.neutral.background.alpha.1.enabled}',\n    '--sidebar-scrollarea-autosize-scrollbar-background-hover':\n      '{colors.neutral.background.alpha.2.enabled}',\n    '--sidebar-scrollarea-autosize-thumb-background':\n      '{colors.neutral.background.4.enabled}',\n    '--sidebar-scrollarea-autosize-thumb-background-hover':\n      '{colors.neutral.background.5.enabled}',\n    '--sidebar-scrollarea-autosize-overflow-y-behavior': 'auto',\n    '--sidebar-scrollarea-autosize-overflow-x-behavior': 'hidden',\n    '--sidebar-scrollarea-autosize-viewport-padding-block-start':\n      'var(--sidebar-nav-focus-safe-padding-block)',\n    '--sidebar-scrollarea-autosize-viewport-padding-block-end':\n      'var(--sidebar-nav-focus-safe-padding-block)',\n    '--sidebar-scrollarea-autosize-viewport-padding-inline-start':\n      'var(--sidebar-nav-focus-safe-padding-inline-start)',\n    '--sidebar-scrollarea-autosize-viewport-padding-inline-end':\n      'var(--sidebar-nav-focus-safe-padding-inline-end)',\n\n    /* nav group */\n    '--sidebar-nav-group-gap': '{spacing.300}',\n    '--sidebar-nav-group-padding-top': '{spacing.200}',\n    '--sidebar-nav-group-padding-bottom': '{spacing.400}',\n    '--sidebar-nav-group-padding-inline': '{spacing.0}',\n    '--sidebar-nav-group-background': 'transparent',\n    '--sidebar-nav-group-border-color': '{colors.neutral.stroke.7.enabled}',\n    '--sidebar-nav-group-border-top-width': '{borders.0}',\n    '--sidebar-nav-group-border-bottom-width': '{borders.100}',\n    '--sidebar-nav-group-border-left-width': '{borders.0}',\n    '--sidebar-nav-group-border-right-width': '{borders.0}',\n    '--sidebar-nav-group-radii': '{radii.0}',\n\n    /* nav group title */\n    '--sidebar-nav-group-title-font-size': '{fontSizes.200}',\n    '--sidebar-nav-group-title-font-weight': '{fontWeights.medium}',\n    '--sidebar-nav-group-title-color': '{colors.neutral.foreground.3.enabled}',\n    '--sidebar-nav-group-title-text-transform': 'uppercase',\n    '--sidebar-nav-group-title-padding-block': '{spacing.0}',\n    '--sidebar-nav-group-title-padding-inline':\n      'var(--sidebar-nav-list-item-padding-inline, {spacing.300})',\n\n    /* nav list */\n    '--sidebar-nav-list-gap': '{spacing.200}',\n    '--sidebar-nav-list-padding': '{spacing.0}',\n    '--sidebar-nav-list-margin': '{spacing.0}',\n\n    /* nav list item */\n    '--sidebar-nav-list-item-height': '2.5rem',\n    '--sidebar-nav-list-item-gap': '{spacing.300}',\n    '--sidebar-nav-list-item-transition': '{animations.base.100}',\n    '--sidebar-nav-list-item-padding-inline': '{spacing.300}',\n    '--sidebar-nav-list-item-radii': '{radii.100}',\n    '--sidebar-nav-list-item-background': 'transparent',\n    '--sidebar-nav-list-item-background-hovered':\n      '{colors.neutral.background.2.hovered}',\n    '--sidebar-nav-list-item-background-active':\n      '{colors.neutral.background.2.selected}',\n    '--sidebar-nav-list-item-background-selected':\n      '{colors.neutral.background.2.primary.selected}',\n    '--sidebar-nav-list-item-background-selected-hovered':\n      '{colors.neutral.background.2.primary.selectedHovered}',\n    '--sidebar-nav-list-item-background-expanded':\n      '{colors.neutral.background.2.primary.selected}',\n    '--sidebar-nav-list-item-background-expanded-hovered':\n      '{colors.neutral.background.2.primary.selectedHovered}',\n    '--sidebar-nav-list-item-foreground':\n      '{colors.neutral.foreground.2.enabled}',\n    '--sidebar-nav-list-item-foreground-hovered':\n      '{colors.neutral.foreground.2.primary.hovered}',\n    '--sidebar-nav-list-item-foreground-active':\n      '{colors.neutral.foreground.2.primary.selected}',\n    '--sidebar-nav-list-item-foreground-selected':\n      '{colors.neutral.foreground.2.primary.selected}',\n    '--sidebar-nav-list-item-foreground-selected-hovered':\n      '{colors.neutral.foreground.2.primary.selectedHovered}',\n    '--sidebar-nav-list-item-foreground-expanded':\n      '{colors.neutral.foreground.2.primary.selected}',\n    '--sidebar-nav-list-item-foreground-expanded-hovered':\n      '{colors.neutral.foreground.2.primary.selectedHovered}',\n\n    /* nav item button */\n    '--sidebar-nav-item-button-icon-toggle-size': '{sizes.300}',\n\n    /* nav item label */\n    '--sidebar-nav-item-label-font-size': '{fontSizes.400}',\n    '--sidebar-nav-item-label-font-weight': '{fontWeights.medium}',\n    '--sidebar-nav-item-label-text-transform': 'none',\n\n    '--sidebar-nav-list-item-focus-outline-width': '{borders.200}',\n    '--sidebar-nav-list-item-focus-outline-style': 'solid',\n    '--sidebar-nav-list-item-focus-outline-color':\n      '{colors.primary.stroke.1.focused}',\n    '--sidebar-nav-list-item-focus-outline-offset': '{spacing.50}',\n\n    /* subnav */\n    '--sidebar-subnav-list-stroke-color': '{colors.neutral.stroke.6.enabled}',\n\n    '--sidebar-subnav-zindex': '{zIndex.dropdown}',\n    '--sidebar-subnav-animation-name': 'expandY',\n    '--sidebar-subnav-animation-duration': '150ms',\n    '--sidebar-subnav-animation-timing-function': 'ease-out',\n    '--sidebar-subnav-animation-fill-mode': 'both',\n    '--sidebar-subnav-padding-left': '{spacing.450}',\n    '--sidebar-subnav-list-gap': '{spacing.0}',\n    '--sidebar-subnav-list-padding-top': '{spacing.100}',\n\n    /* subnav collapsed */\n    '--sidebar-subnav-collapsed-background':\n      '{colors.neutral.background.2.enabled}',\n    '--sidebar-subnav-collapsed-padding-block': '{spacing.400}',\n    '--sidebar-subnav-collapsed-padding-inline': '{spacing.450}',\n    '--sidebar-subnav-collapsed-margin-left': '{spacing.50}',\n    '--sidebar-subnav-collapsed-border-radius': '{radii.200}',\n\n    /* subnav list item */\n    '--sidebar-subnav-list-item-height': '2rem',\n    '--sidebar-subnav-list-item-padding-left': '{spacing.300}',\n    '--sidebar-subnav-list-item-padding-right': '{spacing.300}',\n    '--sidebar-subnav-list-item-padding-block': '{spacing.100}',\n    '--sidebar-subnav-list-item-border-radius': '{radii.100}',\n    '--sidebar-subnav-list-item-transition': '{animations.base.100}',\n    '--sidebar-subnav-list-stroke-width': '{borders.100}',\n    '--sidebar-subnav-list-item-gap': '{spacing.0}',\n    '--sidebar-subnav-list-item-background':\n      '{colors.neutral.background.2.enabled}',\n    '--sidebar-subnav-list-item-background-hovered':\n      '{colors.neutral.background.2.hovered}',\n    '--sidebar-subnav-list-item-background-active':\n      '{colors.neutral.background.2.selected}',\n    '--sidebar-subnav-list-item-background-selected':\n      '{colors.neutral.background.2.primary.selected}',\n    '--sidebar-subnav-list-item-background-selected-hovered':\n      '{colors.neutral.background.2.primary.selectedHovered}',\n    '--sidebar-subnav-list-item-foreground':\n      '{colors.neutral.foreground.3.enabled}',\n    '--sidebar-subnav-list-item-foreground-hovered':\n      '{colors.neutral.foreground.2.primary.hovered}',\n    '--sidebar-subnav-list-item-foreground-active':\n      '{colors.neutral.foreground.2.primary.selected}',\n    '--sidebar-subnav-list-item-foreground-selected':\n      '{colors.neutral.foreground.2.primary.selected}',\n    '--sidebar-subnav-list-item-foreground-selected-hovered':\n      '{colors.neutral.foreground.2.primary.selectedHovered}',\n\n    '--sidebar-subnav-list-item-focus-outline-width': '{borders.200}',\n    '--sidebar-subnav-list-item-focus-outline-style': 'solid',\n    '--sidebar-subnav-list-item-focus-outline-color':\n      '{colors.primary.stroke.1.focused}',\n    '--sidebar-subnav-list-item-focus-outline-offset': '{spacing.50}',\n\n    /* subnav list item label */\n    '--sidebar-subnav-list-item-label-font-size': '{fontSizes.300}',\n    '--sidebar-subnav-list-item-label-font-weight': '{fontWeights.medium}',\n    '--sidebar-subnav-list-item-label-text-transform': 'none',\n\n    tablet: {\n      /* root */\n      '--sidebar-position': 'sticky',\n      '--sidebar-height': 'calc(100dvh - 0.5rem)',\n\n      /* nav list item */\n      '--sidebar-nav-list-item-height': '2.75rem',\n\n      /* nav item label */\n      '--sidebar-nav-item-label-font-size': '{fontSizes.300}',\n\n      '&[data-collapsed=true]': {\n        /* root */\n        '--sidebar-width': '3.5rem',\n        '--sidebar-padding-inline-base': '{spacing.100}',\n        '--sidebar-nav-focus-safe-padding-inline-start':\n          'calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))',\n        '--sidebar-nav-focus-safe-padding-inline-end':\n          'calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))',\n      },\n    },\n  },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAU,EAAa,CAClC,UAAW,UACX,IAAK,CAAC,UAAU,CAChB,KAAM,CAEJ,sBAAuB,UAEvB,qBAAsB,QACtB,uBAAwB,wCACxB,gBAAiB,gBACjB,kBAAmB,UACnB,mBAAoB,SACpB,gBAAiB,gBACjB,0BAA2B,gBAC3B,gCAAiC,gBACjC,2BACE,0EACF,iCACE,+GACF,+BACE,6GACF,kBAAmB,cACnB,uBAAwB,wBACxB,mBAAoB,eAGpB,qBAAsB,gBACtB,+BAAgC,cAChC,gCAAiC,qCACjC,sCAAuC,qCACvC,oCAAqC,qCAGrC,oBAAqB,gBACrB,4BAA6B,gBAC7B,uBAAwB,qCACxB,2BAA4B,cAC5B,6BAA8B,cAC9B,iCAAkC,cAClC,oCAAqC,cACrC,kCAAmC,cACnC,mCAAoC,cACpC,8BAA+B,YAC/B,0CACE,6GACF,yCACE,6GACF,gDACE,+CACF,8CACE,yGAGF,uCAAwC,OACxC,2CAA4C,OAC5C,+CAAgD,aAChD,wDAAyD,IACzD,qDACE,8CACF,2DACE,8CACF,iDACE,wCACF,uDACE,wCACF,oDAAqD,OACrD,oDAAqD,SACrD,6DACE,8CACF,2DACE,8CACF,8DACE,qDACF,4DACE,mDAGF,0BAA2B,gBAC3B,kCAAmC,gBACnC,qCAAsC,gBACtC,qCAAsC,cACtC,iCAAkC,cAClC,mCAAoC,oCACpC,uCAAwC,cACxC,0CAA2C,gBAC3C,wCAAyC,cACzC,yCAA0C,cAC1C,4BAA6B,YAG7B,sCAAuC,kBACvC,wCAAyC,uBACzC,kCAAmC,wCACnC,2CAA4C,YAC5C,0CAA2C,cAC3C,2CACE,6DAGF,yBAA0B,gBAC1B,6BAA8B,cAC9B,4BAA6B,cAG7B,iCAAkC,SAClC,8BAA+B,gBAC/B,qCAAsC,wBACtC,yCAA0C,gBAC1C,gCAAiC,cACjC,qCAAsC,cACtC,6CACE,wCACF,4CACE,yCACF,8CACE,iDACF,sDACE,wDACF,8CACE,iDACF,sDACE,wDACF,qCACE,wCACF,6CACE,gDACF,4CACE,iDACF,8CACE,iDACF,sDACE,wDACF,8CACE,iDACF,sDACE,wDAGF,6CAA8C,cAG9C,qCAAsC,kBACtC,uCAAwC,uBACxC,0CAA2C,OAE3C,8CAA+C,gBAC/C,8CAA+C,QAC/C,8CACE,oCACF,+CAAgD,eAGhD,qCAAsC,oCAEtC,0BAA2B,oBAC3B,kCAAmC,UACnC,sCAAuC,QACvC,6CAA8C,WAC9C,uCAAwC,OACxC,gCAAiC,gBACjC,4BAA6B,cAC7B,oCAAqC,gBAGrC,wCACE,wCACF,2CAA4C,gBAC5C,4CAA6C,gBAC7C,yCAA0C,eAC1C,2CAA4C,cAG5C,oCAAqC,OACrC,0CAA2C,gBAC3C,2CAA4C,gBAC5C,2CAA4C,gBAC5C,2CAA4C,cAC5C,wCAAyC,wBACzC,qCAAsC,gBACtC,iCAAkC,cAClC,wCACE,wCACF,gDACE,wCACF,+CACE,yCACF,iDACE,iDACF,yDACE,wDACF,wCACE,wCACF,gDACE,gDACF,+CACE,iDACF,iDACE,iDACF,yDACE,wDAEF,iDAAkD,gBAClD,iDAAkD,QAClD,iDACE,oCACF,kDAAmD,eAGnD,6CAA8C,kBAC9C,+CAAgD,uBAChD,kDAAmD,OAEnD,OAAQ,CAEN,qBAAsB,SACtB,mBAAoB,wBAGpB,iCAAkC,UAGlC,qCAAsC,kBAEtC,yBAA0B,CAExB,kBAAmB,SACnB,gCAAiC,gBACjC,gDACE,+GACF,8CACE,+GACH,CACF,CACF,CACF,CAAC"}
+{"version":3,"file":"sidebar.mjs","names":[],"sources":["../../../../../src/recipes/navigations/sidebars/sidebar/sidebar.ts"],"sourcesContent":["import {\n  defineRecipe,\n  type RecipeBuilder,\n  type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const sidebar = defineRecipe({\n  className: 'sidebar',\n  jsx: ['Sidebar'],\n  base: {\n    /* root */\n    '--sidebar-grid-area': 'sidebar',\n\n    '--sidebar-position': 'fixed',\n    '--sidebar-background': '{colors.neutral.background.2.enabled}',\n    '--sidebar-gap': '{spacing.200}',\n    '--sidebar-width': '16.5rem',\n    '--sidebar-height': '100dvh',\n    '--sidebar-top': '{spacing.100}',\n    '--sidebar-padding-block': '{spacing.400}',\n    '--sidebar-padding-inline-base': '{spacing.350}',\n    '--sidebar-padding-inline':\n      'var(--sidebar-padding-inline-start, var(--sidebar-padding-inline-base))',\n    '--sidebar-padding-inline-start':\n      'max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-start, 0px)))',\n    '--sidebar-padding-inline-end':\n      'max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-end, 0px)))',\n    '--sidebar-radii': '{radii.200}',\n    '--sidebar-transition': '{animations.base.100}',\n    '--sidebar-zindex': '{zIndex.nav}',\n\n    /* slots */\n    '--sidebar-slot-gap': '{spacing.200}',\n    '--sidebar-slot-padding-block': '{spacing.0}',\n    '--sidebar-slot-padding-inline': 'var(--sidebar-padding-inline-base)',\n    '--sidebar-slot-padding-inline-start': 'var(--sidebar-slot-padding-inline)',\n    '--sidebar-slot-padding-inline-end': 'var(--sidebar-slot-padding-inline)',\n\n    /* nav */\n    '--sidebar-nav-gap': '{spacing.300}',\n    '--sidebar-nav-padding-top': '{spacing.400}',\n    '--sidebar-nav-height': 'calc(100dvh - token(spacing.1000))',\n    '--sidebar-nav-background': 'transparent',\n    '--sidebar-nav-border-color': 'transparent',\n    '--sidebar-nav-border-top-width': '{borders.0}',\n    '--sidebar-nav-border-bottom-width': '{borders.0}',\n    '--sidebar-nav-border-left-width': '{borders.0}',\n    '--sidebar-nav-border-right-width': '{borders.0}',\n    '--sidebar-nav-border-radius': '{radii.0}',\n    '--sidebar-nav-focus-safe-padding-inline':\n      'calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))',\n    '--sidebar-nav-focus-safe-padding-block':\n      'calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))',\n    '--sidebar-nav-focus-safe-padding-inline-start':\n      'var(--sidebar-nav-focus-safe-padding-inline)',\n    '--sidebar-nav-focus-safe-padding-inline-end':\n      'calc(var(--sidebar-nav-focus-safe-padding-inline) + var(--sidebar-scrollarea-autosize-scrollbar-size))',\n\n    /* nav scroll area autosize */\n    '--sidebar-scrollarea-autosize-height': '100%',\n    '--sidebar-scrollarea-autosize-max-height': '100%',\n    '--sidebar-scrollarea-autosize-scrollbar-size': '{sizes.50}',\n    '--sidebar-scrollarea-autosize-scrollbar-inline-offset': '0',\n    '--sidebar-scrollarea-autosize-scrollbar-background':\n      '{colors.neutral.background.alpha.1.enabled}',\n    '--sidebar-scrollarea-autosize-scrollbar-background-hover':\n      '{colors.neutral.background.alpha.2.enabled}',\n    '--sidebar-scrollarea-autosize-thumb-background':\n      '{colors.neutral.background.4.enabled}',\n    '--sidebar-scrollarea-autosize-thumb-background-hover':\n      '{colors.neutral.background.5.enabled}',\n    '--sidebar-scrollarea-autosize-overflow-y-behavior': 'auto',\n    '--sidebar-scrollarea-autosize-overflow-x-behavior': 'hidden',\n    '--sidebar-scrollarea-autosize-viewport-padding-block-start':\n      'var(--sidebar-nav-focus-safe-padding-block)',\n    '--sidebar-scrollarea-autosize-viewport-padding-block-end':\n      'var(--sidebar-nav-focus-safe-padding-block)',\n    '--sidebar-scrollarea-autosize-viewport-padding-inline-start':\n      'var(--sidebar-nav-focus-safe-padding-inline-start)',\n    '--sidebar-scrollarea-autosize-viewport-padding-inline-end':\n      'var(--sidebar-nav-focus-safe-padding-inline-end)',\n\n    /* nav group */\n    '--sidebar-nav-group-gap': '{spacing.300}',\n    '--sidebar-nav-group-padding-top': '{spacing.200}',\n    '--sidebar-nav-group-padding-bottom': '{spacing.400}',\n    '--sidebar-nav-group-padding-inline': '{spacing.0}',\n    '--sidebar-nav-group-background': 'transparent',\n    '--sidebar-nav-group-border-color': '{colors.neutral.stroke.7.enabled}',\n    '--sidebar-nav-group-border-top-width': '{borders.0}',\n    '--sidebar-nav-group-border-bottom-width': '{borders.100}',\n    '--sidebar-nav-group-border-left-width': '{borders.0}',\n    '--sidebar-nav-group-border-right-width': '{borders.0}',\n    '--sidebar-nav-group-radii': '{radii.0}',\n\n    /* nav group title */\n    '--sidebar-nav-group-title-font-size': '{fontSizes.200}',\n    '--sidebar-nav-group-title-font-weight': '{fontWeights.medium}',\n    '--sidebar-nav-group-title-color': '{colors.neutral.foreground.3.enabled}',\n    '--sidebar-nav-group-title-text-transform': 'uppercase',\n    '--sidebar-nav-group-title-padding-block': '{spacing.0}',\n    '--sidebar-nav-group-title-padding-inline':\n      'var(--sidebar-nav-list-item-padding-inline, {spacing.300})',\n\n    /* nav list */\n    '--sidebar-nav-list-gap': '{spacing.200}',\n    '--sidebar-nav-list-padding': '{spacing.0}',\n    '--sidebar-nav-list-margin': '{spacing.0}',\n\n    /* nav list item */\n    '--sidebar-nav-list-item-height': '{sizes.600}',\n    '--sidebar-nav-list-item-gap': '{spacing.300}',\n    '--sidebar-nav-list-item-transition': '{animations.base.100}',\n    '--sidebar-nav-list-item-padding-inline': '{spacing.300}',\n    '--sidebar-nav-list-item-radii': '{radii.100}',\n    '--sidebar-nav-list-item-background': 'transparent',\n    '--sidebar-nav-list-item-background-hovered':\n      '{colors.neutral.background.2.hovered}',\n    '--sidebar-nav-list-item-background-active':\n      '{colors.neutral.background.2.selected}',\n    '--sidebar-nav-list-item-background-selected':\n      '{colors.neutral.background.2.primary.selected}',\n    '--sidebar-nav-list-item-background-selected-hovered':\n      '{colors.neutral.background.2.primary.selectedHovered}',\n    '--sidebar-nav-list-item-background-expanded':\n      '{colors.neutral.background.2.primary.selected}',\n    '--sidebar-nav-list-item-background-expanded-hovered':\n      '{colors.neutral.background.2.primary.selectedHovered}',\n    '--sidebar-nav-list-item-foreground':\n      '{colors.neutral.foreground.2.enabled}',\n    '--sidebar-nav-list-item-foreground-hovered':\n      '{colors.neutral.foreground.2.primary.hovered}',\n    '--sidebar-nav-list-item-foreground-active':\n      '{colors.neutral.foreground.2.primary.selected}',\n    '--sidebar-nav-list-item-foreground-selected':\n      '{colors.neutral.foreground.2.primary.selected}',\n    '--sidebar-nav-list-item-foreground-selected-hovered':\n      '{colors.neutral.foreground.2.primary.selectedHovered}',\n    '--sidebar-nav-list-item-foreground-expanded':\n      '{colors.neutral.foreground.2.primary.selected}',\n    '--sidebar-nav-list-item-foreground-expanded-hovered':\n      '{colors.neutral.foreground.2.primary.selectedHovered}',\n\n    /* nav item button */\n    '--sidebar-nav-item-button-icon-toggle-size': '{sizes.300}',\n\n    /* nav item label */\n    '--sidebar-nav-item-label-font-size': '{fontSizes.400}',\n    '--sidebar-nav-item-label-font-weight': '{fontWeights.medium}',\n    '--sidebar-nav-item-label-text-transform': 'none',\n\n    '--sidebar-nav-list-item-focus-outline-width': '{borders.200}',\n    '--sidebar-nav-list-item-focus-outline-style': 'solid',\n    '--sidebar-nav-list-item-focus-outline-color':\n      '{colors.primary.stroke.1.focused}',\n    '--sidebar-nav-list-item-focus-outline-offset': '{spacing.50}',\n\n    /* subnav */\n    '--sidebar-subnav-list-stroke-color': '{colors.neutral.stroke.6.enabled}',\n\n    '--sidebar-subnav-zindex': '{zIndex.dropdown}',\n    '--sidebar-subnav-animation-name': 'expandY',\n    '--sidebar-subnav-animation-duration': '150ms',\n    '--sidebar-subnav-animation-timing-function': 'ease-out',\n    '--sidebar-subnav-animation-fill-mode': 'both',\n    '--sidebar-subnav-padding-left': '{spacing.450}',\n    '--sidebar-subnav-list-gap': '{spacing.0}',\n    '--sidebar-subnav-list-padding-top': '{spacing.100}',\n\n    /* subnav collapsed */\n    '--sidebar-subnav-collapsed-background':\n      '{colors.neutral.background.2.enabled}',\n    '--sidebar-subnav-collapsed-padding-block': '{spacing.400}',\n    '--sidebar-subnav-collapsed-padding-inline': '{spacing.450}',\n    '--sidebar-subnav-collapsed-margin-left': '{spacing.50}',\n    '--sidebar-subnav-collapsed-border-radius': '{radii.200}',\n\n    /* subnav list item */\n    '--sidebar-subnav-list-item-height': '{sizes.500}',\n    '--sidebar-subnav-list-item-padding-left': '{spacing.300}',\n    '--sidebar-subnav-list-item-padding-right': '{spacing.300}',\n    '--sidebar-subnav-list-item-padding-block': '{spacing.100}',\n    '--sidebar-subnav-list-item-border-radius': '{radii.100}',\n    '--sidebar-subnav-list-item-transition': '{animations.base.100}',\n    '--sidebar-subnav-list-stroke-width': '{borders.100}',\n    '--sidebar-subnav-list-item-gap': '{spacing.0}',\n    '--sidebar-subnav-list-item-background':\n      '{colors.neutral.background.2.enabled}',\n    '--sidebar-subnav-list-item-background-hovered':\n      '{colors.neutral.background.2.hovered}',\n    '--sidebar-subnav-list-item-background-active':\n      '{colors.neutral.background.2.selected}',\n    '--sidebar-subnav-list-item-background-selected':\n      '{colors.neutral.background.2.primary.selected}',\n    '--sidebar-subnav-list-item-background-selected-hovered':\n      '{colors.neutral.background.2.primary.selectedHovered}',\n    '--sidebar-subnav-list-item-foreground':\n      '{colors.neutral.foreground.3.enabled}',\n    '--sidebar-subnav-list-item-foreground-hovered':\n      '{colors.neutral.foreground.2.primary.hovered}',\n    '--sidebar-subnav-list-item-foreground-active':\n      '{colors.neutral.foreground.2.primary.selected}',\n    '--sidebar-subnav-list-item-foreground-selected':\n      '{colors.neutral.foreground.2.primary.selected}',\n    '--sidebar-subnav-list-item-foreground-selected-hovered':\n      '{colors.neutral.foreground.2.primary.selectedHovered}',\n\n    '--sidebar-subnav-list-item-focus-outline-width': '{borders.200}',\n    '--sidebar-subnav-list-item-focus-outline-style': 'solid',\n    '--sidebar-subnav-list-item-focus-outline-color':\n      '{colors.primary.stroke.1.focused}',\n    '--sidebar-subnav-list-item-focus-outline-offset': '{spacing.50}',\n\n    /* subnav list item label */\n    '--sidebar-subnav-list-item-label-font-size': '{fontSizes.300}',\n    '--sidebar-subnav-list-item-label-font-weight': '{fontWeights.medium}',\n    '--sidebar-subnav-list-item-label-text-transform': 'none',\n\n    md: {\n      /* root */\n      '--sidebar-position': 'sticky',\n      '--sidebar-height': 'calc(100dvh - 0.5rem)',\n\n      /* nav list item */\n      '--sidebar-nav-list-item-height': '2.75rem',\n\n      /* nav item label */\n      '--sidebar-nav-item-label-font-size': '{fontSizes.300}',\n\n      '&[data-collapsed=true]': {\n        /* root */\n        '--sidebar-width': '3.5rem',\n        '--sidebar-padding-inline-base': '{spacing.100}',\n        '--sidebar-nav-focus-safe-padding-inline-start':\n          'calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))',\n        '--sidebar-nav-focus-safe-padding-inline-end':\n          'calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))',\n      },\n    },\n  },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAU,EAAa,CAClC,UAAW,UACX,IAAK,CAAC,UAAU,CAChB,KAAM,CAEJ,sBAAuB,UAEvB,qBAAsB,QACtB,uBAAwB,wCACxB,gBAAiB,gBACjB,kBAAmB,UACnB,mBAAoB,SACpB,gBAAiB,gBACjB,0BAA2B,gBAC3B,gCAAiC,gBACjC,2BACE,0EACF,iCACE,+GACF,+BACE,6GACF,kBAAmB,cACnB,uBAAwB,wBACxB,mBAAoB,eAGpB,qBAAsB,gBACtB,+BAAgC,cAChC,gCAAiC,qCACjC,sCAAuC,qCACvC,oCAAqC,qCAGrC,oBAAqB,gBACrB,4BAA6B,gBAC7B,uBAAwB,qCACxB,2BAA4B,cAC5B,6BAA8B,cAC9B,iCAAkC,cAClC,oCAAqC,cACrC,kCAAmC,cACnC,mCAAoC,cACpC,8BAA+B,YAC/B,0CACE,6GACF,yCACE,6GACF,gDACE,+CACF,8CACE,yGAGF,uCAAwC,OACxC,2CAA4C,OAC5C,+CAAgD,aAChD,wDAAyD,IACzD,qDACE,8CACF,2DACE,8CACF,iDACE,wCACF,uDACE,wCACF,oDAAqD,OACrD,oDAAqD,SACrD,6DACE,8CACF,2DACE,8CACF,8DACE,qDACF,4DACE,mDAGF,0BAA2B,gBAC3B,kCAAmC,gBACnC,qCAAsC,gBACtC,qCAAsC,cACtC,iCAAkC,cAClC,mCAAoC,oCACpC,uCAAwC,cACxC,0CAA2C,gBAC3C,wCAAyC,cACzC,yCAA0C,cAC1C,4BAA6B,YAG7B,sCAAuC,kBACvC,wCAAyC,uBACzC,kCAAmC,wCACnC,2CAA4C,YAC5C,0CAA2C,cAC3C,2CACE,6DAGF,yBAA0B,gBAC1B,6BAA8B,cAC9B,4BAA6B,cAG7B,iCAAkC,cAClC,8BAA+B,gBAC/B,qCAAsC,wBACtC,yCAA0C,gBAC1C,gCAAiC,cACjC,qCAAsC,cACtC,6CACE,wCACF,4CACE,yCACF,8CACE,iDACF,sDACE,wDACF,8CACE,iDACF,sDACE,wDACF,qCACE,wCACF,6CACE,gDACF,4CACE,iDACF,8CACE,iDACF,sDACE,wDACF,8CACE,iDACF,sDACE,wDAGF,6CAA8C,cAG9C,qCAAsC,kBACtC,uCAAwC,uBACxC,0CAA2C,OAE3C,8CAA+C,gBAC/C,8CAA+C,QAC/C,8CACE,oCACF,+CAAgD,eAGhD,qCAAsC,oCAEtC,0BAA2B,oBAC3B,kCAAmC,UACnC,sCAAuC,QACvC,6CAA8C,WAC9C,uCAAwC,OACxC,gCAAiC,gBACjC,4BAA6B,cAC7B,oCAAqC,gBAGrC,wCACE,wCACF,2CAA4C,gBAC5C,4CAA6C,gBAC7C,yCAA0C,eAC1C,2CAA4C,cAG5C,oCAAqC,cACrC,0CAA2C,gBAC3C,2CAA4C,gBAC5C,2CAA4C,gBAC5C,2CAA4C,cAC5C,wCAAyC,wBACzC,qCAAsC,gBACtC,iCAAkC,cAClC,wCACE,wCACF,gDACE,wCACF,+CACE,yCACF,iDACE,iDACF,yDACE,wDACF,wCACE,wCACF,gDACE,gDACF,+CACE,iDACF,iDACE,iDACF,yDACE,wDAEF,iDAAkD,gBAClD,iDAAkD,QAClD,iDACE,oCACF,kDAAmD,eAGnD,6CAA8C,kBAC9C,+CAAgD,uBAChD,kDAAmD,OAEnD,GAAI,CAEF,qBAAsB,SACtB,mBAAoB,wBAGpB,iCAAkC,UAGlC,qCAAsC,kBAEtC,yBAA0B,CAExB,kBAAmB,SACnB,gCAAiC,gBACjC,gDACE,+GACF,8CACE,+GACH,CACF,CACF,CACF,CAAC"}

package/dist/recipes/overlays/modal/modal-close.mjs

@@ -1,2 +1,2 @@
-import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`modal__close`,jsx:[`Modal`],base:{backgroundColor:`var(--modal-close-background, transparent)`,color:`var(--modal-close-foreground, {colors.neutral.foreground.3.enabled})`,fontSize:`var(--modal-close-font-size, {fontSizes.300})`,alignSelf:`flex-start`,display:`flex`,justifyContent:`center`,alignItems:`center`,position:`relative`,width:`var(--modal-close-size)`,height:`var(--modal-close-size)`,minWidth:`var(--modal-close-size)`,minHeight:`var(--modal-close-size)`,borderWidth:`var(--modal-close-border-width, {borders.0})`,borderStyle:`var(--modal-close-border-style, solid)`,borderColor:`var(--modal-close-border-color, transparent)`,padding:`var(--modal-close-padding)`,borderRadius:`var(--modal-close-radii)`,cursor:`pointer`,userSelect:`none`,appearance:`none`,touchAction:`manipulation`,_hover:{backgroundColor:`var(--modal-close-background-hovered, {colors.neutral.background.1.hovered})`,color:`var(--modal-close-foreground-hovered, {colors.neutral.foreground.3.hovered})`}}});export{t as modalClose};
+import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`modal__close`,jsx:[`Modal`],base:{backgroundColor:`var(--modal-close-background, transparent)`,color:`var(--modal-close-foreground, {colors.neutral.foreground.3.enabled})`,fontSize:`var(--modal-close-font-size, {fontSizes.300})`,alignSelf:`flex-start`,display:`flex`,justifyContent:`center`,alignItems:`center`,position:`relative`,width:`var(--modal-close-size, {sizes.500})`,height:`var(--modal-close-size, {sizes.500})`,minWidth:`var(--modal-close-size, {sizes.500})`,minHeight:`var(--modal-close-size, {sizes.500})`,borderWidth:`var(--modal-close-border-width, {borders.0})`,borderStyle:`var(--modal-close-border-style, solid)`,borderColor:`var(--modal-close-border-color, transparent)`,padding:`var(--modal-close-padding)`,borderRadius:`var(--modal-close-radii, {radii.100})`,cursor:`pointer`,userSelect:`none`,appearance:`none`,touchAction:`manipulation`,_hover:{backgroundColor:`var(--modal-close-background-hovered, {colors.neutral.background.1.hovered})`,color:`var(--modal-close-foreground-hovered, {colors.neutral.foreground.3.hovered})`}}});export{t as modalClose};
 //# sourceMappingURL=modal-close.mjs.map

package/dist/recipes/overlays/modal/modal-close.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal-close.mjs","names":[],"sources":["../../../../src/recipes/overlays/modal/modal-close.ts"],"sourcesContent":["import {\n  defineRecipe,\n  type RecipeBuilder,\n  type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const modalClose = defineRecipe({\n  className: 'modal__close',\n  jsx: ['Modal'],\n  base: {\n    backgroundColor: 'var(--modal-close-background, transparent)',\n    color:\n      'var(--modal-close-foreground, {colors.neutral.foreground.3.enabled})',\n    fontSize: 'var(--modal-close-font-size, {fontSizes.300})',\n    alignSelf: 'flex-start',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    position: 'relative',\n    width: 'var(--modal-close-size)',\n    height: 'var(--modal-close-size)',\n    minWidth: 'var(--modal-close-size)',\n    minHeight: 'var(--modal-close-size)',\n    borderWidth: 'var(--modal-close-border-width, {borders.0})',\n    borderStyle: 'var(--modal-close-border-style, solid)',\n    borderColor: 'var(--modal-close-border-color, transparent)',\n    padding: 'var(--modal-close-padding)',\n    borderRadius: 'var(--modal-close-radii)',\n    cursor: 'pointer',\n    userSelect: 'none',\n    appearance: 'none',\n    touchAction: 'manipulation',\n    _hover: {\n      backgroundColor:\n        'var(--modal-close-background-hovered, {colors.neutral.background.1.hovered})',\n      color:\n        'var(--modal-close-foreground-hovered, {colors.neutral.foreground.3.hovered})',\n    },\n  },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAa,EAAa,CACrC,UAAW,eACX,IAAK,CAAC,QAAQ,CACd,KAAM,CACJ,gBAAiB,6CACjB,MACE,uEACF,SAAU,gDACV,UAAW,aACX,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,SAAU,WACV,MAAO,0BACP,OAAQ,0BACR,SAAU,0BACV,UAAW,0BACX,YAAa,+CACb,YAAa,yCACb,YAAa,+CACb,QAAS,6BACT,aAAc,2BACd,OAAQ,UACR,WAAY,OACZ,WAAY,OACZ,YAAa,eACb,OAAQ,CACN,gBACE,+EACF,MACE,+EACH,CACF,CACF,CAAC"}
+{"version":3,"file":"modal-close.mjs","names":[],"sources":["../../../../src/recipes/overlays/modal/modal-close.ts"],"sourcesContent":["import {\n  defineRecipe,\n  type RecipeBuilder,\n  type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const modalClose = defineRecipe({\n  className: 'modal__close',\n  jsx: ['Modal'],\n  base: {\n    backgroundColor: 'var(--modal-close-background, transparent)',\n    color:\n      'var(--modal-close-foreground, {colors.neutral.foreground.3.enabled})',\n    fontSize: 'var(--modal-close-font-size, {fontSizes.300})',\n    alignSelf: 'flex-start',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    position: 'relative',\n    width: 'var(--modal-close-size, {sizes.500})',\n    height: 'var(--modal-close-size, {sizes.500})',\n    minWidth: 'var(--modal-close-size, {sizes.500})',\n    minHeight: 'var(--modal-close-size, {sizes.500})',\n    borderWidth: 'var(--modal-close-border-width, {borders.0})',\n    borderStyle: 'var(--modal-close-border-style, solid)',\n    borderColor: 'var(--modal-close-border-color, transparent)',\n    padding: 'var(--modal-close-padding)',\n    borderRadius: 'var(--modal-close-radii, {radii.100})',\n    cursor: 'pointer',\n    userSelect: 'none',\n    appearance: 'none',\n    touchAction: 'manipulation',\n    _hover: {\n      backgroundColor:\n        'var(--modal-close-background-hovered, {colors.neutral.background.1.hovered})',\n      color:\n        'var(--modal-close-foreground-hovered, {colors.neutral.foreground.3.hovered})',\n    },\n  },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAa,EAAa,CACrC,UAAW,eACX,IAAK,CAAC,QAAQ,CACd,KAAM,CACJ,gBAAiB,6CACjB,MACE,uEACF,SAAU,gDACV,UAAW,aACX,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,SAAU,WACV,MAAO,uCACP,OAAQ,uCACR,SAAU,uCACV,UAAW,uCACX,YAAa,+CACb,YAAa,yCACb,YAAa,+CACb,QAAS,6BACT,aAAc,wCACd,OAAQ,UACR,WAAY,OACZ,WAAY,OACZ,YAAa,eACb,OAAQ,CACN,gBACE,+EACF,MACE,+EACH,CACF,CACF,CAAC"}

package/dist/recipes/overlays/modal/modal-content.mjs

@@ -1,2 +1,2 @@
-import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`modal__content`,jsx:[`Modal`],base:{display:`grid`,gridTemplateColumns:`minmax(0, 1fr)`,gap:`var(--modal-content-gap, var(--modal-body-gap, {spacing.600}))`,backgroundColor:`var(--modal-content-background)`,flex:`var(--modal-content-flex, 0 0 var(--modal-size))`,width:`var(--modal-content-width, var(--modal-size))`,height:`var(--modal-content-height, auto)`,minWidth:`var(--modal-content-min-width, 33.75rem)`,maxWidth:`var(--modal-content-max-width, 33.75rem)`,maxHeight:`var(--modal-content-max-height, calc(100dvh - var(--modal-y-offset) * 2))`,overflowY:`auto`,borderRadius:`var(--modal-content-radii)`,borderWidth:`var(--modal-content-border-width)`,borderStyle:`var(--modal-content-border-style)`,borderColor:`var(--modal-content-border-color)`,boxShadow:`var(--modal-content-shadow)`,touchAction:`manipulation`,pointerEvents:`all`}});export{t as modalContent};
+import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`modal__content`,jsx:[`Modal`],base:{display:`grid`,gridTemplateColumns:`minmax(0, 1fr)`,gap:`var(--modal-content-gap, var(--modal-body-gap, {spacing.600}))`,backgroundColor:`var(--modal-content-background, {colors.neutral.background.1.enabled})`,flex:`var(--modal-content-flex, 0 0 var(--modal-size))`,width:`var(--modal-content-width, var(--modal-size))`,height:`var(--modal-content-height, auto)`,minWidth:`var(--modal-content-min-width, 33.75rem)`,maxWidth:`var(--modal-content-max-width, 33.75rem)`,maxHeight:`var(--modal-content-max-height, calc(100dvh - var(--modal-y-offset) * 2))`,overflowY:`auto`,borderRadius:`var(--modal-content-radii, {radii.200})`,borderWidth:`var(--modal-content-border-width, {borders.100})`,borderStyle:`var(--modal-content-border-style, solid)`,borderColor:`var(--modal-content-border-color)`,boxShadow:`var(--modal-content-shadow, none)`,touchAction:`manipulation`,pointerEvents:`all`}});export{t as modalContent};
 //# sourceMappingURL=modal-content.mjs.map

package/dist/recipes/overlays/modal/modal-content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal-content.mjs","names":[],"sources":["../../../../src/recipes/overlays/modal/modal-content.ts"],"sourcesContent":["import {\n  defineRecipe,\n  type RecipeBuilder,\n  type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const modalContent = defineRecipe({\n  className: 'modal__content',\n  jsx: ['Modal'],\n  base: {\n    display: 'grid',\n    gridTemplateColumns: 'minmax(0, 1fr)',\n    gap: 'var(--modal-content-gap, var(--modal-body-gap, {spacing.600}))',\n    backgroundColor: 'var(--modal-content-background)',\n    flex: 'var(--modal-content-flex, 0 0 var(--modal-size))',\n    width: 'var(--modal-content-width, var(--modal-size))',\n    height: 'var(--modal-content-height, auto)',\n    minWidth: 'var(--modal-content-min-width, 33.75rem)',\n    maxWidth: 'var(--modal-content-max-width, 33.75rem)',\n    maxHeight:\n      'var(--modal-content-max-height, calc(100dvh - var(--modal-y-offset) * 2))',\n    overflowY: 'auto',\n    borderRadius: 'var(--modal-content-radii)',\n    borderWidth: 'var(--modal-content-border-width)',\n    borderStyle: 'var(--modal-content-border-style)',\n    borderColor: 'var(--modal-content-border-color)',\n    boxShadow: 'var(--modal-content-shadow)',\n    touchAction: 'manipulation',\n    pointerEvents: 'all',\n  },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAe,EAAa,CACvC,UAAW,iBACX,IAAK,CAAC,QAAQ,CACd,KAAM,CACJ,QAAS,OACT,oBAAqB,iBACrB,IAAK,iEACL,gBAAiB,kCACjB,KAAM,mDACN,MAAO,gDACP,OAAQ,oCACR,SAAU,2CACV,SAAU,2CACV,UACE,4EACF,UAAW,OACX,aAAc,6BACd,YAAa,oCACb,YAAa,oCACb,YAAa,oCACb,UAAW,8BACX,YAAa,eACb,cAAe,MAChB,CACF,CAAC"}
+{"version":3,"file":"modal-content.mjs","names":[],"sources":["../../../../src/recipes/overlays/modal/modal-content.ts"],"sourcesContent":["import {\n  defineRecipe,\n  type RecipeBuilder,\n  type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const modalContent = defineRecipe({\n  className: 'modal__content',\n  jsx: ['Modal'],\n  base: {\n    display: 'grid',\n    gridTemplateColumns: 'minmax(0, 1fr)',\n    gap: 'var(--modal-content-gap, var(--modal-body-gap, {spacing.600}))',\n    backgroundColor:\n      'var(--modal-content-background, {colors.neutral.background.1.enabled})',\n    flex: 'var(--modal-content-flex, 0 0 var(--modal-size))',\n    width: 'var(--modal-content-width, var(--modal-size))',\n    height: 'var(--modal-content-height, auto)',\n    minWidth: 'var(--modal-content-min-width, 33.75rem)',\n    maxWidth: 'var(--modal-content-max-width, 33.75rem)',\n    maxHeight:\n      'var(--modal-content-max-height, calc(100dvh - var(--modal-y-offset) * 2))',\n    overflowY: 'auto',\n    borderRadius: 'var(--modal-content-radii, {radii.200})',\n    borderWidth: 'var(--modal-content-border-width, {borders.100})',\n    borderStyle: 'var(--modal-content-border-style, solid)',\n    borderColor: 'var(--modal-content-border-color)',\n    boxShadow: 'var(--modal-content-shadow, none)',\n    touchAction: 'manipulation',\n    pointerEvents: 'all',\n  },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAe,EAAa,CACvC,UAAW,iBACX,IAAK,CAAC,QAAQ,CACd,KAAM,CACJ,QAAS,OACT,oBAAqB,iBACrB,IAAK,iEACL,gBACE,yEACF,KAAM,mDACN,MAAO,gDACP,OAAQ,oCACR,SAAU,2CACV,SAAU,2CACV,UACE,4EACF,UAAW,OACX,aAAc,0CACd,YAAa,mDACb,YAAa,2CACb,YAAa,oCACb,UAAW,oCACX,YAAa,eACb,cAAe,MAChB,CACF,CAAC"}

package/dist/recipes/overlays/modal/modal-footer.mjs

@@ -1,2 +1,2 @@
-import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`modal__footer`,jsx:[`Modal`],base:{backgroundColor:`var(--modal-footer-background, transparent)`,display:`flex`,justifyContent:`var(--modal-footer-justify-content, flex-end)`,alignItems:`center`,gap:`var(--modal-footer-gap, {spacing.500})`,paddingInlineStart:`var(--modal-footer-padding-inline-start, {spacing.500})`,paddingInlineEnd:`var(--modal-footer-padding-inline-end, {spacing.500})`,paddingBlockStart:`var(--modal-footer-padding-block-start, {spacing.300})`,paddingBlockEnd:`var(--modal-footer-padding-block-end, {spacing.500})`,minHeight:`var(--modal-footer-min-height, unset)`,borderEndStartRadius:`var(--modal-content-radii)`,borderEndEndRadius:`var(--modal-content-radii)`,borderTopWidth:`var(--modal-footer-border-top-width, {borders.0})`,borderTopStyle:`var(--modal-footer-border-top-style, solid)`,borderTopColor:`var(--modal-footer-border-top-color, transparent)`,zIndex:`var(--modal-inner-zindex)`}});export{t as modalFooter};
+import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`modal__footer`,jsx:[`Modal`],base:{backgroundColor:`var(--modal-footer-background, transparent)`,display:`flex`,justifyContent:`var(--modal-footer-justify-content, flex-end)`,alignItems:`center`,gap:`var(--modal-footer-gap, {spacing.500})`,paddingInlineStart:`var(--modal-footer-padding-inline-start, {spacing.500})`,paddingInlineEnd:`var(--modal-footer-padding-inline-end, {spacing.500})`,paddingBlockStart:`var(--modal-footer-padding-block-start, {spacing.300})`,paddingBlockEnd:`var(--modal-footer-padding-block-end, {spacing.500})`,minHeight:`var(--modal-footer-min-height, unset)`,borderEndStartRadius:`var(--modal-content-radii, {radii.200})`,borderEndEndRadius:`var(--modal-content-radii, {radii.200})`,borderTopWidth:`var(--modal-footer-border-top-width, {borders.0})`,borderTopStyle:`var(--modal-footer-border-top-style, solid)`,borderTopColor:`var(--modal-footer-border-top-color, transparent)`,zIndex:`var(--modal-inner-zindex)`}});export{t as modalFooter};
 //# sourceMappingURL=modal-footer.mjs.map

package/dist/recipes/overlays/modal/modal-footer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal-footer.mjs","names":[],"sources":["../../../../src/recipes/overlays/modal/modal-footer.ts"],"sourcesContent":["import {\n  defineRecipe,\n  type RecipeBuilder,\n  type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const modalFooter = defineRecipe({\n  className: 'modal__footer',\n  jsx: ['Modal'],\n  base: {\n    backgroundColor: 'var(--modal-footer-background, transparent)',\n    display: 'flex',\n    justifyContent: 'var(--modal-footer-justify-content, flex-end)',\n    alignItems: 'center',\n    gap: 'var(--modal-footer-gap, {spacing.500})',\n    paddingInlineStart:\n      'var(--modal-footer-padding-inline-start, {spacing.500})',\n    paddingInlineEnd: 'var(--modal-footer-padding-inline-end, {spacing.500})',\n    paddingBlockStart: 'var(--modal-footer-padding-block-start, {spacing.300})',\n    paddingBlockEnd: 'var(--modal-footer-padding-block-end, {spacing.500})',\n    minHeight: 'var(--modal-footer-min-height, unset)',\n    borderEndStartRadius: 'var(--modal-content-radii)',\n    borderEndEndRadius: 'var(--modal-content-radii)',\n    borderTopWidth: 'var(--modal-footer-border-top-width, {borders.0})',\n    borderTopStyle: 'var(--modal-footer-border-top-style, solid)',\n    borderTopColor: 'var(--modal-footer-border-top-color, transparent)',\n    zIndex: 'var(--modal-inner-zindex)',\n  },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAc,EAAa,CACtC,UAAW,gBACX,IAAK,CAAC,QAAQ,CACd,KAAM,CACJ,gBAAiB,8CACjB,QAAS,OACT,eAAgB,gDAChB,WAAY,SACZ,IAAK,yCACL,mBACE,0DACF,iBAAkB,wDAClB,kBAAmB,yDACnB,gBAAiB,uDACjB,UAAW,wCACX,qBAAsB,6BACtB,mBAAoB,6BACpB,eAAgB,oDAChB,eAAgB,8CAChB,eAAgB,oDAChB,OAAQ,4BACT,CACF,CAAC"}
+{"version":3,"file":"modal-footer.mjs","names":[],"sources":["../../../../src/recipes/overlays/modal/modal-footer.ts"],"sourcesContent":["import {\n  defineRecipe,\n  type RecipeBuilder,\n  type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const modalFooter = defineRecipe({\n  className: 'modal__footer',\n  jsx: ['Modal'],\n  base: {\n    backgroundColor: 'var(--modal-footer-background, transparent)',\n    display: 'flex',\n    justifyContent: 'var(--modal-footer-justify-content, flex-end)',\n    alignItems: 'center',\n    gap: 'var(--modal-footer-gap, {spacing.500})',\n    paddingInlineStart:\n      'var(--modal-footer-padding-inline-start, {spacing.500})',\n    paddingInlineEnd: 'var(--modal-footer-padding-inline-end, {spacing.500})',\n    paddingBlockStart: 'var(--modal-footer-padding-block-start, {spacing.300})',\n    paddingBlockEnd: 'var(--modal-footer-padding-block-end, {spacing.500})',\n    minHeight: 'var(--modal-footer-min-height, unset)',\n    borderEndStartRadius: 'var(--modal-content-radii, {radii.200})',\n    borderEndEndRadius: 'var(--modal-content-radii, {radii.200})',\n    borderTopWidth: 'var(--modal-footer-border-top-width, {borders.0})',\n    borderTopStyle: 'var(--modal-footer-border-top-style, solid)',\n    borderTopColor: 'var(--modal-footer-border-top-color, transparent)',\n    zIndex: 'var(--modal-inner-zindex)',\n  },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAc,EAAa,CACtC,UAAW,gBACX,IAAK,CAAC,QAAQ,CACd,KAAM,CACJ,gBAAiB,8CACjB,QAAS,OACT,eAAgB,gDAChB,WAAY,SACZ,IAAK,yCACL,mBACE,0DACF,iBAAkB,wDAClB,kBAAmB,yDACnB,gBAAiB,uDACjB,UAAW,wCACX,qBAAsB,0CACtB,mBAAoB,0CACpB,eAAgB,oDAChB,eAAgB,8CAChB,eAAgB,oDAChB,OAAQ,4BACT,CACF,CAAC"}

package/dist/recipes/overlays/modal/modal-overlay.mjs

@@ -1,2 +1,2 @@
-import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`modal__overlay`,jsx:[`Modal`],base:{inset:`0`,position:`absolute`,background:`var(--modal-overlay-background, rgba(0, 0, 0, .6))`,backdropFilter:`var(--modal-overlay-filter)`,borderRadius:`var(--modal-overlay-radius, 0)`,zIndex:`var(--modal-overlay-zindex)`,"&:where([data-fixed])":{position:`fixed`}}});export{t as modalOverlay};
+import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`modal__overlay`,jsx:[`Modal`],base:{inset:`0`,position:`absolute`,background:`var(--modal-overlay-background, rgba(0, 0, 0, .6))`,backdropFilter:`var(--modal-overlay-filter, blur(5px))`,borderRadius:`var(--modal-overlay-radius, 0)`,zIndex:`var(--modal-overlay-zindex)`,"&:where([data-fixed])":{position:`fixed`}}});export{t as modalOverlay};
 //# sourceMappingURL=modal-overlay.mjs.map

package/dist/recipes/overlays/modal/modal-overlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal-overlay.mjs","names":[],"sources":["../../../../src/recipes/overlays/modal/modal-overlay.ts"],"sourcesContent":["import {\n  defineRecipe,\n  type RecipeBuilder,\n  type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const modalOverlay = defineRecipe({\n  className: 'modal__overlay',\n  jsx: ['Modal'],\n  base: {\n    inset: '0',\n    position: 'absolute',\n    background: 'var(--modal-overlay-background, rgba(0, 0, 0, .6))',\n    backdropFilter: 'var(--modal-overlay-filter)',\n    borderRadius: 'var(--modal-overlay-radius, 0)',\n    zIndex: 'var(--modal-overlay-zindex)',\n    '&:where([data-fixed])': {\n      position: 'fixed',\n    },\n  },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAe,EAAa,CACvC,UAAW,iBACX,IAAK,CAAC,QAAQ,CACd,KAAM,CACJ,MAAO,IACP,SAAU,WACV,WAAY,qDACZ,eAAgB,8BAChB,aAAc,iCACd,OAAQ,8BACR,wBAAyB,CACvB,SAAU,QACX,CACF,CACF,CAAC"}
+{"version":3,"file":"modal-overlay.mjs","names":[],"sources":["../../../../src/recipes/overlays/modal/modal-overlay.ts"],"sourcesContent":["import {\n  defineRecipe,\n  type RecipeBuilder,\n  type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const modalOverlay = defineRecipe({\n  className: 'modal__overlay',\n  jsx: ['Modal'],\n  base: {\n    inset: '0',\n    position: 'absolute',\n    background: 'var(--modal-overlay-background, rgba(0, 0, 0, .6))',\n    backdropFilter: 'var(--modal-overlay-filter, blur(5px))',\n    borderRadius: 'var(--modal-overlay-radius, 0)',\n    zIndex: 'var(--modal-overlay-zindex)',\n    '&:where([data-fixed])': {\n      position: 'fixed',\n    },\n  },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAe,EAAa,CACvC,UAAW,iBACX,IAAK,CAAC,QAAQ,CACd,KAAM,CACJ,MAAO,IACP,SAAU,WACV,WAAY,qDACZ,eAAgB,yCAChB,aAAc,iCACd,OAAQ,8BACR,wBAAyB,CACvB,SAAU,QACX,CACF,CACF,CAAC"}

package/dist/recipes/overlays/tooltip/tooltip-root.mjs

@@ -1,2 +1,2 @@
-import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`tooltip__root`,jsx:[`Tooltip`],base:{backgroundColor:`var(--tooltip-background, {colors.neutral.background.static.enabled})`,color:`var(--tooltip-foreground, {colors.neutral.foreground.static.inverted.1.enabled})`,fontFamily:`var(--font-family-base, {fonts.base})`,fontSize:`var(--tooltip-font-size, {fontSizes.200})`,fontWeight:`var(--tooltip-font-weight, {fontWeights.regular})`,lineHeight:`var(--tooltip-line-height, 1.3)`,display:`flex`,alignItems:`center`,textWrap:`wrap`,whiteSpace:`normal`,position:`absolute`,borderRadius:`var(--tooltip-radii, {radii.200})`,paddingInline:`var(--tooltip-padding-inline, {spacing.200})`,paddingBlock:`var(--tooltip-padding-inline, {spacing.100})`,height:`var(--tooltip-height, auto)`,minHeight:`var(--tooltip-min-height, auto)`,width:`var(--tooltip-width, 200px)`,zIndex:`var(--tooltip-zindex, {zIndex.tooltip})!`,boxSizing:`border-box`,"&[data-multiline=true]":{paddingBlock:`var(--tooltip-padding-block)`,maxWidth:`var(--tooltip-max-width)`}}});export{t as tooltipRoot};
+import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`tooltip__root`,jsx:[`Tooltip`],base:{backgroundColor:`var(--tooltip-background, {colors.neutral.background.static.enabled})`,color:`var(--tooltip-foreground, {colors.neutral.foreground.static.inverted.1.enabled})`,fontFamily:`var(--font-family-base, {fonts.base})`,fontSize:`var(--tooltip-font-size, {fontSizes.200})`,fontWeight:`var(--tooltip-font-weight, {fontWeights.regular})`,lineHeight:`var(--tooltip-line-height, 1.3)`,display:`flex`,alignItems:`center`,textWrap:`wrap`,whiteSpace:`normal`,position:`absolute`,borderRadius:`var(--tooltip-radii, {radii.200})`,paddingInline:`var(--tooltip-padding-inline, {spacing.200})`,paddingBlock:`var(--tooltip-padding-inline, {spacing.100})`,height:`var(--tooltip-height, auto)`,minHeight:`var(--tooltip-min-height, auto)`,width:`var(--tooltip-width, 200px)`,zIndex:`var(--tooltip-zindex, {zIndex.tooltip})!`,boxSizing:`border-box`,"&[data-multiline=true]":{paddingBlock:`var(--tooltip-padding-block, {spacing.100})`,maxWidth:`var(--tooltip-max-width, 12.5rem)`}}});export{t as tooltipRoot};
 //# sourceMappingURL=tooltip-root.mjs.map

package/dist/recipes/overlays/tooltip/tooltip-root.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-root.mjs","names":[],"sources":["../../../../src/recipes/overlays/tooltip/tooltip-root.ts"],"sourcesContent":["import {\n  defineRecipe,\n  type RecipeBuilder,\n  type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const tooltipRoot = defineRecipe({\n  className: 'tooltip__root',\n  jsx: ['Tooltip'],\n  base: {\n    backgroundColor:\n      'var(--tooltip-background, {colors.neutral.background.static.enabled})',\n    color:\n      'var(--tooltip-foreground, {colors.neutral.foreground.static.inverted.1.enabled})',\n    fontFamily: 'var(--font-family-base, {fonts.base})',\n    fontSize: 'var(--tooltip-font-size, {fontSizes.200})',\n    fontWeight: 'var(--tooltip-font-weight, {fontWeights.regular})',\n    lineHeight: 'var(--tooltip-line-height, 1.3)',\n    display: 'flex',\n    alignItems: 'center',\n    textWrap: 'wrap',\n    whiteSpace: 'normal',\n    position: 'absolute',\n    borderRadius: 'var(--tooltip-radii, {radii.200})',\n    paddingInline: 'var(--tooltip-padding-inline, {spacing.200})',\n    paddingBlock: 'var(--tooltip-padding-inline, {spacing.100})',\n    height: 'var(--tooltip-height, auto)',\n    minHeight: 'var(--tooltip-min-height, auto)',\n    width: 'var(--tooltip-width, 200px)',\n    zIndex: 'var(--tooltip-zindex, {zIndex.tooltip})!',\n    boxSizing: 'border-box',\n    '&[data-multiline=true]': {\n      paddingBlock: 'var(--tooltip-padding-block)',\n      maxWidth: 'var(--tooltip-max-width)',\n    },\n  },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAc,EAAa,CACtC,UAAW,gBACX,IAAK,CAAC,UAAU,CAChB,KAAM,CACJ,gBACE,wEACF,MACE,mFACF,WAAY,wCACZ,SAAU,4CACV,WAAY,oDACZ,WAAY,kCACZ,QAAS,OACT,WAAY,SACZ,SAAU,OACV,WAAY,SACZ,SAAU,WACV,aAAc,oCACd,cAAe,+CACf,aAAc,+CACd,OAAQ,8BACR,UAAW,kCACX,MAAO,8BACP,OAAQ,2CACR,UAAW,aACX,yBAA0B,CACxB,aAAc,+BACd,SAAU,2BACX,CACF,CACF,CAAC"}
+{"version":3,"file":"tooltip-root.mjs","names":[],"sources":["../../../../src/recipes/overlays/tooltip/tooltip-root.ts"],"sourcesContent":["import {\n  defineRecipe,\n  type RecipeBuilder,\n  type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const tooltipRoot = defineRecipe({\n  className: 'tooltip__root',\n  jsx: ['Tooltip'],\n  base: {\n    backgroundColor:\n      'var(--tooltip-background, {colors.neutral.background.static.enabled})',\n    color:\n      'var(--tooltip-foreground, {colors.neutral.foreground.static.inverted.1.enabled})',\n    fontFamily: 'var(--font-family-base, {fonts.base})',\n    fontSize: 'var(--tooltip-font-size, {fontSizes.200})',\n    fontWeight: 'var(--tooltip-font-weight, {fontWeights.regular})',\n    lineHeight: 'var(--tooltip-line-height, 1.3)',\n    display: 'flex',\n    alignItems: 'center',\n    textWrap: 'wrap',\n    whiteSpace: 'normal',\n    position: 'absolute',\n    borderRadius: 'var(--tooltip-radii, {radii.200})',\n    paddingInline: 'var(--tooltip-padding-inline, {spacing.200})',\n    paddingBlock: 'var(--tooltip-padding-inline, {spacing.100})',\n    height: 'var(--tooltip-height, auto)',\n    minHeight: 'var(--tooltip-min-height, auto)',\n    width: 'var(--tooltip-width, 200px)',\n    zIndex: 'var(--tooltip-zindex, {zIndex.tooltip})!',\n    boxSizing: 'border-box',\n    '&[data-multiline=true]': {\n      paddingBlock: 'var(--tooltip-padding-block, {spacing.100})',\n      maxWidth: 'var(--tooltip-max-width, 12.5rem)',\n    },\n  },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAc,EAAa,CACtC,UAAW,gBACX,IAAK,CAAC,UAAU,CAChB,KAAM,CACJ,gBACE,wEACF,MACE,mFACF,WAAY,wCACZ,SAAU,4CACV,WAAY,oDACZ,WAAY,kCACZ,QAAS,OACT,WAAY,SACZ,SAAU,OACV,WAAY,SACZ,SAAU,WACV,aAAc,oCACd,cAAe,+CACf,aAAc,+CACd,OAAQ,8BACR,UAAW,kCACX,MAAO,8BACP,OAAQ,2CACR,UAAW,aACX,yBAA0B,CACxB,aAAc,8CACd,SAAU,oCACX,CACF,CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/preset",
-  "version": "1.0.49",
+  "version": "1.0.51",
   "private": false,
   "description": "",
   "keywords": [],