@vygruppen/spor-react 5.1.1 → 5.3.0

package/dist/{chunk-J6I7IHRU.mjs → chunk-55HLEY3T.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() {
@@ -2932,6 +2933,7 @@ function InfoSelect({
   value,
   isLabelSrOnly,
   defaultValue,
+  variant = "base",
   ...props
 }) {
   const renamedProps = {
@@ -2948,9 +2950,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();
@@ -3121,7 +3126,7 @@ function NumericStepper({
   return /* @__PURE__ */ React69__default.createElement(Flex, { alignItems: "center", ...boxProps }, /* @__PURE__ */ React69__default.createElement(
     VerySmallButton,
     {
-      icon: /* @__PURE__ */ React69__default.createElement(SubtractIcon, { color: "white", stepLabel: clampedStepSize }),
+      icon: /* @__PURE__ */ React69__default.createElement(SubtractIcon, { stepLabel: clampedStepSize }),
       "aria-label": t2(texts12.decrementButtonAriaLabel(clampedStepSize)),
       onClick: () => onChange(Math.max(value - clampedStepSize, minValue)),
       visibility: value <= minValue ? "hidden" : "visible",
@@ -3196,7 +3201,7 @@ function NumericStepper({
   ), /* @__PURE__ */ React69__default.createElement(
     VerySmallButton,
     {
-      icon: /* @__PURE__ */ React69__default.createElement(AddIcon, { color: "white", stepLabel: clampedStepSize }),
+      icon: /* @__PURE__ */ React69__default.createElement(AddIcon, { stepLabel: clampedStepSize }),
       "aria-label": t2(texts12.incrementButtonAriaLabel(clampedStepSize)),
       onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
       visibility: value >= maxValue ? "hidden" : "visible",
@@ -3418,7 +3423,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-ZM527OHZ.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-BITN7VNA.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4158,13 +4163,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 +4268,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 +4278,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 +4293,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}`,
@@ -4345,7 +4397,7 @@ function isObject(value) {
   return value != null && (type === "object" || type === "function") && !Array.isArray(value);
 }
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-RXCYWA6Q.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-SIH73G3H.mjs
 var transitionProperty = {
   common: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
   colors: "background-color, border-color, color, fill, stroke",
@@ -4374,7 +4426,7 @@ var transition = {
 };
 var transition_default = transition;
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-5QZEG2IM.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-45VJLTIL.mjs
 var zIndices = {
   hide: -1,
   auto: "auto",
@@ -4392,7 +4444,7 @@ var zIndices = {
 };
 var z_index_default = zIndices;
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-PE5G6LAZ.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-B75T2J64.mjs
 var borders = {
   none: 0,
   "1px": "1px solid",
@@ -4402,7 +4454,7 @@ var borders = {
 };
 var borders_default = borders;
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-ZCARTYDH.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-TXLFBUTF.mjs
 var breakpoints = {
   base: "0em",
   sm: "30em",
@@ -4413,7 +4465,7 @@ var breakpoints = {
 };
 var breakpoints_default = breakpoints;
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-OFZWI3IK.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-E47HH2QS.mjs
 var colors2 = {
   transparent: "transparent",
   current: "currentColor",
@@ -4638,7 +4690,7 @@ var colors2 = {
 };
 var colors_default = colors2;
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-AMMMMB27.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-VIVTPWHP.mjs
 var radii = {
   none: "0",
   sm: "0.125rem",
@@ -4652,7 +4704,7 @@ var radii = {
 };
 var radius_default = radii;
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-A3OO4VZD.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-IZUFFCXS.mjs
 var shadows2 = {
   xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
   sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
@@ -4668,7 +4720,7 @@ var shadows2 = {
 };
 var shadows_default = shadows2;
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-EXHLCVSK.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-HQ6WXDYV.mjs
 var blur = {
   none: 0,
   sm: "4px",
@@ -4681,7 +4733,7 @@ var blur = {
 };
 var blur_default = blur;
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-VW4MZLZF.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-6XA2KDUD.mjs
 var typography = {
   letterSpacings: {
     tighter: "-0.05em",
@@ -4744,7 +4796,7 @@ var typography = {
 };
 var typography_default = typography;
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-NIUVG5KM.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-V7WMN6TQ.mjs
 var spacing = {
   px: "1px",
   0.5: "0.125rem",
@@ -4781,7 +4833,7 @@ var spacing = {
   96: "24rem"
 };
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-QH74K4BV.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-NJCYBKFH.mjs
 var largeSizes = {
   max: "max-content",
   min: "min-content",
@@ -4815,7 +4867,7 @@ var sizes = {
 };
 var sizes_default = sizes;
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-5FMCT5RQ.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-3WO5B3NB.mjs
 var foundations = {
   breakpoints: breakpoints_default,
   zIndices: z_index_default,
@@ -5083,7 +5135,7 @@ var transformFunctions = {
   contrast: wrap("contrast"),
   dropShadow: wrap("drop-shadow"),
   grayscale: wrap("grayscale"),
-  hueRotate: wrap("hue-rotate"),
+  hueRotate: (value) => wrap("hue-rotate")(transformFunctions.degree(value)),
   invert: wrap("invert"),
   saturate: wrap("saturate"),
   sepia: wrap("sepia"),
@@ -5316,7 +5368,7 @@ var filter = {
   blur: t.blur("--chakra-blur"),
   brightness: t.propT("--chakra-brightness", transformFunctions.brightness),
   contrast: t.propT("--chakra-contrast", transformFunctions.contrast),
-  hueRotate: t.degreeT("--chakra-hue-rotate"),
+  hueRotate: t.propT("--chakra-hue-rotate", transformFunctions.hueRotate),
   invert: t.propT("--chakra-invert", transformFunctions.invert),
   saturate: t.propT("--chakra-saturate", transformFunctions.saturate),
   dropShadow: t.propT("--chakra-drop-shadow", transformFunctions.dropShadow),
@@ -5327,7 +5379,10 @@ var filter = {
     transformFunctions.brightness
   ),
   backdropContrast: t.propT("--chakra-backdrop-contrast", transformFunctions.contrast),
-  backdropHueRotate: t.degreeT("--chakra-backdrop-hue-rotate"),
+  backdropHueRotate: t.propT(
+    "--chakra-backdrop-hue-rotate",
+    transformFunctions.hueRotate
+  ),
   backdropInvert: t.propT("--chakra-backdrop-invert", transformFunctions.invert),
   backdropSaturate: t.propT("--chakra-backdrop-saturate", transformFunctions.saturate)
 };
@@ -5688,6 +5743,7 @@ var typography2 = {
       textOverflow: "ellipsis",
       display: "-webkit-box",
       WebkitBoxOrient: "vertical",
+      //@ts-ignore
       WebkitLineClamp: "var(--chakra-line-clamp)"
     },
     property: "--chakra-line-clamp"
@@ -5698,6 +5754,7 @@ var scroll = {
   scrollSnapAlign: true,
   scrollSnapStop: true,
   scrollSnapType: true,
+  // scroll margin
   scrollMargin: t.spaceT("scrollMargin"),
   scrollMarginTop: t.spaceT("scrollMarginTop"),
   scrollMarginBottom: t.spaceT("scrollMarginBottom"),
@@ -5705,6 +5762,7 @@ var scroll = {
   scrollMarginRight: t.spaceT("scrollMarginRight"),
   scrollMarginX: t.spaceT(["scrollMarginLeft", "scrollMarginRight"]),
   scrollMarginY: t.spaceT(["scrollMarginTop", "scrollMarginBottom"]),
+  // scroll padding
   scrollPadding: t.spaceT("scrollPadding"),
   scrollPaddingTop: t.spaceT("scrollPaddingTop"),
   scrollPaddingBottom: t.spaceT("scrollPaddingBottom"),
@@ -5810,66 +5868,292 @@ var toGroup = (fn) => merge((v) => fn(v, "&"), "[role=group]", "[data-group]", "
 var toPeer = (fn) => merge((v) => fn(v, "~ &"), "[data-peer]", ".peer");
 var merge = (fn, ...selectors) => selectors.map(fn).join(", ");
 var pseudoSelectors = {
+  /**
+   * Styles for CSS selector `&:hover`
+   */
   _hover: "&:hover, &[data-hover]",
+  /**
+   * Styles for CSS Selector `&:active`
+   */
   _active: "&:active, &[data-active]",
+  /**
+   * Styles for CSS selector `&:focus`
+   *
+   */
   _focus: "&:focus, &[data-focus]",
+  /**
+   * Styles for the highlighted state.
+   */
   _highlighted: "&[data-highlighted]",
+  /**
+   * Styles to apply when a child of this element has received focus
+   * - CSS Selector `&:focus-within`
+   */
   _focusWithin: "&:focus-within",
+  /**
+   * Styles to apply when this element has received focus via tabbing
+   * - CSS Selector `&:focus-visible`
+   */
   _focusVisible: "&:focus-visible, &[data-focus-visible]",
+  /**
+   * Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:
+   * - `&[aria-disabled=true]`
+   * - `&:disabled`
+   * - `&[data-disabled]`
+   * - `&[disabled]`
+   */
   _disabled: "&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]",
+  /**
+   * Styles for CSS Selector `&:readonly`
+   */
   _readOnly: "&[aria-readonly=true], &[readonly], &[data-readonly]",
+  /**
+   * Styles for CSS selector `&::before`
+   *
+   * NOTE:When using this, ensure the `content` is wrapped in a backtick.
+   * @example
+   * ```jsx
+   * <Box _before={{content:`""` }}/>
+   * ```
+   */
   _before: "&::before",
+  /**
+   * Styles for CSS selector `&::after`
+   *
+   * NOTE:When using this, ensure the `content` is wrapped in a backtick.
+   * @example
+   * ```jsx
+   * <Box _after={{content:`""` }}/>
+   * ```
+   */
   _after: "&::after",
+  /**
+   * Styles for CSS selector `&:empty`
+   */
   _empty: "&:empty",
+  /**
+   * Styles to apply when the ARIA attribute `aria-expanded` is `true`
+   * - CSS selector `&[aria-expanded=true]`
+   */
   _expanded: "&[aria-expanded=true], &[data-expanded]",
+  /**
+   * Styles to apply when the ARIA attribute `aria-checked` is `true`
+   * - CSS selector `&[aria-checked=true]`
+   */
   _checked: "&[aria-checked=true], &[data-checked]",
+  /**
+   * Styles to apply when the ARIA attribute `aria-grabbed` is `true`
+   * - CSS selector `&[aria-grabbed=true]`
+   */
   _grabbed: "&[aria-grabbed=true], &[data-grabbed]",
+  /**
+   * Styles for CSS Selector `&[aria-pressed=true]`
+   * Typically used to style the current "pressed" state of toggle buttons
+   */
   _pressed: "&[aria-pressed=true], &[data-pressed]",
+  /**
+   * Styles to apply when the ARIA attribute `aria-invalid` is `true`
+   * - CSS selector `&[aria-invalid=true]`
+   */
   _invalid: "&[aria-invalid=true], &[data-invalid]",
+  /**
+   * Styles for the valid state
+   * - CSS selector `&[data-valid], &[data-state=valid]`
+   */
   _valid: "&[data-valid], &[data-state=valid]",
+  /**
+   * Styles for CSS Selector `&[aria-busy=true]` or `&[data-loading=true]`.
+   * Useful for styling loading states
+   */
   _loading: "&[data-loading], &[aria-busy=true]",
+  /**
+   * Styles to apply when the ARIA attribute `aria-selected` is `true`
+   *
+   * - CSS selector `&[aria-selected=true]`
+   */
   _selected: "&[aria-selected=true], &[data-selected]",
+  /**
+   * Styles for CSS Selector `[hidden=true]`
+   */
   _hidden: "&[hidden], &[data-hidden]",
+  /**
+   * Styles for CSS Selector `&:-webkit-autofill`
+   */
   _autofill: "&:-webkit-autofill",
+  /**
+   * Styles for CSS Selector `&:nth-child(even)`
+   */
   _even: "&:nth-of-type(even)",
+  /**
+   * Styles for CSS Selector `&:nth-child(odd)`
+   */
   _odd: "&:nth-of-type(odd)",
+  /**
+   * Styles for CSS Selector `&:first-of-type`
+   */
   _first: "&:first-of-type",
+  /**
+   * Styles for CSS selector `&::first-letter`
+   *
+   * NOTE: This selector is only applied for block-level elements and not preceded by an image or table.
+   * @example
+   * ```jsx
+   * <Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+   * ```
+   */
   _firstLetter: "&::first-letter",
+  /**
+   * Styles for CSS Selector `&:last-of-type`
+   */
   _last: "&:last-of-type",
+  /**
+   * Styles for CSS Selector `&:not(:first-of-type)`
+   */
   _notFirst: "&:not(:first-of-type)",
+  /**
+   * Styles for CSS Selector `&:not(:last-of-type)`
+   */
   _notLast: "&:not(:last-of-type)",
+  /**
+   * Styles for CSS Selector `&:visited`
+   */
   _visited: "&:visited",
+  /**
+   * Used to style the active link in a navigation
+   * Styles for CSS Selector `&[aria-current=page]`
+   */
   _activeLink: "&[aria-current=page]",
+  /**
+   * Used to style the current step within a process
+   * Styles for CSS Selector `&[aria-current=step]`
+   */
   _activeStep: "&[aria-current=step]",
+  /**
+   * Styles to apply when the ARIA attribute `aria-checked` is `mixed`
+   * - CSS selector `&[aria-checked=mixed]`
+   */
   _indeterminate: "&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]",
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is hovered
+   */
   _groupHover: toGroup(state.hover),
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is hovered
+   */
   _peerHover: toPeer(state.hover),
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is focused
+   */
   _groupFocus: toGroup(state.focus),
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is focused
+   */
   _peerFocus: toPeer(state.focus),
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` has visible focus
+   */
   _groupFocusVisible: toGroup(state.focusVisible),
+  /**
+   * Styles to apply when a sibling element with `.peer`or `data-peer` has visible focus
+   */
   _peerFocusVisible: toPeer(state.focusVisible),
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is active
+   */
   _groupActive: toGroup(state.active),
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is active
+   */
   _peerActive: toPeer(state.active),
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is disabled
+   */
   _groupDisabled: toGroup(state.disabled),
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` is disabled
+   */
   _peerDisabled: toPeer(state.disabled),
+  /**
+   *  Styles to apply when a parent element with `.group`, `data-group` or `role=group` is invalid
+   */
   _groupInvalid: toGroup(state.invalid),
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` is invalid
+   */
   _peerInvalid: toPeer(state.invalid),
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is checked
+   */
   _groupChecked: toGroup(state.checked),
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is checked
+   */
   _peerChecked: toPeer(state.checked),
+  /**
+   *  Styles to apply when a parent element with `.group`, `data-group` or `role=group` has focus within
+   */
   _groupFocusWithin: toGroup(state.focusWithin),
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` has focus within
+   */
   _peerFocusWithin: toPeer(state.focusWithin),
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` has placeholder shown
+   */
   _peerPlaceholderShown: toPeer(state.placeholderShown),
+  /**
+   * Styles for CSS Selector `&::placeholder`.
+   */
   _placeholder: "&::placeholder",
+  /**
+   * Styles for CSS Selector `&:placeholder-shown`.
+   */
   _placeholderShown: "&:placeholder-shown",
+  /**
+   * Styles for CSS Selector `&:fullscreen`.
+   */
   _fullScreen: "&:fullscreen",
+  /**
+   * Styles for CSS Selector `&::selection`
+   */
   _selection: "&::selection",
+  /**
+   * Styles for CSS Selector `[dir=rtl] &`
+   * It is applied when a parent element or this element has `dir="rtl"`
+   */
   _rtl: "[dir=rtl] &, &[dir=rtl]",
+  /**
+   * Styles for CSS Selector `[dir=ltr] &`
+   * It is applied when a parent element or this element has `dir="ltr"`
+   */
   _ltr: "[dir=ltr] &, &[dir=ltr]",
+  /**
+   * Styles for CSS Selector `@media (prefers-color-scheme: dark)`
+   * It is used when the user has requested the system use a light or dark color theme.
+   */
   _mediaDark: "@media (prefers-color-scheme: dark)",
+  /**
+   * Styles for CSS Selector `@media (prefers-reduced-motion: reduce)`
+   * It is used when the user has requested the system to reduce the amount of animations.
+   */
   _mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
+  /**
+   * Styles for when `data-theme` is applied to any parent of
+   * this component or element.
+   */
   _dark: ".chakra-ui-dark &:not([data-theme]),[data-theme=dark] &:not([data-theme]),&[data-theme=dark]",
+  /**
+   * Styles for when `data-theme` is applied to any parent of
+   * this component or element.
+   */
   _light: ".chakra-ui-light &:not([data-theme]),[data-theme=light] &:not([data-theme]),&[data-theme=light]",
+  /**
+   * Styles for the CSS Selector `&[data-orientation=horizontal]`
+   */
   _horizontal: "&[data-orientation=horizontal]",
+  /**
+   * Styles for the CSS Selector `&[data-orientation=vertical]`
+   */
   _vertical: "&[data-orientation=vertical]"
 };
 var pseudoPropNames = Object.keys(
@@ -5903,21 +6187,21 @@ 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 };
     }
   };
 }
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-QHVXS45H.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-Q5NOVGYN.mjs
 var { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
   "stepper",
   "step",
@@ -6063,7 +6347,7 @@ var stepperTheme = defineMultiStyleConfig({
   }
 });
 
-// ../../node_modules/@chakra-ui/anatomy/dist/chunk-7LPD4XZ3.mjs
+// ../../node_modules/@chakra-ui/anatomy/dist/chunk-OA3DH5LS.mjs
 function anatomy(name, map = {}) {
   let called = false;
   function assert() {
@@ -6075,7 +6359,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);
@@ -6115,7 +6399,7 @@ function anatomy(name, map = {}) {
   }
   const __type = {};
   return {
-    parts: parts14,
+    parts: parts15,
     toPart,
     extend,
     selectors,
@@ -6127,7 +6411,7 @@ function anatomy(name, map = {}) {
   };
 }
 
-// ../../node_modules/@chakra-ui/anatomy/dist/chunk-Z4JVF5YI.mjs
+// ../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.mjs
 var accordionAnatomy = anatomy("accordion").parts("root", "container", "button", "panel").extend("icon");
 var alertAnatomy = anatomy("alert").parts("title", "description", "container").extend("icon", "spinner");
 var avatarAnatomy = anatomy("avatar").parts("label", "badge", "container").extend("excessLabel", "group");
@@ -6192,7 +6476,8 @@ var statAnatomy = anatomy("stat").parts(
 var switchAnatomy = anatomy("switch").parts(
   "container",
   "track",
-  "thumb"
+  "thumb",
+  "label"
 );
 var tableAnatomy = anatomy("table").parts(
   "table",
@@ -6223,6 +6508,16 @@ var cardAnatomy = anatomy("card").parts(
   "body",
   "footer"
 );
+anatomy("stepper").parts(
+  "stepper",
+  "step",
+  "title",
+  "description",
+  "indicator",
+  "separator",
+  "icon",
+  "number"
+);
 var { defineMultiStyleConfig: defineMultiStyleConfig2, definePartsStyle: definePartsStyle2 } = createMultiStyleConfigHelpers(switchAnatomy.keys);
 var $width = cssVar$1("switch-track-width");
 var $height = cssVar$1("switch-track-height");
@@ -6759,7 +7054,7 @@ var badgeTheme = defineStyleConfig({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-VM3745AK.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-7RVLYCMR.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig5, definePartsStyle: definePartsStyle5 } = createMultiStyleConfigHelpers(tagAnatomy.keys);
 var $bg3 = cssVar("tag-bg");
 var $color = cssVar("tag-color");
@@ -7083,7 +7378,7 @@ var inputTheme = defineMultiStyleConfig6({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-TN6RO673.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-KJ26FGJD.mjs
 var _a;
 var baseStyle8 = defineStyle({
   ...(_a = inputTheme.baseStyle) == null ? void 0 : _a.field,
@@ -7229,7 +7524,7 @@ var progressTheme = defineMultiStyleConfig7({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-RQ25AHBB.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-UV3F75RF.mjs
 var isFunction = (value) => typeof value === "function";
 function runIfFn(valueOrFn, ...args) {
   return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
@@ -7321,7 +7616,7 @@ var checkboxTheme = defineMultiStyleConfig8({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-BJIKSU3K.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-VZUATZ4E.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig9, definePartsStyle: definePartsStyle9 } = createMultiStyleConfigHelpers(radioAnatomy.keys);
 var baseStyleControl2 = defineStyle((props) => {
   var _a6;
@@ -7374,7 +7669,7 @@ var radioTheme = defineMultiStyleConfig9({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-ILLVD2I4.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-NNA4E64A.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig10, definePartsStyle: definePartsStyle10 } = createMultiStyleConfigHelpers(selectAnatomy.keys);
 var $bg5 = cssVar("select-bg");
 var _a4;
@@ -7458,7 +7753,7 @@ var selectTheme = defineMultiStyleConfig10({
   defaultProps: inputTheme.defaultProps
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-T6E7UBRI.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-X6XFE4TF.mjs
 var $startColor = cssVar("skeleton-start-color");
 var $endColor = cssVar("skeleton-end-color");
 var baseStyle14 = defineStyle({
@@ -7477,7 +7772,7 @@ var skeletonTheme = defineStyleConfig({
   baseStyle: baseStyle14
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-URZN3QPP.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-ZREGO6US.mjs
 var $bg6 = cssVar("skip-link-bg");
 var baseStyle15 = defineStyle({
   borderRadius: "md",
@@ -7666,7 +7961,7 @@ var spinnerTheme = defineStyleConfig({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-66QM3UU6.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-2KWJXISX.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig12, definePartsStyle: definePartsStyle12 } = createMultiStyleConfigHelpers(statAnatomy.keys);
 var baseStyleLabel4 = defineStyle({
   fontWeight: "medium"
@@ -7707,7 +8002,7 @@ var statTheme = defineMultiStyleConfig12({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-73PQYQVW.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-AFCBUAM5.mjs
 var $bg8 = cssVar("kbd-bg");
 var baseStyle19 = defineStyle({
   [$bg8.variable]: "colors.gray.100",
@@ -7728,7 +8023,7 @@ var kbdTheme = defineStyleConfig({
   baseStyle: baseStyle19
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-NTN663XT.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-V5KSHSOQ.mjs
 var baseStyle20 = defineStyle({
   transitionProperty: "common",
   transitionDuration: "fast",
@@ -7748,7 +8043,7 @@ var linkTheme = defineStyleConfig({
   baseStyle: baseStyle20
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-RRJIKBCH.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-MGNM2WZQ.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig13, definePartsStyle: definePartsStyle13 } = createMultiStyleConfigHelpers(listAnatomy.keys);
 var baseStyleIcon4 = defineStyle({
   marginEnd: "2",
@@ -7762,7 +8057,7 @@ var listTheme = defineMultiStyleConfig13({
   baseStyle: baseStyle21
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-3XV5CZGX.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-N2GP2AF7.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig14, definePartsStyle: definePartsStyle14 } = createMultiStyleConfigHelpers(menuAnatomy.keys);
 var $bg9 = cssVar("menu-bg");
 var $shadow2 = cssVar("menu-shadow");
@@ -7851,7 +8146,7 @@ var menuTheme = defineMultiStyleConfig14({
   baseStyle: baseStyle22
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-JIVTZ35T.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-JN6QBAR6.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig15, definePartsStyle: definePartsStyle15 } = createMultiStyleConfigHelpers(modalAnatomy.keys);
 var $bg10 = cssVar("modal-bg");
 var $shadow3 = cssVar("modal-shadow");
@@ -8049,7 +8344,7 @@ var numberInputTheme = defineMultiStyleConfig16({
   defaultProps: inputTheme.defaultProps
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-HFED6QOE.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-OEFJDLVS.mjs
 var _a5;
 var baseStyle25 = defineStyle({
   ...(_a5 = inputTheme.baseStyle) == null ? void 0 : _a5.field,
@@ -8168,7 +8463,7 @@ var popoverTheme = defineMultiStyleConfig17({
   baseStyle: baseStyle26
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-5FAATIOO.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-VWP3ZVQT.mjs
 var { definePartsStyle: definePartsStyle18, defineMultiStyleConfig: defineMultiStyleConfig18 } = createMultiStyleConfigHelpers(drawerAnatomy.keys);
 var $bg12 = cssVar("drawer-bg");
 var $bs = cssVar("drawer-box-shadow");
@@ -8184,7 +8479,7 @@ function getSize3(value) {
 }
 var baseStyleOverlay2 = defineStyle({
   bg: "blackAlpha.600",
-  zIndex: "overlay"
+  zIndex: "modal"
 });
 var baseStyleDialogContainer2 = defineStyle({
   display: "flex",
@@ -8254,7 +8549,7 @@ var drawerTheme = defineMultiStyleConfig18({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-VJU277AG.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-D6DZ26HA.mjs
 var { definePartsStyle: definePartsStyle19, defineMultiStyleConfig: defineMultiStyleConfig19 } = createMultiStyleConfigHelpers(editableAnatomy.keys);
 var baseStylePreview = defineStyle({
   borderRadius: "md",
@@ -8289,7 +8584,7 @@ var editableTheme = defineMultiStyleConfig19({
   baseStyle: baseStyle28
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-OQ4UESHD.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-O6GGGS4Y.mjs
 var { definePartsStyle: definePartsStyle20, defineMultiStyleConfig: defineMultiStyleConfig20 } = createMultiStyleConfigHelpers(formAnatomy.keys);
 var $fg4 = cssVar("form-control-color");
 var baseStyleRequiredIndicator = defineStyle({
@@ -8322,7 +8617,7 @@ var formTheme = defineMultiStyleConfig20({
   baseStyle: baseStyle29
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-66WVPDP6.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-SRBDDT7F.mjs
 var { definePartsStyle: definePartsStyle21, defineMultiStyleConfig: defineMultiStyleConfig21 } = createMultiStyleConfigHelpers(formErrorAnatomy.keys);
 var $fg5 = cssVar("form-error-color");
 var baseStyleText = defineStyle({
@@ -8351,7 +8646,7 @@ var formErrorTheme = defineMultiStyleConfig21({
   baseStyle: baseStyle30
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-2RLCRBJQ.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-VHM7WLW6.mjs
 var baseStyle31 = defineStyle({
   fontSize: "md",
   marginEnd: "3",
@@ -8368,7 +8663,7 @@ var formLabelTheme = defineStyleConfig({
   baseStyle: baseStyle31
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-SZS2B4EE.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-WXARPSDQ.mjs
 var baseStyle32 = defineStyle({
   fontFamily: "heading",
   fontWeight: "bold"
@@ -8415,7 +8710,7 @@ var headingTheme = defineStyleConfig({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-CHG7JP5U.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-FU5DDBRC.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig22, definePartsStyle: definePartsStyle22 } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys);
 var $decor = cssVar("breadcrumb-link-decor");
 var baseStyleLink = defineStyle({
@@ -8618,7 +8913,7 @@ var buttonTheme = defineStyleConfig({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-N5CTW2M4.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-F7CKIHPM.mjs
 var { definePartsStyle: definePartsStyle23, defineMultiStyleConfig: defineMultiStyleConfig23 } = createMultiStyleConfigHelpers(cardAnatomy.keys);
 var $bg13 = cssVar("card-bg");
 var $padding2 = cssVar("card-padding");
@@ -8760,7 +9055,7 @@ var closeButtonTheme = defineStyleConfig({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-I7MXUFNA.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-K3RH7Y2L.mjs
 var { variants: variants10, defaultProps } = badgeTheme;
 var baseStyle37 = defineStyle({
   fontFamily: "mono",
@@ -8777,7 +9072,7 @@ var codeTheme = defineStyleConfig({
   defaultProps
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-R5JELUQ3.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-TECE6HDR.mjs
 var baseStyle38 = defineStyle({
   w: "100%",
   mx: "auto",
@@ -8788,7 +9083,7 @@ var containerTheme = defineStyleConfig({
   baseStyle: baseStyle38
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-6PVQMBW4.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-5S44M2O4.mjs
 var baseStyle39 = defineStyle({
   opacity: 0.6,
   borderColor: "inherit"
@@ -8811,7 +9106,7 @@ var dividerTheme = defineStyleConfig({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-MTSOOEOV.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-J7AGDWFO.mjs
 var { definePartsStyle: definePartsStyle24, defineMultiStyleConfig: defineMultiStyleConfig24 } = createMultiStyleConfigHelpers(accordionAnatomy.keys);
 var baseStyleContainer4 = defineStyle({
   borderTopWidth: "1px",
@@ -8897,7 +9192,7 @@ var variantSubtle2 = definePartsStyle25((props) => {
   const bg = getBg(props);
   return {
     container: {
-      [$fg6.variable]: `colors.${c}.500`,
+      [$fg6.variable]: `colors.${c}.600`,
       [$bg15.variable]: bg.light,
       _dark: {
         [$fg6.variable]: `colors.${c}.200`,
@@ -8911,7 +9206,7 @@ var variantLeftAccent = definePartsStyle25((props) => {
   const bg = getBg(props);
   return {
     container: {
-      [$fg6.variable]: `colors.${c}.500`,
+      [$fg6.variable]: `colors.${c}.600`,
       [$bg15.variable]: bg.light,
       _dark: {
         [$fg6.variable]: `colors.${c}.200`,
@@ -8928,7 +9223,7 @@ var variantTopAccent = definePartsStyle25((props) => {
   const bg = getBg(props);
   return {
     container: {
-      [$fg6.variable]: `colors.${c}.500`,
+      [$fg6.variable]: `colors.${c}.600`,
       [$bg15.variable]: bg.light,
       _dark: {
         [$fg6.variable]: `colors.${c}.200`,
@@ -8945,7 +9240,7 @@ var variantSolid4 = definePartsStyle25((props) => {
   return {
     container: {
       [$fg6.variable]: `colors.white`,
-      [$bg15.variable]: `colors.${c}.500`,
+      [$bg15.variable]: `colors.${c}.600`,
       _dark: {
         [$fg6.variable]: `colors.gray.900`,
         [$bg15.variable]: `colors.${c}.200`
@@ -9058,7 +9353,7 @@ var avatarTheme = defineMultiStyleConfig26({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-BVEAU2MF.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-P7SDT22G.mjs
 var components = {
   Accordion: accordionTheme,
   Alert: alertTheme,
@@ -9104,7 +9399,7 @@ var components = {
   Stepper: stepperTheme
 };
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-SKQLGI36.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-5GOSZLB7.mjs
 var semanticTokens = {
   colors: {
     "chakra-body-text": { _light: "gray.800", _dark: "whiteAlpha.900" },
@@ -9117,7 +9412,7 @@ var semanticTokens = {
   }
 };
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-RID7N3YQ.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-3F7U33P5.mjs
 var styles = {
   global: {
     body: {
@@ -9183,6 +9478,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,
@@ -11293,6 +11589,32 @@ function baseBorder(state2, props) {
       };
   }
 }
+function floatingBorder(state2, props) {
+  switch (state2) {
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("grey.300", "white")(props)
+        })
+      };
+    case "selected":
+    case "focus":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
+      };
+    case "active":
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("grey.200", "whiteAlpha.400")(props)
+        })
+      };
+  }
+}
 function baseBackground(state2, props) {
   switch (state2) {
     case "active":
@@ -11308,7 +11630,73 @@ function baseBackground(state2, props) {
         backgroundColor: mode("silver", "whiteAlpha.100")(props)
       };
     default:
-      return {};
+      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.darkBackgroundColor ?? colors.darkGrey}, ${colors.white} 30%)`
+        )(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.darkBackgroundColor ?? colors.darkGrey}, ${colors.white} 20%)`
+        )(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.darkBackgroundColor ?? colors.darkGrey}, ${colors.white} 40%)`
+        )(props)
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.darkBackgroundColor ?? colors.darkGrey}, ${colors.white} 10%)`
+        )(props)
+      };
   }
 }
 
@@ -11361,7 +11749,6 @@ var config18 = helpers10.defineMultiStyleConfig({
         ...baseBorder("focus", props)
       },
       _expanded: {
-        ...baseBackground("active", props),
         ...baseBorder("focus", props)
       },
       _invalid: {
@@ -11380,7 +11767,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(
@@ -12034,7 +12450,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",
@@ -12051,21 +12467,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: {},
@@ -12354,8 +12767,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: {
@@ -12411,10 +12862,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%",
@@ -12456,14 +12907,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);
@@ -12486,8 +12937,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",
@@ -12500,8 +12951,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",
@@ -12563,14 +13014,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,
@@ -12776,14 +13227,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",
@@ -12931,9 +13382,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",
@@ -13036,7 +13487,7 @@ var config34 = helpers24.defineMultiStyleConfig({
     variant: "round"
   }
 });
-var tabs_default = config34;
+var tabs_default = config35;
 var getTabColorSchemeProps = (props) => {
   switch (props.colorScheme) {
     case "dark":
@@ -13288,7 +13739,7 @@ var getTablistColorSchemeProps = (props) => {
       return {};
   }
 };
-var config35 = defineStyleConfig$1({
+var config36 = defineStyleConfig$1({
   baseStyle: (props) => ({
     ...input_default.baseStyle(props).field,
     minHeight: "5rem",
@@ -13305,8 +13756,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",
@@ -13330,7 +13781,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};
@@ -13396,6 +13847,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,
@@ -13404,6 +13860,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);
@@ -13415,7 +13883,7 @@ var ToastIcon = ({ variant }) => {
     Icon,
     {
       flexShrink: 0,
-      "aria-label": t2(texts22[variant]),
+      "aria-label": t2(texts23[variant]),
       marginRight: 1,
       marginY: 1.5,
       color: "darkGrey"
@@ -13432,7 +13900,7 @@ var getIcon3 = (variant) => {
       return ErrorOutline24Icon;
   }
 };
-var texts22 = createTexts({
+var texts23 = createTexts({
   info: {
     nb: "Informasjon",
     nn: "Informasjon",
@@ -13476,13 +13944,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",
@@ -13626,4 +14094,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 };