@vygruppen/spor-react 10.9.2 → 11.0.1

package/dist/index.js

@@ -11,7 +11,7 @@ var sporLoader = require('@vygruppen/spor-loader');
 var framerMotion = require('framer-motion');
 var date = require('@internationalized/date');
 var reactSwipeable = require('react-swipeable');
-var tokens11 = require('@vygruppen/spor-design-tokens');
+var tokens12 = require('@vygruppen/spor-design-tokens');
 var react$1 = require('@emotion/react');
 var deepmerge = require('deepmerge');
 var themeTools = require('@chakra-ui/theme-tools');
@@ -37,7 +37,7 @@ function _interopNamespace(e) {
 }
 
 var React86__namespace = /*#__PURE__*/_interopNamespace(React86);
-var tokens11__namespace = /*#__PURE__*/_interopNamespace(tokens11);
+var tokens12__namespace = /*#__PURE__*/_interopNamespace(tokens12);
 var deepmerge__default = /*#__PURE__*/_interopDefault(deepmerge);
 
 var __create = Object.create;
@@ -227,6 +227,7 @@ var init_CardSelect = __esm({
         fontWeight = "normal",
         ...props
       }, externalRef) => {
+        var _a6;
         const label = "label" in props ? props.label : props["aria-label"];
         const internalRef = React86.useRef(null);
         const triggerRef = externalRef ?? internalRef;
@@ -252,7 +253,6 @@ var init_CardSelect = __esm({
           {
             type: "button",
             ref: triggerRef,
-            fontWeight: "bold",
             sx: styles3.trigger,
             "aria-label": label,
             ...buttonProps,
@@ -272,17 +272,20 @@ var init_CardSelect = __esm({
             triggerRef,
             offset: size2 === "sm" ? 6 : 12,
             crossOffset,
-            placement
+            placement,
+            containerPadding: 0
           },
           /* @__PURE__ */ React86__namespace.default.createElement(
             exports.StaticCard,
             {
               colorScheme: "white",
-              size: "lg",
+              size: "md",
+              fontSize: "xs",
               border: "sm",
-              borderColor: "grey",
+              borderColor: "silver",
               sx: styles3.card,
-              ...overlayProps
+              ...overlayProps,
+              maxWidth: (((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? 1) * 2
             },
             /* @__PURE__ */ React86__namespace.default.createElement(Dialog, { "aria-label": label }, children)
           )
@@ -1102,7 +1105,7 @@ var init_ChoiceChip = __esm({
             {
               ...getInputProps({}, ref),
               id,
-              disabled: isDisabled
+              disabled: isDisabled || state2.isDisabled
             }
           ),
           /* @__PURE__ */ React86__namespace.default.createElement(
@@ -1114,7 +1117,7 @@ var init_ChoiceChip = __esm({
               "data-hover": dataAttr(state2.isHovered),
               "data-focus": dataAttr(state2.isFocused),
               "data-active": dataAttr(state2.isActive),
-              "data-disabled": dataAttr(state2.isDisabled)
+              "data-disabled": dataAttr(isDisabled || state2.isDisabled)
             },
             icon && /* @__PURE__ */ React86__namespace.default.createElement(react.chakra.span, { __css: styles3.icon }, state2.isChecked ? icon.checked : icon.default),
             chipType !== "icon" && /* @__PURE__ */ React86__namespace.default.createElement(react.chakra.span, { __css: styles3.label, ...getCheckboxProps() }, children),
@@ -2074,7 +2077,7 @@ var init_RadioGroup = __esm({
     );
   }
 });
-exports.SearchInput = void 0; var texts6;
+exports.SearchInput = void 0; var getOuterProps, texts6;
 var init_SearchInput = __esm({
   "src/input/SearchInput.tsx"() {
     init_input();
@@ -2086,12 +2089,13 @@ var init_SearchInput = __esm({
         const formControlProps = react.useFormControlContext();
         const autoGeneratedId = React86.useId();
         const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
-        return /* @__PURE__ */ React86__namespace.default.createElement(react.InputGroup, { position: "relative" }, /* @__PURE__ */ React86__namespace.default.createElement(exports.InputLeftElement, null, /* @__PURE__ */ React86__namespace.default.createElement(sporIconReact.SearchOutline24Icon, null)), /* @__PURE__ */ React86__namespace.default.createElement(
+        const { outerProps, innerProps } = getOuterProps(props);
+        return /* @__PURE__ */ React86__namespace.default.createElement(react.InputGroup, { position: "relative", ...outerProps }, /* @__PURE__ */ React86__namespace.default.createElement(exports.InputLeftElement, null, /* @__PURE__ */ React86__namespace.default.createElement(sporIconReact.SearchOutline24Icon, null)), /* @__PURE__ */ React86__namespace.default.createElement(
           react.Input,
           {
             paddingLeft: 7,
             paddingRight: 7,
-            ...props,
+            ...innerProps,
             id: inputId,
             type: "search",
             css: {
@@ -2117,6 +2121,19 @@ var init_SearchInput = __esm({
         )));
       }
     );
+    getOuterProps = (props) => {
+      const layoutKeys = /* @__PURE__ */ new Set(["w, width, maxW, minW, maxWidth, minWidth"]);
+      const outerProps = {};
+      const innerProps = {};
+      for (const key in props) {
+        if (layoutKeys.has(key)) {
+          outerProps[key] = props[key];
+        } else {
+          innerProps[key] = props[key];
+        }
+      }
+      return { outerProps, innerProps };
+    };
     texts6 = createTexts({
       label: {
         nb: "S\xF8k",
@@ -2284,6 +2301,7 @@ exports.RadioCard = void 0;
 var init_RadioCard = __esm({
   "src/layout/RadioCard.tsx"() {
     init_RadioCardGroup();
+    init_dist();
     exports.RadioCard = react.forwardRef(
       ({ children, value, isDisabled, ...props }, ref) => {
         const context = React86.useContext(exports.RadioCardGroupContext);
@@ -2346,9 +2364,9 @@ var init_RadioCard = __esm({
               as: "label",
               name,
               htmlFor: inputId,
-              "aria-checked": isChecked,
-              "data-checked": isChecked,
-              "data-disabled": isDisabled,
+              "aria-checked": dataAttr(isChecked),
+              "data-checked": dataAttr(isChecked),
+              "data-disabled": dataAttr(isDisabled),
               ...props,
               __css: {
                 ...styles3.container,
@@ -2863,7 +2881,16 @@ var init_ProgressLoader = __esm({
 exports.Skeleton = void 0;
 var init_Skeleton = __esm({
   "src/loader/Skeleton.tsx"() {
-    exports.Skeleton = react.forwardRef((props, ref) => /* @__PURE__ */ React86__namespace.default.createElement(react.Skeleton, { ...props, ref }));
+    exports.Skeleton = react.forwardRef((props, ref) => /* @__PURE__ */ React86__namespace.default.createElement(
+      react.Skeleton,
+      {
+        ...props,
+        ref,
+        "aria-busy": "true",
+        "aria-hidden": "true",
+        role: "alert"
+      }
+    ));
   }
 });
 exports.SkeletonCircle = void 0;
@@ -5506,7 +5533,7 @@ var init_FullScreenDrawer = __esm({
       const { onClose } = react.useModalContext();
       const { t: t2 } = useTranslation();
       const [isScreenSizeMinSm] = react.useMediaQuery(
-        `(min-width: ${tokens11__namespace.default.size.breakpoint.sm})`
+        `(min-width: ${tokens12__namespace.default.size.breakpoint.sm})`
       );
       if (isScreenSizeMinSm) {
         return /* @__PURE__ */ React86__namespace.default.createElement(
@@ -5516,8 +5543,7 @@ var init_FullScreenDrawer = __esm({
             leftIcon: /* @__PURE__ */ React86__namespace.default.createElement(sporIconReact.CloseFill24Icon, null),
             onClick: onClose,
             "aria-label": t2(texts23.close),
-            width: "fit-content",
-            marginLeft: "auto"
+            width: "fit-content"
           },
           t2(texts23.close)
         );
@@ -5536,7 +5562,7 @@ var init_FullScreenDrawer = __esm({
       const { onClose } = react.useModalContext();
       const { t: t2 } = useTranslation();
       const [isScreenSizeMinSm] = react.useMediaQuery(
-        `(min-width: ${tokens11__namespace.default.size.breakpoint.sm})`
+        `(min-width: ${tokens12__namespace.default.size.breakpoint.sm})`
       );
       if (isScreenSizeMinSm) {
         return /* @__PURE__ */ React86__namespace.default.createElement(
@@ -5546,8 +5572,7 @@ var init_FullScreenDrawer = __esm({
             leftIcon: /* @__PURE__ */ React86__namespace.default.createElement(sporIconReact.ArrowLeftFill24Icon, null),
             onClick: onClose,
             "aria-label": t2(texts23.backAriaLabel),
-            width: "fit-content",
-            marginLeft: "auto"
+            width: "fit-content"
           },
           t2(texts23.back)
         );
@@ -10900,10 +10925,10 @@ var init_chunk_MBVM6PEK = __esm({
     });
     variantOutline3 = defineStyle((props) => {
       const { colorScheme: c } = props;
-      const borderColor = themeTools.mode(`gray.200`, `whiteAlpha.300`)(props);
+      const borderColor2 = themeTools.mode(`gray.200`, `whiteAlpha.300`)(props);
       return {
         border: "1px solid",
-        borderColor: c === "gray" ? borderColor : "currentColor",
+        borderColor: c === "gray" ? borderColor2 : "currentColor",
         ".chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)": { marginEnd: "-1px" },
         ".chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)": { marginBottom: "-1px" },
         ...runIfFn(variantGhost, props)
@@ -11954,8 +11979,8 @@ function ghostBackground(state2, props) {
     case "selected": {
       return {
         backgroundColor: themeTools.mode(
-          "ghost.surface.selected.light",
-          "ghost.surface.selected.dark"
+          "ghost.surface.hover.light",
+          "ghost.surface.hover.dark"
         )(props)
       };
     }
@@ -12194,10 +12219,14 @@ var init_alert_expandable = __esm({
           },
           container: {
             _hover: {
+              backgroundColor: "cloudy",
               outlineColor: "sky"
             },
             _active: {
               backgroundColor: "icyBlue"
+            },
+            _focus: {
+              outlineColor: "greenHaze"
             }
           }
         },
@@ -12207,10 +12236,14 @@ var init_alert_expandable = __esm({
           },
           container: {
             _hover: {
+              backgroundColor: "coralGreen",
               outlineColor: "blueGreen"
             },
             _active: {
               backgroundColor: "mint"
+            },
+            _focus: {
+              outlineColor: "greenHaze"
             }
           }
         },
@@ -12220,7 +12253,11 @@ var init_alert_expandable = __esm({
           },
           container: {
             _hover: {
-              outlineColor: "sunshine"
+              backgroundColor: "primrose",
+              outlineColor: "banana"
+            },
+            _focus: {
+              outlineColor: "greenHaze"
             },
             _active: {
               backgroundColor: "cornSilk"
@@ -12233,8 +12270,12 @@ var init_alert_expandable = __esm({
           },
           container: {
             _hover: {
+              backgroundColor: "burntYellow",
               outlineColor: "golden"
             },
+            _focus: {
+              outlineColor: "greenHaze"
+            },
             _active: {
               backgroundColor: "sunshine"
             }
@@ -12246,10 +12287,14 @@ var init_alert_expandable = __esm({
           },
           container: {
             _hover: {
+              backgroundColor: "salmon",
               outlineColor: "apricot"
             },
             _active: {
               backgroundColor: "pink"
+            },
+            _focus: {
+              outlineColor: "greenHaze"
             }
           }
         },
@@ -12342,10 +12387,14 @@ var init_alert_service = __esm({
         service: {
           container: {
             _hover: {
-              outlineColor: "blueGreen"
+              backgroundColor: "teal.600",
+              outlineColor: "teal.600"
+            },
+            _focus: {
+              outlineColor: "green.500"
             },
             _active: {
-              backgroundColor: "pine",
+              backgroundColor: "teal.400",
               outlineColor: "pine"
             },
             color: "white"
@@ -12694,474 +12743,50 @@ var init_button2 = __esm({
     button_default = config7;
   }
 });
-var parts4, helpers5, config8, card_select_default;
-var init_card_select = __esm({
-  "src/theme/components/card-select.ts"() {
-    init_dist4();
-    init_dist3();
-    init_base_utils();
-    init_floating_utils();
-    init_focus_utils();
-    init_ghost_utils();
-    parts4 = anatomy("card-select").parts("trigger", "card");
-    helpers5 = createMultiStyleConfigHelpers(parts4.keys);
-    config8 = helpers5.defineMultiStyleConfig({
-      baseStyle: (props) => ({
-        trigger: {
-          appearance: "none",
-          display: "flex",
-          alignItems: "center",
-          transitionProperty: "outline",
-          transitionDuration: "fast",
-          ...baseText("default", props),
-          ...focusVisibleStyles(props)
-        },
-        card: {
-          borderRadius: "sm",
-          boxShadow: "md",
-          padding: 3,
-          ...baseText("default", props),
-          backgroundColor: themeTools.mode(
-            "white",
-            `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
-          )(props)
-        }
-      }),
-      variants: {
-        base: (props) => ({
-          trigger: {
-            ...baseBorder("default", props),
-            _hover: {
-              ...baseBorder("hover", props)
-            },
-            _active: {
-              ...baseBackground("active", props),
-              ...baseBorder("default", props)
-            },
-            _expanded: {
-              ...baseBackground("active", props)
-            }
-          }
-        }),
-        ghost: (props) => ({
-          trigger: {
-            _hover: {
-              ...ghostBackground("hover", props)
-            },
-            _active: {
-              ...ghostBackground("active", props)
-            },
-            _expanded: {
-              ...ghostBackground("selected", props)
-            }
-          }
-        }),
-        floating: (props) => ({
-          trigger: {
-            boxShadow: "sm",
-            ...floatingBackground("default", props),
-            ...floatingBorder("default", props),
-            transition: "all .1s ease-out",
-            _hover: {
-              ...floatingBackground("hover", props),
-              ...floatingBorder("hover", props)
-            },
-            _active: {
-              ...floatingBackground("active", props),
-              ...floatingBorder("active", props)
-            },
-            _expanded: {
-              ...floatingBackground("active", props)
-            }
-          },
-          card: {}
-        })
-      },
-      sizes: {
-        sm: {
-          trigger: {
-            paddingX: 1.5,
-            paddingY: 1,
-            minHeight: "1.25rem",
-            fontSize: "xs",
-            borderRadius: "sm"
-          }
-        },
-        md: {
-          trigger: {
-            paddingX: 2,
-            paddingY: 1.5,
-            minHeight: "2.625rem",
-            fontSize: "sm",
-            borderRadius: "sm"
-          }
-        },
-        lg: {
-          trigger: {
-            paddingX: 3,
-            paddingY: 2,
-            minHeight: "3.375rem",
-            fontSize: "sm",
-            borderRadius: "sm"
-          }
-        }
-      }
-    });
-    card_select_default = config8;
+var borders2;
+var init_borders = __esm({
+  "src/theme/foundations/borders.ts"() {
+    borders2 = {
+      none: "0",
+      sm: `${tokens12__namespace.default.size.stroke.sm} solid`,
+      "sm-dashed": `${tokens12__namespace.default.size.stroke.sm} dashed`,
+      md: `${tokens12__namespace.default.size.stroke.md} solid`,
+      "md-dashed": `${tokens12__namespace.default.size.stroke.md} dashed`,
+      lg: `${tokens12__namespace.default.size.stroke.lg} solid`,
+      "lg-dashed": `${tokens12__namespace.default.size.stroke.lg} dashed`
+    };
   }
 });
-var helpers6, config9, checkbox_default;
-var init_checkbox = __esm({
-  "src/theme/components/checkbox.ts"() {
-    init_dist4();
-    init_base_utils();
-    init_brand_utils();
-    init_focus_utils();
-    helpers6 = react.createMultiStyleConfigHelpers(checkboxAnatomy.keys);
-    config9 = helpers6.defineMultiStyleConfig({
-      baseStyle: (props) => ({
-        container: {
-          _hover: {
-            "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
-              ...baseBackground("hover", props),
-              borderColor: brandBackground("hover", props).backgroundColor
-            },
-            "input:enabled[aria-invalid] + .chakra-checkbox__control": {
-              backgroundColor: themeTools.mode("white", "inherit")(props),
-              borderColor: themeTools.mode("outline.error.light", "outline.error.dark")
-            },
-            "input:enabled:checked:not([aria-invalid]) + .chakra-checkbox__control": {
-              ...brandBackground("hover", props),
-              borderColor: brandBackground("hover", props).backgroundColor
-            },
-            "input:enabled:checked[aria-invalid] + .chakra-checkbox__control": {
-              borderColor: themeTools.mode("outline.error.light", "outline.error.dark"),
-              backgroundColor: themeTools.mode("outline.error.light", "outline.error.dark")
-            }
-          }
-        },
-        icon: {
-          fontSize: "1em",
-          transitionProperty: "transform",
-          transitionDuration: "normal",
-          strokeWidth: "1.5px !important"
-          // Required to make the default icon look correct
-        },
-        control: {
-          width: 4,
-          height: 4,
-          transitionProperty: "background, border-color",
-          transitionDuration: "normal",
-          border: "2px solid",
-          borderColor: themeTools.mode(
-            "base.outline.default.light",
-            "base.outline.default.dark"
-          )(props),
-          borderRadius: "xs",
-          ...baseBackground("default", props),
-          ...focusVisibleStyles(props),
-          _checked: {
-            ...brandText("default", props),
-            ...brandBackground("default", props),
-            borderColor: brandBackground("default", props).backgroundColor,
-            _disabled: {
-              ...baseBackground("disabled", props),
-              ...baseText("disabled", props),
-              borderColor: "currentColor"
-            },
-            _invalid: {
-              backgroundColor: "brightRed",
-              borderColor: "brightRed"
-            }
-          },
-          _disabled: {
-            ...baseBackground("disabled", props),
-            borderColor: baseText("disabled", props).color
-          },
-          _invalid: {
-            ...baseBackground("default", props),
-            borderColor: "brightRed"
-          }
-        },
-        label: {
-          userSelect: "none",
-          _disabled: { opacity: 0.4 }
-        }
-      })
-    });
-    checkbox_default = config9;
-  }
-});
-var parts5, helpers7, config10, choice_chip_default;
-var init_choice_chip = __esm({
-  "src/theme/components/choice-chip.ts"() {
-    init_accent_utils();
-    init_base_utils();
-    init_brand_utils();
-    init_floating_utils();
-    init_focus_utils();
-    parts5 = themeTools.anatomy("choice-chip").parts("container", "icon", "label");
-    helpers7 = react.createMultiStyleConfigHelpers(parts5.keys);
-    config10 = helpers7.defineMultiStyleConfig({
-      baseStyle: (props) => ({
-        container: {
-          display: "inline-flex",
-          alignItems: "center",
-          fontSize: "xs",
-          cursor: "pointer",
-          transitionProperty: "all",
-          borderRadius: "xl",
-          transitionDuration: "fast",
-          _checked: {
-            outlineColor: "transparent",
-            ...accentText("selected", props),
-            ...accentBackground("selected", props),
-            _hover: {
-              ...brandBackground("hover", props),
-              ...baseText("selected", props),
-              outlineColor: "transparent"
-            },
-            _active: {
-              ...baseText("selected", props),
-              ...brandBackground("active", props)
-            }
-          },
-          _disabled: {
-            pointerEvents: "none",
-            boxShadow: "none",
-            ...baseText("disabled", props),
-            ...baseBackground("disabled", props),
-            _hover: {
-              ...baseBackground("disabled", props),
-              boxShadow: "none",
-              ...baseText("disabled", props)
-            },
-            _checked: {
-              cursor: "not-allowed",
-              boxShadow: "none",
-              ...baseText("disabled", props),
-              ...baseBackground("disabled", props),
-              _hover: {
-                ...baseBackground("disabled", props),
-                boxShadow: "none",
-                ...baseText("disabled", props)
-              }
-            }
-          },
-          "input:focus-visible + &": focusVisibleStyles(props)._focusVisible
-        },
-        icon: {
-          marginRight: props.hasLabel ? 1 : 0
-        }
-      }),
-      variants: {
-        base: (props) => ({
-          container: {
-            ...baseBorder("default", props),
-            ...baseText("default", props),
-            _hover: {
-              ...baseText("default", props),
-              ...baseBorder("hover", props)
-            },
-            _active: {
-              ...baseBackground("active", props),
-              ...baseBorder("default", props)
-            }
-          }
-        }),
-        accent: (props) => ({
-          container: {
-            ...accentBackground("default", props),
-            ...accentText("default", props),
-            _hover: {
-              ...accentBackground("hover", props),
-              ...accentText("default", props)
-            },
-            _active: {
-              ...accentText("default", props),
-              ...accentBackground("active", props)
-            }
-          },
-          _active: {
-            ...accentText("default", props),
-            ...accentBackground("active", props)
-          }
-        }),
-        floating: (props) => ({
-          container: {
-            ...floatingBackground("default", props),
-            ...baseText("default", props),
-            ...floatingBorder("default", props),
-            boxShadow: "sm",
-            _hover: {
-              ...floatingBackground("hover", props),
-              ...floatingBorder("hover", props),
-              ...baseText("default", props),
-              boxShadow: "md"
-            },
-            _active: {
-              ...floatingBackground("active", props),
-              ...floatingBorder("active", props),
-              ...baseText("default", props)
-            }
-          }
-        })
-      },
-      sizes: {
-        xs: {
-          container: {
-            _checked: {
-              borderRadius: "0.563rem"
-            },
-            height: 5,
-            paddingX: 1.5
-          }
-        },
-        sm: {
-          container: {
-            _checked: {
-              borderRadius: "sm"
-            },
-            height: 6,
-            paddingX: 2
-          }
-        },
-        md: {
-          container: {
-            _checked: {
-              borderRadius: "sm"
-            },
-            height: 7,
-            paddingX: 2
-          }
-        },
-        lg: {
-          container: {
-            _checked: {
-              borderRadius: "md"
-            },
-            height: 8,
-            paddingX: 3
-          }
-        }
-      },
-      defaultProps: {
-        size: "sm"
-      }
-    });
-    choice_chip_default = config10;
-  }
-});
-var $size6, config11, close_button_default;
-var init_close_button = __esm({
-  "src/theme/components/close-button.ts"() {
-    init_focus_utils();
-    init_ghost_utils();
-    $size6 = themeTools.cssVar("close-button-size");
-    config11 = react.defineStyleConfig({
-      baseStyle: (props) => ({
-        w: [$size6.reference],
-        h: [$size6.reference],
-        transitionProperty: "common",
-        transitionDuration: "normal",
-        borderRadius: "md",
-        backgroundColor: "transparent",
-        color: themeTools.mode("darkGrey", "white")(props),
-        fontWeight: "normal",
-        ...focusVisibleStyles(props),
-        _hover: {
-          ...ghostBackground("hover", props),
-          _disabled: {
-            color: "dimGrey"
-          }
-        },
-        _active: {
-          ...ghostBackground("active", props)
-        }
-      }),
-      sizes: {
-        lg: {
-          [$size6.variable]: "40px",
-          fontSize: "xs"
-        },
-        md: {
-          [$size6.variable]: "32px",
-          fontSize: "0.75rem"
-        },
-        sm: {
-          [$size6.variable]: "24px",
-          fontSize: "0.625rem"
-        }
-      },
-      defaultProps: {
-        size: "md"
-      }
-    });
-    close_button_default = config11;
-  }
-});
-var variants13, defaultProps2, config12, code_default;
-var init_code = __esm({
-  "src/theme/components/code.ts"() {
-    init_badge();
-    ({ variants: variants13, defaultProps: defaultProps2 } = badge_default);
-    config12 = react.defineStyleConfig({
-      baseStyle: {
-        fontFamily: "monospace",
-        fontSize: ["mobile.xs", "desktop.xs"],
-        borderRadius: "xs",
-        paddingX: 1
-      },
-      variants: variants13,
-      defaultProps: defaultProps2
-    });
-    code_default = config12;
-  }
-});
-var borders2;
-var init_borders = __esm({
-  "src/theme/foundations/borders.ts"() {
-    borders2 = {
-      none: "0",
-      sm: `${tokens11__namespace.default.size.stroke.sm} solid`,
-      "sm-dashed": `${tokens11__namespace.default.size.stroke.sm} dashed`,
-      md: `${tokens11__namespace.default.size.stroke.md} solid`,
-      "md-dashed": `${tokens11__namespace.default.size.stroke.md} dashed`,
-      lg: `${tokens11__namespace.default.size.stroke.lg} solid`,
-      "lg-dashed": `${tokens11__namespace.default.size.stroke.lg} dashed`
-    };
-  }
-});
-var breakpoints2;
-var init_breakpoints = __esm({
-  "src/theme/foundations/breakpoints.ts"() {
-    breakpoints2 = {
-      base: "0px",
-      sm: tokens11__namespace.default.size.breakpoint.sm,
-      md: tokens11__namespace.default.size.breakpoint.md,
-      lg: tokens11__namespace.default.size.breakpoint.lg,
-      xl: tokens11__namespace.default.size.breakpoint.xl,
-      "2xl": tokens11__namespace.default.size.breakpoint.xl
-    };
+var breakpoints2;
+var init_breakpoints = __esm({
+  "src/theme/foundations/breakpoints.ts"() {
+    breakpoints2 = {
+      base: "0px",
+      sm: tokens12__namespace.default.size.breakpoint.sm,
+      md: tokens12__namespace.default.size.breakpoint.md,
+      lg: tokens12__namespace.default.size.breakpoint.lg,
+      xl: tokens12__namespace.default.size.breakpoint.xl,
+      "2xl": tokens12__namespace.default.size.breakpoint.xl
+    };
   }
 });
 var colors2;
 var init_colors = __esm({
   "src/theme/foundations/colors.ts"() {
     colors2 = {
-      ...tokens11__namespace.default.color.alias,
-      ...tokens11__namespace.default.color.palette,
-      ...tokens11__namespace.default.color.vyDigital,
-      linjetag: tokens11__namespace.default.color.linjetag
+      ...tokens12__namespace.default.color.alias,
+      ...tokens12__namespace.default.color.palette,
+      ...tokens12__namespace.default.color.vyDigital,
+      linjetag: tokens12__namespace.default.color.linjetag
     };
   }
 });
 
 // src/theme/foundations/config.ts
-var config13;
+var config8;
 var init_config = __esm({
   "src/theme/foundations/config.ts"() {
-    config13 = {
+    config8 = {
       cssVarPrefix: "spor",
       initialColorMode: "light",
       useSystemColorMode: false
@@ -13172,9 +12797,9 @@ var fonts;
 var init_fonts = __esm({
   "src/theme/foundations/fonts.ts"() {
     fonts = {
-      body: `${tokens11__namespace.default.font.family.body}, arial, sans-serif`,
-      heading: `${tokens11__namespace.default.font.family.heading}, arial, sans-serif`,
-      mono: `${tokens11__namespace.default.font.family.monospace}, monospace`
+      body: `${tokens12__namespace.default.font.family.body}, arial, sans-serif`,
+      heading: `${tokens12__namespace.default.font.family.heading}, arial, sans-serif`,
+      mono: `${tokens12__namespace.default.font.family.monospace}, monospace`
     };
   }
 });
@@ -13182,29 +12807,29 @@ var fontSizes;
 var init_fontSizes = __esm({
   "src/theme/foundations/fontSizes.ts"() {
     fontSizes = {
-      "2xs": tokens11__namespace.default.size.font.xs.mobile,
-      xs: tokens11__namespace.default.size.font.sm.mobile,
-      sm: tokens11__namespace.default.size.font.md.mobile,
-      md: tokens11__namespace.default.size.font.lg.mobile,
-      lg: tokens11__namespace.default.size.font.xl.mobile,
-      xl: tokens11__namespace.default.size.font.xxl.mobile,
-      "2xl": tokens11__namespace.default.size.font.xl.desktop,
-      "3xl": tokens11__namespace.default.size.font.xxl.desktop,
+      "2xs": tokens12__namespace.default.size.font.xs.mobile,
+      xs: tokens12__namespace.default.size.font.sm.mobile,
+      sm: tokens12__namespace.default.size.font.md.mobile,
+      md: tokens12__namespace.default.size.font.lg.mobile,
+      lg: tokens12__namespace.default.size.font.xl.mobile,
+      xl: tokens12__namespace.default.size.font.xxl.mobile,
+      "2xl": tokens12__namespace.default.size.font.xl.desktop,
+      "3xl": tokens12__namespace.default.size.font.xxl.desktop,
       mobile: {
-        xs: tokens11__namespace.default.size.font.xs.mobile,
-        sm: tokens11__namespace.default.size.font.sm.mobile,
-        md: tokens11__namespace.default.size.font.md.mobile,
-        lg: tokens11__namespace.default.size.font.lg.mobile,
-        xl: tokens11__namespace.default.size.font.xl.mobile,
-        xxl: tokens11__namespace.default.size.font.xxl.mobile
+        xs: tokens12__namespace.default.size.font.xs.mobile,
+        sm: tokens12__namespace.default.size.font.sm.mobile,
+        md: tokens12__namespace.default.size.font.md.mobile,
+        lg: tokens12__namespace.default.size.font.lg.mobile,
+        xl: tokens12__namespace.default.size.font.xl.mobile,
+        xxl: tokens12__namespace.default.size.font.xxl.mobile
       },
       desktop: {
-        xs: tokens11__namespace.default.size.font.xs.desktop,
-        sm: tokens11__namespace.default.size.font.sm.desktop,
-        md: tokens11__namespace.default.size.font.md.desktop,
-        lg: tokens11__namespace.default.size.font.lg.desktop,
-        xl: tokens11__namespace.default.size.font.xl.desktop,
-        xxl: tokens11__namespace.default.size.font.xxl.desktop
+        xs: tokens12__namespace.default.size.font.xs.desktop,
+        sm: tokens12__namespace.default.size.font.sm.desktop,
+        md: tokens12__namespace.default.size.font.md.desktop,
+        lg: tokens12__namespace.default.size.font.lg.desktop,
+        xl: tokens12__namespace.default.size.font.xl.desktop,
+        xxl: tokens12__namespace.default.size.font.xxl.desktop
       }
     };
   }
@@ -13225,8 +12850,8 @@ var lineHeights;
 var init_lineHeights = __esm({
   "src/theme/foundations/lineHeights.ts"() {
     lineHeights = {
-      base: tokens11__namespace.default.font.style.lg["line-height"],
-      normal: tokens11__namespace.default.font.style.lg["line-height"]
+      base: tokens12__namespace.default.font.style.lg["line-height"],
+      normal: tokens12__namespace.default.font.style.lg["line-height"]
     };
   }
 });
@@ -13234,13 +12859,13 @@ var radii2;
 var init_radii = __esm({
   "src/theme/foundations/radii.ts"() {
     radii2 = {
-      none: tokens11__namespace.default.size["border-radius"].none,
-      xs: tokens11__namespace.default.size["border-radius"].xs,
-      sm: tokens11__namespace.default.size["border-radius"].sm,
-      md: tokens11__namespace.default.size["border-radius"].md,
-      lg: tokens11__namespace.default.size["border-radius"].lg,
-      xl: tokens11__namespace.default.size["border-radius"].xl,
-      "2xl": tokens11__namespace.default.size["border-radius"]["2xl"],
+      none: tokens12__namespace.default.size["border-radius"].none,
+      xs: tokens12__namespace.default.size["border-radius"].xs,
+      sm: tokens12__namespace.default.size["border-radius"].sm,
+      md: tokens12__namespace.default.size["border-radius"].md,
+      lg: tokens12__namespace.default.size["border-radius"].lg,
+      xl: tokens12__namespace.default.size["border-radius"].xl,
+      "2xl": tokens12__namespace.default.size["border-radius"]["2xl"],
       round: "50%"
     };
   }
@@ -13250,18 +12875,18 @@ var init_shadows = __esm({
   "src/theme/foundations/shadows.ts"() {
     shadows2 = {
       none: "none",
-      sm: tokens11__namespace.default.depth.shadow.sm.value,
-      md: tokens11__namespace.default.depth.shadow.md.value,
-      lg: tokens11__namespace.default.depth.shadow.lg.value
+      sm: tokens12__namespace.default.depth.shadow.sm.value,
+      md: tokens12__namespace.default.depth.shadow.md.value,
+      lg: tokens12__namespace.default.depth.shadow.lg.value
     };
   }
 });
 var spacing2, space2;
 var init_spacing = __esm({
   "src/theme/foundations/spacing.ts"() {
-    spacing2 = Object.entries(tokens11__namespace.default.size.spacing).reduce(
-      (tokens16, [key, token]) => ({
-        ...tokens16,
+    spacing2 = Object.entries(tokens12__namespace.default.size.spacing).reduce(
+      (tokens17, [key, token]) => ({
+        ...tokens17,
         [Number(key)]: token
       }),
       {}
@@ -13269,8 +12894,6 @@ var init_spacing = __esm({
     space2 = spacing2;
   }
 });
-
-// src/theme/foundations/sizes.ts
 var largeSizes2, container2, sizes24;
 var init_sizes = __esm({
   "src/theme/foundations/sizes.ts"() {
@@ -13295,10 +12918,11 @@ var init_sizes = __esm({
       "8xl": "90rem"
     };
     container2 = {
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px"
+      base: "0px",
+      sm: tokens12__namespace.default.size.breakpoint.sm,
+      md: tokens12__namespace.default.size.breakpoint.md,
+      lg: tokens12__namespace.default.size.breakpoint.lg,
+      xl: tokens12__namespace.default.size.breakpoint.xl
     };
     sizes24 = {
       ...spacing2,
@@ -13313,73 +12937,73 @@ var init_textStyles = __esm({
     textStyles = {
       "2xl": {
         fontSize: [
-          tokens11__namespace.default.font.style.xxl["font-size"].mobile,
+          tokens12__namespace.default.font.style.xxl["font-size"].mobile,
           null,
           null,
-          tokens11__namespace.default.font.style.xxl["font-size"].desktop
+          tokens12__namespace.default.font.style.xxl["font-size"].desktop
         ],
-        fontFamily: tokens11__namespace.default.font.style.xxl["font-family"],
-        lineHeight: tokens11__namespace.default.font.style.xxl["line-height"]
+        fontFamily: tokens12__namespace.default.font.style.xxl["font-family"],
+        lineHeight: tokens12__namespace.default.font.style.xxl["line-height"]
       },
       "xl-display": {
         fontSize: [
-          tokens11__namespace.default.font.style["xl-display"]["font-size"].mobile,
+          tokens12__namespace.default.font.style["xl-display"]["font-size"].mobile,
           null,
           null,
-          tokens11__namespace.default.font.style["xl-display"]["font-size"].desktop
+          tokens12__namespace.default.font.style["xl-display"]["font-size"].desktop
         ],
-        fontFamily: tokens11__namespace.default.font.style["xl-display"]["font-family"],
-        lineHeight: tokens11__namespace.default.font.style["xl-display"]["line-height"]
+        fontFamily: tokens12__namespace.default.font.style["xl-display"]["font-family"],
+        lineHeight: tokens12__namespace.default.font.style["xl-display"]["line-height"]
       },
       "xl-sans": {
         fontSize: [
-          tokens11__namespace.default.font.style["xl-sans"]["font-size"].mobile,
+          tokens12__namespace.default.font.style["xl-sans"]["font-size"].mobile,
           null,
           null,
-          tokens11__namespace.default.font.style["xl-sans"]["font-size"].desktop
+          tokens12__namespace.default.font.style["xl-sans"]["font-size"].desktop
         ],
-        fontFamily: tokens11__namespace.default.font.style["xl-sans"]["font-family"],
-        lineHeight: tokens11__namespace.default.font.style["xl-sans"]["line-height"]
+        fontFamily: tokens12__namespace.default.font.style["xl-sans"]["font-family"],
+        lineHeight: tokens12__namespace.default.font.style["xl-sans"]["line-height"]
       },
       lg: {
         fontSize: [
-          tokens11__namespace.default.font.style.lg["font-size"].mobile,
+          tokens12__namespace.default.font.style.lg["font-size"].mobile,
           null,
           null,
-          tokens11__namespace.default.font.style.lg["font-size"].desktop
+          tokens12__namespace.default.font.style.lg["font-size"].desktop
         ],
-        fontFamily: tokens11__namespace.default.font.style.lg["font-family"],
-        lineHeight: tokens11__namespace.default.font.style.lg["line-height"]
+        fontFamily: tokens12__namespace.default.font.style.lg["font-family"],
+        lineHeight: tokens12__namespace.default.font.style.lg["line-height"]
       },
       md: {
         fontSize: [
-          tokens11__namespace.default.font.style.md["font-size"].mobile,
+          tokens12__namespace.default.font.style.md["font-size"].mobile,
           null,
           null,
-          tokens11__namespace.default.font.style.md["font-size"].desktop
+          tokens12__namespace.default.font.style.md["font-size"].desktop
         ],
-        fontFamily: tokens11__namespace.default.font.style.md["font-family"],
-        lineHeight: tokens11__namespace.default.font.style.md["line-height"]
+        fontFamily: tokens12__namespace.default.font.style.md["font-family"],
+        lineHeight: tokens12__namespace.default.font.style.md["line-height"]
       },
       sm: {
         fontSize: [
-          tokens11__namespace.default.font.style.sm["font-size"].mobile,
+          tokens12__namespace.default.font.style.sm["font-size"].mobile,
           null,
           null,
-          tokens11__namespace.default.font.style.sm["font-size"].desktop
+          tokens12__namespace.default.font.style.sm["font-size"].desktop
         ],
-        fontFamily: tokens11__namespace.default.font.style.sm["font-family"],
-        lineHeight: tokens11__namespace.default.font.style.sm["line-height"]
+        fontFamily: tokens12__namespace.default.font.style.sm["font-family"],
+        lineHeight: tokens12__namespace.default.font.style.sm["line-height"]
       },
       xs: {
         fontSize: [
-          tokens11__namespace.default.font.style.xs["font-size"].mobile,
+          tokens12__namespace.default.font.style.xs["font-size"].mobile,
           null,
           null,
-          tokens11__namespace.default.font.style.xs["font-size"].desktop
+          tokens12__namespace.default.font.style.xs["font-size"].desktop
         ],
-        fontFamily: tokens11__namespace.default.font.style.xs["font-family"],
-        lineHeight: tokens11__namespace.default.font.style.xs["line-height"]
+        fontFamily: tokens12__namespace.default.font.style.xs["font-family"],
+        lineHeight: tokens12__namespace.default.font.style.xs["line-height"]
       }
     };
   }
@@ -13388,19 +13012,19 @@ var zIndices2;
 var init_zIndices = __esm({
   "src/theme/foundations/zIndices.ts"() {
     zIndices2 = {
-      hide: tokens11__namespace.default.depth["z-index"].hide,
+      hide: tokens12__namespace.default.depth["z-index"].hide,
       auto: "auto",
-      base: tokens11__namespace.default.depth["z-index"].base,
-      docked: tokens11__namespace.default.depth["z-index"].docked,
-      dropdown: tokens11__namespace.default.depth["z-index"].dropdown,
-      sticky: tokens11__namespace.default.depth["z-index"].sticky,
-      banner: tokens11__namespace.default.depth["z-index"].banner,
-      overlay: tokens11__namespace.default.depth["z-index"].overlay,
-      modal: tokens11__namespace.default.depth["z-index"].modal,
-      popover: tokens11__namespace.default.depth["z-index"].popover,
-      skipLink: tokens11__namespace.default.depth["z-index"].skipLink,
-      toast: tokens11__namespace.default.depth["z-index"].toast,
-      tooltip: tokens11__namespace.default.depth["z-index"].tooltip
+      base: tokens12__namespace.default.depth["z-index"].base,
+      docked: tokens12__namespace.default.depth["z-index"].docked,
+      dropdown: tokens12__namespace.default.depth["z-index"].dropdown,
+      sticky: tokens12__namespace.default.depth["z-index"].sticky,
+      banner: tokens12__namespace.default.depth["z-index"].banner,
+      overlay: tokens12__namespace.default.depth["z-index"].overlay,
+      modal: tokens12__namespace.default.depth["z-index"].modal,
+      popover: tokens12__namespace.default.depth["z-index"].popover,
+      skipLink: tokens12__namespace.default.depth["z-index"].skipLink,
+      toast: tokens12__namespace.default.depth["z-index"].toast,
+      tooltip: tokens12__namespace.default.depth["z-index"].tooltip
     };
   }
 });
@@ -13426,7 +13050,7 @@ __export(foundations_exports, {
   borders: () => borders2,
   breakpoints: () => breakpoints2,
   colors: () => colors2,
-  config: () => config13,
+  config: () => config8,
   fontSizes: () => fontSizes,
   fontWeights: () => fontWeights,
   fonts: () => fonts,
@@ -13459,54 +13083,480 @@ var init_foundations = __esm({
     init_styles();
   }
 });
-var parts6, $arrowBackground, helpers8, config14, datepicker_default;
-var init_datepicker2 = __esm({
-  "src/theme/components/datepicker.ts"() {
-    init_foundations();
-    init_accent_utils();
+var parts4, helpers5, config9, card_select_default;
+var init_card_select = __esm({
+  "src/theme/components/card-select.ts"() {
+    init_dist4();
+    init_dist3();
     init_base_utils();
-    init_brand_utils();
     init_floating_utils();
     init_focus_utils();
     init_ghost_utils();
-    init_surface_utils();
-    parts6 = themeTools.anatomy("datepicker").parts(
-      "wrapper",
-      "calendarTriggerButton",
-      "arrow",
-      "calendarPopover",
-      "calendar",
-      "weekdays",
-      "weekend",
-      "dateCell",
-      "inputLabel",
-      "dateTimeSegment",
-      "cell"
-    );
-    $arrowBackground = themeTools.cssVar("popper-arrow-bg");
-    helpers8 = react.createMultiStyleConfigHelpers(parts6.keys);
-    config14 = helpers8.defineMultiStyleConfig({
+    init_foundations();
+    parts4 = anatomy("card-select").parts("trigger", "card");
+    helpers5 = createMultiStyleConfigHelpers(parts4.keys);
+    config9 = helpers5.defineMultiStyleConfig({
       baseStyle: (props) => ({
-        wrapper: {
-          transitionProperty: "box-shadow",
-          transitionDuration: "fast",
-          borderRadius: "sm",
+        trigger: {
+          appearance: "none",
           display: "flex",
-          flex: 1,
-          paddingY: 0.5,
           alignItems: "center",
-          _hover: {
-            zIndex: zIndices2.docked
-          },
-          _disabled: {
-            pointerEvents: "none",
-            ...baseBackground("disabled", props),
-            ...baseBorder("disabled", props),
-            ...baseText("disabled", props)
-          },
-          _focusWithin: {
-            ...focusVisibleStyles(props)._focusVisible
-          }
+          transitionProperty: "outline",
+          transitionDuration: "fast",
+          ...baseText("default", props),
+          ...focusVisibleStyles(props)
+        },
+        card: {
+          borderRadius: "sm",
+          boxShadow: "xs",
+          padding: 2,
+          ...baseText("default", props),
+          backgroundColor: themeTools.mode(
+            "white",
+            `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
+          )(props)
+        }
+      }),
+      variants: {
+        base: (props) => ({
+          trigger: {
+            ...baseBorder("default", props),
+            _hover: {
+              ...baseBorder("hover", props)
+            },
+            _active: {
+              ...baseBackground("active", props),
+              ...baseBorder("default", props)
+            },
+            _expanded: {
+              ...baseBackground("active", props)
+            }
+          }
+        }),
+        ghost: (props) => ({
+          trigger: {
+            _hover: {
+              ...ghostBackground("hover", props)
+            },
+            _active: {
+              ...ghostBackground("active", props)
+            },
+            _expanded: {
+              ...ghostBackground("active", props),
+              fontWeight: fontWeights.bold
+            }
+          }
+        }),
+        floating: (props) => ({
+          trigger: {
+            boxShadow: "sm",
+            ...floatingBackground("default", props),
+            ...floatingBorder("default", props),
+            transition: "all .1s ease-out",
+            _hover: {
+              ...floatingBackground("hover", props),
+              ...floatingBorder("hover", props)
+            },
+            _active: {
+              ...floatingBackground("active", props),
+              ...floatingBorder("active", props)
+            },
+            _expanded: {
+              ...floatingBackground("active", props)
+            }
+          },
+          card: {}
+        })
+      },
+      sizes: {
+        sm: {
+          trigger: {
+            paddingX: 1.5,
+            paddingY: 1,
+            minHeight: "1.25rem",
+            fontSize: "xs",
+            borderRadius: "lg"
+          }
+        },
+        md: {
+          trigger: {
+            paddingX: 2,
+            paddingY: 1.5,
+            minHeight: "2.625rem",
+            fontSize: "xs",
+            borderRadius: "lg"
+          }
+        },
+        lg: {
+          trigger: {
+            paddingX: 3,
+            paddingY: 2,
+            minHeight: "3.375rem",
+            fontSize: "sm",
+            borderRadius: "lg"
+          }
+        }
+      }
+    });
+    card_select_default = config9;
+  }
+});
+var helpers6, config10, checkbox_default;
+var init_checkbox = __esm({
+  "src/theme/components/checkbox.ts"() {
+    init_dist4();
+    init_base_utils();
+    init_brand_utils();
+    init_focus_utils();
+    helpers6 = react.createMultiStyleConfigHelpers(checkboxAnatomy.keys);
+    config10 = helpers6.defineMultiStyleConfig({
+      baseStyle: (props) => ({
+        container: {
+          _hover: {
+            "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
+              ...baseBackground("hover", props),
+              borderColor: brandBackground("hover", props).backgroundColor
+            },
+            "input:enabled[aria-invalid] + .chakra-checkbox__control": {
+              backgroundColor: themeTools.mode("white", "inherit")(props),
+              borderColor: themeTools.mode("outline.error.light", "outline.error.dark")
+            },
+            "input:enabled:checked:not([aria-invalid]) + .chakra-checkbox__control": {
+              ...brandBackground("hover", props),
+              borderColor: brandBackground("hover", props).backgroundColor
+            },
+            "input:enabled:checked[aria-invalid] + .chakra-checkbox__control": {
+              borderColor: themeTools.mode("outline.error.light", "outline.error.dark"),
+              backgroundColor: themeTools.mode("outline.error.light", "outline.error.dark")
+            }
+          }
+        },
+        icon: {
+          fontSize: "1em",
+          transitionProperty: "transform",
+          transitionDuration: "normal",
+          strokeWidth: "1.5px !important"
+          // Required to make the default icon look correct
+        },
+        control: {
+          width: 4,
+          height: 4,
+          transitionProperty: "background, border-color",
+          transitionDuration: "normal",
+          border: "2px solid",
+          borderColor: themeTools.mode(
+            "base.outline.default.light",
+            "base.outline.default.dark"
+          )(props),
+          borderRadius: "xs",
+          ...baseBackground("default", props),
+          ...focusVisibleStyles(props),
+          _checked: {
+            ...brandText("default", props),
+            ...brandBackground("default", props),
+            borderColor: brandBackground("default", props).backgroundColor,
+            _disabled: {
+              ...baseBackground("disabled", props),
+              ...baseText("disabled", props),
+              borderColor: "currentColor"
+            },
+            _invalid: {
+              backgroundColor: "brightRed",
+              borderColor: "brightRed"
+            }
+          },
+          _disabled: {
+            ...baseBackground("disabled", props),
+            borderColor: baseText("disabled", props).color
+          },
+          _invalid: {
+            ...baseBackground("default", props),
+            borderColor: "brightRed"
+          }
+        },
+        label: {
+          userSelect: "none",
+          _disabled: { opacity: 0.4 }
+        }
+      })
+    });
+    checkbox_default = config10;
+  }
+});
+var parts5, helpers7, config11, choice_chip_default;
+var init_choice_chip = __esm({
+  "src/theme/components/choice-chip.ts"() {
+    init_accent_utils();
+    init_base_utils();
+    init_brand_utils();
+    init_floating_utils();
+    init_focus_utils();
+    parts5 = themeTools.anatomy("choice-chip").parts("container", "icon", "label");
+    helpers7 = react.createMultiStyleConfigHelpers(parts5.keys);
+    config11 = helpers7.defineMultiStyleConfig({
+      baseStyle: (props) => ({
+        container: {
+          display: "inline-flex",
+          alignItems: "center",
+          fontSize: "xs",
+          cursor: "pointer",
+          transitionProperty: "all",
+          borderRadius: "xl",
+          transitionDuration: "fast",
+          _checked: {
+            outlineColor: "transparent",
+            ...accentText("selected", props),
+            ...accentBackground("selected", props),
+            _hover: {
+              ...brandBackground("hover", props),
+              ...baseText("selected", props),
+              outlineColor: "transparent"
+            },
+            _active: {
+              ...baseText("selected", props),
+              ...brandBackground("active", props)
+            }
+          },
+          _disabled: {
+            pointerEvents: "none",
+            boxShadow: "none",
+            ...baseText("disabled", props),
+            ...baseBackground("disabled", props),
+            _hover: {
+              ...baseBackground("disabled", props),
+              boxShadow: "none",
+              ...baseText("disabled", props)
+            },
+            _checked: {
+              cursor: "not-allowed",
+              boxShadow: "none",
+              ...baseText("disabled", props),
+              ...baseBackground("disabled", props),
+              _hover: {
+                ...baseBackground("disabled", props),
+                boxShadow: "none",
+                ...baseText("disabled", props)
+              }
+            }
+          },
+          "input:focus-visible + &": focusVisibleStyles(props)._focusVisible
+        },
+        icon: {
+          marginRight: props.hasLabel ? 1 : 0
+        }
+      }),
+      variants: {
+        base: (props) => ({
+          container: {
+            ...baseBorder("default", props),
+            ...baseText("default", props),
+            _hover: {
+              ...baseText("default", props),
+              ...baseBorder("hover", props)
+            },
+            _active: {
+              ...baseBackground("active", props),
+              ...baseBorder("default", props)
+            }
+          }
+        }),
+        accent: (props) => ({
+          container: {
+            ...accentBackground("default", props),
+            ...accentText("default", props),
+            _hover: {
+              ...accentBackground("hover", props),
+              ...accentText("default", props)
+            },
+            _active: {
+              ...accentText("default", props),
+              ...accentBackground("active", props)
+            }
+          },
+          _active: {
+            ...accentText("default", props),
+            ...accentBackground("active", props)
+          }
+        }),
+        floating: (props) => ({
+          container: {
+            ...floatingBackground("default", props),
+            ...baseText("default", props),
+            ...floatingBorder("default", props),
+            boxShadow: "sm",
+            _hover: {
+              ...floatingBackground("hover", props),
+              ...floatingBorder("hover", props),
+              ...baseText("default", props),
+              boxShadow: "md"
+            },
+            _active: {
+              ...floatingBackground("active", props),
+              ...floatingBorder("active", props),
+              ...baseText("default", props)
+            }
+          }
+        })
+      },
+      sizes: {
+        xs: {
+          container: {
+            _checked: {
+              borderRadius: "0.563rem"
+            },
+            height: 5,
+            paddingX: 1.5
+          }
+        },
+        sm: {
+          container: {
+            _checked: {
+              borderRadius: "sm"
+            },
+            height: 6,
+            paddingX: 2
+          }
+        },
+        md: {
+          container: {
+            _checked: {
+              borderRadius: "sm"
+            },
+            height: 7,
+            paddingX: 2
+          }
+        },
+        lg: {
+          container: {
+            _checked: {
+              borderRadius: "md"
+            },
+            height: 8,
+            paddingX: 3
+          }
+        }
+      },
+      defaultProps: {
+        size: "sm"
+      }
+    });
+    choice_chip_default = config11;
+  }
+});
+var $size6, config12, close_button_default;
+var init_close_button = __esm({
+  "src/theme/components/close-button.ts"() {
+    init_focus_utils();
+    init_ghost_utils();
+    $size6 = themeTools.cssVar("close-button-size");
+    config12 = react.defineStyleConfig({
+      baseStyle: (props) => ({
+        w: [$size6.reference],
+        h: [$size6.reference],
+        transitionProperty: "common",
+        transitionDuration: "normal",
+        borderRadius: "md",
+        backgroundColor: "transparent",
+        color: themeTools.mode("darkGrey", "white")(props),
+        fontWeight: "normal",
+        ...focusVisibleStyles(props),
+        _hover: {
+          ...ghostBackground("hover", props),
+          _disabled: {
+            color: "dimGrey"
+          }
+        },
+        _active: {
+          ...ghostBackground("active", props)
+        }
+      }),
+      sizes: {
+        lg: {
+          [$size6.variable]: "40px",
+          fontSize: "xs"
+        },
+        md: {
+          [$size6.variable]: "32px",
+          fontSize: "0.75rem"
+        },
+        sm: {
+          [$size6.variable]: "24px",
+          fontSize: "0.625rem"
+        }
+      },
+      defaultProps: {
+        size: "md"
+      }
+    });
+    close_button_default = config12;
+  }
+});
+var variants13, defaultProps2, config13, code_default;
+var init_code = __esm({
+  "src/theme/components/code.ts"() {
+    init_badge();
+    ({ variants: variants13, defaultProps: defaultProps2 } = badge_default);
+    config13 = react.defineStyleConfig({
+      baseStyle: {
+        fontFamily: "monospace",
+        fontSize: ["mobile.xs", "desktop.xs"],
+        borderRadius: "xs",
+        paddingX: 1
+      },
+      variants: variants13,
+      defaultProps: defaultProps2
+    });
+    code_default = config13;
+  }
+});
+var parts6, $arrowBackground, helpers8, config14, datepicker_default;
+var init_datepicker2 = __esm({
+  "src/theme/components/datepicker.ts"() {
+    init_foundations();
+    init_accent_utils();
+    init_base_utils();
+    init_brand_utils();
+    init_floating_utils();
+    init_focus_utils();
+    init_ghost_utils();
+    init_surface_utils();
+    parts6 = themeTools.anatomy("datepicker").parts(
+      "wrapper",
+      "calendarTriggerButton",
+      "arrow",
+      "calendarPopover",
+      "calendar",
+      "weekdays",
+      "weekend",
+      "dateCell",
+      "inputLabel",
+      "dateTimeSegment",
+      "cell"
+    );
+    $arrowBackground = themeTools.cssVar("popper-arrow-bg");
+    helpers8 = react.createMultiStyleConfigHelpers(parts6.keys);
+    config14 = helpers8.defineMultiStyleConfig({
+      baseStyle: (props) => ({
+        wrapper: {
+          transitionProperty: "box-shadow",
+          transitionDuration: "fast",
+          borderRadius: "sm",
+          display: "flex",
+          flex: 1,
+          paddingY: 0.5,
+          alignItems: "center",
+          _hover: {
+            zIndex: zIndices2.docked
+          },
+          _disabled: {
+            pointerEvents: "none",
+            ...baseBackground("disabled", props),
+            ...baseBorder("disabled", props),
+            ...baseText("disabled", props)
+          },
+          _focusWithin: {
+            ...focusVisibleStyles(props)._focusVisible
+          }
         },
         inputLabel: {
           fontSize: "mobile.xs",
@@ -13652,44 +13702,49 @@ var init_datepicker2 = __esm({
     datepicker_default = config14;
   }
 });
-var isSolid, isDashed, divider_default;
+function getSizes(size2) {
+  const sizes25 = {
+    sm: {
+      height: "1px",
+      dash: "1px",
+      gap: "4px"
+    },
+    md: {
+      height: "2px",
+      dash: "3px",
+      gap: "6px"
+    },
+    lg: {
+      height: "3px",
+      dash: "3px",
+      gap: "9px"
+    }
+  };
+  return sizes25[size2] || sizes25["md"];
+}
+var borderColor, divider_default;
 var init_divider = __esm({
   "src/theme/components/divider.ts"() {
     init_dist3();
-    isSolid = (props) => props.variant === "solid";
-    isDashed = (props) => props.variant === "dashed";
+    borderColor = themeTools.mode("blackAlpha.300", "whiteAlpha.300");
     divider_default = defineStyleConfig({
       baseStyle: (props) => ({
-        borderColor: themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)
+        borderColor: borderColor(props)
       }),
       variants: {
         solid: {
           borderStyle: "solid"
         },
-        dashed: (props) => ({
-          backgroundImage: `repeating-linear-gradient(90deg, ${themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)}, ${themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)} 4px, transparent 4px, transparent 10px)`,
-          backgroundPosition: "left bottom",
-          backgroundRepeat: "repeat-x",
-          backgroundSize: "100% 3px",
-          borderRadius: props.size === "sm" ? "0.5px" : props.size === "md" ? "1px" : "1.5px"
-        })
-      },
-      sizes: {
-        sm: (props) => ({
-          borderWidth: isSolid(props) ? "1px" : void 0,
-          borderRadius: isSolid(props) ? "0.5px" : void 0,
-          height: isDashed(props) ? "1px" : void 0
-        }),
-        md: (props) => ({
-          borderWidth: isSolid(props) ? "2px" : void 0,
-          borderRadius: isSolid(props) ? "1px" : "10px",
-          height: isDashed(props) ? "2px" : void 0
-        }),
-        lg: (props) => ({
-          borderWidth: isSolid(props) ? "3px" : void 0,
-          borderRadius: isSolid(props) ? "1.5px" : void 0,
-          height: isDashed(props) ? "3px" : void 0
-        })
+        dashed: (props) => {
+          const { height, dash, gap } = getSizes(props.size);
+          return {
+            height,
+            backgroundImage: `linear-gradient(90deg, ${borderColor(props)}, ${borderColor(props)} ${dash}, transparent ${dash}, transparent ${gap})`,
+            backgroundPosition: "left bottom",
+            backgroundRepeat: "repeat-x",
+            backgroundSize: `${gap} ${height}`
+          };
+        }
       },
       defaultProps: {
         variant: "solid",
@@ -16452,7 +16507,7 @@ var init_font_faces = __esm({
   "src/theme/font-faces.ts"() {
     exports.fontFaces = `
 @font-face {
-  font-family: ${tokens11__namespace.default.asset.font["vy-sans"]["light"].name};
+  font-family: ${tokens12__namespace.default.asset.font["vy-sans"]["light"].name};
   src: url("https://www.vy.no/styles/font/VySans-Light.woff2") format("woff2"),
     url("https://www.vy.no/styles/font/VySans-Light.woff") format("woff");
   font-style: normal;
@@ -16460,7 +16515,7 @@ var init_font_faces = __esm({
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens11__namespace.default.asset.font["vy-sans"]["light-italic"].name};
+  font-family: ${tokens12__namespace.default.asset.font["vy-sans"]["light-italic"].name};
   src: url("https://www.vy.no/styles/font/VySans-LightItalic.woff2")
       format("woff2"),
     url("https://www.vy.no/styles/font/VySans-LightItalic.woff") format("woff");
@@ -16469,7 +16524,7 @@ var init_font_faces = __esm({
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens11__namespace.default.asset.font["vy-sans"]["medium"].name};
+  font-family: ${tokens12__namespace.default.asset.font["vy-sans"]["medium"].name};
   src: url("https://www.vy.no/styles/font/VySans-Regular.woff2") format("woff2"),
     url("https://www.vy.no/styles/font/VySans-Regular.woff") format("woff");
   font-style: normal;
@@ -16477,7 +16532,7 @@ var init_font_faces = __esm({
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens11__namespace.default.asset.font["vy-sans"]["medium-italic"].name};
+  font-family: ${tokens12__namespace.default.asset.font["vy-sans"]["medium-italic"].name};
   src: url("https://www.vy.no/styles/font/VySans-RegularItalic.woff2")
       format("woff2"),
     url("https://www.vy.no/styles/font/VySans-RegularItalic.woff")
@@ -16487,7 +16542,7 @@ var init_font_faces = __esm({
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens11__namespace.default.asset.font["vy-sans"]["bold"].name};
+  font-family: ${tokens12__namespace.default.asset.font["vy-sans"]["bold"].name};
   src: url("https://www.vy.no/styles/font/VySans-Bold.woff2") format("woff2"),
     url("https://www.vy.no/styles/font/VySans-Bold.woff") format("woff");
   font-style: normal;
@@ -16495,7 +16550,7 @@ var init_font_faces = __esm({
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens11__namespace.default.asset.font["vy-sans"]["bold-italic"].name};
+  font-family: ${tokens12__namespace.default.asset.font["vy-sans"]["bold-italic"].name};
   src: url("https://www.vy.no/styles/font/VySans-BoldItalic.woff2")
       format("woff2"),
     url("https://www.vy.no/styles/font/VySans-BoldItalic.woff") format("woff");
@@ -16504,7 +16559,7 @@ var init_font_faces = __esm({
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens11__namespace.default.asset.font["vy-display"].name};
+  font-family: ${tokens12__namespace.default.asset.font["vy-display"].name};
   src: url("https://www.vy.no/styles/font/VyDisplay-Medium.woff2")
       format("woff2"),
     url("https://www.vy.no/styles/font/VyDisplay-Medium.woff") format("woff");
@@ -16556,7 +16611,7 @@ var init_theme = __esm({
         }
       },
       ["CargoNet" /* CargoNet */]: {
-        colors: tokens11__namespace.default.color.cargonet
+        colors: tokens12__namespace.default.color.cargonet
       }
     };
   }
@@ -17220,7 +17275,7 @@ Object.defineProperty(exports, 'Time', {
   enumerable: true,
   get: function () { return date.Time; }
 });
-exports.tokens = tokens11__namespace;
+exports.tokens = tokens12__namespace;
 exports.Combobox = Combobox;
 exports.DateRangePicker = DateRangePicker;
 exports.DrawerHeader = exports.ModalHeader;