@vygruppen/spor-react 5.2.0 → 5.4.0

package/dist/{chunk-HOS74XL2.mjs → chunk-S2IJI3LY.mjs}

@@ -16,6 +16,7 @@ import { useDateFieldState, useDatePickerState, useOverlayTriggerState, Item, us
 export { Item, Section } from 'react-stately';
 import { useSwipeable } from 'react-swipeable';
 import { Global, keyframes } from '@emotion/react';
+import deepmerge from 'deepmerge';
 import { cssVar as cssVar$1, calc as calc$1, mode, getColor, anatomy as anatomy$1, orient, transparentize, generateStripe, randomColor, isDark } from '@chakra-ui/theme-tools';
 
 var __create = Object.create;
@@ -899,8 +900,8 @@ function useTranslation() {
   };
   return { t: t2, language };
 }
-function createTexts(texts24) {
-  return texts24;
+function createTexts(texts25) {
+  return texts25;
 }
 var hydrating = true;
 function useHydrated() {
@@ -2522,7 +2523,10 @@ var CardSelect = forwardRef(
       triggerRef
     );
     const { buttonProps } = useButton(triggerProps, triggerRef);
-    const styles3 = useMultiStyleConfig("CardSelect", { variant, size: size2 });
+    const styles3 = useMultiStyleConfig("CardSelect", {
+      variant,
+      size: size2
+    });
     useForceRerender(state2.isOpen);
     const ChevronIcon = size2 === "sm" ? DropdownDownFill18Icon : DropdownDownFill24Icon;
     return /* @__PURE__ */ React69__default.createElement(Box, { ...props }, /* @__PURE__ */ React69__default.createElement(
@@ -2932,6 +2936,7 @@ function InfoSelect({
   value,
   isLabelSrOnly,
   defaultValue,
+  variant = "base",
   ...props
 }) {
   const renamedProps = {
@@ -2948,9 +2953,12 @@ function InfoSelect({
     state2,
     triggerRef
   );
+  const stateStyle = "completed";
   const styles3 = useMultiStyleConfig("InfoSelect", {
     isOpen: state2.isOpen,
-    isLabelSrOnly
+    isLabelSrOnly,
+    variant,
+    stateStyle
   });
   const { buttonProps } = useButton(triggerProps, triggerRef);
   const { t: t2 } = useTranslation();
@@ -3418,7 +3426,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-IUVBFVKP.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-HHNSD6TX.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4158,13 +4166,60 @@ var WizardPopover = ({
 }) => {
   return /* @__PURE__ */ React69.createElement(DarkMode, null, /* @__PURE__ */ React69.createElement(Popover, { size: "lg" }, /* @__PURE__ */ React69.createElement(PopoverTrigger, null, triggerElement), /* @__PURE__ */ React69.createElement(PopoverContent, null, /* @__PURE__ */ React69.createElement(PopoverArrow, null), withCloseButton && /* @__PURE__ */ React69.createElement(PopoverCloseButton, null), /* @__PURE__ */ React69.createElement(PopoverWizardBody, null, children))));
 };
+var ProgressDot = ({ isActive }) => {
+  const style = useMultiStyleConfig("ProgressIndicator");
+  return /* @__PURE__ */ React69__default.createElement(
+    Box,
+    {
+      as: "svg",
+      display: "block",
+      __css: style.progressDot,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 100 100",
+      "aria-current": isActive ? "step" : void 0
+    },
+    /* @__PURE__ */ React69__default.createElement(Box, { as: "circle", cx: "50", cy: "50", r: "50" })
+  );
+};
+
+// src/progress-indicator/ProgressIndicator.tsx
+var ProgressIndicator = ({
+  numberOfSteps,
+  activeStep
+}) => {
+  const { t: t2 } = useTranslation();
+  const style = useMultiStyleConfig("ProgressIndicator");
+  return /* @__PURE__ */ React69__default.createElement(
+    Box,
+    {
+      __css: style.root,
+      role: "progressbar",
+      "aria-valuemin": 1,
+      "aria-valuemax": numberOfSteps,
+      "aria-valuenow": activeStep,
+      "aria-valuetext": t2(texts21.stepsOf(activeStep, numberOfSteps))
+    },
+    /* @__PURE__ */ React69__default.createElement(Box, { __css: style.container }, Array.from({ length: numberOfSteps }, (_, i) => /* @__PURE__ */ React69__default.createElement(ProgressDot, { "aria-value": i + 1, isActive: activeStep === i + 1 })))
+  );
+};
+var texts21 = createTexts({
+  stepsOf: (activeStep, numberOfSteps) => ({
+    nb: `Steg ${activeStep} av ${numberOfSteps}`,
+    nn: `Steg ${activeStep} av ${numberOfSteps}`,
+    sv: `Steg ${activeStep} av ${numberOfSteps}`,
+    en: `Step ${activeStep} of ${numberOfSteps}`
+  })
+});
 var SporProvider = ({
   theme: theme3 = theme,
   language = "nb" /* NorwegianBokmal */,
+  brand = "VyDigital" /* VyDigital */,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ React69__default.createElement(LanguageProvider, { language }, /* @__PURE__ */ React69__default.createElement(ChakraProvider, { theme: theme3, ...props }, /* @__PURE__ */ React69__default.createElement(Global, { styles: fontFaces }), children));
+  const brandCustomizations = brandTheme[brand] ?? {};
+  const extendedTheme = deepmerge(theme3, brandCustomizations);
+  return /* @__PURE__ */ React69__default.createElement(LanguageProvider, { language }, /* @__PURE__ */ React69__default.createElement(ChakraProvider, { theme: extendedTheme, ...props }, /* @__PURE__ */ React69__default.createElement(Global, { styles: fontFaces }), children));
 };
 var StepperContext = React69__default.createContext(null);
 var StepperProvider = ({
@@ -4216,7 +4271,7 @@ var Stepper = ({
     /* @__PURE__ */ React69__default.createElement(Box, { __css: style.container }, /* @__PURE__ */ React69__default.createElement(Box, { __css: style.innerContainer }, /* @__PURE__ */ React69__default.createElement(HStack, null, activeStep > 1 && /* @__PURE__ */ React69__default.createElement(
       IconButton,
       {
-        "aria-label": t2(texts21.back),
+        "aria-label": t2(texts22.back),
         icon: /* @__PURE__ */ React69__default.createElement(DropdownLeftFill24Icon, null),
         variant: "ghost",
         size: "sm",
@@ -4226,7 +4281,7 @@ var Stepper = ({
     ), /* @__PURE__ */ React69__default.createElement(
       SimplePopover,
       {
-        triggerElement: /* @__PURE__ */ React69__default.createElement(Box, { as: "button", __css: style.stepCounter }, t2(texts21.stepsOf(activeStep, numberOfSteps))),
+        triggerElement: /* @__PURE__ */ React69__default.createElement(Box, { as: "button", __css: style.stepCounter }, t2(texts22.stepsOf(activeStep, numberOfSteps))),
         borderRadius: "xs"
       },
       steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(
@@ -4241,7 +4296,7 @@ var Stepper = ({
     )), title && /* @__PURE__ */ React69__default.createElement(Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__default.createElement(Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
   ));
 };
-var texts21 = createTexts({
+var texts22 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,
     nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -6135,16 +6190,16 @@ Object.assign({}, space, layout, flexbox, grid, position);
 function defineStyle(styles3) {
   return styles3;
 }
-function defineStyleConfig(config37) {
-  return config37;
+function defineStyleConfig(config38) {
+  return config38;
 }
-function createMultiStyleConfigHelpers(parts14) {
+function createMultiStyleConfigHelpers(parts15) {
   return {
-    definePartsStyle(config37) {
-      return config37;
+    definePartsStyle(config38) {
+      return config38;
     },
-    defineMultiStyleConfig(config37) {
-      return { parts: parts14, ...config37 };
+    defineMultiStyleConfig(config38) {
+      return { parts: parts15, ...config38 };
     }
   };
 }
@@ -6307,7 +6362,7 @@ function anatomy(name, map = {}) {
       "[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?"
     );
   }
-  function parts14(...values) {
+  function parts15(...values) {
     assert();
     for (const part of values) {
       map[part] = toPart(part);
@@ -6347,7 +6402,7 @@ function anatomy(name, map = {}) {
   }
   const __type = {};
   return {
-    parts: parts14,
+    parts: parts15,
     toPart,
     extend,
     selectors,
@@ -9426,6 +9481,7 @@ __export(components_exports, {
   MediaControllerButton: () => media_controller_button_default,
   Modal: () => modal_default,
   Popover: () => popover_default,
+  ProgressIndicator: () => progress_indicator_default,
   Radio: () => radio_default,
   Select: () => select_default,
   Skeleton: () => skeleton_default,
@@ -10417,6 +10473,92 @@ var getColorSchemeActiveProps = (props) => {
       };
   }
 };
+function baseBackground(state2, props) {
+  switch (state2) {
+    case "active":
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.100")(props)
+      };
+    case "selected":
+      return {
+        backgroundColor: mode("pine", "coralGreen")(props)
+      };
+    case "disabled":
+      return {
+        backgroundColor: mode("silver", "whiteAlpha.100")(props)
+      };
+    default:
+      return {
+        backgroundColor: "transparent"
+      };
+  }
+}
+function ghostBackground(state2, props) {
+  switch (state2) {
+    case "hover": {
+      return {
+        backgroundColor: mode("seaMist", "whiteAlpha.100")(props)
+      };
+    }
+    case "active":
+      return {
+        backgroundColor: mode("seaMist", "whiteAlpha.200")(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: "transparent"
+      };
+    case "selected": {
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.200")(props)
+      };
+    }
+    case "default":
+    default:
+      return {
+        backgroundColor: "transparent"
+      };
+  }
+}
+function floatingBackground(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        backgroundColor: mode("mint", "pine")(props)
+      };
+    case "active":
+      return {
+        backgroundColor: mode(
+          "mint",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 30%)`
+        )(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 20%)`
+        )(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`
+        )(props)
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`
+        )(props)
+      };
+  }
+}
+
+// src/theme/components/card-select.ts
 var parts2 = anatomy("card-select").parts("trigger", "card");
 var helpers3 = createMultiStyleConfigHelpers(parts2.keys);
 var config8 = helpers3.defineMultiStyleConfig({
@@ -10425,9 +10567,6 @@ var config8 = helpers3.defineMultiStyleConfig({
       appearance: "none",
       display: "flex",
       alignItems: "center",
-      _expanded: {
-        backgroundColor: mode("mint", "night")(props)
-      },
       ...focusVisible({
         notFocus: {},
         focus: {
@@ -10442,21 +10581,12 @@ var config8 = helpers3.defineMultiStyleConfig({
     card: {
       borderRadius: "sm",
       boxShadow: "md",
-      padding: 3
+      padding: 3,
+      color: mode("darkGrey", "white")(props)
     }
   }),
   variants: {
-    ghost: (props) => ({
-      trigger: {
-        _hover: {
-          backgroundColor: mode("seaMist", "pine")(props)
-        },
-        _active: {
-          backgroundColor: mode("mint", "whiteAlpha.200")(props)
-        }
-      }
-    }),
-    outline: (props) => ({
+    base: (props) => ({
       trigger: {
         boxShadow: getBoxShadowString({
           borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
@@ -10478,19 +10608,20 @@ var config8 = helpers3.defineMultiStyleConfig({
           })
         },
         _active: {
-          backgroundColor: mode("mint", "whiteAlpha.200")(props),
+          ...baseBackground("active", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("darkGrey", "whiteAlpha.400")(props),
             borderWidth: 1
           })
         },
         _expanded: {
+          ...baseBackground("active", props),
           _hover: {
-            backgroundColor: mode("seaMist", "todo")(props),
+            ...baseBackground("active", props),
             boxShadow: "none"
           },
           _active: {
-            backgroundColor: mode("mint", "todo")(props),
+            ...baseBackground("active", props),
             boxShadow: getBoxShadowString({
               borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
               borderWidth: 1
@@ -10499,13 +10630,26 @@ var config8 = helpers3.defineMultiStyleConfig({
         }
       }
     }),
-    card: (props) => ({
+    ghost: (props) => ({
+      trigger: {
+        _hover: {
+          ...ghostBackground("hover", props)
+        },
+        _active: {
+          ...ghostBackground("active", props)
+        },
+        _expanded: {
+          ...ghostBackground("selected", props)
+        }
+      }
+    }),
+    floating: (props) => ({
       trigger: {
-        backgroundColor: mode("transparent", "whiteAlpha.100")(props),
+        ...floatingBackground("default", props),
         boxShadow: "sm",
         transition: "all .1s ease-out",
         _hover: {
-          backgroundColor: mode("seaMist", "pine")(props),
+          ...floatingBackground("hover", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("silver", "whiteAlpha.400")(props),
             borderWidth: 1,
@@ -10513,7 +10657,7 @@ var config8 = helpers3.defineMultiStyleConfig({
           })
         },
         _active: {
-          backgroundColor: mode("mint", "whiteAlpha.100")(props),
+          ...floatingBackground("active", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("silver", "whiteAlpha.400")(props),
             borderWidth: mode(0, 1)(props),
@@ -10521,6 +10665,7 @@ var config8 = helpers3.defineMultiStyleConfig({
           })
         },
         _expanded: {
+          ...floatingBackground("active", props),
           _hover: {
             boxShadow: getBoxShadowString({
               borderColor: "darkGrey",
@@ -10528,7 +10673,7 @@ var config8 = helpers3.defineMultiStyleConfig({
             })
           },
           _active: {
-            backgroundColor: mode("mint", "whiteAlpha.200")(props),
+            ...floatingBackground("active", props),
             boxShadow: "none"
           }
         }
@@ -11536,22 +11681,30 @@ function baseBorder(state2, props) {
       };
   }
 }
-function baseBackground(state2, props) {
+function floatingBorder(state2, props) {
   switch (state2) {
-    case "active":
+    case "hover":
       return {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props)
+        boxShadow: getBoxShadowString({
+          borderColor: mode("grey.300", "white")(props)
+        })
       };
     case "selected":
+    case "focus":
       return {
-        backgroundColor: "pine"
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
       };
-    case "disabled":
+    case "active":
+    case "default":
+    default:
       return {
-        backgroundColor: mode("silver", "whiteAlpha.100")(props)
+        boxShadow: getBoxShadowString({
+          borderColor: mode("grey.200", "whiteAlpha.400")(props)
+        })
       };
-    default:
-      return {};
   }
 }
 
@@ -11604,7 +11757,6 @@ var config18 = helpers10.defineMultiStyleConfig({
         ...baseBorder("focus", props)
       },
       _expanded: {
-        ...baseBackground("active", props),
         ...baseBorder("focus", props)
       },
       _invalid: {
@@ -11623,7 +11775,36 @@ var config18 = helpers10.defineMultiStyleConfig({
       }
     },
     arrowIcon: {}
-  })
+  }),
+  variants: {
+    base: (props) => ({}),
+    floating: (props) => ({
+      button: {
+        ...floatingBackground("default", props),
+        ...floatingBorder("default", props),
+        _hover: {
+          ...floatingBorder("hover", props),
+          ...floatingBackground("hover", props)
+        },
+        ...focusVisible({
+          focus: {
+            ...floatingBorder("focus", props),
+            outline: "none"
+          },
+          notFocus: {
+            ...floatingBorder("default", props)
+          }
+        }),
+        _active: {
+          ...floatingBorder("active", props),
+          ...floatingBackground("active", props)
+        }
+      }
+    })
+  },
+  defaultProps: {
+    variant: "base"
+  }
 });
 var info_select_default = config18;
 var parts7 = anatomy$1("travel-tag").parts(
@@ -12277,7 +12458,7 @@ var config24 = helpers15.defineMultiStyleConfig({
       // avoiding extra div by blending a transparent color into darkGrey for dark mode
       backgroundColor: mode(
         "white",
-        `color-mix(in srgb, ${colors.darkGrey}, ${colors.white} 10%)`
+        `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`
       )(props),
       boxShadow: "sm",
       overflowY: "auto",
@@ -12294,21 +12475,18 @@ var config24 = helpers15.defineMultiStyleConfig({
       borderRadius: "sm",
       color: mode("darkGrey", "white")(props),
       cursor: "pointer",
-      _hover: {
-        backgroundColor: mode("seaMist", "pine")(props),
-        outline: "none"
-      },
+      outline: "none",
       _active: {
-        backgroundColor: mode("mint", "pine")(props),
-        outline: "none"
+        ...ghostBackground("active", props)
       },
       _focus: {
-        outline: "none",
-        backgroundColor: mode("seaMist", "pine")(props)
+        ...ghostBackground("focus", props)
+      },
+      _hover: {
+        ...ghostBackground("hover", props)
       },
       _selected: {
-        ...baseBackground("selected", props),
-        color: "white"
+        ...ghostBackground("selected", props)
       }
     },
     label: {},
@@ -12597,8 +12775,46 @@ var config27 = helpers18.defineMultiStyleConfig({
   }
 });
 var popover_default = config27;
-var helpers19 = createMultiStyleConfigHelpers$1(radioAnatomy.keys);
+var parts12 = anatomy$1("progress-indicator").parts(
+  "root",
+  "container",
+  "progressDot"
+);
+var helpers19 = createMultiStyleConfigHelpers$1(parts12.keys);
 var config28 = helpers19.defineMultiStyleConfig({
+  baseStyle: (props) => ({
+    root: {
+      width: "100%"
+    },
+    container: {
+      display: "flex",
+      alignItems: "center",
+      gap: 1,
+      justifyContent: ["space-between", "center"]
+    },
+    progressDot: {
+      height: 1,
+      width: 1,
+      "&[aria-current='step']": {
+        circle: {
+          fill: mode("pine", "coralGreen")(props)
+        }
+      },
+      circle: {
+        fill: mode("blackAlpha.400", "whiteAlpha.400")(props)
+      }
+    }
+  }),
+  variants: {
+    base: (props) => ({})
+  },
+  defaultProps: {
+    variant: "base"
+  }
+});
+var progress_indicator_default = config28;
+var helpers20 = createMultiStyleConfigHelpers$1(radioAnatomy.keys);
+var config29 = helpers20.defineMultiStyleConfig({
   baseStyle: {
     container: {
       _hover: {
@@ -12654,10 +12870,10 @@ var config28 = helpers19.defineMultiStyleConfig({
     }
   }
 });
-var radio_default = config28;
-var parts12 = selectAnatomy.extend("root");
-var helpers20 = createMultiStyleConfigHelpers$1(parts12.keys);
-var config29 = helpers20.defineMultiStyleConfig({
+var radio_default = config29;
+var parts13 = selectAnatomy.extend("root");
+var helpers21 = createMultiStyleConfigHelpers$1(parts13.keys);
+var config30 = helpers21.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       width: "100%",
@@ -12699,14 +12915,14 @@ var config29 = helpers20.defineMultiStyleConfig({
     }
   })
 });
-var select_default = config29;
+var select_default = config30;
 var fade = (startColor, endColor) => keyframes({
   from: { borderColor: startColor, background: startColor },
   to: { borderColor: endColor, background: endColor }
 });
 var $startColor2 = cssVar$1("skeleton-start-color");
 var $endColor2 = cssVar$1("skeleton-end-color");
-var config30 = defineStyleConfig$1({
+var config31 = defineStyleConfig$1({
   baseStyle: (props) => {
     const defaultStartColor = mode("blackAlpha.300", "whiteAlpha.300")(props);
     const defaultEndColor = mode("blackAlpha.100", "whiteAlpha.100")(props);
@@ -12729,8 +12945,8 @@ var config30 = defineStyleConfig$1({
     };
   }
 });
-var skeleton_default = config30;
-var parts13 = anatomy$1("stepper").parts(
+var skeleton_default = config31;
+var parts14 = anatomy$1("stepper").parts(
   "root",
   "container",
   "innerContainer",
@@ -12743,8 +12959,8 @@ var parts13 = anatomy$1("stepper").parts(
   "stepTitle",
   "closeButton"
 );
-var helpers21 = createMultiStyleConfigHelpers$1(parts13.keys);
-var config31 = helpers21.defineMultiStyleConfig({
+var helpers22 = createMultiStyleConfigHelpers$1(parts14.keys);
+var config32 = helpers22.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       display: "flex",
@@ -12806,14 +13022,14 @@ var config31 = helpers21.defineMultiStyleConfig({
     variant: "base"
   }
 });
-var stepper_default = config31;
+var stepper_default = config32;
 var $width2 = cssVar$1("switch-track-width");
 var $height3 = cssVar$1("switch-track-height");
 var $diff2 = cssVar$1("switch-track-diff");
 var diffValue2 = calc$1.subtract($width2, $height3);
 var $translateX2 = cssVar$1("switch-thumb-x");
-var helpers22 = createMultiStyleConfigHelpers$1(switchAnatomy.keys);
-var config32 = helpers22.defineMultiStyleConfig({
+var helpers23 = createMultiStyleConfigHelpers$1(switchAnatomy.keys);
+var config33 = helpers23.defineMultiStyleConfig({
   baseStyle: {
     container: {
       [$diff2.variable]: diffValue2,
@@ -13019,14 +13235,14 @@ var config32 = helpers22.defineMultiStyleConfig({
     size: "md"
   }
 });
-var switch_default = config32;
-var helpers23 = createMultiStyleConfigHelpers$1(tableAnatomy.keys);
+var switch_default = config33;
+var helpers24 = createMultiStyleConfigHelpers$1(tableAnatomy.keys);
 var numericStyles2 = {
   "&[data-is-numeric=true]": {
     textAlign: "end"
   }
 };
-var config33 = helpers23.defineMultiStyleConfig({
+var config34 = helpers24.defineMultiStyleConfig({
   baseStyle: {
     table: {
       borderCollapse: "collapse",
@@ -13174,9 +13390,9 @@ var config33 = helpers23.defineMultiStyleConfig({
     colorScheme: "grey"
   }
 });
-var table_default = config33;
-var helpers24 = createMultiStyleConfigHelpers$1(tabsAnatomy.keys);
-var config34 = helpers24.defineMultiStyleConfig({
+var table_default = config34;
+var helpers25 = createMultiStyleConfigHelpers$1(tabsAnatomy.keys);
+var config35 = helpers25.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       display: "flex",
@@ -13279,7 +13495,7 @@ var config34 = helpers24.defineMultiStyleConfig({
     variant: "round"
   }
 });
-var tabs_default = config34;
+var tabs_default = config35;
 var getTabColorSchemeProps = (props) => {
   switch (props.colorScheme) {
     case "dark":
@@ -13531,7 +13747,7 @@ var getTablistColorSchemeProps = (props) => {
       return {};
   }
 };
-var config35 = defineStyleConfig$1({
+var config36 = defineStyleConfig$1({
   baseStyle: (props) => ({
     ...input_default.baseStyle(props).field,
     minHeight: "5rem",
@@ -13548,8 +13764,8 @@ var config35 = defineStyleConfig$1({
     }
   })
 });
-var textarea_default = config35;
-var config36 = defineStyleConfig$1({
+var textarea_default = config36;
+var config37 = defineStyleConfig$1({
   baseStyle: {
     display: "flex",
     alignItems: "center",
@@ -13573,7 +13789,7 @@ var config36 = defineStyleConfig$1({
     }
   }
 });
-var toast_default = config36;
+var toast_default = config37;
 var fontFaces = `
 @font-face {
   font-family: ${tokens10__default.asset.font["vy-sans"]["light"].name};
@@ -13639,6 +13855,11 @@ var fontFaces = `
 `;
 
 // src/theme/index.ts
+var Brand = /* @__PURE__ */ ((Brand2) => {
+  Brand2["VyDigital"] = "VyDigital";
+  Brand2["VyUtvikling"] = "VyUtvikling";
+  return Brand2;
+})(Brand || {});
 var theme = {
   ...theme2,
   ...foundations_exports,
@@ -13647,6 +13868,18 @@ var theme = {
     ...components_exports
   }
 };
+var brandTheme = {
+  ["VyDigital" /* VyDigital */]: {
+    colors: {
+      accent: colors.night
+    }
+  },
+  ["VyUtvikling" /* VyUtvikling */]: {
+    colors: {
+      accent: colors.darkGrey
+    }
+  }
+};
 var BaseToast = ({ children, variant, id }) => {
   const styles3 = useStyleConfig("Toast", { variant });
   return /* @__PURE__ */ React69__default.createElement(Flex, { sx: styles3, id }, /* @__PURE__ */ React69__default.createElement(ToastIcon, { variant }), children);
@@ -13658,7 +13891,7 @@ var ToastIcon = ({ variant }) => {
     Icon,
     {
       flexShrink: 0,
-      "aria-label": t2(texts22[variant]),
+      "aria-label": t2(texts23[variant]),
       marginRight: 1,
       marginY: 1.5,
       color: "darkGrey"
@@ -13675,7 +13908,7 @@ var getIcon3 = (variant) => {
       return ErrorOutline24Icon;
   }
 };
-var texts22 = createTexts({
+var texts23 = createTexts({
   info: {
     nb: "Informasjon",
     nn: "Informasjon",
@@ -13719,13 +13952,13 @@ var ClosableToast = ({
     {
       sx: styles3.dismissButton,
       variant: "ghost",
-      "aria-label": t2(texts23.dismiss),
+      "aria-label": t2(texts24.dismiss),
       icon: /* @__PURE__ */ React69__default.createElement(CloseFill18Icon, null),
       onClick: onClose
     }
   ));
 };
-var texts23 = createTexts({
+var texts24 = createTexts({
   dismiss: {
     nb: "Lukk",
     nn: "Lukk",
@@ -13869,4 +14102,4 @@ function useSize(subject) {
   return size2;
 }
 
-export { Accordion, AttachedInputs, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, createTexts, fontFaces, theme, useSize, useToast, useTranslation };
+export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, SearchInput, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, brandTheme, createTexts, fontFaces, theme, useSize, useToast, useTranslation };