@vygruppen/spor-react 12.4.4 → 12.4.5

package/dist/index.js

@@ -15,7 +15,7 @@ var anatomy = require('@ark-ui/react/anatomy');
 var popover = require('@ark-ui/react/popover');
 var date = require('@internationalized/date');
 var awesomePhonenumber = require('awesome-phonenumber');
-var tokens22 = require('@vygruppen/spor-design-tokens');
+var tokens23 = require('@vygruppen/spor-design-tokens');
 var react$1 = require('@emotion/react');
 var tokens4 = require('@vygruppen/spor-design-tokens/raw-tokens');
 
@@ -41,7 +41,7 @@ function _interopNamespace(e) {
 
 var React28__namespace = /*#__PURE__*/_interopNamespace(React28);
 var ReactLottie__default = /*#__PURE__*/_interopDefault(ReactLottie);
-var tokens22__namespace = /*#__PURE__*/_interopNamespace(tokens22);
+var tokens23__namespace = /*#__PURE__*/_interopNamespace(tokens23);
 var tokens4__default = /*#__PURE__*/_interopDefault(tokens4);
 
 // src/accordion/Accordion.tsx
@@ -3574,141 +3574,6 @@ function ListBoxSection({ section, state }) {
     ) })
   ] }) });
 }
-
-// src/theme/utils/brand-utils.ts
-function brandBackground(state) {
-  switch (state) {
-    case "active": {
-      return {
-        backgroundColor: "brand.surface.active"
-      };
-    }
-    case "hover": {
-      return {
-        backgroundColor: "brand.surface.hover"
-      };
-    }
-    default: {
-      return {
-        backgroundColor: "brand.surface"
-      };
-    }
-  }
-}
-function brandText() {
-  return {
-    color: "brand.text"
-  };
-}
-
-// src/theme/utils/surface-utils.ts
-var surface = (surface2) => {
-  switch (surface2) {
-    case "default": {
-      return {
-        backgroundColor: "surface"
-      };
-    }
-    case "secondary": {
-      return {
-        backgroundColor: "surface.secondary"
-      };
-    }
-    case "tertiary": {
-      return {
-        backgroundColor: "surface.tertiary"
-      };
-    }
-    case "disabled": {
-      return {
-        backgroundColor: "surface.disabled"
-      };
-    }
-  }
-};
-
-// src/theme/utils/core-utils.ts
-function coreBackground(state) {
-  switch (state) {
-    case "active": {
-      return brandBackground("active");
-    }
-    case "selected": {
-      return brandBackground("default");
-    }
-    case "disabled": {
-      return surface("disabled");
-    }
-    default: {
-      return { backgroundColor: "transparent" };
-    }
-  }
-}
-function coreBorder(state) {
-  switch (state) {
-    case "hover": {
-      return {
-        outline: "2px solid",
-        outlineColor: "core.outline"
-      };
-    }
-    case "disabled": {
-      return {
-        outline: "1px solid",
-        outlineColor: "outline.disabled"
-      };
-    }
-    case "active": {
-      return {
-        outline: "1px solid",
-        outlineColor: "core.outline"
-      };
-    }
-    case "invalid": {
-      return {
-        outline: "2px solid",
-        outlineColor: "outline.error"
-      };
-    }
-    default: {
-      return {
-        outline: "1px solid",
-        outlineColor: "core.outline"
-      };
-    }
-  }
-}
-function coreText(state) {
-  switch (state) {
-    case "selected": {
-      return {
-        color: "brand.text"
-      };
-    }
-    case "active": {
-      return {
-        color: "brand.text"
-      };
-    }
-    case "highlight": {
-      return {
-        color: "text.highlight"
-      };
-    }
-    case "disabled": {
-      return {
-        color: "text.disabled"
-      };
-    }
-    default: {
-      return {
-        color: "core.text"
-      };
-    }
-  }
-}
-
-// src/theme/slot-recipes/native-select.ts
 var _a2, _b;
 var nativeSelectSlotRecipe = react.defineSlotRecipe({
   slots: NativeSelectAnatomy.keys(),
@@ -3740,7 +3605,7 @@ var nativeSelectSlotRecipe = react.defineSlotRecipe({
       color: "currentColor",
       fontSize: "sm",
       _disabled: {
-        ...coreText("disabled")
+        color: "text.disabled"
       }
     }
   },
@@ -4596,16 +4461,16 @@ var pressableCardRecipe = react.defineRecipe({
       },
       core: {
         outlineColor: "core.outline",
-        outlineWidth: tokens22__namespace.default.size.stroke.sm,
+        outlineWidth: tokens23__namespace.default.size.stroke.sm,
         outlineStyle: "solid",
         backgroundColor: "core.surface",
         _hover: {
           outlineColor: "core.outline.hover",
-          outlineWidth: tokens22__namespace.default.size.stroke.md,
+          outlineWidth: tokens23__namespace.default.size.stroke.md,
           outlineStyle: "solid",
           _active: {
             backgroundColor: "core.surface.active",
-            outlineWidth: tokens22__namespace.default.size.stroke.sm
+            outlineWidth: tokens23__namespace.default.size.stroke.sm
           }
         }
       },
@@ -6036,7 +5901,7 @@ var texts24 = createTexts({
 });
 var fontFaces = `
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-sans"]["light"].name};
+  font-family: ${tokens23__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;
@@ -6044,7 +5909,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-sans"]["light-italic"].name};
+  font-family: ${tokens23__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");
@@ -6053,7 +5918,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-sans"]["medium"].name};
+  font-family: ${tokens23__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;
@@ -6061,7 +5926,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-sans"]["medium-italic"].name};
+  font-family: ${tokens23__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")
@@ -6071,7 +5936,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-sans"]["bold"].name};
+  font-family: ${tokens23__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;
@@ -6079,7 +5944,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-sans"]["bold-italic"].name};
+  font-family: ${tokens23__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");
@@ -6088,7 +5953,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens22__namespace.default.asset.font["vy-display"].name};
+  font-family: ${tokens23__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");
@@ -6597,7 +6462,7 @@ var buttonRecipe = react.defineRecipe({
       background: "surface.disabled"
     },
     _focus: {
-      outlineOffset: tokens22__namespace.default.size.stroke.md
+      outlineOffset: tokens23__namespace.default.size.stroke.md
     }
   },
   variants: {
@@ -6625,19 +6490,19 @@ var buttonRecipe = react.defineRecipe({
       tertiary: {
         color: "core.text",
         outline: "solid",
-        outlineWidth: tokens22__namespace.default.size.stroke.sm,
+        outlineWidth: tokens23__namespace.default.size.stroke.sm,
         outlineColor: "core.outline",
         _hover: {
-          outlineWidth: tokens22__namespace.default.size.stroke.md,
+          outlineWidth: tokens23__namespace.default.size.stroke.md,
           outlineColor: "core.outline.hover",
           _active: {
             background: "core.surface.active",
-            outlineWidth: tokens22__namespace.default.size.stroke.sm,
+            outlineWidth: tokens23__namespace.default.size.stroke.sm,
             outlineColor: "core.outline"
           }
         },
         _focus: {
-          outlineWidth: tokens22__namespace.default.size.stroke.sm
+          outlineWidth: tokens23__namespace.default.size.stroke.sm
         }
       },
       ghost: {
@@ -6697,34 +6562,6 @@ var buttonRecipe = react.defineRecipe({
     size: "md"
   }
 });
-
-// src/theme/utils/ghost-utils.ts
-function ghostBackground(state) {
-  switch (state) {
-    case "hover": {
-      return {
-        backgroundColor: "ghost.surface.hover"
-      };
-    }
-    case "active": {
-      return {
-        backgroundColor: "ghost.surface.active"
-      };
-    }
-    case "selected": {
-      return {
-        backgroundColor: "ghost.surface.selected"
-      };
-    }
-    case "default": {
-      return {
-        backgroundColor: "transparent"
-      };
-    }
-  }
-}
-
-// src/theme/recipes/close-button.ts
 var closeButtonRecipe = react.defineRecipe({
   base: {
     transitionProperty: "common",
@@ -6734,12 +6571,12 @@ var closeButtonRecipe = react.defineRecipe({
     color: "darkGrey",
     fontWeight: "normal",
     _hover: {
-      ...ghostBackground("hover"),
+      background: "ghost.surface.hover",
       _disabled: {
         color: "dimGrey"
       },
       _active: {
-        ...ghostBackground("active")
+        background: "ghost.surface.active"
       }
     }
   },
@@ -6801,7 +6638,7 @@ var linkRecipe = react.defineRecipe({
   variants: {
     variant: {
       primary: {
-        ...coreText("default"),
+        color: "core.text",
         _hover: {
           color: "text.default",
           _active: {
@@ -6810,10 +6647,10 @@ var linkRecipe = react.defineRecipe({
         }
       },
       secondary: {
-        ...coreText("highlight"),
+        color: "text.hightlight",
         padding: "2px",
         _hover: {
-          ...coreText("highlight"),
+          color: "text.hightlight",
           _active: {
             color: "text.disabled"
           }
@@ -6874,14 +6711,14 @@ 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: tokens23__namespace.default.size["border-radius"].none },
+  xxs: { value: tokens23__namespace.default.size["border-radius"].xxs },
+  xs: { value: tokens23__namespace.default.size["border-radius"].xs },
+  sm: { value: tokens23__namespace.default.size["border-radius"].sm },
+  md: { value: tokens23__namespace.default.size["border-radius"].md },
+  lg: { value: tokens23__namespace.default.size["border-radius"].lg },
+  xl: { value: tokens23__namespace.default.size["border-radius"].xl },
+  "2xl": { value: tokens23__namespace.default.size["border-radius"]["2xl"] },
   round: { value: "50%" }
 });
 var shadows = react.defineSemanticTokens.shadows({
@@ -6889,13 +6726,13 @@ var shadows = react.defineSemanticTokens.shadows({
     value: "none"
   },
   sm: {
-    value: tokens22__namespace.default.depth.shadow.sm.value
+    value: tokens23__namespace.default.depth.shadow.sm.value
   },
   md: {
-    value: tokens22__namespace.default.depth.shadow.md.value
+    value: tokens23__namespace.default.depth.shadow.md.value
   },
   lg: {
-    value: tokens22__namespace.default.depth.shadow.lg.value
+    value: tokens23__namespace.default.depth.shadow.lg.value
   }
 });
 
@@ -6918,66 +6755,6 @@ var semanticTokens = {
     colors: vyDigitalColors
   }
 };
-
-// src/theme/utils/floating-utils.ts
-function floatingBackground(state) {
-  switch (state) {
-    case "focus": {
-      return brandBackground("default");
-    }
-    case "active": {
-      return {
-        backgroundColor: "floating.surface.active"
-      };
-    }
-    case "hover": {
-      return {
-        backgroundColor: {
-          _light: "floating.surface.hover",
-          _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`
-        }
-      };
-    }
-    case "default": {
-      return {
-        backgroundColor: {
-          _light: "bg",
-          _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`
-        }
-      };
-    }
-  }
-}
-function floatingBorder(state) {
-  switch (state) {
-    case "hover": {
-      return {
-        outline: "1px solid",
-        outlineColor: "floating.outline.hover"
-      };
-    }
-    case "focus": {
-      return {
-        outline: "1px solid",
-        outlineColor: "outline.focus"
-      };
-    }
-    case "active": {
-      return {
-        outline: "1px solid",
-        outlineColor: "floating.outline.active"
-      };
-    }
-    default: {
-      return {
-        outline: "1px solid",
-        outlineColor: "floating.outline"
-      };
-    }
-  }
-}
-
-// src/theme/slot-recipes/accordion.ts
 var accordionSlotRecipe = react.defineSlotRecipe({
   className: "spor-accordion",
   slots: accordionAnatomy.keys(),
@@ -6993,7 +6770,7 @@ var accordionSlotRecipe = react.defineSlotRecipe({
       borderRadius: "sm",
       display: "flex",
       justifyContent: "space-between",
-      ...coreText("default"),
+      color: "core.text",
       textAlign: "left",
       width: "full",
       alignItems: "center",
@@ -7044,58 +6821,63 @@ var accordionSlotRecipe = react.defineSlotRecipe({
   variants: {
     variant: {
       ghost: {
-        root: {
+        item: {
           outline: "none"
         },
         itemTrigger: {
           "&:hover": {
-            ...ghostBackground("hover")
+            background: "ghost.surface.hover"
           },
           "&:active": {
-            ...ghostBackground("active")
+            backgroundColor: "ghost.surface.active"
           }
         }
       },
       core: {
         item: {
-          ...coreBorder("default")
+          outline: "solid",
+          outlineWidth: tokens23__namespace.default.size.stroke.sm,
+          outlineColor: "core.outline"
         },
         itemTrigger: {
           _expanded: {
             borderBottomRadius: "none"
           },
           "&:hover": {
-            ...coreBorder("hover"),
+            outlineWidth: tokens23__namespace.default.size.stroke.md,
+            outlineColor: "core.outline.hover",
+            outline: "solid",
             outlineOffset: 0
           },
           "&:active": {
             backgroundColor: "core.surface.active",
-            ...coreBorder("default")
+            outlineWidth: tokens23__namespace.default.size.stroke.sm,
+            outlineColor: "core.outline.active",
+            outline: "solid"
           }
         }
       },
       floating: {
         item: {
-          ...floatingBackground("default"),
-          ...floatingBorder("default"),
-          boxShadow: "sm"
+          outline: "solid",
+          outlineWidth: tokens23__namespace.default.size.stroke.sm,
+          outlineColor: "core.outline"
         },
         itemTrigger: {
           _expanded: {
             borderBottomRadius: "none"
           },
           "&:hover": {
-            outlineOffset: 1,
-            ...floatingBackground("hover"),
-            ...floatingBorder("hover"),
-            "&:active": {
-              backgroundColor: "floating.surface.active",
-              ...floatingBorder("default")
-            }
+            outlineWidth: tokens23__namespace.default.size.stroke.md,
+            outlineColor: "floating.outline.hover",
+            outline: "solid",
+            outlineOffset: 0
           },
           "&:active": {
             backgroundColor: "floating.surface.active",
-            ...floatingBorder("default")
+            outlineWidth: tokens23__namespace.default.size.stroke.sm,
+            outlineColor: "floating.outline.active",
+            outline: "solid"
           }
         }
       }
@@ -7398,7 +7180,7 @@ var breadcrumbSlotRecipe = react.defineSlotRecipe({
         link: {
           _hover: {
             outlineColor: "core.outline.hover",
-            outlineWidth: tokens22__namespace.default.size.stroke.md,
+            outlineWidth: tokens23__namespace.default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
               backgroundColor: "core.surface.active",
@@ -7432,12 +7214,10 @@ var checkboxSlotRecipe = react.defineSlotRecipe({
       gap: 1.5,
       _hover: {
         "& > input:enabled:not([aria-invalid]) + .spor-checkbox__control": {
-          ...coreBackground("hover"),
-          borderColor: brandBackground("hover").backgroundColor
+          borderColor: "core.outline.hover"
         },
         "& > input:enabled:checked:not([aria-invalid]) + .spor-checkbox__control": {
-          ...brandBackground("hover"),
-          borderColor: brandBackground("hover").backgroundColor
+          background: "brand.surface.hover"
         }
       }
     },
@@ -7461,17 +7241,16 @@ var checkboxSlotRecipe = react.defineSlotRecipe({
       border: "2px solid",
       borderColor: "core.outline",
       borderRadius: "xs",
-      ...coreBackground("default"),
       _checked: {
-        ...brandText(),
-        ...brandBackground("default"),
-        borderColor: brandBackground("default").backgroundColor,
+        color: "brand.icon",
+        borderColor: "brand.surface",
+        background: "brand.surface",
         _focus: {
           borderColor: "brand.surface.active"
         },
         _disabled: {
-          ...coreBackground("disabled"),
-          ...coreText("disabled"),
+          background: "surface.disabled",
+          color: "text.disabled",
           borderColor: "currentColor"
         },
         _invalid: {
@@ -7480,20 +7259,19 @@ var checkboxSlotRecipe = react.defineSlotRecipe({
         }
       },
       _disabled: {
-        ...coreBackground("disabled"),
-        borderColor: coreText("disabled").color
+        // borderColor: coreText("disabled").color,
+        borderColor: "text.disabled"
       },
       _invalid: {
-        ...coreBackground("default"),
         borderColor: "outline.error"
       },
       _focus: {
         outlineStyle: "solid",
         outlineColor: "outline.focus",
-        outlineOffset: tokens22__namespace.default.size.stroke.md,
-        outlineWidth: tokens22__namespace.default.size.stroke.md,
+        outlineOffset: tokens23__namespace.default.size.stroke.md,
+        outlineWidth: tokens23__namespace.default.size.stroke.md,
         borderColor: "core.outline",
-        borderWidth: tokens22__namespace.default.size.stroke.md
+        borderWidth: tokens23__namespace.default.size.stroke.md
       }
     },
     label: {
@@ -8147,7 +7925,7 @@ var floatingActionButtonSlotRecipe = react.defineSlotRecipe({
       position: "fixed",
       zIndex: "dropdown",
       _focus: {
-        outlineOffset: tokens22__namespace.default.size.stroke.lg,
+        outlineOffset: tokens23__namespace.default.size.stroke.lg,
         outlineColor: "outline.focus"
       },
       _disabled: {
@@ -8890,13 +8668,12 @@ var paginationSlotRecipe = react.defineSlotRecipe({
       width: "5",
       fontSize: "xs",
       borderRadius: "xl",
-      ...coreText("default"),
+      color: "core.text",
       cursor: "pointer",
-      ...coreBackground("default"),
       _hover: {
-        ...ghostBackground("hover"),
+        background: "ghost.surface.hover",
         _active: {
-          ...ghostBackground("active")
+          background: "ghost.surface.active"
         }
       },
       _selected: {
@@ -9152,26 +8929,26 @@ var radioCardSlotRecipe = react.defineSlotRecipe({
       core: {
         item: {
           outlineColor: "core.outline",
-          outlineWidth: tokens22__namespace.default.size.stroke.sm,
+          outlineWidth: tokens23__namespace.default.size.stroke.sm,
           outlineStyle: "solid",
           backgroundColor: "core.surface",
           _hover: {
             outlineColor: "core.outline.hover",
-            outlineWidth: tokens22__namespace.default.size.stroke.md,
+            outlineWidth: tokens23__namespace.default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
               backgroundColor: "core.surface.active",
-              outlineWidth: tokens22__namespace.default.size.stroke.sm
+              outlineWidth: tokens23__namespace.default.size.stroke.sm
             }
           },
           _checked: {
             outlineColor: "outline.focus",
-            outlineWidth: tokens22__namespace.default.size.stroke.md,
+            outlineWidth: tokens23__namespace.default.size.stroke.md,
             outlineStyle: "solid",
             backgroundColor: "core.surface.active",
             _focusVisible: {
               outlineStyle: "double",
-              outlineWidth: `calc(3 * ${tokens22__namespace.default.size.stroke.md})`
+              outlineWidth: `calc(3 * ${tokens23__namespace.default.size.stroke.md})`
               // space for double outline
             }
           }
@@ -9196,12 +8973,12 @@ var radioCardSlotRecipe = react.defineSlotRecipe({
           },
           _checked: {
             outlineColor: "outline.focus",
-            outlineWidth: tokens22__namespace.default.size.stroke.md,
+            outlineWidth: tokens23__namespace.default.size.stroke.md,
             outlineStyle: "solid",
             backgroundColor: "core.surface.active",
             _focusVisible: {
               outlineStyle: "double",
-              outlineWidth: `calc(3 * ${tokens22__namespace.default.size.stroke.md})`
+              outlineWidth: `calc(3 * ${tokens23__namespace.default.size.stroke.md})`
               // space for double outline
             }
           }
@@ -9457,46 +9234,6 @@ var selectSlotRecipe = react.defineSlotRecipe({
     }
   }
 });
-
-// src/theme/utils/accent-utils.ts
-function accentBackground(state) {
-  switch (state) {
-    case "selected": {
-      return brandBackground("default");
-    }
-    case "active": {
-      return {
-        backgroundColor: "accent.surface.active"
-      };
-    }
-    case "hover": {
-      return {
-        backgroundColor: "accent.surface.hover"
-      };
-    }
-    default: {
-      return {
-        backgroundColor: "accent.surface"
-      };
-    }
-  }
-}
-function accentText(state) {
-  switch (state) {
-    case "selected": {
-      return {
-        color: "brand.text"
-      };
-    }
-    default: {
-      return {
-        color: "accent.text"
-      };
-    }
-  }
-}
-
-// src/theme/slot-recipes/stepper.ts
 var stepperSlotRecipe = react.defineSlotRecipe({
   slots: stepperAnatomy.keys(),
   className: "spor-stepper",
@@ -9562,13 +9299,13 @@ var stepperSlotRecipe = react.defineSlotRecipe({
             _dark: "whiteAlpha.900"
           },
           _disabled: {
-            color: coreText("disabled").color
+            color: "core.text"
           },
           _currentStep: {
-            color: accentText("default").color
+            color: "accent.text"
           },
           _hover: {
-            backgroundColor: accentBackground("hover").backgroundColor,
+            backgroundColor: "accent.surface.hover",
             _disabled: {
               backgroundColor: "transparent"
             }
@@ -9576,7 +9313,7 @@ var stepperSlotRecipe = react.defineSlotRecipe({
         },
         backButton: {
           _hover: {
-            ...brandBackground("hover")
+            backgroundColor: "brand.surface.hover"
           }
         }
       }
@@ -9666,7 +9403,7 @@ var switchSlotRecipe = react.defineSlotRecipe({
         backgroundColor: "brand.surface",
         _focusVisible: {
           outlineStyle: "double",
-          outlineWidth: `calc(3 * ${tokens22__namespace.default.size.stroke.md})`
+          outlineWidth: `calc(3 * ${tokens23__namespace.default.size.stroke.md})`
           // space for double outline
         }
       },
@@ -10042,22 +9779,22 @@ var borders = react.defineTokens.borders({
     value: "0"
   },
   sm: {
-    value: `${tokens22__namespace.default.size.stroke.sm} solid`
+    value: `${tokens23__namespace.default.size.stroke.sm} solid`
   },
   "sm-dashed": {
-    value: `${tokens22__namespace.default.size.stroke.sm} dashed`
+    value: `${tokens23__namespace.default.size.stroke.sm} dashed`
   },
   md: {
-    value: `${tokens22__namespace.default.size.stroke.md} solid`
+    value: `${tokens23__namespace.default.size.stroke.md} solid`
   },
   "md-dashed": {
-    value: `${tokens22__namespace.default.size.stroke.md} dashed`
+    value: `${tokens23__namespace.default.size.stroke.md} dashed`
   },
   lg: {
-    value: `${tokens22__namespace.default.size.stroke.lg} solid`
+    value: `${tokens23__namespace.default.size.stroke.lg} solid`
   },
   "lg-dashed": {
-    value: `${tokens22__namespace.default.size.stroke.lg} dashed`
+    value: `${tokens23__namespace.default.size.stroke.lg} dashed`
   }
 });
 var colors = react.defineTokens.colors({
@@ -10129,29 +9866,29 @@ 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: tokens23__namespace.default.size.font.xs.mobile },
+  xs: { value: tokens23__namespace.default.size.font.sm.mobile },
+  sm: { value: tokens23__namespace.default.size.font.md.mobile },
+  md: { value: tokens23__namespace.default.size.font.lg.mobile },
+  lg: { value: tokens23__namespace.default.size.font.xl.mobile },
+  xl: { value: tokens23__namespace.default.size.font.xxl.mobile },
+  "2xl": { value: tokens23__namespace.default.size.font.xl.desktop },
+  "3xl": { value: tokens23__namespace.default.size.font.xxl.desktop },
   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 },
-    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 }
+    xs: { value: tokens23__namespace.default.size.font.xs.mobile },
+    sm: { value: tokens23__namespace.default.size.font.sm.mobile },
+    md: { value: tokens23__namespace.default.size.font.md.mobile },
+    lg: { value: tokens23__namespace.default.size.font.lg.mobile },
+    xl: { value: tokens23__namespace.default.size.font.xl.mobile },
+    xxl: { value: tokens23__namespace.default.size.font.xxl.mobile }
   },
   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 },
-    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 }
+    xs: { value: tokens23__namespace.default.size.font.xs.desktop },
+    sm: { value: tokens23__namespace.default.size.font.sm.desktop },
+    md: { value: tokens23__namespace.default.size.font.md.desktop },
+    lg: { value: tokens23__namespace.default.size.font.lg.desktop },
+    xl: { value: tokens23__namespace.default.size.font.xl.desktop },
+    xxl: { value: tokens23__namespace.default.size.font.xxl.desktop }
   }
 });
 var fontWeights = react.defineTokens.fontWeights({
@@ -10184,9 +9921,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: `${tokens23__namespace.default.font.family.body}, arial, sans-serif` },
+  heading: { value: `${tokens23__namespace.default.font.family.heading}, arial, sans-serif` },
+  mono: { value: `${tokens23__namespace.default.font.family.monospace}, monospace` }
 });
 var letterSpacings = react.defineTokens.letterSpacings({
   tighter: {
@@ -10223,31 +9960,31 @@ 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: tokens23__namespace.default.size["border-radius"].none },
+  xs: { value: tokens23__namespace.default.size["border-radius"].xs },
+  sm: { value: tokens23__namespace.default.size["border-radius"].sm },
+  md: { value: tokens23__namespace.default.size["border-radius"].md },
+  lg: { value: tokens23__namespace.default.size["border-radius"].lg },
+  xl: { value: tokens23__namespace.default.size["border-radius"].xl },
+  "2xl": { value: tokens23__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"] }
+  0: { value: tokens23__namespace.default.size.spacing["0"] },
+  0.5: { value: tokens23__namespace.default.size.spacing["0.5"] },
+  1: { value: tokens23__namespace.default.size.spacing["1"] },
+  1.5: { value: tokens23__namespace.default.size.spacing["1.5"] },
+  2: { value: tokens23__namespace.default.size.spacing["2"] },
+  3: { value: tokens23__namespace.default.size.spacing["3"] },
+  4: { value: tokens23__namespace.default.size.spacing["4"] },
+  5: { value: tokens23__namespace.default.size.spacing["5"] },
+  6: { value: tokens23__namespace.default.size.spacing["6"] },
+  7: { value: tokens23__namespace.default.size.spacing["7"] },
+  8: { value: tokens23__namespace.default.size.spacing["8"] },
+  9: { value: tokens23__namespace.default.size.spacing["9"] },
+  10: { value: tokens23__namespace.default.size.spacing["10"] },
+  11: { value: tokens23__namespace.default.size.spacing["11"] },
+  12: { value: tokens23__namespace.default.size.spacing["12"] }
 });
 
 // src/theme/tokens/sizes.ts
@@ -10284,10 +10021,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: tokens23__namespace.default.size.breakpoint.sm },
+  md: { value: tokens23__namespace.default.size.breakpoint.md },
+  lg: { value: tokens23__namespace.default.size.breakpoint.lg },
+  xl: { value: tokens23__namespace.default.size.breakpoint.xl }
 });
 var sizes = {
   ...largeSizes,
@@ -10296,22 +10033,22 @@ var sizes = {
   container
 };
 var zIndex = react.defineTokens.zIndex({
-  hide: { value: tokens22__namespace.default.depth["z-index"].hide },
+  hide: { value: tokens23__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: tokens23__namespace.default.depth["z-index"].base },
+  docked: { value: tokens23__namespace.default.depth["z-index"].docked },
+  dropdown: { value: tokens23__namespace.default.depth["z-index"].dropdown },
+  sticky: { value: tokens23__namespace.default.depth["z-index"].sticky },
+  banner: { value: tokens23__namespace.default.depth["z-index"].banner },
+  overlay: { value: tokens23__namespace.default.depth["z-index"].overlay },
+  modal: { value: tokens23__namespace.default.depth["z-index"].modal },
+  popover: { value: tokens23__namespace.default.depth["z-index"].popover },
+  skipLink: { value: tokens23__namespace.default.depth["z-index"].skipLink },
+  toast: { value: tokens23__namespace.default.depth["z-index"].toast }
 });
 
 // src/theme/tokens/index.ts
-var tokens20 = {
+var tokens21 = {
   aspectRatios,
   animations,
   blurs,
@@ -10380,10 +10117,10 @@ var animationStyles = react.defineAnimationStyles({
 });
 var breakpoints = {
   base: "0px",
-  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: tokens23__namespace.default.size.breakpoint.sm,
+  md: tokens23__namespace.default.size.breakpoint.md,
+  lg: tokens23__namespace.default.size.breakpoint.lg,
+  xl: tokens23__namespace.default.size.breakpoint.xl
 };
 
 // src/theme/tokens/config.ts
@@ -10673,85 +10410,85 @@ var textStyles = react.defineTextStyles({
   xxl: {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style.xxl["font-size"].mobile,
+        tokens23__namespace.default.font.style.xxl["font-size"].mobile,
         null,
         null,
-        tokens22__namespace.default.font.style.xxl["font-size"].desktop
+        tokens23__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: tokens23__namespace.default.font.style.xxl["font-family"],
+      lineHeight: tokens23__namespace.default.font.style.xxl["line-height"]
     }
   },
   "xl-display": {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style["xl-display"]["font-size"].mobile,
+        tokens23__namespace.default.font.style["xl-display"]["font-size"].mobile,
         null,
         null,
-        tokens22__namespace.default.font.style["xl-display"]["font-size"].desktop
+        tokens23__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: tokens23__namespace.default.font.style["xl-display"]["font-family"],
+      lineHeight: tokens23__namespace.default.font.style["xl-display"]["line-height"]
     }
   },
   "xl-sans": {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style["xl-sans"]["font-size"].mobile,
+        tokens23__namespace.default.font.style["xl-sans"]["font-size"].mobile,
         null,
         null,
-        tokens22__namespace.default.font.style["xl-sans"]["font-size"].desktop
+        tokens23__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: tokens23__namespace.default.font.style["xl-sans"]["font-family"],
+      lineHeight: tokens23__namespace.default.font.style["xl-sans"]["line-height"]
     }
   },
   lg: {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style.lg["font-size"].mobile,
+        tokens23__namespace.default.font.style.lg["font-size"].mobile,
         null,
         null,
-        tokens22__namespace.default.font.style.lg["font-size"].desktop
+        tokens23__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: tokens23__namespace.default.font.style.lg["font-family"],
+      lineHeight: tokens23__namespace.default.font.style.lg["line-height"]
     }
   },
   md: {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style.md["font-size"].mobile,
+        tokens23__namespace.default.font.style.md["font-size"].mobile,
         null,
         null,
-        tokens22__namespace.default.font.style.md["font-size"].desktop
+        tokens23__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: tokens23__namespace.default.font.style.md["font-family"],
+      lineHeight: tokens23__namespace.default.font.style.md["line-height"]
     }
   },
   sm: {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style.sm["font-size"].mobile,
+        tokens23__namespace.default.font.style.sm["font-size"].mobile,
         null,
         null,
-        tokens22__namespace.default.font.style.sm["font-size"].desktop
+        tokens23__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: tokens23__namespace.default.font.style.sm["font-family"],
+      lineHeight: tokens23__namespace.default.font.style.sm["line-height"]
     }
   },
   xs: {
     value: {
       fontSize: [
-        tokens22__namespace.default.font.style.xs["font-size"].mobile,
+        tokens23__namespace.default.font.style.xs["font-size"].mobile,
         null,
         null,
-        tokens22__namespace.default.font.style.xs["font-size"].desktop
+        tokens23__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: tokens23__namespace.default.font.style.xs["font-family"],
+      lineHeight: tokens23__namespace.default.font.style.xs["line-height"]
     }
   }
 });
@@ -10762,7 +10499,7 @@ var generateTheme = (brand) => {
     theme: {
       breakpoints,
       keyframes,
-      tokens: tokens20,
+      tokens: tokens21,
       semanticTokens: semanticTokens[brand],
       recipes,
       slotRecipes,
@@ -10999,7 +10736,7 @@ Object.defineProperty(exports, "Time", {
   enumerable: true,
   get: function () { return date.Time; }
 });
-exports.tokens = tokens22__namespace;
+exports.tokens = tokens23__namespace;
 exports.Accordion = Accordion;
 exports.AccordionItem = AccordionItem;
 exports.AccordionItemContent = AccordionItemContent;