@vygruppen/spor-react 12.24.5 → 12.24.7

package/dist/index.mjs

@@ -19,9 +19,9 @@ import { LuMoon, LuSun } from 'react-icons/lu';
 import { useSwipeable } from 'react-swipeable';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 import { Global } from '@emotion/react';
-import tokens23__default from '@vygruppen/spor-design-tokens';
-import * as tokens23 from '@vygruppen/spor-design-tokens';
-export { tokens23 as tokens };
+import tokens22__default from '@vygruppen/spor-design-tokens';
+import * as tokens22 from '@vygruppen/spor-design-tokens';
+export { tokens22 as tokens };
 import tokens4 from '@vygruppen/spor-design-tokens/raw-tokens';
 import { comboboxAnatomy as comboboxAnatomy$1 } from '@ark-ui/react';
 import { createAnatomy } from '@ark-ui/react/anatomy';
@@ -2292,7 +2292,7 @@ var CalendarTriggerButton = forwardRef(({ variant, disabled, onPress: _, ...butt
     key: "datePicker"
   });
   const styles = recipe({ variant });
-  return /* @__PURE__ */ jsx(PopoverAnchor, { ...buttonProps, ref, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PopoverAnchor, { ...buttonProps, ref, asChild: true, children: /* @__PURE__ */ jsx(
     IconButton,
     {
       icon: /* @__PURE__ */ jsx(CalendarOutline24Icon, {}),
@@ -2341,7 +2341,7 @@ var DateTimeSegment = forwardRef(
         borderRadius: "xs",
         fontSize: ["mobile.sm", "desktop.sm"],
         css: styles.dateTimeSegment,
-        "aria-description": ariaDescription,
+        "aria-label": ariaDescription,
         "aria-labelledby": ariaLabel,
         children: isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text
       }
@@ -3306,6 +3306,7 @@ var Autocomplete = ({
   loading,
   disabled,
   emptyLabel,
+  onFocus,
   openOnClick = true,
   openOnFocus = true,
   ...rest
@@ -3361,7 +3362,8 @@ var Autocomplete = ({
           helperText,
           errorText,
           required,
-          onFocus: () => {
+          onFocus: (event) => {
+            onFocus == null ? void 0 : onFocus(event);
             if (openOnFocus)
               combobox.setOpen(true);
           }
@@ -4483,7 +4485,7 @@ var Select = React20.forwardRef(
             children: [
               /* @__PURE__ */ jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsx(SelectValueText, { withPlaceholder: label ? true : false }) }),
               label && /* @__PURE__ */ jsx(SelectLabel, { css: styles.label, children: label }),
-              /* @__PURE__ */ jsx(SelectContent, { css: styles.selectContent, children })
+              /* @__PURE__ */ jsx(SelectContent, { css: styles.selectContent, baseStyle: css, children })
             ]
           }
         )
@@ -4510,7 +4512,7 @@ var SelectItem = React20.forwardRef(
     return /* @__PURE__ */ jsxs(Select$1.Item, { item, ...rest, ref, css: styles.item, children: [
       /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
         /* @__PURE__ */ jsx(Select$1.ItemText, { display: "flex", children }),
-        description && /* @__PURE__ */ jsx(Box, { css: styles.itemDescription, children: description })
+        description && /* @__PURE__ */ jsx(Box, { "data-part": "item-description", css: styles.itemDescription, children: description })
       ] }),
       /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckmarkFill18Icon, {}) })
     ] });
@@ -4530,10 +4532,17 @@ var SelectTrigger = React20.forwardRef(function SelectTrigger2(props, ref) {
   const styles = recipe();
   return /* @__PURE__ */ jsxs(Select$1.Control, { ...rest, css: styles.control, children: [
     /* @__PURE__ */ jsx(Select$1.Trigger, { ref, css: styles.trigger, children }),
-    /* @__PURE__ */ jsxs(Select$1.IndicatorGroup, { css: styles.indicatorGroup, children: [
-      clearable && /* @__PURE__ */ jsx(SelectClearTrigger, {}),
-      /* @__PURE__ */ jsx(Box, { css: styles.indicator, children: /* @__PURE__ */ jsx(DropdownDownFill24Icon, {}) })
-    ] })
+    /* @__PURE__ */ jsxs(
+      Select$1.IndicatorGroup,
+      {
+        css: styles.indicatorGroup,
+        "data-part": "indicator-group",
+        children: [
+          clearable && /* @__PURE__ */ jsx(SelectClearTrigger, {}),
+          /* @__PURE__ */ jsx(Box, { css: styles.indicator, "data-part": "indicator", children: /* @__PURE__ */ jsx(DropdownDownFill24Icon, {}) })
+        ]
+      }
+    )
   ] });
 });
 var SelectClearTrigger = React20.forwardRef(function SelectClearTrigger2(props, ref) {
@@ -4548,8 +4557,8 @@ var SelectClearTrigger = React20.forwardRef(function SelectClearTrigger2(props,
   ) });
 });
 var SelectContent = React20.forwardRef(function SelectContent2(props, ref) {
-  const { portalled = true, portalRef, ...rest } = props;
-  return /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(Select$1.Positioner, { children: /* @__PURE__ */ jsx(Select$1.Content, { ...rest, ref }) }) });
+  const { portalled = true, portalRef, baseStyle, ...rest } = props;
+  return /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(Select$1.Positioner, { css: baseStyle, children: /* @__PURE__ */ jsx(Select$1.Content, { ...rest, ref }) }) });
 });
 var SelectValueText = React20.forwardRef(function SelectValueText2(props, ref) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
@@ -5972,7 +5981,7 @@ var texts26 = createTexts({
 });
 var fontFaces = `
 @font-face {
-  font-family: ${tokens23__default.asset.font["vy-sans"]["light"].name};
+  font-family: ${tokens22__default.asset.font["vy-sans"]["light"].name};
   src: url("https://www.vy.no/styles/font/VySans-Light.woff2") format("woff2"),
     url("https://www.vy.no/styles/font/VySans-Light.woff") format("woff");
   font-style: normal;
@@ -5980,7 +5989,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens23__default.asset.font["vy-sans"]["light-italic"].name};
+  font-family: ${tokens22__default.asset.font["vy-sans"]["light-italic"].name};
   src: url("https://www.vy.no/styles/font/VySans-LightItalic.woff2")
       format("woff2"),
     url("https://www.vy.no/styles/font/VySans-LightItalic.woff") format("woff");
@@ -5989,7 +5998,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens23__default.asset.font["vy-sans"]["medium"].name};
+  font-family: ${tokens22__default.asset.font["vy-sans"]["medium"].name};
   src: url("https://www.vy.no/styles/font/VySans-Regular.woff2") format("woff2"),
     url("https://www.vy.no/styles/font/VySans-Regular.woff") format("woff");
   font-style: normal;
@@ -5997,7 +6006,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens23__default.asset.font["vy-sans"]["medium-italic"].name};
+  font-family: ${tokens22__default.asset.font["vy-sans"]["medium-italic"].name};
   src: url("https://www.vy.no/styles/font/VySans-RegularItalic.woff2")
       format("woff2"),
     url("https://www.vy.no/styles/font/VySans-RegularItalic.woff")
@@ -6007,7 +6016,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens23__default.asset.font["vy-sans"]["bold"].name};
+  font-family: ${tokens22__default.asset.font["vy-sans"]["bold"].name};
   src: url("https://www.vy.no/styles/font/VySans-Bold.woff2") format("woff2"),
     url("https://www.vy.no/styles/font/VySans-Bold.woff") format("woff");
   font-style: normal;
@@ -6015,7 +6024,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens23__default.asset.font["vy-sans"]["bold-italic"].name};
+  font-family: ${tokens22__default.asset.font["vy-sans"]["bold-italic"].name};
   src: url("https://www.vy.no/styles/font/VySans-BoldItalic.woff2")
       format("woff2"),
     url("https://www.vy.no/styles/font/VySans-BoldItalic.woff") format("woff");
@@ -6024,7 +6033,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens23__default.asset.font["vy-display"].name};
+  font-family: ${tokens22__default.asset.font["vy-display"].name};
   src: url("https://www.vy.no/styles/font/VyDisplay-Medium.woff2")
       format("woff2"),
     url("https://www.vy.no/styles/font/VyDisplay-Medium.woff") format("woff");
@@ -6500,7 +6509,7 @@ var buttonRecipe = defineRecipe({
       background: "surface.disabled"
     },
     _focus: {
-      outlineOffset: tokens23__default.size.stroke.md
+      outlineOffset: tokens22__default.size.stroke.md
     }
   },
   variants: {
@@ -6531,19 +6540,19 @@ var buttonRecipe = defineRecipe({
         color: "core.text",
         outline: "solid",
         fontWeight: "normal",
-        outlineWidth: tokens23__default.size.stroke.sm,
+        outlineWidth: tokens22__default.size.stroke.sm,
         outlineColor: "core.outline",
         _hover: {
-          outlineWidth: tokens23__default.size.stroke.md,
+          outlineWidth: tokens22__default.size.stroke.md,
           outlineColor: "core.outline.hover",
           _active: {
             background: "core.surface.active",
-            outlineWidth: tokens23__default.size.stroke.sm,
+            outlineWidth: tokens22__default.size.stroke.sm,
             outlineColor: "core.outline"
           }
         },
         _focus: {
-          outlineWidth: tokens23__default.size.stroke.sm
+          outlineWidth: tokens22__default.size.stroke.sm
         }
       },
       ghost: {
@@ -6859,15 +6868,15 @@ var pressableCardRecipe = defineRecipe({
       },
       core: {
         outlineColor: "core.outline",
-        outlineWidth: tokens23__default.size.stroke.sm,
+        outlineWidth: tokens22__default.size.stroke.sm,
         outlineStyle: "solid",
         _hover: {
           outlineColor: "core.outline.hover",
-          outlineWidth: tokens23__default.size.stroke.md,
+          outlineWidth: tokens22__default.size.stroke.md,
           outlineStyle: "solid",
           _active: {
             backgroundColor: "core.surface.active",
-            outlineWidth: tokens23__default.size.stroke.sm
+            outlineWidth: tokens22__default.size.stroke.sm
           }
         }
       },
@@ -7093,34 +7102,34 @@ var cargonetColors = defineSemanticTokens.colors({
   ...tokens4.color.cargonet.color.cargonet
 });
 var radii = defineSemanticTokens.radii({
-  none: { value: tokens23__default.size["border-radius"].none },
-  xxs: { value: tokens23__default.size["border-radius"].xxs },
-  xs: { value: tokens23__default.size["border-radius"].xs },
-  sm: { value: tokens23__default.size["border-radius"].sm },
-  md: { value: tokens23__default.size["border-radius"].md },
-  lg: { value: tokens23__default.size["border-radius"].lg },
-  xl: { value: tokens23__default.size["border-radius"].xl },
-  "2xl": { value: tokens23__default.size["border-radius"]["2xl"] },
+  none: { value: tokens22__default.size["border-radius"].none },
+  xxs: { value: tokens22__default.size["border-radius"].xxs },
+  xs: { value: tokens22__default.size["border-radius"].xs },
+  sm: { value: tokens22__default.size["border-radius"].sm },
+  md: { value: tokens22__default.size["border-radius"].md },
+  lg: { value: tokens22__default.size["border-radius"].lg },
+  xl: { value: tokens22__default.size["border-radius"].xl },
+  "2xl": { value: tokens22__default.size["border-radius"]["2xl"] },
   round: { value: "50%" }
 });
 var shadows = defineSemanticTokens.shadows({
   none: { value: "none" },
   sm: {
     value: {
-      _light: tokens23__default.depth.shadow.sm.value._light,
-      _dark: tokens23__default.depth.shadow.sm.value._dark
+      _light: tokens22__default.depth.shadow.sm.value._light,
+      _dark: tokens22__default.depth.shadow.sm.value._dark
     }
   },
   md: {
     value: {
-      _light: tokens23__default.depth.shadow.md.value._light,
-      _dark: tokens23__default.depth.shadow.md.value._dark
+      _light: tokens22__default.depth.shadow.md.value._light,
+      _dark: tokens22__default.depth.shadow.md.value._dark
     }
   },
   lg: {
     value: {
-      _light: tokens23__default.depth.shadow.lg.value._light,
-      _dark: tokens23__default.depth.shadow.lg.value._dark
+      _light: tokens22__default.depth.shadow.lg.value._light,
+      _dark: tokens22__default.depth.shadow.lg.value._dark
     }
   }
 });
@@ -7480,7 +7489,7 @@ var accordionSlotRecipe = defineSlotRecipe({
       core: {
         item: {
           outline: "solid",
-          outlineWidth: tokens23__default.size.stroke.sm,
+          outlineWidth: tokens22__default.size.stroke.sm,
           outlineColor: "core.outline"
         },
         itemTrigger: {
@@ -7488,14 +7497,14 @@ var accordionSlotRecipe = defineSlotRecipe({
             borderBottomRadius: "none"
           },
           "&:hover": {
-            outlineWidth: tokens23__default.size.stroke.md,
+            outlineWidth: tokens22__default.size.stroke.md,
             outlineColor: "core.outline",
             outline: "2px solid",
             outlineOffset: 0
           },
           "&:active": {
             backgroundColor: "core.surface.active",
-            outlineWidth: tokens23__default.size.stroke.sm,
+            outlineWidth: tokens22__default.size.stroke.sm,
             outline: "none"
           }
         }
@@ -7513,7 +7522,7 @@ var accordionSlotRecipe = defineSlotRecipe({
       floating: {
         item: {
           outline: "1px solid",
-          outlineWidth: tokens23__default.size.stroke.sm,
+          outlineWidth: tokens22__default.size.stroke.sm,
           boxShadow: "sm",
           outlineColor: "floating.outline"
         },
@@ -7522,14 +7531,14 @@ var accordionSlotRecipe = defineSlotRecipe({
             borderBottomRadius: "none"
           },
           "&:hover": {
-            outlineWidth: tokens23__default.size.stroke.md,
+            outlineWidth: tokens22__default.size.stroke.md,
             outline: "1px solid",
             outlineColor: "floating.outline.hover",
             outlineOffset: 1
           },
           "&:active": {
             backgroundColor: "floating.surface.active",
-            outlineWidth: tokens23__default.size.stroke.sm,
+            outlineWidth: tokens22__default.size.stroke.sm,
             outline: "none"
           }
         }
@@ -7953,7 +7962,7 @@ var breadcrumbSlotRecipe = defineSlotRecipe({
         link: {
           _hover: {
             outlineColor: "core.outline.hover",
-            outlineWidth: tokens23__default.size.stroke.md,
+            outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
               backgroundColor: "core.surface.active",
@@ -8043,10 +8052,10 @@ var checkboxSlotRecipe = defineSlotRecipe({
       _focus: {
         outlineStyle: "solid",
         outlineColor: "outline.focus",
-        outlineOffset: tokens23__default.size.stroke.md,
-        outlineWidth: tokens23__default.size.stroke.md,
+        outlineOffset: tokens22__default.size.stroke.md,
+        outlineWidth: tokens22__default.size.stroke.md,
         borderColor: "core.outline",
-        borderWidth: tokens23__default.size.stroke.md
+        borderWidth: tokens22__default.size.stroke.md
       }
     },
     label: {
@@ -8975,7 +8984,7 @@ var floatingActionButtonSlotRecipe = defineSlotRecipe({
       position: "fixed",
       zIndex: "dropdown",
       _focus: {
-        outlineOffset: tokens23__default.size.stroke.lg,
+        outlineOffset: tokens22__default.size.stroke.lg,
         outlineColor: "outline.focus"
       },
       _disabled: {
@@ -10084,25 +10093,25 @@ var radioCardSlotRecipe = defineSlotRecipe({
       core: {
         item: {
           outlineColor: "core.outline",
-          outlineWidth: tokens23__default.size.stroke.sm,
+          outlineWidth: tokens22__default.size.stroke.sm,
           outlineStyle: "solid",
           _hover: {
             outlineColor: "core.outline.hover",
-            outlineWidth: tokens23__default.size.stroke.md,
+            outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
               backgroundColor: "core.surface.active",
-              outlineWidth: tokens23__default.size.stroke.sm
+              outlineWidth: tokens22__default.size.stroke.sm
             }
           },
           _checked: {
             outlineColor: "outline.focus",
-            outlineWidth: tokens23__default.size.stroke.md,
+            outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
             backgroundColor: "core.surface.active",
             _focusVisible: {
               outlineStyle: "double",
-              outlineWidth: `calc(3 * ${tokens23__default.size.stroke.md})`
+              outlineWidth: `calc(3 * ${tokens22__default.size.stroke.md})`
               // space for double outline
             }
           }
@@ -10127,12 +10136,12 @@ var radioCardSlotRecipe = defineSlotRecipe({
           },
           _checked: {
             outlineColor: "outline.focus",
-            outlineWidth: tokens23__default.size.stroke.md,
+            outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
             backgroundColor: "core.surface.active",
             _focusVisible: {
               outlineStyle: "double",
-              outlineWidth: `calc(3 * ${tokens23__default.size.stroke.md})`
+              outlineWidth: `calc(3 * ${tokens22__default.size.stroke.md})`
               // space for double outline
             }
           }
@@ -10529,7 +10538,8 @@ var switchSlotRecipe = defineSlotRecipe({
       height: "var(--switch-height)",
       transitionProperty: "common",
       transitionDuration: "fast",
-      outline: "2px solid",
+      outline: "1px solid",
+      outlineOffset: "-1px",
       outlineColor: "core.outline",
       _hover: {
         outline: "2px solid",
@@ -10542,14 +10552,16 @@ var switchSlotRecipe = defineSlotRecipe({
       _focusVisible: {
         outlineWidth: "2px",
         outlineColor: "outline.focus",
-        outlineStyle: "solid"
+        outlineStyle: "double"
       },
       _checked: {
         backgroundColor: "brand.surface",
+        outline: "none",
         _focusVisible: {
-          outlineStyle: "double",
-          outlineWidth: `calc(3 * ${tokens23__default.size.stroke.md})`
-          // space for double outline
+          outlineOffset: "1px",
+          outlineStyle: "solid",
+          outlineColor: "outline.focus",
+          outlineWidth: "2px"
         }
       },
       _disabled: {
@@ -10571,32 +10583,29 @@ var switchSlotRecipe = defineSlotRecipe({
     size: {
       sm: {
         root: {
-          "--switch-width": "3.3rem",
-          "--switch-height": "1.5rem"
+          "--switch-width": "3rem",
+          "--switch-height": "1.125rem"
         },
         control: {
-          borderRadius: "lg",
-          padding: "0.12rem"
+          borderRadius: "lg"
         }
       },
       md: {
         root: {
-          "--switch-width": "4.1rem",
-          "--switch-height": "1.8rem"
+          "--switch-width": "3.75rem",
+          "--switch-height": "1.5rem"
         },
         control: {
-          borderRadius: "xl",
-          padding: 0.5
+          borderRadius: "xl"
         }
       },
       lg: {
         root: {
-          "--switch-width": "4.8rem",
-          "--switch-height": "2.25rem"
+          "--switch-width": "4.5rem",
+          "--switch-height": "1.875rem"
         },
         control: {
-          borderRadius: "2xl",
-          padding: 0.5
+          borderRadius: "2xl"
         }
       }
     }
@@ -11114,22 +11123,22 @@ var borders = defineTokens.borders({
     value: "0"
   },
   sm: {
-    value: `${tokens23__default.size.stroke.sm} solid`
+    value: `${tokens22__default.size.stroke.sm} solid`
   },
   "sm-dashed": {
-    value: `${tokens23__default.size.stroke.sm} dashed`
+    value: `${tokens22__default.size.stroke.sm} dashed`
   },
   md: {
-    value: `${tokens23__default.size.stroke.md} solid`
+    value: `${tokens22__default.size.stroke.md} solid`
   },
   "md-dashed": {
-    value: `${tokens23__default.size.stroke.md} dashed`
+    value: `${tokens22__default.size.stroke.md} dashed`
   },
   lg: {
-    value: `${tokens23__default.size.stroke.lg} solid`
+    value: `${tokens22__default.size.stroke.lg} solid`
   },
   "lg-dashed": {
-    value: `${tokens23__default.size.stroke.lg} dashed`
+    value: `${tokens22__default.size.stroke.lg} dashed`
   }
 });
 var colors = defineTokens.colors({
@@ -11201,33 +11210,33 @@ var easings = defineTokens.easings({
   }
 });
 var fontSizes = defineTokens.fontSizes({
-  "2xs": { value: tokens23__default.size.font.xs.mobile },
-  xs: { value: tokens23__default.size.font.sm.mobile },
-  sm: { value: tokens23__default.size.font.md.mobile },
-  md: { value: tokens23__default.size.font.lg.mobile },
-  lg: { value: tokens23__default.size.font.xl.mobile },
-  xl: { value: tokens23__default.size.font.xxl.mobile },
-  "2xl": { value: tokens23__default.size.font.xl.desktop },
-  "3xl": { value: tokens23__default.size.font.xxl.desktop },
+  "2xs": { value: tokens22__default.size.font.xs.mobile },
+  xs: { value: tokens22__default.size.font.sm.mobile },
+  sm: { value: tokens22__default.size.font.md.mobile },
+  md: { value: tokens22__default.size.font.lg.mobile },
+  lg: { value: tokens22__default.size.font.xl.mobile },
+  xl: { value: tokens22__default.size.font.xxl.mobile },
+  "2xl": { value: tokens22__default.size.font.xl.desktop },
+  "3xl": { value: tokens22__default.size.font.xxl.desktop },
   mobile: {
-    "2xs": { value: tokens23__default.size.font["2xs"].mobile },
-    xs: { value: tokens23__default.size.font.xs.mobile },
-    sm: { value: tokens23__default.size.font.sm.mobile },
-    md: { value: tokens23__default.size.font.md.mobile },
-    "md-lg": { value: tokens23__default.size.font["md-lg"].mobile },
-    lg: { value: tokens23__default.size.font.lg.mobile },
-    xl: { value: tokens23__default.size.font.xl.mobile },
-    xxl: { value: tokens23__default.size.font.xxl.mobile }
+    "2xs": { value: tokens22__default.size.font["2xs"].mobile },
+    xs: { value: tokens22__default.size.font.xs.mobile },
+    sm: { value: tokens22__default.size.font.sm.mobile },
+    md: { value: tokens22__default.size.font.md.mobile },
+    "md-lg": { value: tokens22__default.size.font["md-lg"].mobile },
+    lg: { value: tokens22__default.size.font.lg.mobile },
+    xl: { value: tokens22__default.size.font.xl.mobile },
+    xxl: { value: tokens22__default.size.font.xxl.mobile }
   },
   desktop: {
-    "2xs": { value: tokens23__default.size.font["2xs"].desktop },
-    xs: { value: tokens23__default.size.font.xs.desktop },
-    sm: { value: tokens23__default.size.font.sm.desktop },
-    md: { value: tokens23__default.size.font.md.desktop },
-    "md-lg": { value: tokens23__default.size.font["md-lg"].desktop },
-    lg: { value: tokens23__default.size.font.lg.desktop },
-    xl: { value: tokens23__default.size.font.xl.desktop },
-    xxl: { value: tokens23__default.size.font.xxl.desktop }
+    "2xs": { value: tokens22__default.size.font["2xs"].desktop },
+    xs: { value: tokens22__default.size.font.xs.desktop },
+    sm: { value: tokens22__default.size.font.sm.desktop },
+    md: { value: tokens22__default.size.font.md.desktop },
+    "md-lg": { value: tokens22__default.size.font["md-lg"].desktop },
+    lg: { value: tokens22__default.size.font.lg.desktop },
+    xl: { value: tokens22__default.size.font.xl.desktop },
+    xxl: { value: tokens22__default.size.font.xxl.desktop }
   }
 });
 var fontWeights = defineTokens.fontWeights({
@@ -11260,9 +11269,9 @@ var fontWeights = defineTokens.fontWeights({
   }
 });
 var fonts = defineTokens.fonts({
-  body: { value: `${tokens23__default.font.family.body}, arial, sans-serif` },
-  heading: { value: `${tokens23__default.font.family.heading}, arial, sans-serif` },
-  mono: { value: `${tokens23__default.font.family.monospace}, monospace` }
+  body: { value: `${tokens22__default.font.family.body}, arial, sans-serif` },
+  heading: { value: `${tokens22__default.font.family.heading}, arial, sans-serif` },
+  mono: { value: `${tokens22__default.font.family.monospace}, monospace` }
 });
 var letterSpacings = defineTokens.letterSpacings({
   tighter: {
@@ -11299,32 +11308,32 @@ var lineHeights = defineTokens.lineHeights({
   }
 });
 var radii2 = defineTokens.radii({
-  none: { value: tokens23__default.size["border-radius"].none },
-  xs: { value: tokens23__default.size["border-radius"].xs },
-  sm: { value: tokens23__default.size["border-radius"].sm },
-  md: { value: tokens23__default.size["border-radius"].md },
-  lg: { value: tokens23__default.size["border-radius"].lg },
-  xl: { value: tokens23__default.size["border-radius"].xl },
-  "2xl": { value: tokens23__default.size["border-radius"]["2xl"] },
+  none: { value: tokens22__default.size["border-radius"].none },
+  xs: { value: tokens22__default.size["border-radius"].xs },
+  sm: { value: tokens22__default.size["border-radius"].sm },
+  md: { value: tokens22__default.size["border-radius"].md },
+  lg: { value: tokens22__default.size["border-radius"].lg },
+  xl: { value: tokens22__default.size["border-radius"].xl },
+  "2xl": { value: tokens22__default.size["border-radius"]["2xl"] },
   round: { value: "50%" }
 });
 var spacing = defineTokens.spacing({
-  0: { value: tokens23__default.size.spacing["0"] },
-  0.5: { value: tokens23__default.size.spacing["0.5"] },
-  1: { value: tokens23__default.size.spacing["1"] },
-  1.5: { value: tokens23__default.size.spacing["1.5"] },
-  2: { value: tokens23__default.size.spacing["2"] },
-  3: { value: tokens23__default.size.spacing["3"] },
-  4: { value: tokens23__default.size.spacing["4"] },
-  5: { value: tokens23__default.size.spacing["5"] },
-  6: { value: tokens23__default.size.spacing["6"] },
-  7: { value: tokens23__default.size.spacing["7"] },
-  8: { value: tokens23__default.size.spacing["8"] },
-  9: { value: tokens23__default.size.spacing["9"] },
-  10: { value: tokens23__default.size.spacing["10"] },
-  11: { value: tokens23__default.size.spacing["11"] },
-  12: { value: tokens23__default.size.spacing["12"] },
-  13: { value: tokens23__default.size.spacing["13"] }
+  0: { value: tokens22__default.size.spacing["0"] },
+  0.5: { value: tokens22__default.size.spacing["0.5"] },
+  1: { value: tokens22__default.size.spacing["1"] },
+  1.5: { value: tokens22__default.size.spacing["1.5"] },
+  2: { value: tokens22__default.size.spacing["2"] },
+  3: { value: tokens22__default.size.spacing["3"] },
+  4: { value: tokens22__default.size.spacing["4"] },
+  5: { value: tokens22__default.size.spacing["5"] },
+  6: { value: tokens22__default.size.spacing["6"] },
+  7: { value: tokens22__default.size.spacing["7"] },
+  8: { value: tokens22__default.size.spacing["8"] },
+  9: { value: tokens22__default.size.spacing["9"] },
+  10: { value: tokens22__default.size.spacing["10"] },
+  11: { value: tokens22__default.size.spacing["11"] },
+  12: { value: tokens22__default.size.spacing["12"] },
+  13: { value: tokens22__default.size.spacing["13"] }
 });
 
 // src/theme/tokens/sizes.ts
@@ -11361,10 +11370,10 @@ var namedSizes = defineTokens.sizes({
 });
 var container = defineTokens.sizes({
   base: { value: 0 },
-  sm: { value: tokens23__default.size.breakpoint.sm },
-  md: { value: tokens23__default.size.breakpoint.md },
-  lg: { value: tokens23__default.size.breakpoint.lg },
-  xl: { value: tokens23__default.size.breakpoint.xl }
+  sm: { value: tokens22__default.size.breakpoint.sm },
+  md: { value: tokens22__default.size.breakpoint.md },
+  lg: { value: tokens22__default.size.breakpoint.lg },
+  xl: { value: tokens22__default.size.breakpoint.xl }
 });
 var sizes = {
   ...largeSizes,
@@ -11373,22 +11382,22 @@ var sizes = {
   container
 };
 var zIndex = defineTokens.zIndex({
-  hide: { value: tokens23__default.depth["z-index"].hide },
+  hide: { value: tokens22__default.depth["z-index"].hide },
   auto: { value: "auto" },
-  base: { value: tokens23__default.depth["z-index"].base },
-  docked: { value: tokens23__default.depth["z-index"].docked },
-  dropdown: { value: tokens23__default.depth["z-index"].dropdown },
-  sticky: { value: tokens23__default.depth["z-index"].sticky },
-  banner: { value: tokens23__default.depth["z-index"].banner },
-  overlay: { value: tokens23__default.depth["z-index"].overlay },
-  modal: { value: tokens23__default.depth["z-index"].modal },
-  popover: { value: tokens23__default.depth["z-index"].popover },
-  skipLink: { value: tokens23__default.depth["z-index"].skipLink },
-  toast: { value: tokens23__default.depth["z-index"].toast }
+  base: { value: tokens22__default.depth["z-index"].base },
+  docked: { value: tokens22__default.depth["z-index"].docked },
+  dropdown: { value: tokens22__default.depth["z-index"].dropdown },
+  sticky: { value: tokens22__default.depth["z-index"].sticky },
+  banner: { value: tokens22__default.depth["z-index"].banner },
+  overlay: { value: tokens22__default.depth["z-index"].overlay },
+  modal: { value: tokens22__default.depth["z-index"].modal },
+  popover: { value: tokens22__default.depth["z-index"].popover },
+  skipLink: { value: tokens22__default.depth["z-index"].skipLink },
+  toast: { value: tokens22__default.depth["z-index"].toast }
 });
 
 // src/theme/tokens/index.ts
-var tokens21 = {
+var tokens20 = {
   aspectRatios,
   animations,
   blurs,
@@ -11456,10 +11465,10 @@ var animationStyles = defineAnimationStyles({
   }
 });
 var breakpoints = {
-  sm: tokens23__default.size.breakpoint.sm,
-  md: tokens23__default.size.breakpoint.md,
-  lg: tokens23__default.size.breakpoint.lg,
-  xl: tokens23__default.size.breakpoint.xl
+  sm: tokens22__default.size.breakpoint.sm,
+  md: tokens22__default.size.breakpoint.md,
+  lg: tokens22__default.size.breakpoint.lg,
+  xl: tokens22__default.size.breakpoint.xl
 };
 
 // src/theme/tokens/config.ts
@@ -11749,91 +11758,91 @@ var textStyles = defineTextStyles({
   xxl: {
     value: {
       fontSize: [
-        tokens23__default.font.style.xxl["font-size"].mobile,
-        tokens23__default.font.style.xxl["font-size"].desktop
+        tokens22__default.font.style.xxl["font-size"].mobile,
+        tokens22__default.font.style.xxl["font-size"].desktop
       ],
-      fontFamily: tokens23__default.font.style.xxl["font-family"],
-      lineHeight: tokens23__default.font.style.xxl["line-height"]
+      fontFamily: tokens22__default.font.style.xxl["font-family"],
+      lineHeight: tokens22__default.font.style.xxl["line-height"]
     }
   },
   "xl-display": {
     value: {
       fontSize: [
-        tokens23__default.font.style["xl-display"]["font-size"].mobile,
-        tokens23__default.font.style["xl-display"]["font-size"].desktop
+        tokens22__default.font.style["xl-display"]["font-size"].mobile,
+        tokens22__default.font.style["xl-display"]["font-size"].desktop
       ],
-      fontFamily: tokens23__default.font.style["xl-display"]["font-family"],
-      lineHeight: tokens23__default.font.style["xl-display"]["line-height"]
+      fontFamily: tokens22__default.font.style["xl-display"]["font-family"],
+      lineHeight: tokens22__default.font.style["xl-display"]["line-height"]
     }
   },
   "xl-sans": {
     value: {
       fontSize: [
-        tokens23__default.font.style["xl-sans"]["font-size"].mobile,
-        tokens23__default.font.style["xl-sans"]["font-size"].desktop
+        tokens22__default.font.style["xl-sans"]["font-size"].mobile,
+        tokens22__default.font.style["xl-sans"]["font-size"].desktop
       ],
-      fontFamily: tokens23__default.font.style["xl-sans"]["font-family"],
-      lineHeight: tokens23__default.font.style["xl-sans"]["line-height"]
+      fontFamily: tokens22__default.font.style["xl-sans"]["font-family"],
+      lineHeight: tokens22__default.font.style["xl-sans"]["line-height"]
     }
   },
   lg: {
     value: {
       fontSize: [
-        tokens23__default.font.style.lg["font-size"].mobile,
-        tokens23__default.font.style.lg["font-size"].desktop
+        tokens22__default.font.style.lg["font-size"].mobile,
+        tokens22__default.font.style.lg["font-size"].desktop
       ],
-      fontFamily: tokens23__default.font.style.lg["font-family"],
-      lineHeight: tokens23__default.font.style.lg["line-height"]
+      fontFamily: tokens22__default.font.style.lg["font-family"],
+      lineHeight: tokens22__default.font.style.lg["line-height"]
     }
   },
   "md-lg": {
     value: {
       fontSize: [
-        tokens23__default.font.style["md-lg"]["font-size"].mobile,
-        tokens23__default.font.style["md-lg"]["font-size"].desktop
+        tokens22__default.font.style["md-lg"]["font-size"].mobile,
+        tokens22__default.font.style["md-lg"]["font-size"].desktop
       ],
-      fontFamily: tokens23__default.font.style["md-lg"]["font-family"],
-      lineHeight: tokens23__default.font.style["md-lg"]["line-height"]
+      fontFamily: tokens22__default.font.style["md-lg"]["font-family"],
+      lineHeight: tokens22__default.font.style["md-lg"]["line-height"]
     }
   },
   md: {
     value: {
       fontSize: [
-        tokens23__default.font.style.md["font-size"].mobile,
-        tokens23__default.font.style.md["font-size"].desktop
+        tokens22__default.font.style.md["font-size"].mobile,
+        tokens22__default.font.style.md["font-size"].desktop
       ],
-      fontFamily: tokens23__default.font.style.md["font-family"],
-      lineHeight: tokens23__default.font.style.md["line-height"]
+      fontFamily: tokens22__default.font.style.md["font-family"],
+      lineHeight: tokens22__default.font.style.md["line-height"]
     }
   },
   sm: {
     value: {
       fontSize: [
-        tokens23__default.font.style.sm["font-size"].mobile,
-        tokens23__default.font.style.sm["font-size"].desktop
+        tokens22__default.font.style.sm["font-size"].mobile,
+        tokens22__default.font.style.sm["font-size"].desktop
       ],
-      fontFamily: tokens23__default.font.style.sm["font-family"],
-      lineHeight: tokens23__default.font.style.sm["line-height"]
+      fontFamily: tokens22__default.font.style.sm["font-family"],
+      lineHeight: tokens22__default.font.style.sm["line-height"]
     }
   },
   xs: {
     value: {
       fontSize: [
-        tokens23__default.font.style.xs["font-size"].mobile,
-        tokens23__default.font.style.xs["font-size"].desktop
+        tokens22__default.font.style.xs["font-size"].mobile,
+        tokens22__default.font.style.xs["font-size"].desktop
       ],
-      fontFamily: tokens23__default.font.style.xs["font-family"],
-      lineHeight: tokens23__default.font.style.xs["line-height"]
+      fontFamily: tokens22__default.font.style.xs["font-family"],
+      lineHeight: tokens22__default.font.style.xs["line-height"]
     }
   },
   "2xs": {
     value: {
       fontSize: [
-        tokens23__default.font.style["2xs"]["font-size"].mobile,
-        tokens23__default.font.style["2xs"]["font-size"].desktop
+        tokens22__default.font.style["2xs"]["font-size"].mobile,
+        tokens22__default.font.style["2xs"]["font-size"].desktop
       ],
-      fontFamily: tokens23__default.font.style["2xs"]["font-family"],
-      lineHeight: tokens23__default.font.style["2xs"]["line-height"]
+      fontFamily: tokens22__default.font.style["2xs"]["font-family"],
+      lineHeight: tokens22__default.font.style["2xs"]["line-height"]
     }
   }
 });
@@ -11844,7 +11853,7 @@ var generateTheme = (brand) => {
     theme: {
       breakpoints,
       keyframes,
-      tokens: tokens21,
+      tokens: tokens20,
       semanticTokens: semanticTokens[brand],
       recipes,
       slotRecipes,