@vygruppen/spor-react 12.4.2 → 12.4.4

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group as Group$1, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field, defineStyle, defineSlotRecipe, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Fieldset as Fieldset$1, Input as Input$1, InputElement, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, List as List$1, Center, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, ListItem, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
+import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group as Group$1, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field, defineStyle, defineSlotRecipe, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Fieldset as Fieldset$1, Input as Input$1, InputElement, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, ListItem, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
 export { Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, TableColumnHeader, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, InformationFill24Icon, DropdownDownFill18Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, LinkOutOutline24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
 import * as React28 from 'react';
@@ -18,17 +18,11 @@ import { popoverAnatomy as popoverAnatomy$1 } from '@ark-ui/react/popover';
 import { GregorianCalendar, createCalendar, getLocalTimeZone, endOfMonth, getWeeksInMonth, isSameMonth, isToday, parseTime } from '@internationalized/date';
 export { Time } from '@internationalized/date';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
-import tokens20__default from '@vygruppen/spor-design-tokens';
-import * as tokens20 from '@vygruppen/spor-design-tokens';
-export { tokens20 as tokens };
-import { usePopoverContext as usePopoverContext$1, PopoverCloseTrigger } from '@ark-ui/react';
+import tokens22__default from '@vygruppen/spor-design-tokens';
+import * as tokens22 from '@vygruppen/spor-design-tokens';
+export { tokens22 as tokens };
 import { Global } from '@emotion/react';
-import cargonetJson from '@vygruppen/spor-design-tokens/tokens/color/cargonet.json';
-import vyDigitalJson from '@vygruppen/spor-design-tokens/tokens/color/vy-digital.json';
-import VyUtviklingJson from '@vygruppen/spor-design-tokens/tokens/color/vy-utvikling.json';
-import aliasJson from '@vygruppen/spor-design-tokens/tokens/color/alias.json';
-import linjetagJson from '@vygruppen/spor-design-tokens/tokens/color/linjetag.json';
-import paletteJson from '@vygruppen/spor-design-tokens/tokens/color/palette.json';
+import tokens4 from '@vygruppen/spor-design-tokens/raw-tokens';
 
 // src/accordion/Accordion.tsx
 
@@ -4582,16 +4576,16 @@ var pressableCardRecipe = defineRecipe({
       },
       core: {
         outlineColor: "core.outline",
-        outlineWidth: tokens20__default.size.stroke.sm,
+        outlineWidth: tokens22__default.size.stroke.sm,
         outlineStyle: "solid",
         backgroundColor: "core.surface",
         _hover: {
           outlineColor: "core.outline.hover",
-          outlineWidth: tokens20__default.size.stroke.md,
+          outlineWidth: tokens22__default.size.stroke.md,
           outlineStyle: "solid",
           _active: {
             backgroundColor: "core.surface.active",
-            outlineWidth: tokens20__default.size.stroke.sm
+            outlineWidth: tokens22__default.size.stroke.sm
           }
         }
       },
@@ -5661,7 +5655,7 @@ var NudgeContent = forwardRef(
   ({ showCloseButton = true, children, ...props }, ref) => {
     const [currentStep, setCurrentStep] = useState(1);
     const childrenArray = React28__default.Children.toArray(children);
-    const { open } = usePopoverContext$1();
+    const { open } = usePopoverContext();
     useEffect(() => {
       setCurrentStep(1);
     }, [children, open]);
@@ -6022,7 +6016,7 @@ var texts24 = createTexts({
 });
 var fontFaces = `
 @font-face {
-  font-family: ${tokens20__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;
@@ -6030,7 +6024,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens20__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");
@@ -6039,7 +6033,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens20__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;
@@ -6047,7 +6041,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens20__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")
@@ -6057,7 +6051,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens20__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;
@@ -6065,7 +6059,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens20__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");
@@ -6074,7 +6068,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens20__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");
@@ -6106,7 +6100,7 @@ var createToast = ({
 }) => toaster.create({
   description: text,
   type: variant,
-  id,
+  id: id ?? crypto.randomUUID(),
   duration
 });
 var Toaster = () => {
@@ -6583,7 +6577,7 @@ var buttonRecipe = defineRecipe({
       background: "surface.disabled"
     },
     _focus: {
-      outlineOffset: tokens20__default.size.stroke.md
+      outlineOffset: tokens22__default.size.stroke.md
     }
   },
   variants: {
@@ -6611,19 +6605,19 @@ var buttonRecipe = defineRecipe({
       tertiary: {
         color: "core.text",
         outline: "solid",
-        outlineWidth: tokens20__default.size.stroke.sm,
+        outlineWidth: tokens22__default.size.stroke.sm,
         outlineColor: "core.outline",
         _hover: {
-          outlineWidth: tokens20__default.size.stroke.md,
+          outlineWidth: tokens22__default.size.stroke.md,
           outlineColor: "core.outline.hover",
           _active: {
             background: "core.surface.active",
-            outlineWidth: tokens20__default.size.stroke.sm,
+            outlineWidth: tokens22__default.size.stroke.sm,
             outlineColor: "core.outline"
           }
         },
         _focus: {
-          outlineWidth: tokens20__default.size.stroke.sm
+          outlineWidth: tokens22__default.size.stroke.sm
         }
       },
       ghost: {
@@ -6851,23 +6845,23 @@ var recipes = {
   textarea: textareaRecipe
 };
 var vyDigitalColors = defineSemanticTokens.colors({
-  ...vyDigitalJson.color.vyDigital
+  ...tokens4.color["vy-digital"].color.vyDigital
 });
 var vyUtviklingColors = defineSemanticTokens.colors({
-  ...VyUtviklingJson.color.vyUtvikling
+  ...tokens4.color["vy-utvikling"].color.vyUtvikling
 });
 var cargonetColors = defineSemanticTokens.colors({
-  ...cargonetJson.color.cargonet
+  ...tokens4.color.cargonet.color.cargonet
 });
 var radii = defineSemanticTokens.radii({
-  none: { value: tokens20__default.size["border-radius"].none },
-  xxs: { value: tokens20__default.size["border-radius"].xxs },
-  xs: { value: tokens20__default.size["border-radius"].xs },
-  sm: { value: tokens20__default.size["border-radius"].sm },
-  md: { value: tokens20__default.size["border-radius"].md },
-  lg: { value: tokens20__default.size["border-radius"].lg },
-  xl: { value: tokens20__default.size["border-radius"].xl },
-  "2xl": { value: tokens20__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({
@@ -6875,13 +6869,13 @@ var shadows = defineSemanticTokens.shadows({
     value: "none"
   },
   sm: {
-    value: tokens20__default.depth.shadow.sm.value
+    value: tokens22__default.depth.shadow.sm.value
   },
   md: {
-    value: tokens20__default.depth.shadow.md.value
+    value: tokens22__default.depth.shadow.md.value
   },
   lg: {
-    value: tokens20__default.depth.shadow.lg.value
+    value: tokens22__default.depth.shadow.lg.value
   }
 });
 
@@ -7384,7 +7378,7 @@ var breadcrumbSlotRecipe = defineSlotRecipe({
         link: {
           _hover: {
             outlineColor: "core.outline.hover",
-            outlineWidth: tokens20__default.size.stroke.md,
+            outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
               backgroundColor: "core.surface.active",
@@ -7476,10 +7470,10 @@ var checkboxSlotRecipe = defineSlotRecipe({
       _focus: {
         outlineStyle: "solid",
         outlineColor: "outline.focus",
-        outlineOffset: tokens20__default.size.stroke.md,
-        outlineWidth: tokens20__default.size.stroke.md,
+        outlineOffset: tokens22__default.size.stroke.md,
+        outlineWidth: tokens22__default.size.stroke.md,
         borderColor: "core.outline",
-        borderWidth: tokens20__default.size.stroke.md
+        borderWidth: tokens22__default.size.stroke.md
       }
     },
     label: {
@@ -8133,7 +8127,7 @@ var floatingActionButtonSlotRecipe = defineSlotRecipe({
       position: "fixed",
       zIndex: "dropdown",
       _focus: {
-        outlineOffset: tokens20__default.size.stroke.lg,
+        outlineOffset: tokens22__default.size.stroke.lg,
         outlineColor: "outline.focus"
       },
       _disabled: {
@@ -9138,26 +9132,26 @@ var radioCardSlotRecipe = defineSlotRecipe({
       core: {
         item: {
           outlineColor: "core.outline",
-          outlineWidth: tokens20__default.size.stroke.sm,
+          outlineWidth: tokens22__default.size.stroke.sm,
           outlineStyle: "solid",
           backgroundColor: "core.surface",
           _hover: {
             outlineColor: "core.outline.hover",
-            outlineWidth: tokens20__default.size.stroke.md,
+            outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
               backgroundColor: "core.surface.active",
-              outlineWidth: tokens20__default.size.stroke.sm
+              outlineWidth: tokens22__default.size.stroke.sm
             }
           },
           _checked: {
             outlineColor: "outline.focus",
-            outlineWidth: tokens20__default.size.stroke.md,
+            outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
             backgroundColor: "core.surface.active",
             _focusVisible: {
               outlineStyle: "double",
-              outlineWidth: `calc(3 * ${tokens20__default.size.stroke.md})`
+              outlineWidth: `calc(3 * ${tokens22__default.size.stroke.md})`
               // space for double outline
             }
           }
@@ -9182,12 +9176,12 @@ var radioCardSlotRecipe = defineSlotRecipe({
           },
           _checked: {
             outlineColor: "outline.focus",
-            outlineWidth: tokens20__default.size.stroke.md,
+            outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
             backgroundColor: "core.surface.active",
             _focusVisible: {
               outlineStyle: "double",
-              outlineWidth: `calc(3 * ${tokens20__default.size.stroke.md})`
+              outlineWidth: `calc(3 * ${tokens22__default.size.stroke.md})`
               // space for double outline
             }
           }
@@ -9652,7 +9646,7 @@ var switchSlotRecipe = defineSlotRecipe({
         backgroundColor: "brand.surface",
         _focusVisible: {
           outlineStyle: "double",
-          outlineWidth: `calc(3 * ${tokens20__default.size.stroke.md})`
+          outlineWidth: `calc(3 * ${tokens22__default.size.stroke.md})`
           // space for double outline
         }
       },
@@ -10028,28 +10022,28 @@ var borders = defineTokens.borders({
     value: "0"
   },
   sm: {
-    value: `${tokens20__default.size.stroke.sm} solid`
+    value: `${tokens22__default.size.stroke.sm} solid`
   },
   "sm-dashed": {
-    value: `${tokens20__default.size.stroke.sm} dashed`
+    value: `${tokens22__default.size.stroke.sm} dashed`
   },
   md: {
-    value: `${tokens20__default.size.stroke.md} solid`
+    value: `${tokens22__default.size.stroke.md} solid`
   },
   "md-dashed": {
-    value: `${tokens20__default.size.stroke.md} dashed`
+    value: `${tokens22__default.size.stroke.md} dashed`
   },
   lg: {
-    value: `${tokens20__default.size.stroke.lg} solid`
+    value: `${tokens22__default.size.stroke.lg} solid`
   },
   "lg-dashed": {
-    value: `${tokens20__default.size.stroke.lg} dashed`
+    value: `${tokens22__default.size.stroke.lg} dashed`
   }
 });
 var colors = defineTokens.colors({
-  ...aliasJson.color.alias,
-  ...paletteJson.color.palette,
-  linjetag: linjetagJson.color.linjetag
+  ...tokens4.color.alias.color.alias,
+  ...tokens4.color.palette.color.palette,
+  linjetag: tokens4.color.linjetag.color.linjetag
 });
 var cursor = defineTokens.cursor({
   button: {
@@ -10115,29 +10109,29 @@ var easings = defineTokens.easings({
   }
 });
 var fontSizes = defineTokens.fontSizes({
-  "2xs": { value: tokens20__default.size.font.xs.mobile },
-  xs: { value: tokens20__default.size.font.sm.mobile },
-  sm: { value: tokens20__default.size.font.md.mobile },
-  md: { value: tokens20__default.size.font.lg.mobile },
-  lg: { value: tokens20__default.size.font.xl.mobile },
-  xl: { value: tokens20__default.size.font.xxl.mobile },
-  "2xl": { value: tokens20__default.size.font.xl.desktop },
-  "3xl": { value: tokens20__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: {
-    xs: { value: tokens20__default.size.font.xs.mobile },
-    sm: { value: tokens20__default.size.font.sm.mobile },
-    md: { value: tokens20__default.size.font.md.mobile },
-    lg: { value: tokens20__default.size.font.lg.mobile },
-    xl: { value: tokens20__default.size.font.xl.mobile },
-    xxl: { value: tokens20__default.size.font.xxl.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 },
+    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: {
-    xs: { value: tokens20__default.size.font.xs.desktop },
-    sm: { value: tokens20__default.size.font.sm.desktop },
-    md: { value: tokens20__default.size.font.md.desktop },
-    lg: { value: tokens20__default.size.font.lg.desktop },
-    xl: { value: tokens20__default.size.font.xl.desktop },
-    xxl: { value: tokens20__default.size.font.xxl.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 },
+    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({
@@ -10170,9 +10164,9 @@ var fontWeights = defineTokens.fontWeights({
   }
 });
 var fonts = defineTokens.fonts({
-  body: { value: `${tokens20__default.font.family.body}, arial, sans-serif` },
-  heading: { value: `${tokens20__default.font.family.heading}, arial, sans-serif` },
-  mono: { value: `${tokens20__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: {
@@ -10209,31 +10203,31 @@ var lineHeights = defineTokens.lineHeights({
   }
 });
 var radii2 = defineTokens.radii({
-  none: { value: tokens20__default.size["border-radius"].none },
-  xs: { value: tokens20__default.size["border-radius"].xs },
-  sm: { value: tokens20__default.size["border-radius"].sm },
-  md: { value: tokens20__default.size["border-radius"].md },
-  lg: { value: tokens20__default.size["border-radius"].lg },
-  xl: { value: tokens20__default.size["border-radius"].xl },
-  "2xl": { value: tokens20__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: tokens20__default.size.spacing["0"] },
-  0.5: { value: tokens20__default.size.spacing["0.5"] },
-  1: { value: tokens20__default.size.spacing["1"] },
-  1.5: { value: tokens20__default.size.spacing["1.5"] },
-  2: { value: tokens20__default.size.spacing["2"] },
-  3: { value: tokens20__default.size.spacing["3"] },
-  4: { value: tokens20__default.size.spacing["4"] },
-  5: { value: tokens20__default.size.spacing["5"] },
-  6: { value: tokens20__default.size.spacing["6"] },
-  7: { value: tokens20__default.size.spacing["7"] },
-  8: { value: tokens20__default.size.spacing["8"] },
-  9: { value: tokens20__default.size.spacing["9"] },
-  10: { value: tokens20__default.size.spacing["10"] },
-  11: { value: tokens20__default.size.spacing["11"] },
-  12: { value: tokens20__default.size.spacing["12"] }
+  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"] }
 });
 
 // src/theme/tokens/sizes.ts
@@ -10270,10 +10264,10 @@ var namedSizes = defineTokens.sizes({
 });
 var container = defineTokens.sizes({
   base: { value: 0 },
-  sm: { value: tokens20__default.size.breakpoint.sm },
-  md: { value: tokens20__default.size.breakpoint.md },
-  lg: { value: tokens20__default.size.breakpoint.lg },
-  xl: { value: tokens20__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,
@@ -10282,22 +10276,22 @@ var sizes = {
   container
 };
 var zIndex = defineTokens.zIndex({
-  hide: { value: tokens20__default.depth["z-index"].hide },
+  hide: { value: tokens22__default.depth["z-index"].hide },
   auto: { value: "auto" },
-  base: { value: tokens20__default.depth["z-index"].base },
-  docked: { value: tokens20__default.depth["z-index"].docked },
-  dropdown: { value: tokens20__default.depth["z-index"].dropdown },
-  sticky: { value: tokens20__default.depth["z-index"].sticky },
-  banner: { value: tokens20__default.depth["z-index"].banner },
-  overlay: { value: tokens20__default.depth["z-index"].overlay },
-  modal: { value: tokens20__default.depth["z-index"].modal },
-  popover: { value: tokens20__default.depth["z-index"].popover },
-  skipLink: { value: tokens20__default.depth["z-index"].skipLink },
-  toast: { value: tokens20__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 tokens18 = {
+var tokens20 = {
   aspectRatios,
   animations,
   blurs,
@@ -10366,10 +10360,10 @@ var animationStyles = defineAnimationStyles({
 });
 var breakpoints = {
   base: "0px",
-  sm: tokens20__default.size.breakpoint.sm,
-  md: tokens20__default.size.breakpoint.md,
-  lg: tokens20__default.size.breakpoint.lg,
-  xl: tokens20__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
@@ -10659,85 +10653,85 @@ var textStyles = defineTextStyles({
   xxl: {
     value: {
       fontSize: [
-        tokens20__default.font.style.xxl["font-size"].mobile,
+        tokens22__default.font.style.xxl["font-size"].mobile,
         null,
         null,
-        tokens20__default.font.style.xxl["font-size"].desktop
+        tokens22__default.font.style.xxl["font-size"].desktop
       ],
-      fontFamily: tokens20__default.font.style.xxl["font-family"],
-      lineHeight: tokens20__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: [
-        tokens20__default.font.style["xl-display"]["font-size"].mobile,
+        tokens22__default.font.style["xl-display"]["font-size"].mobile,
         null,
         null,
-        tokens20__default.font.style["xl-display"]["font-size"].desktop
+        tokens22__default.font.style["xl-display"]["font-size"].desktop
       ],
-      fontFamily: tokens20__default.font.style["xl-display"]["font-family"],
-      lineHeight: tokens20__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: [
-        tokens20__default.font.style["xl-sans"]["font-size"].mobile,
+        tokens22__default.font.style["xl-sans"]["font-size"].mobile,
         null,
         null,
-        tokens20__default.font.style["xl-sans"]["font-size"].desktop
+        tokens22__default.font.style["xl-sans"]["font-size"].desktop
       ],
-      fontFamily: tokens20__default.font.style["xl-sans"]["font-family"],
-      lineHeight: tokens20__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: [
-        tokens20__default.font.style.lg["font-size"].mobile,
+        tokens22__default.font.style.lg["font-size"].mobile,
         null,
         null,
-        tokens20__default.font.style.lg["font-size"].desktop
+        tokens22__default.font.style.lg["font-size"].desktop
       ],
-      fontFamily: tokens20__default.font.style.lg["font-family"],
-      lineHeight: tokens20__default.font.style.lg["line-height"]
+      fontFamily: tokens22__default.font.style.lg["font-family"],
+      lineHeight: tokens22__default.font.style.lg["line-height"]
     }
   },
   md: {
     value: {
       fontSize: [
-        tokens20__default.font.style.md["font-size"].mobile,
+        tokens22__default.font.style.md["font-size"].mobile,
         null,
         null,
-        tokens20__default.font.style.md["font-size"].desktop
+        tokens22__default.font.style.md["font-size"].desktop
       ],
-      fontFamily: tokens20__default.font.style.md["font-family"],
-      lineHeight: tokens20__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: [
-        tokens20__default.font.style.sm["font-size"].mobile,
+        tokens22__default.font.style.sm["font-size"].mobile,
         null,
         null,
-        tokens20__default.font.style.sm["font-size"].desktop
+        tokens22__default.font.style.sm["font-size"].desktop
       ],
-      fontFamily: tokens20__default.font.style.sm["font-family"],
-      lineHeight: tokens20__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: [
-        tokens20__default.font.style.xs["font-size"].mobile,
+        tokens22__default.font.style.xs["font-size"].mobile,
         null,
         null,
-        tokens20__default.font.style.xs["font-size"].desktop
+        tokens22__default.font.style.xs["font-size"].desktop
       ],
-      fontFamily: tokens20__default.font.style.xs["font-family"],
-      lineHeight: tokens20__default.font.style.xs["line-height"]
+      fontFamily: tokens22__default.font.style.xs["font-family"],
+      lineHeight: tokens22__default.font.style.xs["line-height"]
     }
   }
 });
@@ -10748,7 +10742,7 @@ var generateTheme = (brand) => {
     theme: {
       breakpoints,
       keyframes,
-      tokens: tokens18,
+      tokens: tokens20,
       semanticTokens: semanticTokens[brand],
       recipes,
       slotRecipes,