@vygruppen/spor-react 12.4.3 → 12.4.4

package/dist/index.js

@@ -15,15 +15,9 @@ 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 tokens20 = require('@vygruppen/spor-design-tokens');
-var react$1 = require('@ark-ui/react');
-var react$2 = require('@emotion/react');
-var cargonetJson = require('@vygruppen/spor-design-tokens/tokens/color/cargonet.json');
-var vyDigitalJson = require('@vygruppen/spor-design-tokens/tokens/color/vy-digital.json');
-var VyUtviklingJson = require('@vygruppen/spor-design-tokens/tokens/color/vy-utvikling.json');
-var aliasJson = require('@vygruppen/spor-design-tokens/tokens/color/alias.json');
-var linjetagJson = require('@vygruppen/spor-design-tokens/tokens/color/linjetag.json');
-var paletteJson = require('@vygruppen/spor-design-tokens/tokens/color/palette.json');
+var tokens22 = require('@vygruppen/spor-design-tokens');
+var react$1 = require('@emotion/react');
+var tokens4 = require('@vygruppen/spor-design-tokens/raw-tokens');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -47,13 +41,8 @@ function _interopNamespace(e) {
 
 var React28__namespace = /*#__PURE__*/_interopNamespace(React28);
 var ReactLottie__default = /*#__PURE__*/_interopDefault(ReactLottie);
-var tokens20__namespace = /*#__PURE__*/_interopNamespace(tokens20);
-var cargonetJson__default = /*#__PURE__*/_interopDefault(cargonetJson);
-var vyDigitalJson__default = /*#__PURE__*/_interopDefault(vyDigitalJson);
-var VyUtviklingJson__default = /*#__PURE__*/_interopDefault(VyUtviklingJson);
-var aliasJson__default = /*#__PURE__*/_interopDefault(aliasJson);
-var linjetagJson__default = /*#__PURE__*/_interopDefault(linjetagJson);
-var paletteJson__default = /*#__PURE__*/_interopDefault(paletteJson);
+var tokens22__namespace = /*#__PURE__*/_interopNamespace(tokens22);
+var tokens4__default = /*#__PURE__*/_interopDefault(tokens4);
 
 // src/accordion/Accordion.tsx
 
@@ -61,8 +50,9 @@ var paletteJson__default = /*#__PURE__*/_interopDefault(paletteJson);
 var warnAboutMismatchingIcon = ({
   icon
 }) => {
+  var _a5, _b4;
   if (process.env.NODE_ENV !== "production") {
-    const displayName = icon?.type?.render?.displayName;
+    const displayName = (_b4 = (_a5 = icon == null ? void 0 : icon.type) == null ? void 0 : _a5.render) == null ? void 0 : _b4.displayName;
     if (!displayName) {
       return;
     }
@@ -828,6 +818,7 @@ var badgeRecipie = react.defineRecipe({
 });
 
 // src/theme/recipes/code.ts
+var _a;
 var codeRecipie = react.defineRecipe({
   base: {
     fontFamily: "monospace",
@@ -836,7 +827,7 @@ var codeRecipie = react.defineRecipe({
     paddingX: 1
   },
   variants: {
-    colorPalette: badgeRecipie.variants?.colorPalette ?? {}
+    colorPalette: ((_a = badgeRecipie.variants) == null ? void 0 : _a.colorPalette) ?? {}
   }
 });
 var StyledCode = react.chakra(react.Code, codeRecipie);
@@ -1153,7 +1144,7 @@ var Alert = React28.forwardRef((props, ref) => {
   const { open, onClose } = react.useDisclosure({ defaultOpen: true });
   const handleAlertClose = () => {
     onClose();
-    onAlertClose?.();
+    onAlertClose == null ? void 0 : onAlertClose();
   };
   const recipe = react.useSlotRecipe({ key: "alert" });
   const styles = recipe({ variant: props.variant });
@@ -1989,7 +1980,8 @@ function CalendarCell({
     stateProps["data-unavailable"] = true;
   }
   React28.useEffect(() => {
-    ref.current?.addEventListener(
+    var _a5;
+    (_a5 = ref.current) == null ? void 0 : _a5.addEventListener(
       "touchend",
       (event) => {
         event.preventDefault();
@@ -2035,7 +2027,7 @@ var getCurrentTime = () => {
   return date.parseTime(now.toTimeString().split(" ")[0]);
 };
 var getTimestampFromTime = (time) => {
-  return `${time?.hour ?? 0}:${time?.minute ?? 0}`;
+  return `${(time == null ? void 0 : time.hour) ?? 0}:${(time == null ? void 0 : time.minute) ?? 0}`;
 };
 var weekDays = {
   nb: ["Ma", "Ti", "On", "To", "Fr", "L\xF8", "S\xF8"],
@@ -2339,6 +2331,7 @@ function createCalendar2(identifier) {
 }
 var DateField = React28.forwardRef(
   ({ labelId, ...props }, externalRef) => {
+    var _a5;
     const locale = useCurrentLocale();
     const recipe = react.useSlotRecipe({
       key: "datePicker",
@@ -2384,7 +2377,7 @@ var DateField = React28.forwardRef(
         "input",
         {
           type: "hidden",
-          value: state.value?.toString() ?? "",
+          value: ((_a5 = state.value) == null ? void 0 : _a5.toString()) ?? "",
           name: props.name
         }
       )
@@ -2470,8 +2463,8 @@ var DatePicker = React28.forwardRef(
       ...props,
       shouldCloseOnSelect: true,
       errorMessage: errorText,
-      isRequired: props.isRequired ?? chakraFieldProps?.required,
-      validationState: chakraFieldProps?.invalid ? "invalid" : "valid"
+      isRequired: props.isRequired ?? (chakraFieldProps == null ? void 0 : chakraFieldProps.required),
+      validationState: (chakraFieldProps == null ? void 0 : chakraFieldProps.invalid) ? "invalid" : "valid"
     });
     const internalRef = React28.useRef(null);
     const ref = externalRef ?? internalRef;
@@ -2607,8 +2600,8 @@ function DateRangePicker({
     shouldCloseOnSelect: true,
     isInvalid: invalid,
     errorMessage: errorText,
-    isRequired: props.required ?? fieldContextPRops?.required,
-    validationState: fieldContextPRops?.invalid ? "invalid" : "valid"
+    isRequired: props.required ?? (fieldContextPRops == null ? void 0 : fieldContextPRops.required),
+    validationState: (fieldContextPRops == null ? void 0 : fieldContextPRops.invalid) ? "invalid" : "valid"
   });
   const ref = React28.useRef(null);
   const uniqueId = reactAria.useId();
@@ -2784,7 +2777,7 @@ var TimePicker = ({
   )}`;
   const inputLabel = label ?? t(texts11.time);
   const ariaLabel = `${inputLabel} \u2013 ${t(
-    texts11.selectedTimeIs(`${dateTime?.hour ?? 0} ${dateTime?.minute ?? 0}`)
+    texts11.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,
@@ -3132,6 +3125,7 @@ var Popover = React28.forwardRef(
     hasBackdrop = true,
     containerPadding = 12
   }, ref) => {
+    var _a5;
     const internalRef = React28.useRef(null);
     const popoverRef = ref ?? internalRef;
     const { popoverProps, underlayProps } = reactAria.usePopover(
@@ -3152,7 +3146,7 @@ var Popover = React28.forwardRef(
       {
         ...popoverProps,
         ref: popoverRef,
-        minWidth: triggerRef.current?.clientWidth ?? "auto",
+        minWidth: ((_a5 = triggerRef.current) == null ? void 0 : _a5.clientWidth) ?? "auto",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close }),
           children,
@@ -3534,7 +3528,8 @@ function Option({ item, state }) {
     dataFields["data-focus-visible"] = true;
   }
   React28.useEffect(() => {
-    ref?.current?.addEventListener(
+    var _a5;
+    (_a5 = ref == null ? void 0 : ref.current) == null ? void 0 : _a5.addEventListener(
       "touchend",
       (event) => {
         event.preventDefault();
@@ -3552,6 +3547,7 @@ var useOptionContext = () => {
   return React28.useContext(OptionContext);
 };
 function ListBoxSection({ section, state }) {
+  var _a5, _b4;
   const { itemProps, headingProps, groupProps } = reactAria.useListBoxSection({
     heading: section.rendered,
     "aria-label": section["aria-label"]
@@ -3573,7 +3569,7 @@ function ListBoxSection({ section, state }) {
         children: section.rendered
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...state.collection.getChildren?.(section.key) ?? []].map(
+    /* @__PURE__ */ jsxRuntime.jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []].map(
       (item) => /* @__PURE__ */ jsxRuntime.jsx(Option, { item, state }, item.key)
     ) })
   ] }) });
@@ -3713,6 +3709,7 @@ function coreText(state) {
 }
 
 // src/theme/slot-recipes/native-select.ts
+var _a2, _b;
 var nativeSelectSlotRecipe = react.defineSlotRecipe({
   slots: NativeSelectAnatomy.keys(),
   className: "spor-nativeSelect",
@@ -3751,12 +3748,12 @@ var nativeSelectSlotRecipe = react.defineSlotRecipe({
     variant: {
       core: {
         field: {
-          ...inputRecipe.variants?.variant.core
+          ...(_a2 = inputRecipe.variants) == null ? void 0 : _a2.variant.core
         }
       },
       floating: {
         field: {
-          ...inputRecipe.variants?.variant.floating
+          ...(_b = inputRecipe.variants) == null ? void 0 : _b.variant.floating
         }
       }
     }
@@ -3899,7 +3896,8 @@ var NumericStepper = React28__namespace.default.forwardRef((props, ref) => {
   });
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
   const focusOnAddButton = () => {
-    addButtonRef.current?.focus();
+    var _a5;
+    (_a5 = addButtonRef.current) == null ? void 0 : _a5.focus();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Field3, { css: styles.root, width: "auto", ...rest, ref, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -4156,7 +4154,10 @@ var CountryCodeSelect = React28.forwardRef((props, ref) => {
   const { t } = useTranslation();
   if (props.allowedCountryCodes) {
     callingCodes.items = callingCodes.items.filter(
-      (callingCode) => props.allowedCountryCodes?.some((code) => code === callingCode.label)
+      (callingCode) => {
+        var _a5;
+        return (_a5 = props.allowedCountryCodes) == null ? void 0 : _a5.some((code) => code === callingCode.label);
+      }
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4595,16 +4596,16 @@ var pressableCardRecipe = react.defineRecipe({
       },
       core: {
         outlineColor: "core.outline",
-        outlineWidth: tokens20__namespace.default.size.stroke.sm,
+        outlineWidth: tokens22__namespace.default.size.stroke.sm,
         outlineStyle: "solid",
         backgroundColor: "core.surface",
         _hover: {
           outlineColor: "core.outline.hover",
-          outlineWidth: tokens20__namespace.default.size.stroke.md,
+          outlineWidth: tokens22__namespace.default.size.stroke.md,
           outlineStyle: "solid",
           _active: {
             backgroundColor: "core.surface.active",
-            outlineWidth: tokens20__namespace.default.size.stroke.sm
+            outlineWidth: tokens22__namespace.default.size.stroke.sm
           }
         }
       },
@@ -4860,7 +4861,8 @@ var icons = {
   walk: { sm: sporIconReact.WalkFill18Icon, md: sporIconReact.WalkFill24Icon, lg: sporIconReact.WalkFill30Icon }
 };
 var getCorrectIcon = ({ variant, size }) => {
-  return icons[variant]?.[size] ?? react.Box;
+  var _a5;
+  return ((_a5 = icons[variant]) == null ? void 0 : _a5[size]) ?? react.Box;
 };
 var LineIcon = React28.forwardRef(
   function LineIcon2({
@@ -5018,7 +5020,7 @@ var ExternalIcon = ({ label }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fra
 var TextLink = React28.forwardRef(
   ({ children, external, href, ...props }, ref) => {
     const { t } = useTranslation();
-    const isExternal = external ?? Boolean(href?.startsWith("http://") || href?.startsWith("https://"));
+    const isExternal = external ?? Boolean((href == null ? void 0 : href.startsWith("http://")) || (href == null ? void 0 : href.startsWith("https://")));
     const externalLabel = t ? t(texts18.externalLink) : texts18.externalLink.en;
     if (props.asChild && React28.isValidElement(children)) {
       return /* @__PURE__ */ jsxRuntime.jsx(react.Link, { href, ...props, ref, children: React28.cloneElement(children, {
@@ -5673,7 +5675,7 @@ var NudgeContent = React28.forwardRef(
   ({ showCloseButton = true, children, ...props }, ref) => {
     const [currentStep, setCurrentStep] = React28.useState(1);
     const childrenArray = React28__namespace.default.Children.toArray(children);
-    const { open } = react$1.usePopoverContext();
+    const { open } = react.usePopoverContext();
     React28.useEffect(() => {
       setCurrentStep(1);
     }, [children, open]);
@@ -5732,7 +5734,7 @@ var NudgeActions = ({ ...props }) => {
 var NextButton = ({ isLastStep, onNext }) => {
   const { t } = useTranslation();
   if (isLastStep)
-    return /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverCloseTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "tertiary", size: "xs", children: t(texts22.close) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(react.PopoverCloseTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "tertiary", size: "xs", children: t(texts22.close) }) });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
@@ -6034,7 +6036,7 @@ var texts24 = createTexts({
 });
 var fontFaces = `
 @font-face {
-  font-family: ${tokens20__namespace.default.asset.font["vy-sans"]["light"].name};
+  font-family: ${tokens22__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;
@@ -6042,7 +6044,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens20__namespace.default.asset.font["vy-sans"]["light-italic"].name};
+  font-family: ${tokens22__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");
@@ -6051,7 +6053,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens20__namespace.default.asset.font["vy-sans"]["medium"].name};
+  font-family: ${tokens22__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;
@@ -6059,7 +6061,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens20__namespace.default.asset.font["vy-sans"]["medium-italic"].name};
+  font-family: ${tokens22__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")
@@ -6069,7 +6071,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens20__namespace.default.asset.font["vy-sans"]["bold"].name};
+  font-family: ${tokens22__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;
@@ -6077,7 +6079,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens20__namespace.default.asset.font["vy-sans"]["bold-italic"].name};
+  font-family: ${tokens22__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");
@@ -6086,7 +6088,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens20__namespace.default.asset.font["vy-display"].name};
+  font-family: ${tokens22__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");
@@ -6118,7 +6120,7 @@ var createToast = ({
 }) => toaster.create({
   description: text,
   type: variant,
-  id,
+  id: id ?? crypto.randomUUID(),
   duration
 });
 var Toaster = () => {
@@ -6167,7 +6169,7 @@ var SporProvider = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(LanguageProvider, { language, children: /* @__PURE__ */ jsxRuntime.jsx(react.ChakraProvider, { value: theme, children: /* @__PURE__ */ jsxRuntime.jsxs(ColorModeProvider, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Toaster, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.Global, { styles: fontFaces }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Global, { styles: fontFaces }),
     children
   ] }) }) });
 };
@@ -6595,7 +6597,7 @@ var buttonRecipe = react.defineRecipe({
       background: "surface.disabled"
     },
     _focus: {
-      outlineOffset: tokens20__namespace.default.size.stroke.md
+      outlineOffset: tokens22__namespace.default.size.stroke.md
     }
   },
   variants: {
@@ -6623,19 +6625,19 @@ var buttonRecipe = react.defineRecipe({
       tertiary: {
         color: "core.text",
         outline: "solid",
-        outlineWidth: tokens20__namespace.default.size.stroke.sm,
+        outlineWidth: tokens22__namespace.default.size.stroke.sm,
         outlineColor: "core.outline",
         _hover: {
-          outlineWidth: tokens20__namespace.default.size.stroke.md,
+          outlineWidth: tokens22__namespace.default.size.stroke.md,
           outlineColor: "core.outline.hover",
           _active: {
             background: "core.surface.active",
-            outlineWidth: tokens20__namespace.default.size.stroke.sm,
+            outlineWidth: tokens22__namespace.default.size.stroke.sm,
             outlineColor: "core.outline"
           }
         },
         _focus: {
-          outlineWidth: tokens20__namespace.default.size.stroke.sm
+          outlineWidth: tokens22__namespace.default.size.stroke.sm
         }
       },
       ghost: {
@@ -6820,6 +6822,7 @@ var linkRecipe = react.defineRecipe({
     }
   }
 });
+var _a3, _b2;
 var textareaRecipe = react.defineRecipe({
   className: "spor-textarea",
   base: {
@@ -6836,10 +6839,10 @@ var textareaRecipe = react.defineRecipe({
   variants: {
     variant: {
       core: {
-        ...inputRecipe.variants?.variant.core
+        ...(_a3 = inputRecipe.variants) == null ? void 0 : _a3.variant.core
       },
       floating: {
-        ...inputRecipe.variants?.variant.floating
+        ...(_b2 = inputRecipe.variants) == null ? void 0 : _b2.variant.floating
       }
     }
   }
@@ -6862,23 +6865,23 @@ var recipes = {
   textarea: textareaRecipe
 };
 var vyDigitalColors = react.defineSemanticTokens.colors({
-  ...vyDigitalJson__default.default.color.vyDigital
+  ...tokens4__default.default.color["vy-digital"].color.vyDigital
 });
 var vyUtviklingColors = react.defineSemanticTokens.colors({
-  ...VyUtviklingJson__default.default.color.vyUtvikling
+  ...tokens4__default.default.color["vy-utvikling"].color.vyUtvikling
 });
 var cargonetColors = react.defineSemanticTokens.colors({
-  ...cargonetJson__default.default.color.cargonet
+  ...tokens4__default.default.color.cargonet.color.cargonet
 });
 var radii = react.defineSemanticTokens.radii({
-  none: { value: tokens20__namespace.default.size["border-radius"].none },
-  xxs: { value: tokens20__namespace.default.size["border-radius"].xxs },
-  xs: { value: tokens20__namespace.default.size["border-radius"].xs },
-  sm: { value: tokens20__namespace.default.size["border-radius"].sm },
-  md: { value: tokens20__namespace.default.size["border-radius"].md },
-  lg: { value: tokens20__namespace.default.size["border-radius"].lg },
-  xl: { value: tokens20__namespace.default.size["border-radius"].xl },
-  "2xl": { value: tokens20__namespace.default.size["border-radius"]["2xl"] },
+  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"] },
   round: { value: "50%" }
 });
 var shadows = react.defineSemanticTokens.shadows({
@@ -6886,13 +6889,13 @@ var shadows = react.defineSemanticTokens.shadows({
     value: "none"
   },
   sm: {
-    value: tokens20__namespace.default.depth.shadow.sm.value
+    value: tokens22__namespace.default.depth.shadow.sm.value
   },
   md: {
-    value: tokens20__namespace.default.depth.shadow.md.value
+    value: tokens22__namespace.default.depth.shadow.md.value
   },
   lg: {
-    value: tokens20__namespace.default.depth.shadow.lg.value
+    value: tokens22__namespace.default.depth.shadow.lg.value
   }
 });
 
@@ -7395,7 +7398,7 @@ var breadcrumbSlotRecipe = react.defineSlotRecipe({
         link: {
           _hover: {
             outlineColor: "core.outline.hover",
-            outlineWidth: tokens20__namespace.default.size.stroke.md,
+            outlineWidth: tokens22__namespace.default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
               backgroundColor: "core.surface.active",
@@ -7487,10 +7490,10 @@ var checkboxSlotRecipe = react.defineSlotRecipe({
       _focus: {
         outlineStyle: "solid",
         outlineColor: "outline.focus",
-        outlineOffset: tokens20__namespace.default.size.stroke.md,
-        outlineWidth: tokens20__namespace.default.size.stroke.md,
+        outlineOffset: tokens22__namespace.default.size.stroke.md,
+        outlineWidth: tokens22__namespace.default.size.stroke.md,
         borderColor: "core.outline",
-        borderWidth: tokens20__namespace.default.size.stroke.md
+        borderWidth: tokens22__namespace.default.size.stroke.md
       }
     },
     label: {
@@ -8144,7 +8147,7 @@ var floatingActionButtonSlotRecipe = react.defineSlotRecipe({
       position: "fixed",
       zIndex: "dropdown",
       _focus: {
-        outlineOffset: tokens20__namespace.default.size.stroke.lg,
+        outlineOffset: tokens22__namespace.default.size.stroke.lg,
         outlineColor: "outline.focus"
       },
       _disabled: {
@@ -8444,6 +8447,7 @@ var travelTagSlotRecipe = react.defineSlotRecipe({
 });
 
 // src/theme/slot-recipes/info-tag.ts
+var _a4, _b3, _c, _d;
 var infoTagSlotRecipe = react.defineSlotRecipe({
   slots: infoTagAnatomy.keys(),
   className: "spor-info-tag",
@@ -8476,21 +8480,21 @@ var infoTagSlotRecipe = react.defineSlotRecipe({
       }
     },
     size: {
-      ...travelTagSlotRecipe.variants?.size,
+      ...(_a4 = travelTagSlotRecipe.variants) == null ? void 0 : _a4.size,
       sm: {
-        ...travelTagSlotRecipe.variants?.size.sm,
+        ...(_b3 = travelTagSlotRecipe.variants) == null ? void 0 : _b3.size.sm,
         iconContainer: {
           borderRadius: "0.375rem"
         }
       },
       md: {
-        ...travelTagSlotRecipe.variants?.size.md,
+        ...(_c = travelTagSlotRecipe.variants) == null ? void 0 : _c.size.md,
         iconContainer: {
           borderRadius: "0.375rem"
         }
       },
       lg: {
-        ...travelTagSlotRecipe.variants?.size.lg,
+        ...(_d = travelTagSlotRecipe.variants) == null ? void 0 : _d.size.lg,
         iconContainer: {
           borderRadius: "sm"
         }
@@ -9148,26 +9152,26 @@ var radioCardSlotRecipe = react.defineSlotRecipe({
       core: {
         item: {
           outlineColor: "core.outline",
-          outlineWidth: tokens20__namespace.default.size.stroke.sm,
+          outlineWidth: tokens22__namespace.default.size.stroke.sm,
           outlineStyle: "solid",
           backgroundColor: "core.surface",
           _hover: {
             outlineColor: "core.outline.hover",
-            outlineWidth: tokens20__namespace.default.size.stroke.md,
+            outlineWidth: tokens22__namespace.default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
               backgroundColor: "core.surface.active",
-              outlineWidth: tokens20__namespace.default.size.stroke.sm
+              outlineWidth: tokens22__namespace.default.size.stroke.sm
             }
           },
           _checked: {
             outlineColor: "outline.focus",
-            outlineWidth: tokens20__namespace.default.size.stroke.md,
+            outlineWidth: tokens22__namespace.default.size.stroke.md,
             outlineStyle: "solid",
             backgroundColor: "core.surface.active",
             _focusVisible: {
               outlineStyle: "double",
-              outlineWidth: `calc(3 * ${tokens20__namespace.default.size.stroke.md})`
+              outlineWidth: `calc(3 * ${tokens22__namespace.default.size.stroke.md})`
               // space for double outline
             }
           }
@@ -9192,12 +9196,12 @@ var radioCardSlotRecipe = react.defineSlotRecipe({
           },
           _checked: {
             outlineColor: "outline.focus",
-            outlineWidth: tokens20__namespace.default.size.stroke.md,
+            outlineWidth: tokens22__namespace.default.size.stroke.md,
             outlineStyle: "solid",
             backgroundColor: "core.surface.active",
             _focusVisible: {
               outlineStyle: "double",
-              outlineWidth: `calc(3 * ${tokens20__namespace.default.size.stroke.md})`
+              outlineWidth: `calc(3 * ${tokens22__namespace.default.size.stroke.md})`
               // space for double outline
             }
           }
@@ -9662,7 +9666,7 @@ var switchSlotRecipe = react.defineSlotRecipe({
         backgroundColor: "brand.surface",
         _focusVisible: {
           outlineStyle: "double",
-          outlineWidth: `calc(3 * ${tokens20__namespace.default.size.stroke.md})`
+          outlineWidth: `calc(3 * ${tokens22__namespace.default.size.stroke.md})`
           // space for double outline
         }
       },
@@ -10038,28 +10042,28 @@ var borders = react.defineTokens.borders({
     value: "0"
   },
   sm: {
-    value: `${tokens20__namespace.default.size.stroke.sm} solid`
+    value: `${tokens22__namespace.default.size.stroke.sm} solid`
   },
   "sm-dashed": {
-    value: `${tokens20__namespace.default.size.stroke.sm} dashed`
+    value: `${tokens22__namespace.default.size.stroke.sm} dashed`
   },
   md: {
-    value: `${tokens20__namespace.default.size.stroke.md} solid`
+    value: `${tokens22__namespace.default.size.stroke.md} solid`
   },
   "md-dashed": {
-    value: `${tokens20__namespace.default.size.stroke.md} dashed`
+    value: `${tokens22__namespace.default.size.stroke.md} dashed`
   },
   lg: {
-    value: `${tokens20__namespace.default.size.stroke.lg} solid`
+    value: `${tokens22__namespace.default.size.stroke.lg} solid`
   },
   "lg-dashed": {
-    value: `${tokens20__namespace.default.size.stroke.lg} dashed`
+    value: `${tokens22__namespace.default.size.stroke.lg} dashed`
   }
 });
 var colors = react.defineTokens.colors({
-  ...aliasJson__default.default.color.alias,
-  ...paletteJson__default.default.color.palette,
-  linjetag: linjetagJson__default.default.color.linjetag
+  ...tokens4__default.default.color.alias.color.alias,
+  ...tokens4__default.default.color.palette.color.palette,
+  linjetag: tokens4__default.default.color.linjetag.color.linjetag
 });
 var cursor = react.defineTokens.cursor({
   button: {
@@ -10125,29 +10129,29 @@ var easings = react.defineTokens.easings({
   }
 });
 var fontSizes = react.defineTokens.fontSizes({
-  "2xs": { value: tokens20__namespace.default.size.font.xs.mobile },
-  xs: { value: tokens20__namespace.default.size.font.sm.mobile },
-  sm: { value: tokens20__namespace.default.size.font.md.mobile },
-  md: { value: tokens20__namespace.default.size.font.lg.mobile },
-  lg: { value: tokens20__namespace.default.size.font.xl.mobile },
-  xl: { value: tokens20__namespace.default.size.font.xxl.mobile },
-  "2xl": { value: tokens20__namespace.default.size.font.xl.desktop },
-  "3xl": { value: tokens20__namespace.default.size.font.xxl.desktop },
+  "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 },
   mobile: {
-    xs: { value: tokens20__namespace.default.size.font.xs.mobile },
-    sm: { value: tokens20__namespace.default.size.font.sm.mobile },
-    md: { value: tokens20__namespace.default.size.font.md.mobile },
-    lg: { value: tokens20__namespace.default.size.font.lg.mobile },
-    xl: { value: tokens20__namespace.default.size.font.xl.mobile },
-    xxl: { value: tokens20__namespace.default.size.font.xxl.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 }
   },
   desktop: {
-    xs: { value: tokens20__namespace.default.size.font.xs.desktop },
-    sm: { value: tokens20__namespace.default.size.font.sm.desktop },
-    md: { value: tokens20__namespace.default.size.font.md.desktop },
-    lg: { value: tokens20__namespace.default.size.font.lg.desktop },
-    xl: { value: tokens20__namespace.default.size.font.xl.desktop },
-    xxl: { value: tokens20__namespace.default.size.font.xxl.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 }
   }
 });
 var fontWeights = react.defineTokens.fontWeights({
@@ -10180,9 +10184,9 @@ var fontWeights = react.defineTokens.fontWeights({
   }
 });
 var fonts = react.defineTokens.fonts({
-  body: { value: `${tokens20__namespace.default.font.family.body}, arial, sans-serif` },
-  heading: { value: `${tokens20__namespace.default.font.family.heading}, arial, sans-serif` },
-  mono: { value: `${tokens20__namespace.default.font.family.monospace}, monospace` }
+  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` }
 });
 var letterSpacings = react.defineTokens.letterSpacings({
   tighter: {
@@ -10219,31 +10223,31 @@ var lineHeights = react.defineTokens.lineHeights({
   }
 });
 var radii2 = react.defineTokens.radii({
-  none: { value: tokens20__namespace.default.size["border-radius"].none },
-  xs: { value: tokens20__namespace.default.size["border-radius"].xs },
-  sm: { value: tokens20__namespace.default.size["border-radius"].sm },
-  md: { value: tokens20__namespace.default.size["border-radius"].md },
-  lg: { value: tokens20__namespace.default.size["border-radius"].lg },
-  xl: { value: tokens20__namespace.default.size["border-radius"].xl },
-  "2xl": { value: tokens20__namespace.default.size["border-radius"]["2xl"] },
+  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"] },
   round: { value: "50%" }
 });
 var spacing = react.defineTokens.spacing({
-  0: { value: tokens20__namespace.default.size.spacing["0"] },
-  0.5: { value: tokens20__namespace.default.size.spacing["0.5"] },
-  1: { value: tokens20__namespace.default.size.spacing["1"] },
-  1.5: { value: tokens20__namespace.default.size.spacing["1.5"] },
-  2: { value: tokens20__namespace.default.size.spacing["2"] },
-  3: { value: tokens20__namespace.default.size.spacing["3"] },
-  4: { value: tokens20__namespace.default.size.spacing["4"] },
-  5: { value: tokens20__namespace.default.size.spacing["5"] },
-  6: { value: tokens20__namespace.default.size.spacing["6"] },
-  7: { value: tokens20__namespace.default.size.spacing["7"] },
-  8: { value: tokens20__namespace.default.size.spacing["8"] },
-  9: { value: tokens20__namespace.default.size.spacing["9"] },
-  10: { value: tokens20__namespace.default.size.spacing["10"] },
-  11: { value: tokens20__namespace.default.size.spacing["11"] },
-  12: { value: tokens20__namespace.default.size.spacing["12"] }
+  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"] }
 });
 
 // src/theme/tokens/sizes.ts
@@ -10280,10 +10284,10 @@ var namedSizes = react.defineTokens.sizes({
 });
 var container = react.defineTokens.sizes({
   base: { value: 0 },
-  sm: { value: tokens20__namespace.default.size.breakpoint.sm },
-  md: { value: tokens20__namespace.default.size.breakpoint.md },
-  lg: { value: tokens20__namespace.default.size.breakpoint.lg },
-  xl: { value: tokens20__namespace.default.size.breakpoint.xl }
+  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 }
 });
 var sizes = {
   ...largeSizes,
@@ -10292,22 +10296,22 @@ var sizes = {
   container
 };
 var zIndex = react.defineTokens.zIndex({
-  hide: { value: tokens20__namespace.default.depth["z-index"].hide },
+  hide: { value: tokens22__namespace.default.depth["z-index"].hide },
   auto: { value: "auto" },
-  base: { value: tokens20__namespace.default.depth["z-index"].base },
-  docked: { value: tokens20__namespace.default.depth["z-index"].docked },
-  dropdown: { value: tokens20__namespace.default.depth["z-index"].dropdown },
-  sticky: { value: tokens20__namespace.default.depth["z-index"].sticky },
-  banner: { value: tokens20__namespace.default.depth["z-index"].banner },
-  overlay: { value: tokens20__namespace.default.depth["z-index"].overlay },
-  modal: { value: tokens20__namespace.default.depth["z-index"].modal },
-  popover: { value: tokens20__namespace.default.depth["z-index"].popover },
-  skipLink: { value: tokens20__namespace.default.depth["z-index"].skipLink },
-  toast: { value: tokens20__namespace.default.depth["z-index"].toast }
+  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 }
 });
 
 // src/theme/tokens/index.ts
-var tokens18 = {
+var tokens20 = {
   aspectRatios,
   animations,
   blurs,
@@ -10376,10 +10380,10 @@ var animationStyles = react.defineAnimationStyles({
 });
 var breakpoints = {
   base: "0px",
-  sm: tokens20__namespace.default.size.breakpoint.sm,
-  md: tokens20__namespace.default.size.breakpoint.md,
-  lg: tokens20__namespace.default.size.breakpoint.lg,
-  xl: tokens20__namespace.default.size.breakpoint.xl
+  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
 };
 
 // src/theme/tokens/config.ts
@@ -10669,85 +10673,85 @@ var textStyles = react.defineTextStyles({
   xxl: {
     value: {
       fontSize: [
-        tokens20__namespace.default.font.style.xxl["font-size"].mobile,
+        tokens22__namespace.default.font.style.xxl["font-size"].mobile,
         null,
         null,
-        tokens20__namespace.default.font.style.xxl["font-size"].desktop
+        tokens22__namespace.default.font.style.xxl["font-size"].desktop
       ],
-      fontFamily: tokens20__namespace.default.font.style.xxl["font-family"],
-      lineHeight: tokens20__namespace.default.font.style.xxl["line-height"]
+      fontFamily: tokens22__namespace.default.font.style.xxl["font-family"],
+      lineHeight: tokens22__namespace.default.font.style.xxl["line-height"]
     }
   },
   "xl-display": {
     value: {
       fontSize: [
-        tokens20__namespace.default.font.style["xl-display"]["font-size"].mobile,
+        tokens22__namespace.default.font.style["xl-display"]["font-size"].mobile,
         null,
         null,
-        tokens20__namespace.default.font.style["xl-display"]["font-size"].desktop
+        tokens22__namespace.default.font.style["xl-display"]["font-size"].desktop
       ],
-      fontFamily: tokens20__namespace.default.font.style["xl-display"]["font-family"],
-      lineHeight: tokens20__namespace.default.font.style["xl-display"]["line-height"]
+      fontFamily: tokens22__namespace.default.font.style["xl-display"]["font-family"],
+      lineHeight: tokens22__namespace.default.font.style["xl-display"]["line-height"]
     }
   },
   "xl-sans": {
     value: {
       fontSize: [
-        tokens20__namespace.default.font.style["xl-sans"]["font-size"].mobile,
+        tokens22__namespace.default.font.style["xl-sans"]["font-size"].mobile,
         null,
         null,
-        tokens20__namespace.default.font.style["xl-sans"]["font-size"].desktop
+        tokens22__namespace.default.font.style["xl-sans"]["font-size"].desktop
       ],
-      fontFamily: tokens20__namespace.default.font.style["xl-sans"]["font-family"],
-      lineHeight: tokens20__namespace.default.font.style["xl-sans"]["line-height"]
+      fontFamily: tokens22__namespace.default.font.style["xl-sans"]["font-family"],
+      lineHeight: tokens22__namespace.default.font.style["xl-sans"]["line-height"]
     }
   },
   lg: {
     value: {
       fontSize: [
-        tokens20__namespace.default.font.style.lg["font-size"].mobile,
+        tokens22__namespace.default.font.style.lg["font-size"].mobile,
         null,
         null,
-        tokens20__namespace.default.font.style.lg["font-size"].desktop
+        tokens22__namespace.default.font.style.lg["font-size"].desktop
       ],
-      fontFamily: tokens20__namespace.default.font.style.lg["font-family"],
-      lineHeight: tokens20__namespace.default.font.style.lg["line-height"]
+      fontFamily: tokens22__namespace.default.font.style.lg["font-family"],
+      lineHeight: tokens22__namespace.default.font.style.lg["line-height"]
     }
   },
   md: {
     value: {
       fontSize: [
-        tokens20__namespace.default.font.style.md["font-size"].mobile,
+        tokens22__namespace.default.font.style.md["font-size"].mobile,
         null,
         null,
-        tokens20__namespace.default.font.style.md["font-size"].desktop
+        tokens22__namespace.default.font.style.md["font-size"].desktop
       ],
-      fontFamily: tokens20__namespace.default.font.style.md["font-family"],
-      lineHeight: tokens20__namespace.default.font.style.md["line-height"]
+      fontFamily: tokens22__namespace.default.font.style.md["font-family"],
+      lineHeight: tokens22__namespace.default.font.style.md["line-height"]
     }
   },
   sm: {
     value: {
       fontSize: [
-        tokens20__namespace.default.font.style.sm["font-size"].mobile,
+        tokens22__namespace.default.font.style.sm["font-size"].mobile,
         null,
         null,
-        tokens20__namespace.default.font.style.sm["font-size"].desktop
+        tokens22__namespace.default.font.style.sm["font-size"].desktop
       ],
-      fontFamily: tokens20__namespace.default.font.style.sm["font-family"],
-      lineHeight: tokens20__namespace.default.font.style.sm["line-height"]
+      fontFamily: tokens22__namespace.default.font.style.sm["font-family"],
+      lineHeight: tokens22__namespace.default.font.style.sm["line-height"]
     }
   },
   xs: {
     value: {
       fontSize: [
-        tokens20__namespace.default.font.style.xs["font-size"].mobile,
+        tokens22__namespace.default.font.style.xs["font-size"].mobile,
         null,
         null,
-        tokens20__namespace.default.font.style.xs["font-size"].desktop
+        tokens22__namespace.default.font.style.xs["font-size"].desktop
       ],
-      fontFamily: tokens20__namespace.default.font.style.xs["font-family"],
-      lineHeight: tokens20__namespace.default.font.style.xs["line-height"]
+      fontFamily: tokens22__namespace.default.font.style.xs["font-family"],
+      lineHeight: tokens22__namespace.default.font.style.xs["line-height"]
     }
   }
 });
@@ -10758,7 +10762,7 @@ var generateTheme = (brand) => {
     theme: {
       breakpoints,
       keyframes,
-      tokens: tokens18,
+      tokens: tokens20,
       semanticTokens: semanticTokens[brand],
       recipes,
       slotRecipes,
@@ -10995,7 +10999,7 @@ Object.defineProperty(exports, "Time", {
   enumerable: true,
   get: function () { return date.Time; }
 });
-exports.tokens = tokens20__namespace;
+exports.tokens = tokens22__namespace;
 exports.Accordion = Accordion;
 exports.AccordionItem = AccordionItem;
 exports.AccordionItemContent = AccordionItemContent;