@vygruppen/spor-react 5.2.0 → 5.4.0

package/dist/index.js

@@ -13,8 +13,11 @@ var tokens10 = require('@vygruppen/spor-design-tokens');
 var awesomePhonenumber = require('awesome-phonenumber');
 var reactSwipeable = require('react-swipeable');
 var react$1 = require('@emotion/react');
+var deepmerge = require('deepmerge');
 var themeTools = require('@chakra-ui/theme-tools');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -35,6 +38,7 @@ function _interopNamespace(e) {
 
 var React69__namespace = /*#__PURE__*/_interopNamespace(React69);
 var tokens10__namespace = /*#__PURE__*/_interopNamespace(tokens10);
+var deepmerge__default = /*#__PURE__*/_interopDefault(deepmerge);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -233,8 +237,8 @@ function useTranslation() {
   };
   return { t: t2, language };
 }
-function createTexts(texts25) {
-  return texts25;
+function createTexts(texts26) {
+  return texts26;
 }
 exports.Language = void 0; var LanguageContext;
 var init_i18n = __esm({
@@ -2265,7 +2269,10 @@ var init_CardSelect = __esm({
           triggerRef
         );
         const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
-        const styles3 = react.useMultiStyleConfig("CardSelect", { variant, size: size2 });
+        const styles3 = react.useMultiStyleConfig("CardSelect", {
+          variant,
+          size: size2
+        });
         useForceRerender(state2.isOpen);
         const ChevronIcon = size2 === "sm" ? sporIconReact.DropdownDownFill18Icon : sporIconReact.DropdownDownFill24Icon;
         return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { ...props }, /* @__PURE__ */ React69__namespace.default.createElement(
@@ -3457,6 +3464,7 @@ function InfoSelect({
   value,
   isLabelSrOnly,
   defaultValue,
+  variant = "base",
   ...props
 }) {
   const renamedProps = {
@@ -3473,9 +3481,12 @@ function InfoSelect({
     state2,
     triggerRef
   );
+  const stateStyle = "completed";
   const styles3 = react.useMultiStyleConfig("InfoSelect", {
     isOpen: state2.isOpen,
-    isLabelSrOnly
+    isLabelSrOnly,
+    variant,
+    stateStyle
   });
   const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
   const { t: t2 } = useTranslation();
@@ -4992,6 +5003,68 @@ var init_popover = __esm({
     init_WizardPopover();
   }
 });
+var ProgressDot;
+var init_ProgressDot = __esm({
+  "src/progress-indicator/ProgressDot.tsx"() {
+    init_src();
+    ProgressDot = ({ isActive }) => {
+      const style = react.useMultiStyleConfig("ProgressIndicator");
+      return /* @__PURE__ */ React69__namespace.default.createElement(
+        react.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__namespace.default.createElement(react.Box, { as: "circle", cx: "50", cy: "50", r: "50" })
+      );
+    };
+  }
+});
+exports.ProgressIndicator = void 0; var texts22;
+var init_ProgressIndicator = __esm({
+  "src/progress-indicator/ProgressIndicator.tsx"() {
+    init_src();
+    init_ProgressDot();
+    exports.ProgressIndicator = ({
+      numberOfSteps,
+      activeStep
+    }) => {
+      const { t: t2 } = useTranslation();
+      const style = react.useMultiStyleConfig("ProgressIndicator");
+      return /* @__PURE__ */ React69__namespace.default.createElement(
+        react.Box,
+        {
+          __css: style.root,
+          role: "progressbar",
+          "aria-valuemin": 1,
+          "aria-valuemax": numberOfSteps,
+          "aria-valuenow": activeStep,
+          "aria-valuetext": t2(texts22.stepsOf(activeStep, numberOfSteps))
+        },
+        /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: style.container }, Array.from({ length: numberOfSteps }, (_, i) => /* @__PURE__ */ React69__namespace.default.createElement(ProgressDot, { "aria-value": i + 1, isActive: activeStep === i + 1 })))
+      );
+    };
+    texts22 = createTexts({
+      stepsOf: (activeStep, numberOfSteps) => ({
+        nb: `Steg ${activeStep} av ${numberOfSteps}`,
+        nn: `Steg ${activeStep} av ${numberOfSteps}`,
+        sv: `Steg ${activeStep} av ${numberOfSteps}`,
+        en: `Step ${activeStep} of ${numberOfSteps}`
+      })
+    });
+  }
+});
+
+// src/progress-indicator/index.tsx
+var init_progress_indicator = __esm({
+  "src/progress-indicator/index.tsx"() {
+    init_ProgressIndicator();
+  }
+});
 exports.SporProvider = void 0;
 var init_SporProvider = __esm({
   "src/provider/SporProvider.tsx"() {
@@ -5000,10 +5073,13 @@ var init_SporProvider = __esm({
     exports.SporProvider = ({
       theme: theme3 = exports.theme,
       language = "nb" /* NorwegianBokmal */,
+      brand = "VyDigital" /* VyDigital */,
       children,
       ...props
     }) => {
-      return /* @__PURE__ */ React69__namespace.default.createElement(LanguageProvider, { language }, /* @__PURE__ */ React69__namespace.default.createElement(react.ChakraProvider, { theme: theme3, ...props }, /* @__PURE__ */ React69__namespace.default.createElement(react$1.Global, { styles: exports.fontFaces }), children));
+      const brandCustomizations = exports.brandTheme[brand] ?? {};
+      const extendedTheme = deepmerge__default.default(theme3, brandCustomizations);
+      return /* @__PURE__ */ React69__namespace.default.createElement(LanguageProvider, { language }, /* @__PURE__ */ React69__namespace.default.createElement(react.ChakraProvider, { theme: extendedTheme, ...props }, /* @__PURE__ */ React69__namespace.default.createElement(react$1.Global, { styles: exports.fontFaces }), children));
     };
   }
 });
@@ -5044,7 +5120,7 @@ var init_StepperContext = __esm({
     };
   }
 });
-exports.Stepper = void 0; var texts22;
+exports.Stepper = void 0; var texts23;
 var init_Stepper = __esm({
   "src/stepper/Stepper.tsx"() {
     init_stepper();
@@ -5073,7 +5149,7 @@ var init_Stepper = __esm({
         /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: style.container }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: style.innerContainer }, /* @__PURE__ */ React69__namespace.default.createElement(react.HStack, null, activeStep > 1 && /* @__PURE__ */ React69__namespace.default.createElement(
           exports.IconButton,
           {
-            "aria-label": t2(texts22.back),
+            "aria-label": t2(texts23.back),
             icon: /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.DropdownLeftFill24Icon, null),
             variant: "ghost",
             size: "sm",
@@ -5083,7 +5159,7 @@ var init_Stepper = __esm({
         ), /* @__PURE__ */ React69__namespace.default.createElement(
           exports.SimplePopover,
           {
-            triggerElement: /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "button", __css: style.stepCounter }, t2(texts22.stepsOf(activeStep, numberOfSteps))),
+            triggerElement: /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "button", __css: style.stepCounter }, t2(texts23.stepsOf(activeStep, numberOfSteps))),
             borderRadius: "xs"
           },
           steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(
@@ -5098,7 +5174,7 @@ var init_Stepper = __esm({
         )), title && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(exports.StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
       ));
     };
-    texts22 = createTexts({
+    texts23 = createTexts({
       stepsOf: (activeStep, numberOfSteps) => ({
         nb: `Steg ${activeStep} av ${numberOfSteps}`,
         nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -5958,16 +6034,16 @@ function defineCssVars(scope, keys2) {
 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 };
     }
   };
 }
@@ -7290,7 +7366,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);
@@ -7330,7 +7406,7 @@ function anatomy(name, map = {}) {
   }
   const __type = {};
   return {
-    parts: parts14,
+    parts: parts15,
     toPart,
     extend,
     selectors,
@@ -11852,6 +11928,95 @@ var init_card2 = __esm({
     };
   }
 });
+function baseBackground(state2, props) {
+  switch (state2) {
+    case "active":
+      return {
+        backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props)
+      };
+    case "selected":
+      return {
+        backgroundColor: themeTools.mode("pine", "coralGreen")(props)
+      };
+    case "disabled":
+      return {
+        backgroundColor: themeTools.mode("silver", "whiteAlpha.100")(props)
+      };
+    default:
+      return {
+        backgroundColor: "transparent"
+      };
+  }
+}
+function ghostBackground(state2, props) {
+  switch (state2) {
+    case "hover": {
+      return {
+        backgroundColor: themeTools.mode("seaMist", "whiteAlpha.100")(props)
+      };
+    }
+    case "active":
+      return {
+        backgroundColor: themeTools.mode("seaMist", "whiteAlpha.200")(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: "transparent"
+      };
+    case "selected": {
+      return {
+        backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
+      };
+    }
+    case "default":
+    default:
+      return {
+        backgroundColor: "transparent"
+      };
+  }
+}
+function floatingBackground(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        backgroundColor: themeTools.mode("mint", "pine")(props)
+      };
+    case "active":
+      return {
+        backgroundColor: themeTools.mode(
+          "mint",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 30%)`
+        )(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: themeTools.mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 20%)`
+        )(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: themeTools.mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`
+        )(props)
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: themeTools.mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`
+        )(props)
+      };
+  }
+}
+var init_background_utils = __esm({
+  "src/theme/utils/background-utils.ts"() {
+    init_foundations();
+  }
+});
 var parts2, helpers3, config8, card_select_default;
 var init_card_select = __esm({
   "src/theme/components/card-select.ts"() {
@@ -11859,6 +12024,7 @@ var init_card_select = __esm({
     init_dist3();
     init_box_shadow_utils();
     init_focus_utils();
+    init_background_utils();
     parts2 = anatomy("card-select").parts("trigger", "card");
     helpers3 = createMultiStyleConfigHelpers(parts2.keys);
     config8 = helpers3.defineMultiStyleConfig({
@@ -11867,9 +12033,6 @@ var init_card_select = __esm({
           appearance: "none",
           display: "flex",
           alignItems: "center",
-          _expanded: {
-            backgroundColor: themeTools.mode("mint", "night")(props)
-          },
           ...focusVisible({
             notFocus: {},
             focus: {
@@ -11884,21 +12047,12 @@ var init_card_select = __esm({
         card: {
           borderRadius: "sm",
           boxShadow: "md",
-          padding: 3
+          padding: 3,
+          color: themeTools.mode("darkGrey", "white")(props)
         }
       }),
       variants: {
-        ghost: (props) => ({
-          trigger: {
-            _hover: {
-              backgroundColor: themeTools.mode("seaMist", "pine")(props)
-            },
-            _active: {
-              backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
-            }
-          }
-        }),
-        outline: (props) => ({
+        base: (props) => ({
           trigger: {
             boxShadow: getBoxShadowString({
               borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
@@ -11920,19 +12074,20 @@ var init_card_select = __esm({
               })
             },
             _active: {
-              backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props),
+              ...baseBackground("active", props),
               boxShadow: getBoxShadowString({
                 borderColor: themeTools.mode("darkGrey", "whiteAlpha.400")(props),
                 borderWidth: 1
               })
             },
             _expanded: {
+              ...baseBackground("active", props),
               _hover: {
-                backgroundColor: themeTools.mode("seaMist", "todo")(props),
+                ...baseBackground("active", props),
                 boxShadow: "none"
               },
               _active: {
-                backgroundColor: themeTools.mode("mint", "todo")(props),
+                ...baseBackground("active", props),
                 boxShadow: getBoxShadowString({
                   borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props),
                   borderWidth: 1
@@ -11941,13 +12096,26 @@ var init_card_select = __esm({
             }
           }
         }),
-        card: (props) => ({
+        ghost: (props) => ({
           trigger: {
-            backgroundColor: themeTools.mode("transparent", "whiteAlpha.100")(props),
+            _hover: {
+              ...ghostBackground("hover", props)
+            },
+            _active: {
+              ...ghostBackground("active", props)
+            },
+            _expanded: {
+              ...ghostBackground("selected", props)
+            }
+          }
+        }),
+        floating: (props) => ({
+          trigger: {
+            ...floatingBackground("default", props),
             boxShadow: "sm",
             transition: "all .1s ease-out",
             _hover: {
-              backgroundColor: themeTools.mode("seaMist", "pine")(props),
+              ...floatingBackground("hover", props),
               boxShadow: getBoxShadowString({
                 borderColor: themeTools.mode("silver", "whiteAlpha.400")(props),
                 borderWidth: 1,
@@ -11955,7 +12123,7 @@ var init_card_select = __esm({
               })
             },
             _active: {
-              backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props),
+              ...floatingBackground("active", props),
               boxShadow: getBoxShadowString({
                 borderColor: themeTools.mode("silver", "whiteAlpha.400")(props),
                 borderWidth: themeTools.mode(0, 1)(props),
@@ -11963,6 +12131,7 @@ var init_card_select = __esm({
               })
             },
             _expanded: {
+              ...floatingBackground("active", props),
               _hover: {
                 boxShadow: getBoxShadowString({
                   borderColor: "darkGrey",
@@ -11970,7 +12139,7 @@ var init_card_select = __esm({
                 })
               },
               _active: {
-                backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props),
+                ...floatingBackground("active", props),
                 boxShadow: "none"
               }
             }
@@ -13049,31 +13218,35 @@ function baseBorder(state2, props) {
       };
   }
 }
-var init_border_utils = __esm({
-  "src/theme/utils/border-utils.ts"() {
-    init_box_shadow_utils();
-  }
-});
-function baseBackground(state2, props) {
+function floatingBorder(state2, props) {
   switch (state2) {
-    case "active":
+    case "hover":
       return {
-        backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props)
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("grey.300", "white")(props)
+        })
       };
     case "selected":
+    case "focus":
       return {
-        backgroundColor: "pine"
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
       };
-    case "disabled":
+    case "active":
+    case "default":
+    default:
       return {
-        backgroundColor: themeTools.mode("silver", "whiteAlpha.100")(props)
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("grey.200", "whiteAlpha.400")(props)
+        })
       };
-    default:
-      return {};
   }
 }
-var init_background_utils = __esm({
-  "src/theme/utils/background-utils.ts"() {
+var init_border_utils = __esm({
+  "src/theme/utils/border-utils.ts"() {
+    init_box_shadow_utils();
   }
 });
 var parts6, helpers10, config18, info_select_default;
@@ -13132,7 +13305,6 @@ var init_info_select = __esm({
             ...baseBorder("focus", props)
           },
           _expanded: {
-            ...baseBackground("active", props),
             ...baseBorder("focus", props)
           },
           _invalid: {
@@ -13151,7 +13323,36 @@ var init_info_select = __esm({
           }
         },
         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"
+      }
     });
     info_select_default = config18;
   }
@@ -13851,7 +14052,7 @@ var init_listbox = __esm({
           // avoiding extra div by blending a transparent color into darkGrey for dark mode
           backgroundColor: themeTools.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",
@@ -13868,21 +14069,18 @@ var init_listbox = __esm({
           borderRadius: "sm",
           color: themeTools.mode("darkGrey", "white")(props),
           cursor: "pointer",
-          _hover: {
-            backgroundColor: themeTools.mode("seaMist", "pine")(props),
-            outline: "none"
-          },
+          outline: "none",
           _active: {
-            backgroundColor: themeTools.mode("mint", "pine")(props),
-            outline: "none"
+            ...ghostBackground("active", props)
           },
           _focus: {
-            outline: "none",
-            backgroundColor: themeTools.mode("seaMist", "pine")(props)
+            ...ghostBackground("focus", props)
+          },
+          _hover: {
+            ...ghostBackground("hover", props)
           },
           _selected: {
-            ...baseBackground("selected", props),
-            color: "white"
+            ...ghostBackground("selected", props)
           }
         },
         label: {},
@@ -14194,12 +14392,55 @@ var init_popover2 = __esm({
     popover_default = config27;
   }
 });
-var helpers19, config28, radio_default;
+var parts12, helpers19, config28, progress_indicator_default;
+var init_progress_indicator2 = __esm({
+  "src/theme/components/progress-indicator.ts"() {
+    parts12 = themeTools.anatomy("progress-indicator").parts(
+      "root",
+      "container",
+      "progressDot"
+    );
+    helpers19 = react.createMultiStyleConfigHelpers(parts12.keys);
+    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: themeTools.mode("pine", "coralGreen")(props)
+            }
+          },
+          circle: {
+            fill: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+          }
+        }
+      }),
+      variants: {
+        base: (props) => ({})
+      },
+      defaultProps: {
+        variant: "base"
+      }
+    });
+    progress_indicator_default = config28;
+  }
+});
+var helpers20, config29, radio_default;
 var init_radio = __esm({
   "src/theme/components/radio.ts"() {
     init_dist4();
-    helpers19 = react.createMultiStyleConfigHelpers(radioAnatomy.keys);
-    config28 = helpers19.defineMultiStyleConfig({
+    helpers20 = react.createMultiStyleConfigHelpers(radioAnatomy.keys);
+    config29 = helpers20.defineMultiStyleConfig({
       baseStyle: {
         container: {
           _hover: {
@@ -14255,17 +14496,17 @@ var init_radio = __esm({
         }
       }
     });
-    radio_default = config28;
+    radio_default = config29;
   }
 });
-var parts12, helpers20, config29, select_default;
+var parts13, helpers21, config30, select_default;
 var init_select = __esm({
   "src/theme/components/select.ts"() {
     init_dist4();
     init_input2();
-    parts12 = selectAnatomy.extend("root");
-    helpers20 = react.createMultiStyleConfigHelpers(parts12.keys);
-    config29 = helpers20.defineMultiStyleConfig({
+    parts13 = selectAnatomy.extend("root");
+    helpers21 = react.createMultiStyleConfigHelpers(parts13.keys);
+    config30 = helpers21.defineMultiStyleConfig({
       baseStyle: (props) => ({
         root: {
           width: "100%",
@@ -14307,7 +14548,7 @@ var init_select = __esm({
         }
       })
     });
-    select_default = config29;
+    select_default = config30;
   }
 });
 
@@ -14323,7 +14564,7 @@ var init_dist7 = __esm({
     init_dist3();
   }
 });
-var fade, $startColor2, $endColor2, config30, skeleton_default;
+var fade, $startColor2, $endColor2, config31, skeleton_default;
 var init_skeleton = __esm({
   "src/theme/components/skeleton.ts"() {
     init_dist7();
@@ -14333,7 +14574,7 @@ var init_skeleton = __esm({
     });
     $startColor2 = themeTools.cssVar("skeleton-start-color");
     $endColor2 = themeTools.cssVar("skeleton-end-color");
-    config30 = react.defineStyleConfig({
+    config31 = react.defineStyleConfig({
       baseStyle: (props) => {
         const defaultStartColor = themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props);
         const defaultEndColor = themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props);
@@ -14356,13 +14597,13 @@ var init_skeleton = __esm({
         };
       }
     });
-    skeleton_default = config30;
+    skeleton_default = config31;
   }
 });
-var parts13, helpers21, config31, stepper_default;
+var parts14, helpers22, config32, stepper_default;
 var init_stepper2 = __esm({
   "src/theme/components/stepper.ts"() {
-    parts13 = themeTools.anatomy("stepper").parts(
+    parts14 = themeTools.anatomy("stepper").parts(
       "root",
       "container",
       "innerContainer",
@@ -14375,8 +14616,8 @@ var init_stepper2 = __esm({
       "stepTitle",
       "closeButton"
     );
-    helpers21 = react.createMultiStyleConfigHelpers(parts13.keys);
-    config31 = helpers21.defineMultiStyleConfig({
+    helpers22 = react.createMultiStyleConfigHelpers(parts14.keys);
+    config32 = helpers22.defineMultiStyleConfig({
       baseStyle: (props) => ({
         root: {
           display: "flex",
@@ -14438,10 +14679,10 @@ var init_stepper2 = __esm({
         variant: "base"
       }
     });
-    stepper_default = config31;
+    stepper_default = config32;
   }
 });
-var $width2, $height3, $diff2, diffValue2, $translateX2, helpers22, config32, switch_default;
+var $width2, $height3, $diff2, diffValue2, $translateX2, helpers23, config33, switch_default;
 var init_switch = __esm({
   "src/theme/components/switch.ts"() {
     init_dist4();
@@ -14453,8 +14694,8 @@ var init_switch = __esm({
     $diff2 = themeTools.cssVar("switch-track-diff");
     diffValue2 = themeTools.calc.subtract($width2, $height3);
     $translateX2 = themeTools.cssVar("switch-thumb-x");
-    helpers22 = react.createMultiStyleConfigHelpers(switchAnatomy.keys);
-    config32 = helpers22.defineMultiStyleConfig({
+    helpers23 = react.createMultiStyleConfigHelpers(switchAnatomy.keys);
+    config33 = helpers23.defineMultiStyleConfig({
       baseStyle: {
         container: {
           [$diff2.variable]: diffValue2,
@@ -14660,21 +14901,21 @@ var init_switch = __esm({
         size: "md"
       }
     });
-    switch_default = config32;
+    switch_default = config33;
   }
 });
-var helpers23, numericStyles2, config33, table_default;
+var helpers24, numericStyles2, config34, table_default;
 var init_table2 = __esm({
   "src/theme/components/table.ts"() {
     init_dist4();
     init_box_shadow_utils();
-    helpers23 = react.createMultiStyleConfigHelpers(tableAnatomy.keys);
+    helpers24 = react.createMultiStyleConfigHelpers(tableAnatomy.keys);
     numericStyles2 = {
       "&[data-is-numeric=true]": {
         textAlign: "end"
       }
     };
-    config33 = helpers23.defineMultiStyleConfig({
+    config34 = helpers24.defineMultiStyleConfig({
       baseStyle: {
         table: {
           borderCollapse: "collapse",
@@ -14822,15 +15063,15 @@ var init_table2 = __esm({
         colorScheme: "grey"
       }
     });
-    table_default = config33;
+    table_default = config34;
   }
 });
-var helpers24, config34, tabs_default, getTabColorSchemeProps, getTabColorSchemeSelectedProps, getTabColorSchemeFocusProps, getTabColorSchemeHoverProps, getTabColorSchemeActiveProps, getTabColorSchemeDisabledProps, getTablistColorSchemeProps;
+var helpers25, config35, tabs_default, getTabColorSchemeProps, getTabColorSchemeSelectedProps, getTabColorSchemeFocusProps, getTabColorSchemeHoverProps, getTabColorSchemeActiveProps, getTabColorSchemeDisabledProps, getTablistColorSchemeProps;
 var init_tabs = __esm({
   "src/theme/components/tabs.ts"() {
     init_dist4();
-    helpers24 = react.createMultiStyleConfigHelpers(tabsAnatomy.keys);
-    config34 = helpers24.defineMultiStyleConfig({
+    helpers25 = react.createMultiStyleConfigHelpers(tabsAnatomy.keys);
+    config35 = helpers25.defineMultiStyleConfig({
       baseStyle: (props) => ({
         root: {
           display: "flex",
@@ -14933,7 +15174,7 @@ var init_tabs = __esm({
         variant: "round"
       }
     });
-    tabs_default = config34;
+    tabs_default = config35;
     getTabColorSchemeProps = (props) => {
       switch (props.colorScheme) {
         case "dark":
@@ -15187,11 +15428,11 @@ var init_tabs = __esm({
     };
   }
 });
-var config35, textarea_default;
+var config36, textarea_default;
 var init_textarea = __esm({
   "src/theme/components/textarea.ts"() {
     init_input2();
-    config35 = react.defineStyleConfig({
+    config36 = react.defineStyleConfig({
       baseStyle: (props) => ({
         ...input_default.baseStyle(props).field,
         minHeight: "5rem",
@@ -15208,13 +15449,13 @@ var init_textarea = __esm({
         }
       })
     });
-    textarea_default = config35;
+    textarea_default = config36;
   }
 });
-var config36, toast_default;
+var config37, toast_default;
 var init_toast = __esm({
   "src/theme/components/toast.ts"() {
-    config36 = react.defineStyleConfig({
+    config37 = react.defineStyleConfig({
       baseStyle: {
         display: "flex",
         alignItems: "center",
@@ -15238,7 +15479,7 @@ var init_toast = __esm({
         }
       }
     });
-    toast_default = config36;
+    toast_default = config37;
   }
 });
 
@@ -15272,6 +15513,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,
@@ -15312,6 +15554,7 @@ var init_components = __esm({
     init_media_controller_button();
     init_modal2();
     init_popover2();
+    init_progress_indicator2();
     init_radio();
     init_select();
     init_skeleton();
@@ -15394,13 +15637,18 @@ var init_font_faces = __esm({
 });
 
 // src/theme/index.ts
-exports.theme = void 0;
+exports.Brand = void 0; exports.theme = void 0; exports.brandTheme = void 0;
 var init_theme = __esm({
   "src/theme/index.ts"() {
     init_dist5();
     init_components();
     init_foundations();
     init_font_faces();
+    exports.Brand = /* @__PURE__ */ ((Brand2) => {
+      Brand2["VyDigital"] = "VyDigital";
+      Brand2["VyUtvikling"] = "VyUtvikling";
+      return Brand2;
+    })(exports.Brand || {});
     exports.theme = {
       ...theme2,
       ...foundations_exports,
@@ -15409,9 +15657,21 @@ var init_theme = __esm({
         ...components_exports
       }
     };
+    exports.brandTheme = {
+      ["VyDigital" /* VyDigital */]: {
+        colors: {
+          accent: colors.night
+        }
+      },
+      ["VyUtvikling" /* VyUtvikling */]: {
+        colors: {
+          accent: colors.darkGrey
+        }
+      }
+    };
   }
 });
-var BaseToast, ToastIcon, getIcon3, texts23;
+var BaseToast, ToastIcon, getIcon3, texts24;
 var init_BaseToast = __esm({
   "src/toast/BaseToast.tsx"() {
     init_src();
@@ -15426,7 +15686,7 @@ var init_BaseToast = __esm({
         Icon,
         {
           flexShrink: 0,
-          "aria-label": t2(texts23[variant]),
+          "aria-label": t2(texts24[variant]),
           marginRight: 1,
           marginY: 1.5,
           color: "darkGrey"
@@ -15443,7 +15703,7 @@ var init_BaseToast = __esm({
           return sporIconReact.ErrorOutline24Icon;
       }
     };
-    texts23 = createTexts({
+    texts24 = createTexts({
       info: {
         nb: "Informasjon",
         nn: "Informasjon",
@@ -15481,7 +15741,7 @@ var init_ActionToast = __esm({
     };
   }
 });
-var ClosableToast, texts24;
+var ClosableToast, texts25;
 var init_ClosableToast = __esm({
   "src/toast/ClosableToast.tsx"() {
     init_src();
@@ -15499,13 +15759,13 @@ var init_ClosableToast = __esm({
         {
           sx: styles3.dismissButton,
           variant: "ghost",
-          "aria-label": t2(texts24.dismiss),
+          "aria-label": t2(texts25.dismiss),
           icon: /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.CloseFill18Icon, null),
           onClick: onClose
         }
       ));
     };
-    texts24 = createTexts({
+    texts25 = createTexts({
       dismiss: {
         nb: "Lukk",
         nn: "Lukk",
@@ -15717,6 +15977,7 @@ var init_src = __esm({
     init_media_controller();
     init_modal();
     init_popover();
+    init_progress_indicator();
     init_provider();
     init_stepper();
     init_tab();