@vygruppen/spor-react 13.4.1 → 13.4.3

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;
@@ -227,8 +227,8 @@ function useTranslation() {
   };
   return { t, language };
 }
-function createTexts(texts28) {
-  return texts28;
+function createTexts(texts29) {
+  return texts29;
 }
 function Lottie({ animationData }) {
   const { View } = lottieReact.useLottie({ animationData });
@@ -2485,7 +2485,7 @@ var DateTimeSegment = ({
   segment,
   state,
   ariaLabel,
-  ariaDescription,
+  ariaLabelledby,
   variant
 }) => {
   const internalRef = React14.useRef(null);
@@ -2515,8 +2515,8 @@ var DateTimeSegment = ({
       borderRadius: "xs",
       fontSize: ["mobile.sm", "desktop.sm"],
       css: styles.dateTimeSegment,
-      "aria-label": ariaDescription,
-      "aria-labelledby": ariaLabel,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
       children: isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text
     }
   );
@@ -2565,7 +2565,7 @@ var DateField = ({
       DateTimeSegment,
       {
         segment,
-        ariaDescription: t(getAriaLabel(segment.type)),
+        ariaLabel: t(getAriaLabel(segment.type)),
         state
       },
       index
@@ -2692,7 +2692,7 @@ var DatePicker = ({
     }
     (_a6 = props.onClick) == null ? void 0 : _a6.call(props);
   };
-  const popoverContent = /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Body, { minWidth: "20rem", children: /* @__PURE__ */ jsxRuntime.jsx(
+  const popoverContent = /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Body, { minWidth: "18rem", children: /* @__PURE__ */ jsxRuntime.jsx(
     Calendar2,
     {
       ...calendarProps,
@@ -2901,8 +2901,9 @@ function DateRangePicker({
 var TimeField = ({ state, ...props }) => {
   const ref = React14.useRef(null);
   const { labelProps, fieldProps } = reactAria.useTimeField(props, state, ref);
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       react.chakra.label,
       {
         ...labelProps,
@@ -2919,10 +2920,21 @@ var TimeField = ({ state, ...props }) => {
         overflow: "hidden",
         textOverflow: "ellipsis",
         maxWidth: "80%",
-        children: props.label
+        children: [
+          props.label,
+          /* @__PURE__ */ jsxRuntime.jsx(react.Field.RequiredIndicator, {})
+        ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, index) => /* @__PURE__ */ jsxRuntime.jsx(DateTimeSegment, { segment, state }, index)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      DateTimeSegment,
+      {
+        segment,
+        state,
+        ariaLabel: t(getAriaLabel2(segment.type))
+      },
+      index
+    )) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -2933,6 +2945,48 @@ var TimeField = ({ state, ...props }) => {
     )
   ] });
 };
+var getAriaLabel2 = (segmentType) => {
+  switch (segmentType) {
+    case "hour": {
+      return texts12.hour;
+    }
+    case "minute": {
+      return texts12.minute;
+    }
+    case "second": {
+      return texts12.second;
+    }
+    default: {
+      return texts12.default;
+    }
+  }
+};
+var texts12 = createTexts({
+  hour: {
+    nb: "Velg time",
+    nn: "Vel time",
+    sv: "V\xE4lj timme",
+    en: "Choose hour"
+  },
+  minute: {
+    nb: "Velg minutt",
+    nn: "Vel minutt",
+    sv: "V\xE4lj minut",
+    en: "Choose minute"
+  },
+  second: {
+    nb: "Velg sekund",
+    nn: "Vel sekund",
+    sv: "V\xE4lj sekund",
+    en: "Choose second"
+  },
+  default: {
+    nb: "Velg tid",
+    nn: "Vel tid",
+    sv: "V\xE4lj tid",
+    en: "Choose time"
+  }
+});
 var TimePicker = ({
   label: externalLabel,
   value,
@@ -2948,7 +3002,7 @@ var TimePicker = ({
   const isDisabled = isDisabledExternally ?? fieldDisabled ?? false;
   const { t } = useTranslation();
   const locale = useCurrentLocale();
-  const label = externalLabel ?? t(texts12.time);
+  const label = externalLabel ?? t(texts13.time);
   const state = reactStately.useTimeFieldState({
     value,
     defaultValue,
@@ -2981,15 +3035,15 @@ var TimePicker = ({
       })
     );
   };
-  const backwardsLabel = `${t(texts12.backwards)} ${minuteInterval} ${t(
-    texts12.minutes
+  const backwardsLabel = `${t(texts13.backwards)} ${minuteInterval} ${t(
+    texts13.minutes
   )}`;
-  const forwardsLabel = `${t(texts12.forwards)} ${minuteInterval} ${t(
-    texts12.minutes
+  const forwardsLabel = `${t(texts13.forwards)} ${minuteInterval} ${t(
+    texts13.minutes
   )}`;
-  const inputLabel = label ?? t(texts12.time);
+  const inputLabel = label ?? t(texts13.time);
   const ariaLabel = `${inputLabel} \u2013 ${t(
-    texts12.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
+    texts13.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
   )}`;
   return /* @__PURE__ */ jsxRuntime.jsx(Field3, { as: "time", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
     StyledField,
@@ -3002,7 +3056,6 @@ var TimePicker = ({
       opacity: isDisabled ? 0.5 : 1,
       pointerEvents: isDisabled ? "none" : "auto",
       "aria-disabled": isDisabled,
-      "aria-live": "assertive",
       "aria-label": ariaLabel,
       position: "relative",
       ...boxProps,
@@ -3042,7 +3095,7 @@ var TimePicker = ({
     }
   ) });
 };
-var texts12 = createTexts({
+var texts13 = createTexts({
   selectedTimeIs: (time) => ({
     nb: `Valgt tidspunkt er ${time}`,
     nn: `Valt tidspunkt er ${time}`,
@@ -3083,11 +3136,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({
@@ -3183,7 +3237,7 @@ var DrawerCloseTrigger = function DrawerCloseTrigger2({
     {
       variant: "ghost",
       icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseFill24Icon, {}),
-      label: t(texts13.close)
+      label: t(texts14.close)
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "md" }) });
 };
@@ -3197,7 +3251,7 @@ var DrawerBackTrigger = ({
     {
       variant: "ghost",
       icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowLeftFill24Icon, {}),
-      label: t(texts13.back)
+      label: t(texts14.back)
     }
   ) });
 };
@@ -3229,7 +3283,7 @@ var DrawerBackdrop = react.Drawer.Backdrop;
 var DrawerTitle = react.Drawer.Title;
 var DrawerActionTrigger = react.Drawer.ActionTrigger;
 var DrawerHeader = react.Drawer.Header;
-var texts13 = createTexts({
+var texts14 = createTexts({
   back: {
     en: "Back",
     nb: "Tilbake",
@@ -3259,7 +3313,7 @@ var TextLink = ({
 }) => {
   const { t } = useTranslation();
   const isExternal = external ?? Boolean((href == null ? void 0 : href.startsWith("http://")) || (href == null ? void 0 : href.startsWith("https://")));
-  const externalLabel = t ? t(texts14.externalLink) : texts14.externalLink.en;
+  const externalLabel = t ? t(texts15.externalLink) : texts15.externalLink.en;
   if (props.asChild && React14.isValidElement(children)) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       react.Link,
@@ -3298,7 +3352,7 @@ var TextLink = ({
     }
   );
 };
-var texts14 = createTexts({
+var texts15 = createTexts({
   externalLink: {
     nb: "Ekstern lenke",
     nn: "Ekstern lenke",
@@ -3363,6 +3417,7 @@ var ErrorSummaryItem = ({
 };
 var AttachedInputs = ({
   ref,
+  flipButtonProps,
   ...props
 }) => {
   const recipe = react.useRecipe({ key: "attachedInputs" });
@@ -3391,7 +3446,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 +3459,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)"
         }
@@ -3682,10 +3738,10 @@ function Autocomplete({
           }
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts15.clearValue), children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "xs", tabIndex: 0 }) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts16.clearValue), children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "xs", tabIndex: 0 }) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Content, { children: [
-      !loading && /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Empty, { children: emptyLabel ?? t(texts15.noItemsFound) }),
+      !loading && /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Empty, { children: emptyLabel ?? t(texts16.noItemsFound) }),
       loading ? /* @__PURE__ */ jsxRuntime.jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : filteredChildren
     ] }) })
   ] });
@@ -3744,7 +3800,7 @@ var extractItemsFromChildren = (children) => {
   });
   return items;
 };
-var texts15 = createTexts({
+var texts16 = createTexts({
   noItemsFound: {
     nb: "Ingen resultater",
     nn: "Ingen resultat",
@@ -4561,7 +4617,7 @@ var NumericStepper = ({
           {
             icon: /* @__PURE__ */ jsxRuntime.jsx(SubtractIcon, { stepLabel: clampedStepSize }),
             "aria-label": t(
-              texts16.decrementButtonAriaLabel(
+              texts17.decrementButtonAriaLabel(
                 clampedStepSize,
                 stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
               )
@@ -4588,7 +4644,7 @@ var NumericStepper = ({
             css: styles.input,
             width: `${Math.max(value.toString().length + 1, 3)}ch`,
             "aria-live": "assertive",
-            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts16.currentNumberAriaLabel(ariaLabelContext.plural)),
+            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts17.currentNumberAriaLabel(ariaLabelContext.plural)),
             onChange: (event) => {
               const numericInput = Number(event.target.value);
               if (Number.isNaN(numericInput)) {
@@ -4609,7 +4665,7 @@ var NumericStepper = ({
             paddingX: 0.5,
             padding: 0,
             textAlign: "center",
-            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts16.currentNumberAriaLabel(ariaLabelContext.plural)),
+            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts17.currentNumberAriaLabel(ariaLabelContext.plural)),
             children: value
           }
         ),
@@ -4619,7 +4675,7 @@ var NumericStepper = ({
             ref: addButtonRef,
             icon: /* @__PURE__ */ jsxRuntime.jsx(AddIcon, { stepLabel: clampedStepSize }),
             "aria-label": t(
-              texts16.incrementButtonAriaLabel(
+              texts17.incrementButtonAriaLabel(
                 clampedStepSize,
                 stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
               )
@@ -4693,7 +4749,7 @@ var AddIcon = ({ stepLabel }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Frag
   ] }),
   stepLabel > 1 && /* @__PURE__ */ jsxRuntime.jsx(react.chakra.span, { paddingRight: "1", children: stepLabel.toString() })
 ] });
-var texts16 = createTexts({
+var texts17 = createTexts({
   currentNumberAriaLabel(ariaContext) {
     return {
       nb: `Valgt antall ${ariaContext}`,
@@ -4759,7 +4815,7 @@ var PasswordInput = ({
             setVisible(!visible);
           },
           size,
-          children: visible ? t(texts17.hidePassword) : t(texts17.showPassword)
+          children: visible ? t(texts18.hidePassword) : t(texts18.showPassword)
         }
       ),
       size,
@@ -4784,7 +4840,7 @@ var VisibilityTrigger = ({
     }
   );
 };
-var texts17 = createTexts({
+var texts18 = createTexts({
   showPassword: {
     nb: "Vis",
     nn: "Vis",
@@ -4836,7 +4892,7 @@ var CountryCodeSelect = ({
       positioning: { placement: "bottom", flip: false },
       collection: filteredCallingCodes,
       lazyMount: true,
-      "aria-label": t(texts18.countryCode),
+      "aria-label": t(texts19.countryCode),
       sideRadiusVariant: "rightSideSquare",
       size: props.size,
       role: "combobox",
@@ -4844,7 +4900,7 @@ var CountryCodeSelect = ({
     }
   );
 };
-var texts18 = createTexts({
+var texts19 = createTexts({
   countryCode: {
     nb: "Landkode",
     nn: "Landskode",
@@ -4868,7 +4924,7 @@ var PhoneNumberInput = ({
     size = "md"
   } = props;
   const { t } = useTranslation();
-  const label = externalLabel ?? (optional ? t(texts19.phoneNumberOptional) : t(texts19.phoneNumber));
+  const label = externalLabel ?? (optional ? t(texts20.phoneNumberOptional) : t(texts20.phoneNumber));
   const [value, onChange] = react.useControllableState({
     value: externalValue,
     onChange: externalOnChange,
@@ -4924,7 +4980,7 @@ var PhoneNumberInput = ({
     )
   ] });
 };
-var texts19 = createTexts({
+var texts20 = createTexts({
   phoneNumber: {
     nb: "Telefonnummer",
     nn: "Telefonnummer",
@@ -4977,16 +5033,16 @@ var SearchInput = ({
           variant: "ghost",
           type: "button",
           size: "sm",
-          "aria-label": t(texts20.reset),
+          "aria-label": t(texts21.reset),
           icon: size == "md" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseOutline24Icon, {}) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseOutline18Icon, {}),
           onClick: onReset
         }
       ),
-      label: label ?? t(texts20.label)
+      label: label ?? t(texts21.label)
     }
   );
 };
-var texts20 = createTexts({
+var texts21 = createTexts({
   label: {
     nb: "S\xF8k",
     nn: "S\xF8k",
@@ -6040,14 +6096,14 @@ var JumpButton = ({
       as: "button",
       ref,
       css: styles.root,
-      "aria-label": direction === "forward" ? t(texts21.forward) : t(texts21.backward),
+      "aria-label": direction === "forward" ? t(texts22.forward) : t(texts22.backward),
       disabled,
       ...props,
       children: direction === "forward" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.Forward15MediaControllerFill30Icon, { css: styles.icon }) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.Backward15MediaControllerFill30Icon, { css: styles.icon })
     }
   );
 };
-var texts21 = createTexts({
+var texts22 = createTexts({
   forward: {
     nb: "15 sekunder frem",
     nn: "15 sekunder fram",
@@ -6075,14 +6131,14 @@ var PlayPauseButton = ({
       ref,
       as: "button",
       css: styles.root,
-      "aria-label": playing ? t(texts22.pause) : t(texts22.play),
+      "aria-label": playing ? t(texts23.pause) : t(texts23.play),
       disabled,
       ...props,
       children: playing ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.PauseMediaControllerFill24Icon, { css: styles.icon }) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.PlayMediaControllerFill24Icon, { css: styles.icon })
     }
   );
 };
-var texts22 = createTexts({
+var texts23 = createTexts({
   pause: {
     nb: "Pause",
     nn: "Pause",
@@ -6110,14 +6166,14 @@ var SkipButton = ({
       ref,
       as: "button",
       css: styles.root,
-      "aria-label": direction === "forward" ? t(texts23.next) : t(texts23.previous),
+      "aria-label": direction === "forward" ? t(texts24.next) : t(texts24.previous),
       disabled,
       ...props,
       children: direction === "forward" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.NextMediaControllerFill30Icon, { css: styles.icon }) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.PreviousMediaControllerFill30Icon, { css: styles.icon })
     }
   );
 };
-var texts23 = createTexts({
+var texts24 = createTexts({
   next: {
     nb: "Neste",
     nn: "Neste",
@@ -6232,7 +6288,7 @@ var NudgeActions = ({ ...props }) => {
 var NextButton = ({ isLastStep, onNext }) => {
   const { t } = useTranslation();
   if (isLastStep)
-    return /* @__PURE__ */ jsxRuntime.jsx(react.PopoverCloseTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "tertiary", size: "xs", children: t(texts24.close) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(react.PopoverCloseTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "tertiary", size: "xs", children: t(texts25.close) }) });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
@@ -6240,11 +6296,11 @@ var NextButton = ({ isLastStep, onNext }) => {
       size: "xs",
       rightIcon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowRightFill18Icon, {}),
       onClick: onNext,
-      children: t(texts24.nextStep)
+      children: t(texts25.nextStep)
     }
   );
 };
-var texts24 = createTexts({
+var texts25 = createTexts({
   nextStep: {
     nb: "Neste",
     nn: "Neste",
@@ -6320,7 +6376,7 @@ var PaginationItem = ({
           to: rootProps.getHref(props.value)
         },
         ref,
-        "aria-label": t(texts25.pageOf(props.value, totalPages)),
+        "aria-label": t(texts26.pageOf(props.value, totalPages)),
         ...props,
         children: props.value
       }
@@ -6331,7 +6387,7 @@ var PaginationItem = ({
     {
       as: props.as ?? "button",
       ref,
-      "aria-label": t(texts25.pageOf(props.value, totalPages)),
+      "aria-label": t(texts26.pageOf(props.value, totalPages)),
       "aria-current": page === props.value,
       ...props,
       children: props.value
@@ -6361,7 +6417,7 @@ var PaginationPrevTrigger = ({
         },
         ref,
         css: styles.item,
-        "aria-label": t(texts25.previousPage),
+        "aria-label": t(texts26.previousPage),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownLeftOutline18Icon, {})
       }
@@ -6372,7 +6428,7 @@ var PaginationPrevTrigger = ({
     {
       ref,
       asChild: true,
-      "aria-label": t(texts25.previousPage),
+      "aria-label": t(texts26.previousPage),
       as: props.as || "button",
       css: styles.item,
       ...props,
@@ -6401,7 +6457,7 @@ var PaginationNextTrigger = ({
           to: rootProps.getHref(props.value)
         },
         css: styles.item,
-        "aria-label": t(texts25.nextPage),
+        "aria-label": t(texts26.nextPage),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownRightOutline18Icon, {})
       }
@@ -6412,7 +6468,7 @@ var PaginationNextTrigger = ({
     {
       ref,
       css: styles.item,
-      "aria-label": t(texts25.nextPage),
+      "aria-label": t(texts26.nextPage),
       as: props.as || "button",
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownRightOutline18Icon, {})
@@ -6439,7 +6495,7 @@ var PaginationItems = (props) => {
     );
   }) });
 };
-var texts25 = createTexts({
+var texts26 = createTexts({
   previousPage: {
     nb: "Forrige side",
     nn: "F\xF8rre side",
@@ -6539,7 +6595,7 @@ var ProgressIndicator = ({
       "aria-valuemin": 1,
       "aria-valuemax": numberOfSteps,
       "aria-valuenow": activeStep,
-      "aria-valuetext": t(texts26.stepsOf(activeStep, numberOfSteps)),
+      "aria-valuetext": t(texts27.stepsOf(activeStep, numberOfSteps)),
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: { ...styles.container, ...css }, children: Array.from({ length: numberOfSteps }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
         react.Box,
@@ -6558,7 +6614,7 @@ var ProgressIndicator = ({
     }
   );
 };
-var texts26 = createTexts({
+var texts27 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,
     nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -6568,7 +6624,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;
@@ -6576,7 +6632,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");
@@ -6585,7 +6641,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;
@@ -6593,7 +6649,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")
@@ -6603,7 +6659,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;
@@ -6611,7 +6667,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");
@@ -6620,7 +6676,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");
@@ -6754,7 +6810,7 @@ var Stepper = function Stepper2({
               /* @__PURE__ */ jsxRuntime.jsx(
                 IconButton,
                 {
-                  "aria-label": t(texts27.back),
+                  "aria-label": t(texts28.back),
                   icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowLeftFill24Icon, {}),
                   variant: "ghost",
                   size: "sm",
@@ -6778,7 +6834,7 @@ var Stepper = function Stepper2({
                   children: heading
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: style.stepCounter, "data-part": "step-counter", children: t(texts27.stepsOf(activeStep, numberOfSteps)) })
+              /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: style.stepCounter, "data-part": "step-counter", children: t(texts28.stepsOf(activeStep, numberOfSteps)) })
             ]
           }
         ) }),
@@ -6797,7 +6853,7 @@ var Stepper = function Stepper2({
     }
   ) });
 };
-var texts27 = createTexts({
+var texts28 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep}/${numberOfSteps}`,
     nn: `Steg ${activeStep}/${numberOfSteps}`,
@@ -7120,7 +7176,7 @@ var buttonRecipe = react.defineRecipe({
       background: "surface.disabled"
     },
     _focus: {
-      outlineOffset: tokens22__namespace.default.size.stroke.md
+      outlineOffset: tokens21__namespace.default.size.stroke.md
     }
   },
   variants: {
@@ -7151,19 +7207,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: {
@@ -7491,15 +7547,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
           }
         }
       },
@@ -7684,7 +7740,9 @@ var textareaRecipe = react.defineRecipe({
     borderTop: "0.8rem solid transparent",
     "&:focus-visible, &:not(:placeholder-shown)": {
       borderTop: "var(--label-height) solid transparent"
-    }
+    },
+    fontSize: "mobile.md",
+    paddingLeft: 3
   },
   variants: {
     variant: {
@@ -7725,34 +7783,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
     }
   }
 });
@@ -8131,7 +8189,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: {
@@ -8139,14 +8197,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"
           }
         }
@@ -8164,7 +8222,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"
         },
@@ -8173,14 +8231,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"
           }
         }
@@ -8585,10 +8643,10 @@ var breadcrumbSlotRecipe = react.defineSlotRecipe({
     },
     link: {
       cursor: "pointer",
-      borderRadius: "xs"
+      borderRadius: "xs",
+      textDecoration: "underline"
     },
     currentLink: {
-      borderRadius: "xs",
       cursor: "default"
     },
     separator: {
@@ -8602,12 +8660,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"
             }
           }
         }
@@ -8689,10 +8744,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: {
@@ -9010,7 +9065,8 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
       outlineColor: "outline.floating",
       boxShadow: "md",
       backgroundColor: "surface.floating",
-      minHeight: "min-content"
+      minHeight: "min-content",
+      maxWidth: "100vw"
     },
     rangeCalendarPopover: {
       width: "43rem",
@@ -9895,7 +9951,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: {
@@ -11207,25 +11263,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
             }
           }
@@ -11250,12 +11306,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
             }
           }
@@ -12294,22 +12350,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({
@@ -12381,33 +12437,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({
@@ -12440,9 +12496,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: {
@@ -12479,32 +12535,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
@@ -12541,10 +12597,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,
@@ -12553,22 +12609,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,
@@ -12636,10 +12692,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
@@ -12929,91 +12985,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"]
     }
   }
 });
@@ -13024,7 +13080,7 @@ var generateTheme = (brand) => {
     theme: {
       breakpoints,
       keyframes,
-      tokens: tokens20,
+      tokens: tokens19,
       semanticTokens: semanticTokens[brand],
       recipes,
       slotRecipes,
@@ -13317,7 +13373,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;