@vygruppen/spor-react 13.4.0 → 13.4.2

package/dist/index.cjs

@@ -15,7 +15,7 @@ var lu = require('react-icons/lu');
 var reactSwipeable = require('react-swipeable');
 var awesomePhonenumber = require('awesome-phonenumber');
 var react$2 = require('@emotion/react');
-var tokens22 = require('@vygruppen/spor-design-tokens');
+var tokens21 = require('@vygruppen/spor-design-tokens');
 var tokens4 = require('@vygruppen/spor-design-tokens/raw-tokens');
 var react$1 = require('@ark-ui/react');
 var anatomy = require('@ark-ui/react/anatomy');
@@ -44,7 +44,7 @@ function _interopNamespace(e) {
 
 var spor_icon_react_star__namespace = /*#__PURE__*/_interopNamespace(spor_icon_react_star);
 var React14__namespace = /*#__PURE__*/_interopNamespace(React14);
-var tokens22__namespace = /*#__PURE__*/_interopNamespace(tokens22);
+var tokens21__namespace = /*#__PURE__*/_interopNamespace(tokens21);
 var tokens4__default = /*#__PURE__*/_interopDefault(tokens4);
 
 var __defProp = Object.defineProperty;
@@ -3083,11 +3083,12 @@ var DialogContent = ({
     portalled = true,
     portalRef,
     backdrop = true,
+    positionerProps,
     ...rest
   } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Portal, { disabled: !portalled, container: portalRef, children: [
     backdrop && /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.Backdrop, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.Content, { ref, ...rest, asChild: false, children }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.Positioner, { ...positionerProps, children: /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.Content, { ref, ...rest, asChild: false, children }) })
   ] });
 };
 var DialogCloseTrigger = function DialogCloseTrigger2({
@@ -3363,6 +3364,7 @@ var ErrorSummaryItem = ({
 };
 var AttachedInputs = ({
   ref,
+  flipButtonProps,
   ...props
 }) => {
   const recipe = react.useRecipe({ key: "attachedInputs" });
@@ -3391,7 +3393,11 @@ var AttachedInputs = ({
         variant: "tertiary",
         size: ["xs", null, "sm"],
         "aria-label": flipAriaLabel,
-        onClick: onFlip
+        onClick: onFlip,
+        position: "absolute",
+        bg: "bg",
+        outlineWidth: "1px",
+        ...flipButtonProps
       }
     )
   ] });
@@ -3400,23 +3406,20 @@ var SwitchButton = react.chakra(
   IconButton,
   react.defineRecipe({
     base: {
-      position: "absolute !important",
-      zIndex: "101 !important",
-      // eslint-disable-next-line spor/use-semantic-tokens
-      bg: "bg !important",
-      outlineWidth: "1px !important",
+      zIndex: "101",
       _focus: {
-        outlineOffset: "0px !important"
+        outlineOffset: "0px",
+        alignItems: "center"
       }
     },
     variants: {
       orientation: {
         horizontal: {
-          top: "calc(50% - 18px)",
-          right: "calc(50% - 18px)"
+          top: "calc(50% - 1.1rem)",
+          right: "calc(50% - 1.1rem)"
         },
         vertical: {
-          top: "calc(50% - 15px)",
+          top: "calc(50% - 1.1rem)",
           right: "3rem",
           transform: "rotate(90deg)"
         }
@@ -5408,7 +5411,7 @@ var LineIcon = function LineIcon2({
       borderColor: variant === "walk" ? "outline.core" : "transparent",
       "aria-label": label,
       ref,
-      className: clsx_default("light", rest.className),
+      className: variant === "walk" ? void 0 : clsx_default("light", rest.className),
       children: /* @__PURE__ */ jsxRuntime.jsx(LinjeTagIcon, { size, css: styles.icon, variant: getIconVariant() })
     }
   );
@@ -5418,6 +5421,8 @@ var InfoTag = ({
   size = "md",
   title,
   description,
+  descriptionProps,
+  titleProps,
   ...customProps
 }) => {
   const recipe = react.useSlotRecipe({ key: "infoTag" });
@@ -5436,9 +5441,9 @@ var InfoTag = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: styles.textContainer, children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: styles.title, children: title }),
+      title && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: styles.title, ...titleProps, children: title }),
       title && description && " ",
-      description && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: styles.description, children: description })
+      description && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: styles.description, ...descriptionProps, children: description })
     ] })
   ] });
 };
@@ -5470,6 +5475,8 @@ var TravelTag = function TravelTag2({
   foregroundColor,
   backgroundColor,
   customIconVariant,
+  descriptionProps,
+  titleProps,
   ...rest
 }) {
   const recipie = react.useSlotRecipe({ key: "travelTag" });
@@ -5484,7 +5491,6 @@ var TravelTag = function TravelTag2({
       css: styles.container,
       "aria-disabled": disabled,
       ref,
-      className: clsx_default("light", rest.className),
       backgroundColor,
       ...rest,
       children: [
@@ -5502,9 +5508,9 @@ var TravelTag = function TravelTag2({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: styles.textContainer, children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: styles.title, children: title }),
+          title && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: styles.title, ...titleProps, children: title }),
           title && description && " ",
-          description && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: styles.description, children: description })
+          description && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: styles.description, ...descriptionProps, children: description })
         ] }),
         renderDeviationLevelIcon(deviationLevel, size, styles.deviationIcon)
       ]
@@ -6565,7 +6571,7 @@ var texts26 = createTexts({
 });
 var fontFaces = `
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-sans"]["light"].name};
+  font-family: ${tokens21__namespace.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;
@@ -6573,7 +6579,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-sans"]["light-italic"].name};
+  font-family: ${tokens21__namespace.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");
@@ -6582,7 +6588,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-sans"]["medium"].name};
+  font-family: ${tokens21__namespace.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;
@@ -6590,7 +6596,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-sans"]["medium-italic"].name};
+  font-family: ${tokens21__namespace.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")
@@ -6600,7 +6606,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-sans"]["bold"].name};
+  font-family: ${tokens21__namespace.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;
@@ -6608,7 +6614,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-sans"]["bold-italic"].name};
+  font-family: ${tokens21__namespace.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");
@@ -6617,7 +6623,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-display"].name};
+  font-family: ${tokens21__namespace.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");
@@ -7117,7 +7123,7 @@ var buttonRecipe = react.defineRecipe({
       background: "surface.disabled"
     },
     _focus: {
-      outlineOffset: tokens22__namespace.default.size.stroke.md
+      outlineOffset: tokens21__namespace.default.size.stroke.md
     }
   },
   variants: {
@@ -7148,19 +7154,19 @@ var buttonRecipe = react.defineRecipe({
         color: "text.core",
         outline: "solid",
         fontWeight: "normal",
-        outlineWidth: tokens22__namespace.default.size.stroke.sm,
+        outlineWidth: tokens21__namespace.default.size.stroke.sm,
         outlineColor: "outline.core",
         _hover: {
-          outlineWidth: tokens22__namespace.default.size.stroke.md,
+          outlineWidth: tokens21__namespace.default.size.stroke.md,
           outlineColor: "outline.core.hover",
           _active: {
             background: "surface.core.active",
-            outlineWidth: tokens22__namespace.default.size.stroke.sm,
+            outlineWidth: tokens21__namespace.default.size.stroke.sm,
             outlineColor: "outline.core"
           }
         },
         _focus: {
-          outlineWidth: tokens22__namespace.default.size.stroke.sm
+          outlineWidth: tokens21__namespace.default.size.stroke.sm
         }
       },
       ghost: {
@@ -7488,15 +7494,15 @@ var pressableCardRecipe = react.defineRecipe({
       },
       core: {
         outlineColor: "outline.core",
-        outlineWidth: tokens22__namespace.default.size.stroke.sm,
+        outlineWidth: tokens21__namespace.default.size.stroke.sm,
         outlineStyle: "solid",
         _hover: {
           outlineColor: "outline.core.hover",
-          outlineWidth: tokens22__namespace.default.size.stroke.md,
+          outlineWidth: tokens21__namespace.default.size.stroke.md,
           outlineStyle: "solid",
           _active: {
             backgroundColor: "surface.core.active",
-            outlineWidth: tokens22__namespace.default.size.stroke.sm
+            outlineWidth: tokens21__namespace.default.size.stroke.sm
           }
         }
       },
@@ -7722,34 +7728,34 @@ var cargonetColors = react.defineSemanticTokens.colors({
   ...tokens4__default.default.color["cargonet"].color.cargonet
 });
 var radii = react.defineSemanticTokens.radii({
-  none: { value: tokens22__namespace.default.size["border-radius"].none },
-  xxs: { value: tokens22__namespace.default.size["border-radius"].xxs },
-  xs: { value: tokens22__namespace.default.size["border-radius"].xs },
-  sm: { value: tokens22__namespace.default.size["border-radius"].sm },
-  md: { value: tokens22__namespace.default.size["border-radius"].md },
-  lg: { value: tokens22__namespace.default.size["border-radius"].lg },
-  xl: { value: tokens22__namespace.default.size["border-radius"].xl },
-  "2xl": { value: tokens22__namespace.default.size["border-radius"]["2xl"] },
+  none: { value: tokens21__namespace.default.size["border-radius"].none },
+  xxs: { value: tokens21__namespace.default.size["border-radius"].xxs },
+  xs: { value: tokens21__namespace.default.size["border-radius"].xs },
+  sm: { value: tokens21__namespace.default.size["border-radius"].sm },
+  md: { value: tokens21__namespace.default.size["border-radius"].md },
+  lg: { value: tokens21__namespace.default.size["border-radius"].lg },
+  xl: { value: tokens21__namespace.default.size["border-radius"].xl },
+  "2xl": { value: tokens21__namespace.default.size["border-radius"]["2xl"] },
   round: { value: "50%" }
 });
 var shadows = react.defineSemanticTokens.shadows({
   none: { value: "none" },
   sm: {
     value: {
-      _light: tokens22__namespace.default.depth.shadow.sm.value._light,
-      _dark: tokens22__namespace.default.depth.shadow.sm.value._dark
+      _light: tokens21__namespace.default.depth.shadow.sm.value._light,
+      _dark: tokens21__namespace.default.depth.shadow.sm.value._dark
     }
   },
   md: {
     value: {
-      _light: tokens22__namespace.default.depth.shadow.md.value._light,
-      _dark: tokens22__namespace.default.depth.shadow.md.value._dark
+      _light: tokens21__namespace.default.depth.shadow.md.value._light,
+      _dark: tokens21__namespace.default.depth.shadow.md.value._dark
     }
   },
   lg: {
     value: {
-      _light: tokens22__namespace.default.depth.shadow.lg.value._light,
-      _dark: tokens22__namespace.default.depth.shadow.lg.value._dark
+      _light: tokens21__namespace.default.depth.shadow.lg.value._light,
+      _dark: tokens21__namespace.default.depth.shadow.lg.value._dark
     }
   }
 });
@@ -8128,7 +8134,7 @@ var accordionSlotRecipe = react.defineSlotRecipe({
       core: {
         item: {
           outline: "solid",
-          outlineWidth: tokens22__namespace.default.size.stroke.sm,
+          outlineWidth: tokens21__namespace.default.size.stroke.sm,
           outlineColor: "outline.core"
         },
         itemTrigger: {
@@ -8136,14 +8142,14 @@ var accordionSlotRecipe = react.defineSlotRecipe({
             borderBottomRadius: "none"
           },
           "&:hover": {
-            outlineWidth: tokens22__namespace.default.size.stroke.md,
+            outlineWidth: tokens21__namespace.default.size.stroke.md,
             outlineColor: "outline.core",
             outline: "2px solid",
             outlineOffset: 0
           },
           "&:active": {
             backgroundColor: "surface.core.active",
-            outlineWidth: tokens22__namespace.default.size.stroke.sm,
+            outlineWidth: tokens21__namespace.default.size.stroke.sm,
             outline: "none"
           }
         }
@@ -8161,7 +8167,7 @@ var accordionSlotRecipe = react.defineSlotRecipe({
       floating: {
         item: {
           outline: "1px solid",
-          outlineWidth: tokens22__namespace.default.size.stroke.sm,
+          outlineWidth: tokens21__namespace.default.size.stroke.sm,
           boxShadow: "sm",
           outlineColor: "outline.floating"
         },
@@ -8170,14 +8176,14 @@ var accordionSlotRecipe = react.defineSlotRecipe({
             borderBottomRadius: "none"
           },
           "&:hover": {
-            outlineWidth: tokens22__namespace.default.size.stroke.md,
+            outlineWidth: tokens21__namespace.default.size.stroke.md,
             outline: "1px solid",
             outlineColor: "outline.floating.hover",
             outlineOffset: 1
           },
           "&:active": {
             backgroundColor: "surface.floating.active",
-            outlineWidth: tokens22__namespace.default.size.stroke.sm,
+            outlineWidth: tokens21__namespace.default.size.stroke.sm,
             outline: "none"
           }
         }
@@ -8582,10 +8588,10 @@ var breadcrumbSlotRecipe = react.defineSlotRecipe({
     },
     link: {
       cursor: "pointer",
-      borderRadius: "xs"
+      borderRadius: "xs",
+      textDecoration: "underline"
     },
     currentLink: {
-      borderRadius: "xs",
       cursor: "default"
     },
     separator: {
@@ -8599,12 +8605,9 @@ var breadcrumbSlotRecipe = react.defineSlotRecipe({
       core: {
         link: {
           _hover: {
-            outlineColor: "outline.core.hover",
-            outlineWidth: tokens22__namespace.default.size.stroke.md,
-            outlineStyle: "solid",
+            textDecoration: "none",
             _active: {
-              backgroundColor: "surface.core.active",
-              outline: "none"
+              backgroundColor: "surface.core.active"
             }
           }
         }
@@ -8686,10 +8689,10 @@ var checkboxSlotRecipe = react.defineSlotRecipe({
       _focus: {
         outlineStyle: "solid",
         outlineColor: "outline.focus",
-        outlineOffset: tokens22__namespace.default.size.stroke.md,
-        outlineWidth: tokens22__namespace.default.size.stroke.md,
+        outlineOffset: tokens21__namespace.default.size.stroke.md,
+        outlineWidth: tokens21__namespace.default.size.stroke.md,
         borderColor: "outline.core",
-        borderWidth: tokens22__namespace.default.size.stroke.md
+        borderWidth: tokens21__namespace.default.size.stroke.md
       }
     },
     label: {
@@ -9892,7 +9895,7 @@ var floatingActionButtonSlotRecipe = react.defineSlotRecipe({
       position: "fixed",
       zIndex: "dropdown",
       _focus: {
-        outlineOffset: tokens22__namespace.default.size.stroke.lg,
+        outlineOffset: tokens21__namespace.default.size.stroke.lg,
         outlineColor: "outline.focus"
       },
       _disabled: {
@@ -10008,9 +10011,7 @@ var travelTagSlotRecipe = react.defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       padding: 0.5,
-      _disabled: {
-        background: "surface.disabled"
-      },
+      backgroundColor: "surface.disabled",
       width: "fit-content",
       transitionDuration: "fast",
       transitionProperty: "common",
@@ -10074,62 +10075,21 @@ var travelTagSlotRecipe = react.defineSlotRecipe({
       none: {}
     },
     variant: {
-      "local-train": {
-        container: {
-          backgroundColor: "linjetag.lokaltogLight"
-        }
-      },
-      "region-train": {
-        container: {
-          backgroundColor: "linjetag.regiontogLight"
-        }
-      },
-      "region-express-train": {
-        container: {
-          backgroundColor: "linjetag.regionEkspressLight"
-        }
-      },
-      "long-distance-train": {
-        container: {
-          backgroundColor: "linjetag.fjerntogLight"
-        }
-      },
-      "airport-express-train": {
-        container: {
-          backgroundColor: "linjetag.flytogLight"
-        }
-      },
-      "vy-bus": {
-        container: {
-          backgroundColor: "linjetag.vyBussLight"
-        }
-      },
-      "local-bus": {
-        container: {
-          backgroundColor: "linjetag.lokalbussLight"
-        }
-      },
-      ferry: {
-        container: {
-          backgroundColor: "linjetag.fergeLight"
-        }
-      },
-      subway: {
-        container: {
-          backgroundColor: "linjetag.tbaneLight"
-        }
-      },
-      tram: {
-        container: {
-          backgroundColor: "linjetag.trikkLight"
-        }
-      },
-      "alt-transport": {
-        container: {
-          backgroundColor: "linjetag.altTransportLight"
-        }
-      },
+      "local-train": {},
+      "region-train": {},
+      "region-express-train": {},
+      "long-distance-train": {},
+      "airport-express-train": {},
+      "vy-bus": {},
+      "local-bus": {},
+      ferry: {},
+      subway: {},
+      tram: {},
+      "alt-transport": {},
       walk: {
+        container: {
+          backgroundColor: "none"
+        },
         textContainer: {
           position: "absolute",
           left: "0.875rem",
@@ -11247,25 +11207,25 @@ var radioCardSlotRecipe = react.defineSlotRecipe({
       core: {
         item: {
           outlineColor: "outline.core",
-          outlineWidth: tokens22__namespace.default.size.stroke.sm,
+          outlineWidth: tokens21__namespace.default.size.stroke.sm,
           outlineStyle: "solid",
           _hover: {
             outlineColor: "outline.core.hover",
-            outlineWidth: tokens22__namespace.default.size.stroke.md,
+            outlineWidth: tokens21__namespace.default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
               backgroundColor: "surface.core.active",
-              outlineWidth: tokens22__namespace.default.size.stroke.sm
+              outlineWidth: tokens21__namespace.default.size.stroke.sm
             }
           },
           _checked: {
             outlineColor: "outline.focus",
-            outlineWidth: tokens22__namespace.default.size.stroke.md,
+            outlineWidth: tokens21__namespace.default.size.stroke.md,
             outlineStyle: "solid",
             backgroundColor: "surface.core.active",
             _focusVisible: {
               outlineStyle: "double",
-              outlineWidth: `calc(3 * ${tokens22__namespace.default.size.stroke.md})`
+              outlineWidth: `calc(3 * ${tokens21__namespace.default.size.stroke.md})`
               // space for double outline
             }
           }
@@ -11290,12 +11250,12 @@ var radioCardSlotRecipe = react.defineSlotRecipe({
           },
           _checked: {
             outlineColor: "outline.focus",
-            outlineWidth: tokens22__namespace.default.size.stroke.md,
+            outlineWidth: tokens21__namespace.default.size.stroke.md,
             outlineStyle: "solid",
             backgroundColor: "surface.core.active",
             _focusVisible: {
               outlineStyle: "double",
-              outlineWidth: `calc(3 * ${tokens22__namespace.default.size.stroke.md})`
+              outlineWidth: `calc(3 * ${tokens21__namespace.default.size.stroke.md})`
               // space for double outline
             }
           }
@@ -12334,22 +12294,22 @@ var borders = react.defineTokens.borders({
     value: "0"
   },
   sm: {
-    value: `${tokens22__namespace.default.size.stroke.sm} solid`
+    value: `${tokens21__namespace.default.size.stroke.sm} solid`
   },
   "sm-dashed": {
-    value: `${tokens22__namespace.default.size.stroke.sm} dashed`
+    value: `${tokens21__namespace.default.size.stroke.sm} dashed`
   },
   md: {
-    value: `${tokens22__namespace.default.size.stroke.md} solid`
+    value: `${tokens21__namespace.default.size.stroke.md} solid`
   },
   "md-dashed": {
-    value: `${tokens22__namespace.default.size.stroke.md} dashed`
+    value: `${tokens21__namespace.default.size.stroke.md} dashed`
   },
   lg: {
-    value: `${tokens22__namespace.default.size.stroke.lg} solid`
+    value: `${tokens21__namespace.default.size.stroke.lg} solid`
   },
   "lg-dashed": {
-    value: `${tokens22__namespace.default.size.stroke.lg} dashed`
+    value: `${tokens21__namespace.default.size.stroke.lg} dashed`
   }
 });
 var colors = react.defineTokens.colors({
@@ -12421,33 +12381,33 @@ var easings = react.defineTokens.easings({
   }
 });
 var fontSizes = react.defineTokens.fontSizes({
-  "2xs": { value: tokens22__namespace.default.size.font.xs.mobile },
-  xs: { value: tokens22__namespace.default.size.font.sm.mobile },
-  sm: { value: tokens22__namespace.default.size.font.md.mobile },
-  md: { value: tokens22__namespace.default.size.font.lg.mobile },
-  lg: { value: tokens22__namespace.default.size.font.xl.mobile },
-  xl: { value: tokens22__namespace.default.size.font.xxl.mobile },
-  "2xl": { value: tokens22__namespace.default.size.font.xl.desktop },
-  "3xl": { value: tokens22__namespace.default.size.font.xxl.desktop },
+  "2xs": { value: tokens21__namespace.default.size.font.xs.mobile },
+  xs: { value: tokens21__namespace.default.size.font.sm.mobile },
+  sm: { value: tokens21__namespace.default.size.font.md.mobile },
+  md: { value: tokens21__namespace.default.size.font.lg.mobile },
+  lg: { value: tokens21__namespace.default.size.font.xl.mobile },
+  xl: { value: tokens21__namespace.default.size.font.xxl.mobile },
+  "2xl": { value: tokens21__namespace.default.size.font.xl.desktop },
+  "3xl": { value: tokens21__namespace.default.size.font.xxl.desktop },
   mobile: {
-    "2xs": { value: tokens22__namespace.default.size.font["2xs"].mobile },
-    xs: { value: tokens22__namespace.default.size.font.xs.mobile },
-    sm: { value: tokens22__namespace.default.size.font.sm.mobile },
-    md: { value: tokens22__namespace.default.size.font.md.mobile },
-    "md-lg": { value: tokens22__namespace.default.size.font["md-lg"].mobile },
-    lg: { value: tokens22__namespace.default.size.font.lg.mobile },
-    xl: { value: tokens22__namespace.default.size.font.xl.mobile },
-    xxl: { value: tokens22__namespace.default.size.font.xxl.mobile }
+    "2xs": { value: tokens21__namespace.default.size.font["2xs"].mobile },
+    xs: { value: tokens21__namespace.default.size.font.xs.mobile },
+    sm: { value: tokens21__namespace.default.size.font.sm.mobile },
+    md: { value: tokens21__namespace.default.size.font.md.mobile },
+    "md-lg": { value: tokens21__namespace.default.size.font["md-lg"].mobile },
+    lg: { value: tokens21__namespace.default.size.font.lg.mobile },
+    xl: { value: tokens21__namespace.default.size.font.xl.mobile },
+    xxl: { value: tokens21__namespace.default.size.font.xxl.mobile }
   },
   desktop: {
-    "2xs": { value: tokens22__namespace.default.size.font["2xs"].desktop },
-    xs: { value: tokens22__namespace.default.size.font.xs.desktop },
-    sm: { value: tokens22__namespace.default.size.font.sm.desktop },
-    md: { value: tokens22__namespace.default.size.font.md.desktop },
-    "md-lg": { value: tokens22__namespace.default.size.font["md-lg"].desktop },
-    lg: { value: tokens22__namespace.default.size.font.lg.desktop },
-    xl: { value: tokens22__namespace.default.size.font.xl.desktop },
-    xxl: { value: tokens22__namespace.default.size.font.xxl.desktop }
+    "2xs": { value: tokens21__namespace.default.size.font["2xs"].desktop },
+    xs: { value: tokens21__namespace.default.size.font.xs.desktop },
+    sm: { value: tokens21__namespace.default.size.font.sm.desktop },
+    md: { value: tokens21__namespace.default.size.font.md.desktop },
+    "md-lg": { value: tokens21__namespace.default.size.font["md-lg"].desktop },
+    lg: { value: tokens21__namespace.default.size.font.lg.desktop },
+    xl: { value: tokens21__namespace.default.size.font.xl.desktop },
+    xxl: { value: tokens21__namespace.default.size.font.xxl.desktop }
   }
 });
 var fontWeights = react.defineTokens.fontWeights({
@@ -12480,9 +12440,9 @@ var fontWeights = react.defineTokens.fontWeights({
   }
 });
 var fonts = react.defineTokens.fonts({
-  body: { value: `${tokens22__namespace.default.font.family.body}, arial, sans-serif` },
-  heading: { value: `${tokens22__namespace.default.font.family.heading}, arial, sans-serif` },
-  mono: { value: `${tokens22__namespace.default.font.family.monospace}, monospace` }
+  body: { value: `${tokens21__namespace.default.font.family.body}, arial, sans-serif` },
+  heading: { value: `${tokens21__namespace.default.font.family.heading}, arial, sans-serif` },
+  mono: { value: `${tokens21__namespace.default.font.family.monospace}, monospace` }
 });
 var letterSpacings = react.defineTokens.letterSpacings({
   tighter: {
@@ -12519,32 +12479,32 @@ var lineHeights = react.defineTokens.lineHeights({
   }
 });
 var radii2 = react.defineTokens.radii({
-  none: { value: tokens22__namespace.default.size["border-radius"].none },
-  xs: { value: tokens22__namespace.default.size["border-radius"].xs },
-  sm: { value: tokens22__namespace.default.size["border-radius"].sm },
-  md: { value: tokens22__namespace.default.size["border-radius"].md },
-  lg: { value: tokens22__namespace.default.size["border-radius"].lg },
-  xl: { value: tokens22__namespace.default.size["border-radius"].xl },
-  "2xl": { value: tokens22__namespace.default.size["border-radius"]["2xl"] },
+  none: { value: tokens21__namespace.default.size["border-radius"].none },
+  xs: { value: tokens21__namespace.default.size["border-radius"].xs },
+  sm: { value: tokens21__namespace.default.size["border-radius"].sm },
+  md: { value: tokens21__namespace.default.size["border-radius"].md },
+  lg: { value: tokens21__namespace.default.size["border-radius"].lg },
+  xl: { value: tokens21__namespace.default.size["border-radius"].xl },
+  "2xl": { value: tokens21__namespace.default.size["border-radius"]["2xl"] },
   round: { value: "50%" }
 });
 var spacing = react.defineTokens.spacing({
-  0: { value: tokens22__namespace.default.size.spacing["0"] },
-  0.5: { value: tokens22__namespace.default.size.spacing["0.5"] },
-  1: { value: tokens22__namespace.default.size.spacing["1"] },
-  1.5: { value: tokens22__namespace.default.size.spacing["1.5"] },
-  2: { value: tokens22__namespace.default.size.spacing["2"] },
-  3: { value: tokens22__namespace.default.size.spacing["3"] },
-  4: { value: tokens22__namespace.default.size.spacing["4"] },
-  5: { value: tokens22__namespace.default.size.spacing["5"] },
-  6: { value: tokens22__namespace.default.size.spacing["6"] },
-  7: { value: tokens22__namespace.default.size.spacing["7"] },
-  8: { value: tokens22__namespace.default.size.spacing["8"] },
-  9: { value: tokens22__namespace.default.size.spacing["9"] },
-  10: { value: tokens22__namespace.default.size.spacing["10"] },
-  11: { value: tokens22__namespace.default.size.spacing["11"] },
-  12: { value: tokens22__namespace.default.size.spacing["12"] },
-  13: { value: tokens22__namespace.default.size.spacing["13"] }
+  0: { value: tokens21__namespace.default.size.spacing["0"] },
+  0.5: { value: tokens21__namespace.default.size.spacing["0.5"] },
+  1: { value: tokens21__namespace.default.size.spacing["1"] },
+  1.5: { value: tokens21__namespace.default.size.spacing["1.5"] },
+  2: { value: tokens21__namespace.default.size.spacing["2"] },
+  3: { value: tokens21__namespace.default.size.spacing["3"] },
+  4: { value: tokens21__namespace.default.size.spacing["4"] },
+  5: { value: tokens21__namespace.default.size.spacing["5"] },
+  6: { value: tokens21__namespace.default.size.spacing["6"] },
+  7: { value: tokens21__namespace.default.size.spacing["7"] },
+  8: { value: tokens21__namespace.default.size.spacing["8"] },
+  9: { value: tokens21__namespace.default.size.spacing["9"] },
+  10: { value: tokens21__namespace.default.size.spacing["10"] },
+  11: { value: tokens21__namespace.default.size.spacing["11"] },
+  12: { value: tokens21__namespace.default.size.spacing["12"] },
+  13: { value: tokens21__namespace.default.size.spacing["13"] }
 });
 
 // src/theme/tokens/sizes.ts
@@ -12581,10 +12541,10 @@ var namedSizes = react.defineTokens.sizes({
 });
 var container = react.defineTokens.sizes({
   base: { value: 0 },
-  sm: { value: tokens22__namespace.default.size.breakpoint.sm },
-  md: { value: tokens22__namespace.default.size.breakpoint.md },
-  lg: { value: tokens22__namespace.default.size.breakpoint.lg },
-  xl: { value: tokens22__namespace.default.size.breakpoint.xl }
+  sm: { value: tokens21__namespace.default.size.breakpoint.sm },
+  md: { value: tokens21__namespace.default.size.breakpoint.md },
+  lg: { value: tokens21__namespace.default.size.breakpoint.lg },
+  xl: { value: tokens21__namespace.default.size.breakpoint.xl }
 });
 var sizes = {
   ...largeSizes,
@@ -12593,22 +12553,22 @@ var sizes = {
   container
 };
 var zIndex = react.defineTokens.zIndex({
-  hide: { value: tokens22__namespace.default.depth["z-index"].hide },
+  hide: { value: tokens21__namespace.default.depth["z-index"].hide },
   auto: { value: "auto" },
-  base: { value: tokens22__namespace.default.depth["z-index"].base },
-  docked: { value: tokens22__namespace.default.depth["z-index"].docked },
-  dropdown: { value: tokens22__namespace.default.depth["z-index"].dropdown },
-  sticky: { value: tokens22__namespace.default.depth["z-index"].sticky },
-  banner: { value: tokens22__namespace.default.depth["z-index"].banner },
-  overlay: { value: tokens22__namespace.default.depth["z-index"].overlay },
-  modal: { value: tokens22__namespace.default.depth["z-index"].modal },
-  popover: { value: tokens22__namespace.default.depth["z-index"].popover },
-  skipLink: { value: tokens22__namespace.default.depth["z-index"].skipLink },
-  toast: { value: tokens22__namespace.default.depth["z-index"].toast }
+  base: { value: tokens21__namespace.default.depth["z-index"].base },
+  docked: { value: tokens21__namespace.default.depth["z-index"].docked },
+  dropdown: { value: tokens21__namespace.default.depth["z-index"].dropdown },
+  sticky: { value: tokens21__namespace.default.depth["z-index"].sticky },
+  banner: { value: tokens21__namespace.default.depth["z-index"].banner },
+  overlay: { value: tokens21__namespace.default.depth["z-index"].overlay },
+  modal: { value: tokens21__namespace.default.depth["z-index"].modal },
+  popover: { value: tokens21__namespace.default.depth["z-index"].popover },
+  skipLink: { value: tokens21__namespace.default.depth["z-index"].skipLink },
+  toast: { value: tokens21__namespace.default.depth["z-index"].toast }
 });
 
 // src/theme/tokens/index.ts
-var tokens20 = {
+var tokens19 = {
   aspectRatios,
   animations,
   blurs,
@@ -12676,10 +12636,10 @@ var animationStyles = react.defineAnimationStyles({
   }
 });
 var breakpoints = {
-  sm: tokens22__namespace.default.size.breakpoint.sm,
-  md: tokens22__namespace.default.size.breakpoint.md,
-  lg: tokens22__namespace.default.size.breakpoint.lg,
-  xl: tokens22__namespace.default.size.breakpoint.xl
+  sm: tokens21__namespace.default.size.breakpoint.sm,
+  md: tokens21__namespace.default.size.breakpoint.md,
+  lg: tokens21__namespace.default.size.breakpoint.lg,
+  xl: tokens21__namespace.default.size.breakpoint.xl
 };
 
 // src/theme/tokens/config.ts
@@ -12969,91 +12929,91 @@ var textStyles = react.defineTextStyles({
   xxl: {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style.xxl["font-size"].mobile,
-        tokens22__namespace.default.font.style.xxl["font-size"].desktop
+        tokens21__namespace.default.font.style.xxl["font-size"].mobile,
+        tokens21__namespace.default.font.style.xxl["font-size"].desktop
       ],
-      fontFamily: tokens22__namespace.default.font.style.xxl["font-family"],
-      lineHeight: tokens22__namespace.default.font.style.xxl["line-height"]
+      fontFamily: tokens21__namespace.default.font.style.xxl["font-family"],
+      lineHeight: tokens21__namespace.default.font.style.xxl["line-height"]
     }
   },
   "xl-display": {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style["xl-display"]["font-size"].mobile,
-        tokens22__namespace.default.font.style["xl-display"]["font-size"].desktop
+        tokens21__namespace.default.font.style["xl-display"]["font-size"].mobile,
+        tokens21__namespace.default.font.style["xl-display"]["font-size"].desktop
       ],
-      fontFamily: tokens22__namespace.default.font.style["xl-display"]["font-family"],
-      lineHeight: tokens22__namespace.default.font.style["xl-display"]["line-height"]
+      fontFamily: tokens21__namespace.default.font.style["xl-display"]["font-family"],
+      lineHeight: tokens21__namespace.default.font.style["xl-display"]["line-height"]
     }
   },
   "xl-sans": {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style["xl-sans"]["font-size"].mobile,
-        tokens22__namespace.default.font.style["xl-sans"]["font-size"].desktop
+        tokens21__namespace.default.font.style["xl-sans"]["font-size"].mobile,
+        tokens21__namespace.default.font.style["xl-sans"]["font-size"].desktop
       ],
-      fontFamily: tokens22__namespace.default.font.style["xl-sans"]["font-family"],
-      lineHeight: tokens22__namespace.default.font.style["xl-sans"]["line-height"]
+      fontFamily: tokens21__namespace.default.font.style["xl-sans"]["font-family"],
+      lineHeight: tokens21__namespace.default.font.style["xl-sans"]["line-height"]
     }
   },
   lg: {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style.lg["font-size"].mobile,
-        tokens22__namespace.default.font.style.lg["font-size"].desktop
+        tokens21__namespace.default.font.style.lg["font-size"].mobile,
+        tokens21__namespace.default.font.style.lg["font-size"].desktop
       ],
-      fontFamily: tokens22__namespace.default.font.style.lg["font-family"],
-      lineHeight: tokens22__namespace.default.font.style.lg["line-height"]
+      fontFamily: tokens21__namespace.default.font.style.lg["font-family"],
+      lineHeight: tokens21__namespace.default.font.style.lg["line-height"]
     }
   },
   "md-lg": {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style["md-lg"]["font-size"].mobile,
-        tokens22__namespace.default.font.style["md-lg"]["font-size"].desktop
+        tokens21__namespace.default.font.style["md-lg"]["font-size"].mobile,
+        tokens21__namespace.default.font.style["md-lg"]["font-size"].desktop
       ],
-      fontFamily: tokens22__namespace.default.font.style["md-lg"]["font-family"],
-      lineHeight: tokens22__namespace.default.font.style["md-lg"]["line-height"]
+      fontFamily: tokens21__namespace.default.font.style["md-lg"]["font-family"],
+      lineHeight: tokens21__namespace.default.font.style["md-lg"]["line-height"]
     }
   },
   md: {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style.md["font-size"].mobile,
-        tokens22__namespace.default.font.style.md["font-size"].desktop
+        tokens21__namespace.default.font.style.md["font-size"].mobile,
+        tokens21__namespace.default.font.style.md["font-size"].desktop
       ],
-      fontFamily: tokens22__namespace.default.font.style.md["font-family"],
-      lineHeight: tokens22__namespace.default.font.style.md["line-height"]
+      fontFamily: tokens21__namespace.default.font.style.md["font-family"],
+      lineHeight: tokens21__namespace.default.font.style.md["line-height"]
     }
   },
   sm: {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style.sm["font-size"].mobile,
-        tokens22__namespace.default.font.style.sm["font-size"].desktop
+        tokens21__namespace.default.font.style.sm["font-size"].mobile,
+        tokens21__namespace.default.font.style.sm["font-size"].desktop
       ],
-      fontFamily: tokens22__namespace.default.font.style.sm["font-family"],
-      lineHeight: tokens22__namespace.default.font.style.sm["line-height"]
+      fontFamily: tokens21__namespace.default.font.style.sm["font-family"],
+      lineHeight: tokens21__namespace.default.font.style.sm["line-height"]
     }
   },
   xs: {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style.xs["font-size"].mobile,
-        tokens22__namespace.default.font.style.xs["font-size"].desktop
+        tokens21__namespace.default.font.style.xs["font-size"].mobile,
+        tokens21__namespace.default.font.style.xs["font-size"].desktop
       ],
-      fontFamily: tokens22__namespace.default.font.style.xs["font-family"],
-      lineHeight: tokens22__namespace.default.font.style.xs["line-height"]
+      fontFamily: tokens21__namespace.default.font.style.xs["font-family"],
+      lineHeight: tokens21__namespace.default.font.style.xs["line-height"]
     }
   },
   "2xs": {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style["2xs"]["font-size"].mobile,
-        tokens22__namespace.default.font.style["2xs"]["font-size"].desktop
+        tokens21__namespace.default.font.style["2xs"]["font-size"].mobile,
+        tokens21__namespace.default.font.style["2xs"]["font-size"].desktop
       ],
-      fontFamily: tokens22__namespace.default.font.style["2xs"]["font-family"],
-      lineHeight: tokens22__namespace.default.font.style["2xs"]["line-height"]
+      fontFamily: tokens21__namespace.default.font.style["2xs"]["font-family"],
+      lineHeight: tokens21__namespace.default.font.style["2xs"]["line-height"]
     }
   }
 });
@@ -13064,7 +13024,7 @@ var generateTheme = (brand) => {
     theme: {
       breakpoints,
       keyframes,
-      tokens: tokens20,
+      tokens: tokens19,
       semanticTokens: semanticTokens[brand],
       recipes,
       slotRecipes,
@@ -13357,7 +13317,7 @@ Object.defineProperty(exports, "Section", {
   enumerable: true,
   get: function () { return reactStately.Section; }
 });
-exports.tokens = tokens22__namespace;
+exports.tokens = tokens21__namespace;
 exports.Accordion = Accordion;
 exports.AccordionItem = AccordionItem;
 exports.AccordionItemContent = AccordionItemContent;