@norges-domstoler/dds-components 13.7.0 → 13.8.1

package/dist/cjs/index.js

@@ -10,6 +10,7 @@ var styled = require('styled-components');
 var ddsDesignTokens = require('@norges-domstoler/dds-design-tokens');
 var React = require('react');
 var tslib = require('tslib');
+var developmentUtils = require('@norges-domstoler/development-utils');
 var ReactSelect = require('react-select');
 var reactDom = require('react-dom');
 var fileSelector = require('file-selector');
@@ -25,7 +26,8 @@ var accepted__default = /*#__PURE__*/_interopDefaultCompat(accepted);
 var colors$s = ddsDesignTokens.ddsBaseTokens.colors,
   spacing$B = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-  borderRadius$9 = ddsDesignTokens.ddsBaseTokens.borderRadius;
+  borderRadius$9 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+  breakpoints = ddsDesignTokens.ddsBaseTokens.breakpoints;
 var navigationItems = {
   gap: spacing$B.SizesDdsSpacingLocalX05,
   item: Object.assign(Object.assign({}, fontPackages$4.body_sans_02.base), {
@@ -47,13 +49,23 @@ var logoAndVersion = {
   padding: '36px 24px',
   color: colors$s.DdsColorNeutralsWhite,
   logo: Object.assign(Object.assign({}, fontPackages$4.heading_sans_05.base), {
-    fontWeight: 700
+    fontWeight: 700,
+    small: Object.assign(Object.assign({}, fontPackages$4.heading_sans_03.base), {
+      fontWeight: 600
+    })
   }),
   version: Object.assign({}, fontPackages$4.supportingStyle_tiny_01.base)
 };
+var topBar = {
+  padding: spacing$B.SizesDdsSpacingLocalX025,
+  height: "calc(".concat(spacing$B.SizesDdsSpacingLayoutX3, " + 2 * ").concat(spacing$B.SizesDdsSpacingLocalX025, ")"),
+  buttonTextColor: colors$s.DdsColorNeutralsGray3,
+  gap: spacing$B.SizesDdsSpacingLocalX025
+};
 var navigation$2 = {
   navigationItems: navigationItems,
   logoAndVersion: logoAndVersion,
+  topBar: topBar,
   color: colors$s.DdsColorNeutralsGray1,
   backgroundColor: colors$s.DdsColorPrimaryBase,
   gap: spacing$B.SizesDdsSpacingLocalX05,
@@ -61,17 +73,19 @@ var navigation$2 = {
   padding: spacing$B.SizesDdsSpacingLocalX1,
   width: '264px',
   mobile: {
+    breakpoint: breakpoints.DdsBreakpointSm,
     iconColors: colors$s.DdsColorNeutralsGray3
   }
 };
-var floatingActionButtons = {
+var floatingActionButtons$1 = {
   gap: spacing$B.SizesDdsSpacingLocalX1,
   textColor: colors$s.DdsColorNeutralsGray7,
-  backgroundColor: colors$s.DdsColorPrimaryDarker
+  backgroundColor: colors$s.DdsColorNeutralsWhite,
+  borderRadius: borderRadius$9.RadiiDdsBorderRadius3Radius
 };
 var appShellTokens = {
   navigation: navigation$2,
-  floatingActionButtons: floatingActionButtons
+  floatingActionButtons: floatingActionButtons$1
 };
 
 var border$b = ddsDesignTokens.ddsBaseTokens.border,
@@ -114,450 +128,69 @@ var Divider = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 Divider.displayName = 'Divider';
 
-var navTokens$1 = appShellTokens.navigation;
-var navItemTokens = navTokens$1.navigationItems.item;
-var IconContainer = styled__default.default.div.withConfig({
-  displayName: "NavigationItem__IconContainer",
-  componentId: "sc-8k2l5g-0"
-})(["grid-area:icon;display:flex;align-items:center;"]);
-var TextContainer$1 = styled__default.default.span.withConfig({
-  displayName: "NavigationItem__TextContainer",
-  componentId: "sc-8k2l5g-1"
-})(["grid-area:text;"]);
-var ChevronContainer = styled__default.default.div.withConfig({
-  displayName: "NavigationItem__ChevronContainer",
-  componentId: "sc-8k2l5g-2"
-})(["display:flex;align-items:center;opacity:0;grid-area:chevron;"]);
-var BaseLink = styled__default.default.a.withConfig({
-  displayName: "NavigationItem__BaseLink",
-  componentId: "sc-8k2l5g-3"
-})(["padding:", ";gap:", ";border-radius:", ";text-decoration:none;color:", ";font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";:hover:not(.active){background-color:", ";}&.active{color:", ";background-color:", ";}"], navItemTokens.padding, navItemTokens.gap, navItemTokens.borderRadius, navItemTokens.color, navItemTokens.fontSize, navItemTokens.fontStyle, navItemTokens.fontFamily, navItemTokens.fontWeight, navItemTokens.lineHeight, navItemTokens.letterSpacing, navItemTokens.hover.backgroundColor, navItemTokens.active.color, navItemTokens.active.backgroundColor);
-var InternalNavItem = styled__default.default(BaseLink).withConfig({
-  displayName: "NavigationItem__InternalNavItem",
-  componentId: "sc-8k2l5g-4"
-})(["display:grid;align-items:center;grid-template-areas:'icon text chevron';grid-template-columns:min-content 1fr min-content;:hover{", "{opacity:1;}}"], ChevronContainer);
-var ExternalNavItem = styled__default.default(BaseLink).withConfig({
-  displayName: "NavigationItem__ExternalNavItem",
-  componentId: "sc-8k2l5g-5"
-})(["display:flex;flex-direction:row;align-items:center;font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";"], navItemTokens.external.fontSize, navItemTokens.external.fontStyle, navItemTokens.external.fontFamily, navItemTokens.external.fontWeight, navItemTokens.external.lineHeight, navItemTokens.external.letterSpacing);
-var NavigationItem$1 = function NavigationItem(_a) {
-  var _as = _a.as,
-    active = _a.active,
-    icon = _a.icon,
-    external = _a.external,
-    children = _a.children,
-    rest = tslib.__rest(_a, ["as", "active", "icon", "external", "children"]);
-  var Comp = _as !== null && _as !== void 0 ? _as : 'a';
-  if (external) {
-    return jsxRuntime.jsxs(ExternalNavItem, Object.assign({
-      as: Comp
-    }, rest, {
-      children: [children, jsxRuntime.jsx(ddsIcons.Icon, {
-        icon: ddsIcons.OpenExternalIcon,
-        iconSize: "inherit"
-      })]
-    }));
-  }
-  return jsxRuntime.jsxs(InternalNavItem, Object.assign({
-    as: Comp
-  }, rest, {
-    className: active ? 'active' : '',
-    children: [jsxRuntime.jsx(IconContainer, {
-      children: icon && jsxRuntime.jsx(ddsIcons.Icon, {
-        icon: icon
-      })
-    }), jsxRuntime.jsx(TextContainer$1, {
-      children: children
-    }), jsxRuntime.jsx(ChevronContainer, {
-      children: jsxRuntime.jsx(ddsIcons.Icon, {
-        icon: ddsIcons.ChevronRightIcon
-      })
-    })]
-  }));
-};
-NavigationItem$1.displayName = 'AppShell.NavItem';
-
-var navTokens = appShellTokens.navigation;
-var Sidebar = styled__default.default.div.withConfig({
-  displayName: "Navigation__Sidebar",
-  componentId: "sc-twhp5c-0"
-})(["display:flex;flex-direction:column;height:100vh;width:", ";padding:", ";color:", ";background-color:", ";box-sizing:border-box;position:sticky;top:0;left:0;"], navTokens.width, navTokens.padding, navTokens.color, navTokens.backgroundColor);
-var LogoAndVersionContainer = styled__default.default.div.withConfig({
-  displayName: "Navigation__LogoAndVersionContainer",
-  componentId: "sc-twhp5c-1"
-})(["display:flex;flex-direction:column;color:", ";padding:", ";"], navTokens.logoAndVersion.color, navTokens.logoAndVersion.padding);
-var Logo = styled__default.default.a.withConfig({
-  displayName: "Navigation__Logo",
-  componentId: "sc-twhp5c-2"
-})(["font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";text-align:middle;"], navTokens.logoAndVersion.logo.fontSize, navTokens.logoAndVersion.logo.fontStyle, navTokens.logoAndVersion.logo.fontFamily, navTokens.logoAndVersion.logo.fontWeight, navTokens.logoAndVersion.logo.lineHeight, navTokens.logoAndVersion.logo.letterSpacing);
-var Version = styled__default.default.span.withConfig({
-  displayName: "Navigation__Version",
-  componentId: "sc-twhp5c-3"
-})(["font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";"], navTokens.logoAndVersion.version.fontSize, navTokens.logoAndVersion.version.fontStyle, navTokens.logoAndVersion.version.fontFamily, navTokens.logoAndVersion.version.fontWeight, navTokens.logoAndVersion.version.lineHeight, navTokens.logoAndVersion.version.letterSpacing);
-var NavigationItems = styled__default.default.nav.withConfig({
-  displayName: "Navigation__NavigationItems",
-  componentId: "sc-twhp5c-4"
-})(["display:flex;flex-direction:column;gap:", ";"], navTokens.navigationItems.gap);
-var DividerWrapper = styled__default.default.div.withConfig({
-  displayName: "Navigation__DividerWrapper",
-  componentId: "sc-twhp5c-5"
-})(["padding-left:", ";padding-right:", ";"], navTokens.navigationItems.item.padding, navTokens.navigationItems.item.padding);
-var StyledDivider$1 = styled__default.default(Divider).withConfig({
-  displayName: "Navigation__StyledDivider",
-  componentId: "sc-twhp5c-6"
-})(["border-color:", ";"], navTokens.dividerColor);
-var Navigation$1 = function Navigation(_ref) {
-  var version = _ref.version,
-    internal = _ref.internal,
-    external = _ref.external;
-  return jsxRuntime.jsxs(Sidebar, {
-    children: [jsxRuntime.jsxs(LogoAndVersionContainer, {
-      children: [jsxRuntime.jsx(Logo, {
-        children: "Lovisa"
-      }), version !== '' && jsxRuntime.jsxs(Version, {
-        children: ["v ", version]
-      })]
-    }), jsxRuntime.jsxs(NavigationItems, {
-      children: [React.Children.map(internal, function (item) {
-        if (item.type !== NavigationItem$1) {
-          console.warn("Du bruker en React-komponent som ikke er tillat i AppShell-internal. Du kan kun bruke AppShell.NavItem i AppShell-internal.");
-          return null;
-        }
-        return item;
-      }), external.length > 0 && jsxRuntime.jsx(DividerWrapper, {
-        children: jsxRuntime.jsx(StyledDivider$1, {})
-      }), React.Children.map(external, function (item) {
-        if (item.type !== NavigationItem$1) {
-          console.warn('Du bruker en React-komponent som ikke er tillat i AppShell-external. Du kan kun bruke AppShell.NavItem i AppShell-external.');
-          return null;
-        }
-        return item;
-      })]
-    })]
-  });
-};
-
-var AppShellContainer = styled__default.default.div.withConfig({
-  displayName: "AppShell__AppShellContainer",
-  componentId: "sc-1c8yu5p-0"
-})(["display:flex;flex-direction:row;"]);
-var MainContent = styled__default.default.main.withConfig({
-  displayName: "AppShell__MainContent",
-  componentId: "sc-1c8yu5p-1"
-})(["min-width:calc(100vw - ", ");max-width:calc(100vw - ", ");"], appShellTokens.navigation.width, appShellTokens.navigation.width);
-var AppShell$1 = function AppShell(_ref) {
-  var children = _ref.children,
-    _ref$version = _ref.version,
-    version = _ref$version === void 0 ? '' : _ref$version,
-    _ref$navigation = _ref.navigation,
-    _ref$navigation$inter = _ref$navigation.internal,
-    internal = _ref$navigation$inter === void 0 ? [] : _ref$navigation$inter,
-    _ref$navigation$exter = _ref$navigation.external,
-    external = _ref$navigation$exter === void 0 ? [] : _ref$navigation$exter;
-  return jsxRuntime.jsxs(AppShellContainer, {
-    children: [jsxRuntime.jsx(Navigation$1, {
-      version: version,
-      internal: internal,
-      external: external
-    }), jsxRuntime.jsx(MainContent, {
-      children: children
-    })]
-  });
-};
-
-var AppShell = AppShell$1;
-AppShell.NavItem = NavigationItem$1;
-
-var RadioButtonGroupContext = /*#__PURE__*/React__default.default.createContext(null);
-var useRadioButtonGroup = function useRadioButtonGroup() {
-  return React.useContext(RadioButtonGroupContext);
-};
-
-var selectionControlSizeNumberPx = 18;
-var selectionControlSize = "".concat(selectionControlSizeNumberPx, "px");
-
-var colors$r = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$z = ddsDesignTokens.ddsBaseTokens.spacing,
-  borderRadius$8 = ddsDesignTokens.ddsBaseTokens.borderRadius;
-var checkmark$1 = {
-  checkbox: {
-    borderColor: colors$r.DdsColorNeutralsWhite
-  },
-  radio: {
-    backgroundColor: colors$r.DdsColorNeutralsWhite,
-    height: spacing$z.SizesDdsSpacingLocalX05,
-    width: spacing$z.SizesDdsSpacingLocalX05,
-    left: "calc(50% - ".concat(spacing$z.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
-    top: "calc(50% - ".concat(spacing$z.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
-  }
-};
-var selectionControl$2 = {
-  base: {
-    border: '1px solid',
-    borderColor: colors$r.DdsColorNeutralsGray5,
-    backgroundColor: colors$r.DdsColorNeutralsWhite,
-    borderRadius: borderRadius$8.RadiiDdsBorderRadius1Radius,
-    height: selectionControlSize,
-    width: selectionControlSize
-  },
-  hover: {
-    base: {
-      backgroundColor: colors$r.DdsColorInteractiveLightest,
-      boxShadow: "inset 0 0 0 1px ".concat(ddsForm.hoverInputfield.borderColor),
-      borderColor: ddsForm.hoverInputfield.borderColor
-    },
-    danger: {
-      backgroundColor: colors$r.DdsColorDangerLightest,
-      boxShadow: "inset 0 0 0 1px ".concat(ddsForm.dangerInputfield.borderColor),
-      borderColor: ddsForm.dangerInputfield.borderColor
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
     }
-  },
-  danger: {
-    boxShadow: "inset 0 0 0 1px ".concat(ddsForm.dangerInputfield.borderColor),
-    borderColor: ddsForm.dangerInputfield.borderColor
-  },
-  disabled: {
-    borderColor: colors$r.DdsColorNeutralsGray5
-  },
-  readOnly: {
-    backgroundColor: 'transparent'
-  },
-  checked: {
-    base: {
-      borderColor: colors$r.DdsColorInteractiveBase,
-      backgroundColor: colors$r.DdsColorInteractiveBase
-    },
-    hover: {
-      backgroundColor: colors$r.DdsColorInteractiveDark,
-      boxShadow: "inset 0 0 0 1px  ".concat(colors$r.DdsColorInteractiveDark),
-      borderColor: colors$r.DdsColorInteractiveDark
-    },
-    disabled: {
-      borderColor: colors$r.DdsColorNeutralsGray6,
-      backgroundColor: colors$r.DdsColorNeutralsGray6
+    return _arr;
+  }
+}
+function _regeneratorRuntime() {
+  _regeneratorRuntime = function () {
+    return exports;
+  };
+  var exports = {},
+    Op = Object.prototype,
+    hasOwn = Op.hasOwnProperty,
+    defineProperty = Object.defineProperty || function (obj, key, desc) {
+      obj[key] = desc.value;
     },
-    readOnly: {
-      borderColor: colors$r.DdsColorNeutralsGray6,
-      backgroundColor: colors$r.DdsColorNeutralsGray6
-    }
-  },
-  checkbox: {
-    indeterminate: {
-      borderColor: colors$r.DdsColorInteractiveBase,
-      backgroundColor: colors$r.DdsColorInteractiveBase
-    }
+    $Symbol = "function" == typeof Symbol ? Symbol : {},
+    iteratorSymbol = $Symbol.iterator || "@@iterator",
+    asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
+    toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
+  function define(obj, key, value) {
+    return Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: !0,
+      configurable: !0,
+      writable: !0
+    }), obj[key];
   }
-};
-var container$e = {
-  color: colors$r.DdsColorNeutralsGray9,
-  disabled: {
-    color: colors$r.DdsColorNeutralsGray6
-  },
-  withLabel: {
-    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$z.SizesDdsSpacingLocalX05NumberPx, "px")
-  },
-  noLabel: {
-    padding: "".concat(selectionControlSizeNumberPx / 2, "px")
+  try {
+    define({}, "");
+  } catch (err) {
+    define = function (obj, key, value) {
+      return obj[key] = value;
+    };
   }
-};
-var groupContainer$1 = {
-  row: {
-    gap: spacing$z.SizesDdsSpacingLocalX075
-  },
-  column: {
-    gap: spacing$z.SizesDdsSpacingLocalX05
-  }
-};
-var outerGroupContainer$1 = {
-  gap: spacing$z.SizesDdsSpacingLocalX0125
-};
-var selectionControlTokens = {
-  selectionControl: selectionControl$2,
-  checkmark: checkmark$1,
-  container: container$e,
-  groupContainer: groupContainer$1,
-  outerGroupContainer: outerGroupContainer$1
-};
-
-var selectionControl$1 = selectionControlTokens.selectionControl,
-  container$d = selectionControlTokens.container,
-  checkmark = selectionControlTokens.checkmark,
-  groupContainer = selectionControlTokens.groupContainer,
-  outerGroupContainer = selectionControlTokens.outerGroupContainer;
-var CustomSelectionControl = styled__default.default.span.withConfig({
-  displayName: "SelectionControlstyles__CustomSelectionControl",
-  componentId: "sc-vs1fm0-0"
-})(["position:absolute;left:0;box-sizing:border-box;border:", ";border-color:", ";background-color:", ";border-radius:", ";height:", ";width:", ";", " &:after{content:'';position:absolute;display:none;}"], selectionControl$1.base.border, selectionControl$1.base.borderColor, selectionControl$1.base.backgroundColor, selectionControl$1.base.borderRadius, selectionControl$1.base.height, selectionControl$1.base.width, function (_ref) {
-  var controlType = _ref.controlType;
-  return controlType === 'radio' && styled.css(["border-radius:50%;"]);
-});
-var Container$f = styled__default.default.label.withConfig({
-  displayName: "SelectionControlstyles__Container",
-  componentId: "sc-vs1fm0-1"
-})(["position:relative;display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content;color:", ";", " input ~ ", "{@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}}&:focus-within{", " @media (prefers-reduced-motion:no-preference){transition:", ";}}&:hover input:enabled ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}input:checked:enabled ~ ", ",input[data-indeterminate='true'] ~ ", "{border-color:", ";background-color:", ";}&:hover input:checked:enabled ~ ", ",&:hover input:enabled[data-indeterminate='true'] ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}", " input:disabled ~ ", "{", "}input:checked:disabled ~ ", ",input:disabled[data-indeterminate='true'] ~ ", "{background-color:", ";border-color:", ";}input:checked ~ ", ":after,input[data-indeterminate='true'] ~ ", ":after{display:block;}", " ", ""], container$d.color, function (_ref2) {
-  var hasLabel = _ref2.hasLabel;
-  return hasLabel ? styled.css(["padding-left:", ";"], container$d.withLabel.paddingLeft) : styled.css(["padding:", ";"], container$d.noLabel.padding);
-}, CustomSelectionControl, ddsForm.focusVisible, ddsForm.focusVisibleTransitionValue, CustomSelectionControl, selectionControl$1.hover.base.backgroundColor, selectionControl$1.hover.base.boxShadow, selectionControl$1.hover.base.borderColor, CustomSelectionControl, CustomSelectionControl, selectionControl$1.checked.base.borderColor, selectionControl$1.checked.base.backgroundColor, CustomSelectionControl, CustomSelectionControl, selectionControl$1.checked.hover.backgroundColor, selectionControl$1.checked.hover.boxShadow, selectionControl$1.checked.hover.borderColor, function (_ref3) {
-  var error = _ref3.error;
-  return error && styled.css(["&:hover input:enabled ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}input ~ ", ",input:checked:enabled ~ ", ",&:hover input:checked:enabled ~ ", "{box-shadow:", ";border-color:", ";}"], CustomSelectionControl, selectionControl$1.hover.danger.backgroundColor, selectionControl$1.hover.danger.boxShadow, selectionControl$1.hover.danger.borderColor, CustomSelectionControl, CustomSelectionControl, CustomSelectionControl, selectionControl$1.danger.boxShadow, selectionControl$1.danger.borderColor);
-}, CustomSelectionControl, selectionControl$1.disabled, CustomSelectionControl, CustomSelectionControl, selectionControl$1.checked.disabled.backgroundColor, selectionControl$1.checked.disabled.borderColor, CustomSelectionControl, CustomSelectionControl, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled && styled.css(["cursor:not-allowed;color:", ";"], container$d.disabled.color);
-}, function (_ref5) {
-  var controlType = _ref5.controlType;
-  return controlType === 'checkbox' ? styled.css(["", ":after{border:solid ", ";border-width:0 1px 1px 0;left:35%;top:10%;width:30%;height:65%;transform:rotate(45deg);}input[data-indeterminate='true'] ~ ", ":after{border-width:1px 0 0 0;left:25%;top:50%;width:50%;height:1px;transform:none;}"], CustomSelectionControl, checkmark.checkbox.borderColor, CustomSelectionControl) : styled.css(["", ":after{border-radius:50%;background-color:", ";width:", ";height:", ";left:", ";top:", ";}"], CustomSelectionControl, checkmark.radio.backgroundColor, checkmark.radio.width, checkmark.radio.height, checkmark.radio.left, checkmark.radio.top);
-});
-var OuterGroupContainer = styled__default.default.div.withConfig({
-  displayName: "SelectionControlstyles__OuterGroupContainer",
-  componentId: "sc-vs1fm0-2"
-})(["display:flex;flex-direction:column;gap:", ";"], outerGroupContainer.gap);
-var GroupContainer = styled__default.default.div.withConfig({
-  displayName: "SelectionControlstyles__GroupContainer",
-  componentId: "sc-vs1fm0-3"
-})(["display:flex;", ""], function (_ref6) {
-  var direction = _ref6.direction;
-  return styled.css(["flex-direction:", ";gap:", ";"], direction, groupContainer[direction].gap);
-});
-
-var isValueEqualToGroupValueOrFalsy = function isValueEqualToGroupValueOrFalsy(value, group) {
-  if (typeof value !== 'undefined' && value !== null && group) {
-    if (typeof value === 'number') {
-      return value === Number(group === null || group === void 0 ? void 0 : group.value);
-    }
-    return value === (group === null || group === void 0 ? void 0 : group.value);
-  }
-  return !!value;
-};
-var RadioButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var id = props.id,
-    name = props.name,
-    label = props.label,
-    disabled = props.disabled,
-    readOnly = props.readOnly,
-    error = props.error,
-    checked = props.checked,
-    value = props.value,
-    children = props.children,
-    required = props.required,
-    onChange = props.onChange,
-    ariaDescribedby = props['aria-describedby'],
-    className = props.className,
-    _props$htmlProps = props.htmlProps,
-    htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-    rest = tslib.__rest(props, ["id", "name", "label", "disabled", "readOnly", "error", "checked", "value", "children", "required", "onChange", 'aria-describedby', "className", "htmlProps"]);
-  var htmlPropsClassName = htmlProps.className,
-    style = htmlProps.style,
-    restHtmlProps = tslib.__rest(htmlProps, ["className", "style"]);
-  var generatedId = React.useId();
-  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-radioButton");
-  var hasLabel = !!label;
-  var radioButtonGroup = useRadioButtonGroup();
-  var handleChange = function handleChange(event) {
-    onChange && onChange(event);
-    radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.onChange(event);
-  };
-  var describedByIds = [];
-  if (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId) describedByIds.push(radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId);
-  if (ariaDescribedby) describedByIds.push(ariaDescribedby);
-  var inputProps = Object.assign(Object.assign({}, ddsCore.getBaseHTMLProps(uniqueId, restHtmlProps, rest)), {
-    type: 'radio',
-    name: name !== null && name !== void 0 ? name : radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.name,
-    disabled: disabled || readOnly || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.disabled) || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.readOnly),
-    required: required || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.required),
-    checked: typeof checked !== 'undefined' ? checked : isValueEqualToGroupValueOrFalsy(value, radioButtonGroup),
-    onChange: handleChange,
-    value: value,
-    'aria-describedby': describedByIds.length > 0 ? describedByIds.join(' ') : undefined,
-    'aria-invalid': error || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.error) ? true : undefined
-  });
-  var containerProps = {
-    error: error || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.error),
-    disabled: disabled || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.disabled),
-    readOnly: readOnly || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.readOnly),
-    style: style,
-    className: ddsCore.joinClassNames(className, htmlPropsClassName),
-    htmlFor: uniqueId,
-    controlType: 'radio',
-    hasLabel: hasLabel
-  };
-  return jsxRuntime.jsxs(Container$f, Object.assign({}, containerProps, {
-    htmlFor: uniqueId,
-    controlType: "radio",
-    children: [jsxRuntime.jsx(ddsForm.HiddenInput, Object.assign({}, inputProps, {
-      ref: ref
-    })), jsxRuntime.jsx(CustomSelectionControl, {
-      controlType: "radio"
-    }), jsxRuntime.jsx(ddsTypography.Typography, {
-      as: "span",
-      children: children !== null && children !== void 0 ? children : label
-    })]
-  }));
-});
-RadioButton.displayName = 'RadioButton';
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
-    try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
-    } finally {
-      try {
-        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-    return _arr;
-  }
-}
-function _regeneratorRuntime() {
-  _regeneratorRuntime = function () {
-    return exports;
-  };
-  var exports = {},
-    Op = Object.prototype,
-    hasOwn = Op.hasOwnProperty,
-    defineProperty = Object.defineProperty || function (obj, key, desc) {
-      obj[key] = desc.value;
-    },
-    $Symbol = "function" == typeof Symbol ? Symbol : {},
-    iteratorSymbol = $Symbol.iterator || "@@iterator",
-    asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
-    toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
-  function define(obj, key, value) {
-    return Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
-    }), obj[key];
-  }
-  try {
-    define({}, "");
-  } catch (err) {
-    define = function (obj, key, value) {
-      return obj[key] = value;
-    };
-  }
-  function wrap(innerFn, outerFn, self, tryLocsList) {
-    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
-      generator = Object.create(protoGenerator.prototype),
-      context = new Context(tryLocsList || []);
-    return defineProperty(generator, "_invoke", {
-      value: makeInvokeMethod(innerFn, self, context)
-    }), generator;
+  function wrap(innerFn, outerFn, self, tryLocsList) {
+    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
+      generator = Object.create(protoGenerator.prototype),
+      context = new Context(tryLocsList || []);
+    return defineProperty(generator, "_invoke", {
+      value: makeInvokeMethod(innerFn, self, context)
+    }), generator;
   }
   function tryCatch(fn, obj, arg) {
     try {
@@ -886,262 +519,151 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-var colors$q = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$y = ddsDesignTokens.ddsBaseTokens.spacing;
-var message = {
-  tip: {
-    backgroundColor: colors$q.DdsColorNeutralsWhite
-  },
-  error: {
-    padding: "".concat(spacing$y.SizesDdsSpacingLocalX025, " ").concat(spacing$y.SizesDdsSpacingLocalX05),
-    color: colors$q.DdsColorDangerBase,
-    backgroundColor: colors$q.DdsColorDangerLightest,
-    gap: spacing$y.SizesDdsSpacingLocalX05
-  }
-};
-var icon$a = {
-  marginTop: spacing$y.SizesDdsSpacingLocalX0125
-};
-var inputMessageTokens = {
-  message: message,
-  icon: icon$a
-};
-
-var InputMessageWrapper = styled__default.default.div.withConfig({
-  displayName: "InputMessage__InputMessageWrapper",
-  componentId: "sc-c954fy-0"
-})(["display:flex;width:fit-content;word-break:break-word;max-width:100%;", " svg{margin-top:", ";}"], function (_ref) {
-  var messageType = _ref.messageType;
-  return messageType === 'error' ? styled.css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
-}, inputMessageTokens.icon.marginTop);
-var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var message = props.message,
-    messageType = props.messageType,
-    id = props.id,
-    className = props.className,
-    htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["message", "messageType", "id", "className", "htmlProps"]);
-  var wrapperProps = Object.assign(Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest)), {
-    ref: ref,
-    messageType: messageType
-  });
-  var isError = messageType === 'error';
-  return jsxRuntime.jsxs(InputMessageWrapper, Object.assign({}, wrapperProps, {
-    children: [isError && jsxRuntime.jsx(ddsIcons.Icon, {
-      icon: ddsIcons.ErrorIcon,
-      iconSize: "inherit"
-    }), jsxRuntime.jsx(ddsTypography.Typography, {
-      typographyType: isError ? 'supportingStyleLabel01' : 'supportingStyleHelperText01',
-      as: "span",
-      bold: isError ? true : undefined,
-      color: isError ? inputMessageTokens.message.error.color : undefined,
-      children: message
-    })]
-  }));
+var AppShellContext = /*#__PURE__*/React.createContext({
+  isOpen: false,
+  setOpen: function setOpen() {}
 });
-InputMessage.displayName = 'InputMessage';
-
-var renderInputMessage = function renderInputMessage(tip, tipId, errorMessage, errorMessageId) {
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [errorMessage && errorMessageId && jsxRuntime.jsx(InputMessage, {
-      message: errorMessage,
-      messageType: "error",
-      id: errorMessageId
-    }), tip && tipId && !errorMessage && jsxRuntime.jsx(InputMessage, {
-      message: tip,
-      messageType: "tip",
-      id: tipId
-    })]
+var AppShellContextProvider = function AppShellContextProvider(_ref) {
+  var children = _ref.children;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setOpen = _useState2[1];
+  return jsxRuntime.jsx(AppShellContext.Provider, {
+    value: {
+      isOpen: isOpen,
+      setOpen: setOpen
+    },
+    children: children
   });
 };
+var useAppShellContext = function useAppShellContext() {
+  return React.useContext(AppShellContext);
+};
 
-var RadioButtonGroupInner = function RadioButtonGroupInner(props, ref) {
-  var name = props.name,
-    label = props.label,
-    groupId = props.groupId,
-    errorMessage = props.errorMessage,
-    tip = props.tip,
-    disabled = props.disabled,
-    readOnly = props.readOnly,
-    _props$direction = props.direction,
-    direction = _props$direction === void 0 ? 'row' : _props$direction,
-    value = props.value,
-    children = props.children,
-    required = props.required,
-    onChange = props.onChange,
-    id = props.id,
-    className = props.className,
-    _props$htmlProps = props.htmlProps,
-    htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-    rest = tslib.__rest(props, ["name", "label", "groupId", "errorMessage", "tip", "disabled", "readOnly", "direction", "value", "children", "required", "onChange", "id", "className", "htmlProps"]);
-  var ariaRequired = htmlProps['aria-required'];
-  var _useState = React.useState(value),
-    _useState2 = _slicedToArray(_useState, 2),
-    groupValue = _useState2[0],
-    setGroupValue = _useState2[1];
-  var generatedId = React.useId();
-  var uniqueGroupId = groupId !== null && groupId !== void 0 ? groupId : "".concat(generatedId, "-radioButtonGroup");
-  var handleChange = ddsCore.combineHandlers(function (e) {
-    return setGroupValue(e.target.value);
-  }, function (e) {
-    return onChange && onChange(e, e.target.value);
-  });
-  var hasErrorMessage = !!errorMessage;
-  var showRequiredMarker = required || ariaRequired;
-  var tipId = tip && "".concat(uniqueGroupId, "-tip");
-  var errorMessageId = errorMessage && "".concat(uniqueGroupId, "-errorMessage");
-  var contextProps = {
-    name: name,
-    disabled: disabled,
-    error: hasErrorMessage,
-    errorMessageId: errorMessageId,
-    required: required,
-    readOnly: readOnly,
-    value: groupValue,
-    onChange: handleChange
+var navTokens$3 = appShellTokens.navigation;
+var navItemTokens = navTokens$3.navigationItems.item;
+var IconContainer = styled__default.default.div.withConfig({
+  displayName: "NavigationItem__IconContainer",
+  componentId: "sc-8k2l5g-0"
+})(["grid-area:icon;display:flex;align-items:center;"]);
+var TextContainer$1 = styled__default.default.span.withConfig({
+  displayName: "NavigationItem__TextContainer",
+  componentId: "sc-8k2l5g-1"
+})(["grid-area:text;"]);
+var ChevronContainer = styled__default.default.div.withConfig({
+  displayName: "NavigationItem__ChevronContainer",
+  componentId: "sc-8k2l5g-2"
+})(["display:flex;align-items:center;opacity:0;grid-area:chevron;"]);
+var BaseLink = styled__default.default.a.withConfig({
+  displayName: "NavigationItem__BaseLink",
+  componentId: "sc-8k2l5g-3"
+})(["padding:", ";gap:", ";border-radius:", ";text-decoration:none;color:", ";font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";:hover:not(.active){background-color:", ";}&.active{color:", ";background-color:", ";}"], navItemTokens.padding, navItemTokens.gap, navItemTokens.borderRadius, navItemTokens.color, navItemTokens.fontSize, navItemTokens.fontStyle, navItemTokens.fontFamily, navItemTokens.fontWeight, navItemTokens.lineHeight, navItemTokens.letterSpacing, navItemTokens.hover.backgroundColor, navItemTokens.active.color, navItemTokens.active.backgroundColor);
+var InternalNavItem = styled__default.default(BaseLink).withConfig({
+  displayName: "NavigationItem__InternalNavItem",
+  componentId: "sc-8k2l5g-4"
+})(["display:grid;align-items:center;grid-template-areas:'icon text chevron';grid-template-columns:min-content 1fr min-content;&.active ", "{opacity:1;}"], ChevronContainer);
+var ExternalNavItem = styled__default.default(BaseLink).withConfig({
+  displayName: "NavigationItem__ExternalNavItem",
+  componentId: "sc-8k2l5g-5"
+})(["display:flex;flex-direction:row;align-items:center;font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";"], navItemTokens.external.fontSize, navItemTokens.external.fontStyle, navItemTokens.external.fontFamily, navItemTokens.external.fontWeight, navItemTokens.external.lineHeight, navItemTokens.external.letterSpacing);
+var NavigationItem$1 = function NavigationItem(_a) {
+  var _as = _a.as,
+    active = _a.active,
+    icon = _a.icon,
+    external = _a.external,
+    children = _a.children,
+    propOnClick = _a.onClick,
+    rest = tslib.__rest(_a, ["as", "active", "icon", "external", "children", "onClick"]);
+  var _useAppShellContext = useAppShellContext(),
+    setOpen = _useAppShellContext.setOpen;
+  var Comp = _as !== null && _as !== void 0 ? _as : 'a';
+  var onClick = function onClick(e) {
+    propOnClick === null || propOnClick === void 0 ? void 0 : propOnClick(e);
+    setOpen(false);
   };
-  return jsxRuntime.jsxs(OuterGroupContainer, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, Object.assign(Object.assign({}, htmlProps), {
-    'aria-required': ariaRequired
-  }), rest), {
-    ref: ref,
-    children: [jsxRuntime.jsxs(ddsTypography.Typography, {
-      as: "span",
-      typographyType: "supportingStyleLabel01",
-      id: uniqueGroupId,
-      children: [label, " ", showRequiredMarker && jsxRuntime.jsx(ddsCore.RequiredMarker, {})]
-    }), renderInputMessage(tip, tipId), jsxRuntime.jsx(RadioButtonGroupContext.Provider, {
-      value: Object.assign({}, contextProps),
-      children: jsxRuntime.jsx(GroupContainer, {
-        role: "radiogroup",
-        direction: direction,
-        "aria-labelledby": uniqueGroupId,
-        "aria-describedby": tipId,
-        "aria-errormessage": errorMessageId,
-        children: children
+  if (external) {
+    return jsxRuntime.jsxs(ExternalNavItem, Object.assign({
+      as: Comp
+    }, rest, {
+      onClick: onClick,
+      children: [children, jsxRuntime.jsx(ddsIcons.Icon, {
+        icon: ddsIcons.OpenExternalIcon,
+        iconSize: "inherit"
+      })]
+    }));
+  }
+  return jsxRuntime.jsxs(InternalNavItem, Object.assign({
+    as: Comp
+  }, rest, {
+    onClick: onClick,
+    className: [active ? 'active' : '', rest.className].join(' '),
+    children: [jsxRuntime.jsx(IconContainer, {
+      children: icon && jsxRuntime.jsx(ddsIcons.Icon, {
+        icon: icon
       })
-    }), renderInputMessage(undefined, undefined, errorMessage, errorMessageId)]
+    }), jsxRuntime.jsx(TextContainer$1, {
+      children: children
+    }), jsxRuntime.jsx(ChevronContainer, {
+      children: jsxRuntime.jsx(ddsIcons.Icon, {
+        icon: ddsIcons.ChevronRightIcon
+      })
+    })]
   }));
 };
-var RadioButtonGroup = /*#__PURE__*/React.forwardRef(RadioButtonGroupInner);
-// @ts-expect-error TODO fix RadioButtonGroup type
-RadioButtonGroup.displayName = 'RadioButtonGroup';
+NavigationItem$1.displayName = 'AppShell.NavItem';
 
-var CheckboxGroupContext = /*#__PURE__*/React__default.default.createContext(null);
-var useCheckboxGroup = function useCheckboxGroup() {
-  return React.useContext(CheckboxGroupContext);
+var EmbeteIcon = function EmbeteIcon(_a) {
+  var type = _a.type,
+    rest = tslib.__rest(_a, ["type"]);
+  switch (type) {
+    case 'jordskifterett':
+      return jsxRuntime.jsx(ddsIcons.JordskifterettIcon, Object.assign({}, rest));
+    case 'tingrett':
+      return jsxRuntime.jsx(ddsIcons.TingrettIcon, Object.assign({}, rest));
+    case 'lagmannsrett':
+      return jsxRuntime.jsx(ddsIcons.LagmannsrettIcon, Object.assign({}, rest));
+    case 'høyesterett':
+    case undefined:
+      return jsxRuntime.jsx(ddsIcons.PersonIcon, Object.assign({}, rest));
+  }
 };
 
-var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var id = props.id,
-    name = props.name,
-    label = props.label,
-    error = props.error,
-    disabled = props.disabled,
-    readOnly = props.readOnly,
-    indeterminate = props.indeterminate,
-    ariaDescribedby = props['aria-describedby'],
-    className = props.className,
-    _props$htmlProps = props.htmlProps,
-    htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-    rest = tslib.__rest(props, ["id", "name", "label", "error", "disabled", "readOnly", "indeterminate", 'aria-describedby', "className", "htmlProps"]);
-  var generatedId = React.useId();
-  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-checkbox");
-  var checkboxGroup = useCheckboxGroup();
-  var hasLabel = !!label;
-  var style = htmlProps.style,
-    htmlPropsClassName = htmlProps.className,
-    restHtmlProps = tslib.__rest(htmlProps, ["style", "className"]);
-  var containerProps = {
-    error: error || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.error),
-    disabled: disabled,
-    indeterminate: indeterminate,
-    htmlFor: uniqueId,
-    hasLabel: hasLabel,
-    className: ddsCore.joinClassNames(className, htmlPropsClassName),
-    style: style
-  };
-  var inputProps = Object.assign(Object.assign({}, ddsCore.getBaseHTMLProps(uniqueId, restHtmlProps, rest)), {
-    ref: ref,
-    name: name,
-    indeterminate: indeterminate,
-    disabled: disabled,
-    'aria-describedby': ddsCore.spaceSeparatedIdListGenerator([checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.tipId, checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.errorMessageId, ariaDescribedby]),
-    'aria-invalid': error || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.error) ? true : undefined,
-    'aria-labelledby': checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.uniqueGroupId,
-    'aria-checked': indeterminate ? 'mixed' : undefined,
-    'aria-readonly': readOnly
-  });
-  return jsxRuntime.jsxs(Container$f, Object.assign({}, containerProps, {
-    controlType: "checkbox",
-    children: [jsxRuntime.jsx(ddsForm.HiddenInput, Object.assign({}, inputProps, {
-      type: "checkbox",
-      "data-indeterminate": indeterminate
-    })), jsxRuntime.jsx(CustomSelectionControl, {
-      controlType: "checkbox"
-    }), hasLabel && jsxRuntime.jsx(ddsTypography.Typography, {
-      color: "inherit",
-      as: "span",
-      typographyType: "bodySans02",
-      children: label
-    })]
-  }));
+var navTokens$2 = appShellTokens.navigation;
+var fontPackage = function fontPackage(small) {
+  if (small) {
+    return navTokens$2.logoAndVersion.logo.small;
+  }
+  return navTokens$2.logoAndVersion.logo;
+};
+var NavigationLogo = styled__default.default.a.withConfig({
+  displayName: "NavigationLogo",
+  componentId: "sc-17higny-0"
+})(["font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";text-align:middle;"], function (_ref) {
+  var small = _ref.small;
+  return fontPackage(small).fontSize;
+}, function (_ref2) {
+  var small = _ref2.small;
+  return fontPackage(small).fontStyle;
+}, function (_ref3) {
+  var small = _ref3.small;
+  return fontPackage(small).fontFamily;
+}, function (_ref4) {
+  var small = _ref4.small;
+  return fontPackage(small).fontWeight;
+}, function (_ref5) {
+  var small = _ref5.small;
+  return fontPackage(small).lineHeight;
+}, function (_ref6) {
+  var small = _ref6.small;
+  return fontPackage(small).letterSpacing;
 });
-Checkbox.displayName = 'Checkbox';
-
-var CheckboxGroup = function CheckboxGroup(props) {
-  var label = props.label,
-    _props$direction = props.direction,
-    direction = _props$direction === void 0 ? 'row' : _props$direction,
-    errorMessage = props.errorMessage,
-    tip = props.tip,
-    required = props.required,
-    groupId = props.groupId,
-    children = props.children,
-    id = props.id,
-    className = props.className,
-    _props$htmlProps = props.htmlProps,
-    htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-    rest = tslib.__rest(props, ["label", "direction", "errorMessage", "tip", "required", "groupId", "children", "id", "className", "htmlProps"]);
-  var ariaRequired = htmlProps['aria-required'];
-  var generatedId = React.useId();
-  var uniqueGroupId = groupId !== null && groupId !== void 0 ? groupId : "".concat(generatedId, "-checkboxGroup");
-  var hasErrorMessage = !!errorMessage;
-  var showRequiredMarker = required || ariaRequired;
-  var errorMessageId = ddsCore.derivativeIdGenerator(uniqueGroupId, 'errorMessage');
-  var tipId = ddsCore.derivativeIdGenerator(uniqueGroupId, 'tip');
-  var contextProps = {
-    error: hasErrorMessage,
-    errorMessageId: errorMessage ? errorMessageId : undefined,
-    uniqueGroupId: uniqueGroupId,
-    tipId: tip ? tipId : undefined
-  };
-  return jsxRuntime.jsxs(OuterGroupContainer, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, Object.assign(Object.assign({}, htmlProps), {
-    'aria-required': ariaRequired
-  }), rest), {
-    children: [jsxRuntime.jsxs(ddsTypography.Typography, {
-      as: "span",
-      typographyType: "supportingStyleLabel01",
-      id: uniqueGroupId,
-      children: [label, " ", showRequiredMarker && jsxRuntime.jsx(ddsCore.RequiredMarker, {})]
-    }), renderInputMessage(tip, tipId), jsxRuntime.jsx(CheckboxGroupContext.Provider, {
-      value: Object.assign({}, contextProps),
-      children: jsxRuntime.jsx(GroupContainer, {
-        role: "group",
-        "aria-labelledby": uniqueGroupId,
-        "aria-describedby": tip ? tipId : undefined,
-        direction: direction,
-        children: children
-      })
-    }), renderInputMessage(undefined, undefined, errorMessage, errorMessageId)]
-  }));
-};
-CheckboxGroup.displayName = 'CheckboxGroup';
 
-var colors$p = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$r = ddsDesignTokens.ddsBaseTokens.colors,
   border$a = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$x = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$z = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-  borderRadius$7 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+  borderRadius$8 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   outerShadow$1 = ddsDesignTokens.ddsBaseTokens.outerShadow;
 var typographyTypes$6 = {
   large: 'bodySans04',
@@ -1153,62 +675,62 @@ var iconSizeTinyPx = ddsCore.calculateHeightWithLineHeight(fontPackages$3.suppor
 var iconSizeSmallPx = ddsCore.calculateHeightWithLineHeight(fontPackages$3.body_sans_01.numbers.lineHeightNumber, fontPackages$3.body_sans_01.numbers.fontSizeNumber);
 var iconSizeMediumPx = ddsCore.calculateHeightWithLineHeight(fontPackages$3.body_sans_02.numbers.lineHeightNumber, fontPackages$3.body_sans_02.numbers.fontSizeNumber);
 var iconSizeLargePx = ddsCore.calculateHeightWithLineHeight(fontPackages$3.body_sans_04.numbers.lineHeightNumber, fontPackages$3.body_sans_04.numbers.fontSizeNumber);
-var svgOffset = spacing$x.SizesDdsSpacingLocalX0125NumberPx;
+var svgOffset = spacing$z.SizesDdsSpacingLocalX0125NumberPx;
 var filledButtonColors = {
   primary: {
     base: {
-      color: colors$p.DdsColorNeutralsWhite,
-      backgroundColor: colors$p.DdsColorInteractiveBase,
-      borderColor: colors$p.DdsColorInteractiveBase
+      color: colors$r.DdsColorNeutralsWhite,
+      backgroundColor: colors$r.DdsColorInteractiveBase,
+      borderColor: colors$r.DdsColorInteractiveBase
     },
     hover: {
       base: {
-        backgroundColor: colors$p.DdsColorInteractiveDark,
-        borderColor: colors$p.DdsColorInteractiveDark
+        backgroundColor: colors$r.DdsColorInteractiveDark,
+        borderColor: colors$r.DdsColorInteractiveDark
       }
     },
     active: {
       base: {
-        backgroundColor: colors$p.DdsColorInteractiveDarker,
-        borderColor: colors$p.DdsColorInteractiveDarker
+        backgroundColor: colors$r.DdsColorInteractiveDarker,
+        borderColor: colors$r.DdsColorInteractiveDarker
       }
     }
   },
   secondary: {
     base: {
-      color: colors$p.DdsColorNeutralsGray8,
-      backgroundColor: colors$p.DdsColorNeutralsGray1,
-      borderColor: colors$p.DdsColorNeutralsGray5
+      color: colors$r.DdsColorNeutralsGray8,
+      backgroundColor: colors$r.DdsColorNeutralsGray1,
+      borderColor: colors$r.DdsColorNeutralsGray5
     },
     hover: {
       base: {
-        backgroundColor: colors$p.DdsColorNeutralsGray2,
-        borderColor: colors$p.DdsColorNeutralsGray5
+        backgroundColor: colors$r.DdsColorNeutralsGray2,
+        borderColor: colors$r.DdsColorNeutralsGray5
       }
     },
     active: {
       base: {
-        backgroundColor: colors$p.DdsColorNeutralsGray3,
-        borderColor: colors$p.DdsColorNeutralsGray5
+        backgroundColor: colors$r.DdsColorNeutralsGray3,
+        borderColor: colors$r.DdsColorNeutralsGray5
       }
     }
   },
   danger: {
     base: {
-      color: colors$p.DdsColorNeutralsWhite,
-      backgroundColor: colors$p.DdsColorDangerBase,
-      borderColor: colors$p.DdsColorDangerBase
+      color: colors$r.DdsColorNeutralsWhite,
+      backgroundColor: colors$r.DdsColorDangerBase,
+      borderColor: colors$r.DdsColorDangerBase
     },
     hover: {
       base: {
-        backgroundColor: colors$p.DdsColorDangerDark,
-        borderColor: colors$p.DdsColorDangerDark
+        backgroundColor: colors$r.DdsColorDangerDark,
+        borderColor: colors$r.DdsColorDangerDark
       }
     },
     active: {
       base: {
-        backgroundColor: colors$p.DdsColorDangerDarker,
-        borderColor: colors$p.DdsColorDangerDarker
+        backgroundColor: colors$r.DdsColorDangerDarker,
+        borderColor: colors$r.DdsColorDangerDarker
       }
     }
   }
@@ -1218,7 +740,7 @@ var sizes$2 = {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-        padding: spacing$x.SizesDdsSpacingLocalX1
+        padding: spacing$z.SizesDdsSpacingLocalX1
       },
       wrapper: {
         height: "".concat(iconSizeLargePx, "px"),
@@ -1226,17 +748,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$x.SizesDdsSpacingLocalX1, " ").concat(spacing$x.SizesDdsSpacingLocalX2NumberPx - 2, "px")
+      padding: "".concat(spacing$z.SizesDdsSpacingLocalX1, " ").concat(spacing$z.SizesDdsSpacingLocalX2NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$x.SizesDdsSpacingLocalX1
+      gap: spacing$z.SizesDdsSpacingLocalX1
     }
   },
   medium: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-        padding: spacing$x.SizesDdsSpacingLocalX075
+        padding: spacing$z.SizesDdsSpacingLocalX075
       },
       wrapper: {
         height: "".concat(iconSizeMediumPx, "px"),
@@ -1244,17 +766,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$x.SizesDdsSpacingLocalX075, " ").concat(spacing$x.SizesDdsSpacingLocalX15NumberPx - 2, "px")
+      padding: "".concat(spacing$z.SizesDdsSpacingLocalX075, " ").concat(spacing$z.SizesDdsSpacingLocalX15NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$x.SizesDdsSpacingLocalX075
+      gap: spacing$z.SizesDdsSpacingLocalX075
     }
   },
   small: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-        padding: spacing$x.SizesDdsSpacingLocalX05
+        padding: spacing$z.SizesDdsSpacingLocalX05
       },
       wrapper: {
         height: "".concat(iconSizeSmallPx, "px"),
@@ -1262,17 +784,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$x.SizesDdsSpacingLocalX05, " ").concat(spacing$x.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+      padding: "".concat(spacing$z.SizesDdsSpacingLocalX05, " ").concat(spacing$z.SizesDdsSpacingLocalX1NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$x.SizesDdsSpacingLocalX05
+      gap: spacing$z.SizesDdsSpacingLocalX05
     }
   },
   tiny: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-        padding: spacing$x.SizesDdsSpacingLocalX025
+        padding: spacing$z.SizesDdsSpacingLocalX025
       },
       wrapper: {
         height: "".concat(iconSizeTinyPx, "px"),
@@ -1280,17 +802,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$x.SizesDdsSpacingLocalX025, " ").concat(spacing$x.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$z.SizesDdsSpacingLocalX025, " ").concat(spacing$z.SizesDdsSpacingLocalX075)
     },
     textAndIcon: {
-      gap: spacing$x.SizesDdsSpacingLocalX05
+      gap: spacing$z.SizesDdsSpacingLocalX05
     }
   }
 };
 var appearances$2 = {
   filled: {
     base: {
-      borderRadius: borderRadius$7.RadiiDdsBorderRadius1Radius,
+      borderRadius: borderRadius$8.RadiiDdsBorderRadius1Radius,
       boxShadow: outerShadow$1.DdsShadow1Onlight
     },
     purpose: {
@@ -1313,64 +835,64 @@ var appearances$2 = {
   },
   ghost: {
     base: {
-      borderRadius: borderRadius$7.RadiiDdsBorderRadius1Radius,
+      borderRadius: borderRadius$8.RadiiDdsBorderRadius1Radius,
       boxShadow: 'none',
       backgroundColor: 'transparent'
     },
     purpose: {
       primary: {
         base: {
-          color: colors$p.DdsColorInteractiveBase,
-          borderColor: colors$p.DdsColorInteractiveBase
+          color: colors$r.DdsColorInteractiveBase,
+          borderColor: colors$r.DdsColorInteractiveBase
         },
         hover: {
-          color: colors$p.DdsColorInteractiveDark,
-          borderColor: colors$p.DdsColorInteractiveDark,
-          boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorInteractiveDark)
+          color: colors$r.DdsColorInteractiveDark,
+          borderColor: colors$r.DdsColorInteractiveDark,
+          boxShadow: "0 0 0 1px ".concat(colors$r.DdsColorInteractiveDark)
         },
         active: {
-          color: colors$p.DdsColorInteractiveDarker,
-          borderColor: colors$p.DdsColorInteractiveDarker,
-          boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorInteractiveDarker)
+          color: colors$r.DdsColorInteractiveDarker,
+          borderColor: colors$r.DdsColorInteractiveDarker,
+          boxShadow: "0 0 0 1px ".concat(colors$r.DdsColorInteractiveDarker)
         }
       },
       secondary: {
         base: {
-          color: colors$p.DdsColorNeutralsGray7,
-          borderColor: colors$p.DdsColorNeutralsGray7
+          color: colors$r.DdsColorNeutralsGray7,
+          borderColor: colors$r.DdsColorNeutralsGray7
         },
         hover: {
-          color: colors$p.DdsColorNeutralsGray8,
-          borderColor: colors$p.DdsColorNeutralsGray8,
-          boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorNeutralsGray8)
+          color: colors$r.DdsColorNeutralsGray8,
+          borderColor: colors$r.DdsColorNeutralsGray8,
+          boxShadow: "0 0 0 1px ".concat(colors$r.DdsColorNeutralsGray8)
         },
         active: {
-          color: colors$p.DdsColorNeutralsGray9,
-          borderColor: colors$p.DdsColorNeutralsGray9,
-          boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorNeutralsGray9)
+          color: colors$r.DdsColorNeutralsGray9,
+          borderColor: colors$r.DdsColorNeutralsGray9,
+          boxShadow: "0 0 0 1px ".concat(colors$r.DdsColorNeutralsGray9)
         }
       },
       danger: {
         base: {
-          color: colors$p.DdsColorDangerBase,
-          borderColor: colors$p.DdsColorDangerBase
+          color: colors$r.DdsColorDangerBase,
+          borderColor: colors$r.DdsColorDangerBase
         },
         hover: {
-          color: colors$p.DdsColorDangerDark,
-          borderColor: colors$p.DdsColorDangerDark,
-          boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorDangerDark)
+          color: colors$r.DdsColorDangerDark,
+          borderColor: colors$r.DdsColorDangerDark,
+          boxShadow: "0 0 0 1px ".concat(colors$r.DdsColorDangerDark)
         },
         active: {
-          color: colors$p.DdsColorDangerDarkest,
-          borderColor: colors$p.DdsColorDangerDarkest,
-          boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorDangerDarkest)
+          color: colors$r.DdsColorDangerDarkest,
+          borderColor: colors$r.DdsColorDangerDarkest,
+          boxShadow: "0 0 0 1px ".concat(colors$r.DdsColorDangerDarkest)
         }
       }
     }
   },
   borderless: {
     base: {
-      borderRadius: borderRadius$7.RadiiDdsBorderRadius1Radius,
+      borderRadius: borderRadius$8.RadiiDdsBorderRadius1Radius,
       boxShadow: 'none',
       backgroundColor: 'transparent',
       borderColor: 'transparent',
@@ -1380,70 +902,70 @@ var appearances$2 = {
     purpose: {
       primary: {
         base: {
-          color: colors$p.DdsColorInteractiveBase
+          color: colors$r.DdsColorInteractiveBase
         },
         hover: {
-          color: colors$p.DdsColorInteractiveDark,
-          textDecorationColor: colors$p.DdsColorInteractiveDark
+          color: colors$r.DdsColorInteractiveDark,
+          textDecorationColor: colors$r.DdsColorInteractiveDark
         },
         active: {
-          color: colors$p.DdsColorInteractiveDarker,
-          textDecorationColor: colors$p.DdsColorInteractiveDarker
+          color: colors$r.DdsColorInteractiveDarker,
+          textDecorationColor: colors$r.DdsColorInteractiveDarker
         },
         icon: {
           hover: {
-            borderColor: colors$p.DdsColorInteractiveDark,
-            boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorInteractiveDark)
+            borderColor: colors$r.DdsColorInteractiveDark,
+            boxShadow: "0 0 0 1px ".concat(colors$r.DdsColorInteractiveDark)
           },
           active: {
-            borderColor: colors$p.DdsColorInteractiveDarker,
-            boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorInteractiveDarker)
+            borderColor: colors$r.DdsColorInteractiveDarker,
+            boxShadow: "0 0 0 1px ".concat(colors$r.DdsColorInteractiveDarker)
           }
         }
       },
       secondary: {
         base: {
-          color: colors$p.DdsColorNeutralsGray7
+          color: colors$r.DdsColorNeutralsGray7
         },
         hover: {
-          color: colors$p.DdsColorNeutralsGray8,
-          textDecorationColor: colors$p.DdsColorNeutralsGray8
+          color: colors$r.DdsColorNeutralsGray8,
+          textDecorationColor: colors$r.DdsColorNeutralsGray8
         },
         active: {
-          color: colors$p.DdsColorNeutralsGray9,
-          textDecorationColor: colors$p.DdsColorNeutralsGray9
+          color: colors$r.DdsColorNeutralsGray9,
+          textDecorationColor: colors$r.DdsColorNeutralsGray9
         },
         icon: {
           hover: {
-            borderColor: colors$p.DdsColorNeutralsGray8,
-            boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorNeutralsGray8)
+            borderColor: colors$r.DdsColorNeutralsGray8,
+            boxShadow: "0 0 0 1px ".concat(colors$r.DdsColorNeutralsGray8)
           },
           active: {
-            borderColor: colors$p.DdsColorNeutralsGray9,
-            boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorNeutralsGray9)
+            borderColor: colors$r.DdsColorNeutralsGray9,
+            boxShadow: "0 0 0 1px ".concat(colors$r.DdsColorNeutralsGray9)
           }
         }
       },
       danger: {
         base: {
-          color: colors$p.DdsColorDangerBase
+          color: colors$r.DdsColorDangerBase
         },
         hover: {
-          color: colors$p.DdsColorDangerDarker,
-          textDecorationColor: colors$p.DdsColorDangerDarker
+          color: colors$r.DdsColorDangerDarker,
+          textDecorationColor: colors$r.DdsColorDangerDarker
         },
         active: {
-          color: colors$p.DdsColorDangerDarkest,
-          textDecorationColor: colors$p.DdsColorDangerDarkest
+          color: colors$r.DdsColorDangerDarkest,
+          textDecorationColor: colors$r.DdsColorDangerDarkest
         },
         icon: {
           hover: {
-            borderColor: colors$p.DdsColorDangerDark,
-            boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorDangerDark)
+            borderColor: colors$r.DdsColorDangerDark,
+            boxShadow: "0 0 0 1px ".concat(colors$r.DdsColorDangerDark)
           },
           active: {
-            borderColor: colors$p.DdsColorDangerDarker,
-            boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorDangerDarker)
+            borderColor: colors$r.DdsColorDangerDarker,
+            boxShadow: "0 0 0 1px ".concat(colors$r.DdsColorDangerDarker)
           }
         }
       }
@@ -1706,44 +1228,1338 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
       })
     })]
   }));
-});
-Button$1.displayName = 'Button';
+});
+Button$1.displayName = 'Button';
+
+var scrollbarWidthNumberPx = 10;
+var scrollbarWidth$1 = "".concat(scrollbarWidthNumberPx, "px");
+var colors$q = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$y = ddsDesignTokens.ddsBaseTokens.spacing;
+var track$3 = {
+  backgroundColor: 'transparent',
+  borderRadius: '100px',
+  width: scrollbarWidth$1
+};
+var thumb$2 = {
+  base: {
+    backgroundColor: colors$q.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)',
+    borderRadius: '100px',
+    width: scrollbarWidth$1
+  },
+  hover: {
+    backgroundColor: colors$q.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
+  }
+};
+var content$5 = {
+  paddingRight: spacing$y.SizesDdsSpacingLocalX05
+};
+var outerContainer$8 = {
+  padding: spacing$y.SizesDdsSpacingLocalX025
+};
+var scrollbarTokens = {
+  minThumbHeightPx: 15,
+  track: track$3,
+  thumb: thumb$2,
+  content: content$5,
+  outerContainer: outerContainer$8
+};
+
+var track$2 = scrollbarTokens.track,
+  thumb$1 = scrollbarTokens.thumb,
+  minThumbHeightPx = scrollbarTokens.minThumbHeightPx;
+var ScrollbarOuterWrapper = styled__default.default.div.withConfig({
+  displayName: "Scrollbar__ScrollbarOuterWrapper",
+  componentId: "sc-mphi5n-0"
+})([""]);
+var ScrollbarElements = styled__default.default.div.withConfig({
+  displayName: "Scrollbar__ScrollbarElements",
+  componentId: "sc-mphi5n-1"
+})(["display:block;height:100%;position:relative;display:grid;justify-items:center;"]);
+var Track = styled__default.default.div.withConfig({
+  displayName: "Scrollbar__Track",
+  componentId: "sc-mphi5n-2"
+})(["bottom:0;top:0;position:absolute;background-color:", ";border-radius:", ";width:", ";"], track$2.backgroundColor, track$2.borderRadius, track$2.width);
+var Thumb = styled__default.default.div.withConfig({
+  displayName: "Scrollbar__Thumb",
+  componentId: "sc-mphi5n-3"
+})(["position:absolute;background-color:", ";border-radius:", ";width:", ";transition:background-color 0.2s;&:hover{background-color:", ";}"], thumb$1.base.backgroundColor, thumb$1.base.borderRadius, thumb$1.base.width, thumb$1.hover.backgroundColor);
+var Scrollbar = function Scrollbar(props) {
+  var id = props.id,
+    className = props.className,
+    htmlProps = props.htmlProps,
+    contentRef = props.contentRef,
+    rest = tslib.__rest(props, ["id", "className", "htmlProps", "contentRef"]);
+  var trackRef = React.useRef(null);
+  var thumbRef = React.useRef(null);
+  var _useState = React.useState(minThumbHeightPx),
+    _useState2 = _slicedToArray(_useState, 2),
+    thumbHeight = _useState2[0],
+    setThumbHeight = _useState2[1];
+  var _useState3 = React.useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isScrollable = _useState4[0],
+    setIsScrollable = _useState4[1];
+  var _useState5 = React.useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    thumbTop = _useState6[0],
+    setThumbTop = _useState6[1];
+  var observer = React.useRef(null);
+  var _useState7 = React.useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    scrollStartPosition = _useState8[0],
+    setScrollStartPosition = _useState8[1];
+  var _useState9 = React.useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    initialScrollTop = _useState10[0],
+    setInitialScrollTop = _useState10[1];
+  var _useState11 = React.useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isDragging = _useState12[0],
+    setIsDragging = _useState12[1];
+  function handleResize(ref, trackSize) {
+    var clientHeight = ref.clientHeight,
+      scrollHeight = ref.scrollHeight;
+    setIsScrollable(clientHeight !== scrollHeight);
+    setThumbHeight(Math.max(clientHeight / scrollHeight * trackSize, minThumbHeightPx));
+  }
+  var handleTrackClick = React.useCallback(function (e) {
+    if (contentRef && contentRef.current) {
+      var trackCurrent = trackRef.current;
+      var contentCurrent = contentRef.current;
+      if (trackCurrent && contentCurrent) {
+        var clientY = e.clientY;
+        var target = e.target;
+        var rect = target.getBoundingClientRect();
+        var trackTop = rect.top;
+        var thumbOffset = -(thumbHeight / 2);
+        var clickRatio = (clientY - trackTop + thumbOffset) / trackCurrent.clientHeight;
+        var scrollAmount = Math.floor(clickRatio * contentCurrent.scrollHeight);
+        contentCurrent.scrollTo({
+          top: scrollAmount,
+          behavior: 'smooth'
+        });
+      }
+    }
+  }, [thumbHeight]);
+  var handleThumbPositioning = React.useCallback(function () {
+    if (!(contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) || !trackRef.current || !thumbRef.current) {
+      return;
+    }
+    var _contentRef$current = contentRef.current,
+      contentTop = _contentRef$current.scrollTop,
+      contentHeight = _contentRef$current.scrollHeight;
+    var clientHeight = trackRef.current.clientHeight;
+    var newTop = +contentTop / +contentHeight * clientHeight;
+    newTop = Math.min(newTop, clientHeight - thumbHeight);
+    setThumbTop(newTop);
+  }, []);
+  React.useEffect(function () {
+    if (contentRef && contentRef.current && trackRef.current) {
+      var ref = contentRef.current;
+      var clientHeight = trackRef.current.clientHeight;
+      observer.current = new ResizeObserver(function () {
+        handleResize(ref, clientHeight);
+      });
+      observer.current.observe(ref);
+      ref.addEventListener('scroll', handleThumbPositioning);
+      return function () {
+        var _a;
+        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.unobserve(ref);
+        ref.removeEventListener('scroll', handleThumbPositioning);
+      };
+    }
+  }, []);
+  var handleThumbMousedown = React.useCallback(function (e) {
+    setScrollStartPosition(e.clientY);
+    if (contentRef && contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
+    setIsDragging(true);
+  }, []);
+  var handleThumbMouseup = React.useCallback(function () {
+    if (isDragging) {
+      setIsDragging(false);
+    }
+  }, [isDragging]);
+  var handleThumbMousemove = React.useCallback(function (e) {
+    if (contentRef && contentRef.current) {
+      if (isDragging) {
+        var _contentRef$current2 = contentRef.current,
+          contentScrollHeight = _contentRef$current2.scrollHeight,
+          contentOffsetHeight = _contentRef$current2.offsetHeight;
+        var deltaY = (e.clientY - scrollStartPosition) * (contentOffsetHeight / thumbHeight);
+        var newScrollTop = Math.min(initialScrollTop + deltaY, contentScrollHeight - contentOffsetHeight);
+        contentRef.current.scrollTop = newScrollTop;
+      }
+    }
+  }, [isDragging, scrollStartPosition, thumbHeight]);
+  React.useEffect(function () {
+    document.addEventListener('mousemove', handleThumbMousemove);
+    document.addEventListener('mouseup', handleThumbMouseup);
+    document.addEventListener('mouseleave', handleThumbMouseup);
+    return function () {
+      document.removeEventListener('mousemove', handleThumbMousemove);
+      document.removeEventListener('mouseup', handleThumbMouseup);
+      document.removeEventListener('mouseleave', handleThumbMouseup);
+    };
+  }, [handleThumbMousemove, handleThumbMouseup]);
+  return isScrollable ? jsxRuntime.jsx(ScrollbarOuterWrapper, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: jsxRuntime.jsxs(ScrollbarElements, {
+      children: [jsxRuntime.jsx(Track, {
+        ref: trackRef,
+        onClick: handleTrackClick
+      }), jsxRuntime.jsx(Thumb, {
+        style: {
+          height: thumbHeight,
+          top: thumbTop
+        },
+        ref: thumbRef,
+        onMouseDown: handleThumbMousedown
+      })]
+    })
+  })) : null;
+};
+Scrollbar.displayName = 'Scrollbar';
+
+var track$1 = scrollbarTokens.track,
+  content$4 = scrollbarTokens.content,
+  outerContainer$7 = scrollbarTokens.outerContainer;
+var StyledScrollableContainer = styled__default.default.div.withConfig({
+  displayName: "ScrollableContainer__StyledScrollableContainer",
+  componentId: "sc-t0dczu-0"
+})(["grid-template:auto / 1fr ", ";overflow:hidden;position:relative;display:grid;padding:", ";"], track$1.width, outerContainer$7.padding);
+var Content$2 = styled__default.default.div.withConfig({
+  displayName: "ScrollableContainer__Content",
+  componentId: "sc-t0dczu-1"
+})(["height:", ";overflow:auto;scrollbar-width:none;::-webkit-scrollbar{display:none;}padding-right:", ";@media (prefers-reduced-motion:no-preference){transition:", ";}:focus-visible,.focus-visible{outline:", ";outline-offset:", ";}"], function (_ref) {
+  var height = _ref.height;
+  return height;
+}, content$4.paddingRight, ddsForm.focusVisibleTransitionValue, ddsForm.focusVisible.outline, ddsForm.focusVisible.outlineOffset);
+var ScrollableContainer = function ScrollableContainer(props) {
+  var children = props.children,
+    id = props.id,
+    className = props.className,
+    _props$contentHeight = props.contentHeight,
+    contentHeight = _props$contentHeight === void 0 ? '90vh' : _props$contentHeight,
+    htmlProps = props.htmlProps,
+    rest = tslib.__rest(props, ["children", "id", "className", "contentHeight", "htmlProps"]);
+  var ref = React.useRef(null);
+  return jsxRuntime.jsxs(StyledScrollableContainer, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: [jsxRuntime.jsx(Content$2, {
+      height: contentHeight,
+      ref: ref,
+      tabIndex: 0,
+      children: children
+    }), jsxRuntime.jsx(Scrollbar, {
+      contentRef: ref
+    })]
+  }));
+};
+ScrollableContainer.displayName = 'ScrollableContainer';
+
+var thumb = scrollbarTokens.thumb,
+  track = scrollbarTokens.track;
+var scrollbarWidth = 'thin';
+/**
+ * CSS-in-JS scrollbar styling til bruk der det ikke passer å bruke dedikerte komponenter. Inkluderer styling for webkit pseudo-elementer og for Firefox.
+ */
+var scrollbarStyling = {
+  webkit: {
+    /* width */
+    '&::-webkit-scrollbar': {
+      width: track.width,
+      height: track.width
+    },
+    /* Track */
+    '&::-webkit-scrollbar-track': {
+      background: track.backgroundColor,
+      borderRadius: track.borderRadius
+    },
+    /* Handle */
+    '&::-webkit-scrollbar-thumb': {
+      background: thumb.base.backgroundColor,
+      borderRadius: thumb.base.borderRadius
+    }
+  },
+  /* Handle on hover */
+  '&::-webkit-scrollbar-thumb:hover': {
+    background: thumb.hover.backgroundColor
+  },
+  firefox: {
+    scrollbarColor: thumb.base.backgroundColor + ' ' + track.backgroundColor,
+    scrollbarWidth: scrollbarWidth
+  }
+};
+
+var border$9 = ddsDesignTokens.ddsBaseTokens.border,
+  borderRadius$7 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+  colors$p = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$x = ddsDesignTokens.ddsBaseTokens.spacing,
+  fontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var typographyType$5 = 'bodySans01';
+var element$1 = {
+  base: {
+    color: colors$p.DdsColorNeutralsGray9,
+    textDecoration: 'none',
+    backgroundColor: colors$p.DdsColorNeutralsWhite,
+    padding: "".concat(spacing$x.SizesDdsSpacingLocalX075, " ").concat(spacing$x.SizesDdsSpacingLocalX1),
+    gap: spacing$x.SizesDdsSpacingLocalX025
+  }
+};
+var iconHeight = ddsCore.calculateHeightWithLineHeight(fontPackages$2.body_sans_01.numbers.lineHeightNumber, fontPackages$2.body_sans_01.numbers.fontSizeNumber);
+var link$3 = {
+  iconWrapper: {
+    height: "".concat(iconHeight, "px")
+  },
+  hover: {
+    backgroundColor: colors$p.DdsColorInteractiveLightest
+  },
+  active: {
+    backgroundColor: colors$p.DdsColorInteractiveLightest
+  }
+};
+var container$e = {
+  border: "".concat(border$9.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$9.BordersDdsBorderStyleLightStroke, " solid "),
+  backgroundColor: colors$p.DdsColorNeutralsWhite,
+  borderRadius: borderRadius$7.RadiiDdsBorderRadius1Radius
+};
+var divider$1 = {
+  marginRight: spacing$x.SizesDdsSpacingLocalX15,
+  marginLeft: spacing$x.SizesDdsSpacingLocalX15
+};
+var overflowMenuTokens = {
+  container: container$e,
+  element: element$1,
+  link: link$3,
+  divider: divider$1,
+  offset: spacing$x.SizesDdsSpacingLocalX0125NumberPx
+};
+
+var element = overflowMenuTokens.element,
+  link$2 = overflowMenuTokens.link;
+var elementBaseCSS = styled.css(["display:flex;box-sizing:border-box;color:", ";text-decoration:", ";background-color:", ";padding:", ";gap:", ";", ""], element.base.color, element.base.textDecoration, element.base.backgroundColor, element.base.padding, element.base.gap, ddsTypography.getFontStyling(typographyType$5));
+var Span = styled__default.default.span.withConfig({
+  displayName: "OverflowMenuItem__Span",
+  componentId: "sc-1ka2asi-0"
+})(["", ""], elementBaseCSS);
+var Link$2 = styled__default.default.a.withConfig({
+  displayName: "OverflowMenuItem__Link",
+  componentId: "sc-1ka2asi-1"
+})(["", " text-align:left;user-select:text;border:none;cursor:pointer;outline:inherit;width:100%;", " @media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}&:hover{background-color:", ";}&:active{background-color:", ";}&:focus-visible,&.focus-visible{", "}"], ddsCore.normalizeButton, elementBaseCSS, link$2.hover.backgroundColor, link$2.active.backgroundColor, ddsTypography.focusVisibleLink);
+var IconWrapper$1 = styled__default.default.span.withConfig({
+  displayName: "OverflowMenuItem__IconWrapper",
+  componentId: "sc-1ka2asi-2"
+})(["display:flex;align-items:center;height:", ";"], link$2.iconWrapper.height);
+var isAnchorProps = function isAnchorProps(props) {
+  return props.href !== undefined;
+};
+var isButtonProps = function isButtonProps(props) {
+  return props.href === undefined && props.onClick !== undefined;
+};
+var OverflowMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var title = props.title,
+    icon = props.icon,
+    focus = props.focus,
+    setFocus = props.setFocus,
+    index = props.index,
+    id = props.id,
+    className = props.className,
+    _props$htmlProps = props.htmlProps,
+    htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+    rest = tslib.__rest(props, ["title", "icon", "focus", "setFocus", "index", "id", "className", "htmlProps"]);
+  var onKeyDown = htmlProps.onKeyDown;
+  var href;
+  var onClick;
+  if (isAnchorProps(props)) {
+    href = props.href;
+  } else if (isButtonProps(props)) {
+    onClick = props.onClick;
+  }
+  var itemRef = React.useRef(null);
+  var combinedRef = ddsCore.useCombinedRef(ref, itemRef);
+  React.useEffect(function () {
+    var _a;
+    if (focus) {
+      (_a = itemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [focus]);
+  var handleSelect = React.useCallback(function () {
+    if (setFocus && index) {
+      setFocus(index);
+    }
+  }, [index, setFocus]);
+  var handleOnClick = function handleOnClick(e) {
+    handleSelect();
+    onClick && onClick(e);
+  };
+  var handleOnKeyDown = function handleOnKeyDown(e) {
+    handleSelect();
+    onKeyDown && onKeyDown(e);
+  };
+  var linkProps = {
+    href: href,
+    onClick: handleOnClick,
+    onKeyDown: handleOnKeyDown,
+    role: 'menuitem',
+    tabIndex: focus ? 0 : -1
+  };
+  var iconElement = icon && jsxRuntime.jsx(ddsIcons.Icon, {
+    iconSize: "inherit",
+    icon: icon
+  });
+  if (!href && !onClick) {
+    return jsxRuntime.jsxs(Span, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), {
+      ref: ref,
+      children: [jsxRuntime.jsx(IconWrapper$1, {
+        children: iconElement
+      }), title]
+    }));
+  }
+  if (!href) {
+    return jsxRuntime.jsxs(Link$2, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), linkProps, {
+      as: "button",
+      ref: combinedRef,
+      children: [jsxRuntime.jsx(IconWrapper$1, {
+        children: iconElement
+      }), title]
+    }));
+  }
+  return jsxRuntime.jsxs(Link$2, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), linkProps, {
+    as: "a",
+    ref: combinedRef,
+    children: [jsxRuntime.jsx(IconWrapper$1, {
+      children: iconElement
+    }), title]
+  }));
+});
+OverflowMenuItem.displayName = 'OverflowMenuItem';
+
+var container$d = overflowMenuTokens.container,
+  divider = overflowMenuTokens.divider;
+var Container$f = styled__default.default.div.withConfig({
+  displayName: "OverflowMenu__Container",
+  componentId: "sc-kh744b-0"
+})(["box-sizing:border-box;z-index:100;overflow-y:auto;min-width:180px;max-width:300px;", " border:", ";background-color:", ";border-radius:", ";", " ", " *::selection{", "}"], function (_ref) {
+  var isOpen = _ref.isOpen;
+  return ddsCore.visibilityTransition(isOpen);
+}, container$d.border, container$d.backgroundColor, container$d.borderRadius, scrollbarStyling.webkit, scrollbarStyling.firefox, ddsCore.selection);
+var OverflowMenuList = styled__default.default.ul.withConfig({
+  displayName: "OverflowMenu__OverflowMenuList",
+  componentId: "sc-kh744b-1"
+})(["display:flex;flex-direction:column;list-style-type:none;padding:0;margin:0;"]);
+var StyledDivider$1 = styled__default.default(Divider).withConfig({
+  displayName: "OverflowMenu__StyledDivider",
+  componentId: "sc-kh744b-2"
+})(["margin-left:", ";margin-right:", ";"], divider.marginLeft, divider.marginRight);
+var OverflowMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _a, _b;
+  var anchorRef = props.anchorRef,
+    onClose = props.onClose,
+    onToggle = props.onToggle,
+    _props$isOpen = props.isOpen,
+    isOpen = _props$isOpen === void 0 ? false : _props$isOpen,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottom-end' : _props$placement,
+    items = props.items,
+    navItems = props.navItems,
+    userProps = props.userProps,
+    id = props.id,
+    _props$offset = props.offset,
+    offset = _props$offset === void 0 ? overflowMenuTokens.offset : _props$offset,
+    className = props.className,
+    _props$htmlProps = props.htmlProps,
+    htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+    rest = tslib.__rest(props, ["anchorRef", "onClose", "onToggle", "isOpen", "placement", "items", "navItems", "userProps", "id", "offset", "className", "htmlProps"]);
+  var _useFloatPosition = ddsCore.useFloatPosition(null, {
+      placement: placement,
+      offset: offset
+    }),
+    reference = _useFloatPosition.reference,
+    floating = _useFloatPosition.floating,
+    refs = _useFloatPosition.refs,
+    styles = _useFloatPosition.styles;
+  var combinedRef = ddsCore.useCombinedRef(ref, floating);
+  React.useEffect(function () {
+    anchorRef ? reference(anchorRef.current) : reference(null);
+  }, [anchorRef]);
+  ddsCore.useOnClickOutside([(_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current, (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current], function () {
+    if (isOpen) {
+      onClose && onClose();
+      onToggle && onToggle();
+    }
+  });
+  ddsCore.useOnKeyDown(['Esc', 'Escape'], function () {
+    var _a;
+    if (isOpen) {
+      onClose && onClose();
+      onToggle && onToggle();
+      anchorRef && ((_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+    }
+  });
+  ddsCore.useOnKeyDown(['Tab'], function () {
+    if (isOpen) {
+      onClose && onClose();
+      onToggle && onToggle();
+    }
+  });
+  var interactiveItems = [];
+  var hasContextItems = !!items && items.length > 0;
+  var hasNavItems = !!navItems && navItems.length > 0;
+  var _c = userProps || {},
+    username = _c.name,
+    userPropsRest = tslib.__rest(_c, ["name"]);
+  var hasStaticUser = username && userProps && !userProps.href && !userProps.onClick;
+  var hasInteractiveUser = username && userProps && (!!userProps.href || !!userProps.onClick);
+  hasInteractiveUser && interactiveItems.push(Object.assign({
+    title: username
+  }, userPropsRest));
+  hasNavItems && interactiveItems.push.apply(interactiveItems, _toConsumableArray(navItems));
+  hasContextItems && interactiveItems.push.apply(interactiveItems, _toConsumableArray(items));
+  var hasInteractiveItems = interactiveItems.length > 0;
+  var _useRoveFocus = ddsCore.useRoveFocus(interactiveItems && interactiveItems.length, !isOpen),
+    _useRoveFocus2 = _slicedToArray(_useRoveFocus, 2),
+    focus = _useRoveFocus2[0],
+    setFocus = _useRoveFocus2[1];
+  var interactiveItemsList = hasInteractiveItems ? interactiveItems.map(function (item, index) {
+    return jsxRuntime.jsx("li", {
+      children: jsxRuntime.jsx(OverflowMenuItem, Object.assign({
+        index: index,
+        focus: focus === index && isOpen,
+        setFocus: setFocus,
+        icon: hasInteractiveUser && index === 0 ? ddsIcons.PersonIcon : undefined
+      }, item, {
+        onClick: function onClick(e) {
+          item.onClick && item.onClick(e);
+          onToggle && onToggle();
+          onClose && onClose();
+        }
+      }))
+    }, index);
+  }) : null;
+  var interactiveContent = function interactiveContent() {
+    if (hasInteractiveItems) {
+      var userPropsPos = hasInteractiveUser ? 0 : -1;
+      var navItemsFirstPos = hasNavItems ? userPropsPos + 1 : -1;
+      var navItemsLastPos = hasNavItems ? userPropsPos + navItems.length : -1;
+      var contextItemsFirstPos = !hasContextItems ? -1 : hasNavItems ? navItemsLastPos + 1 : userPropsPos + 1;
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [hasInteractiveUser && jsxRuntime.jsx(OverflowMenuList, {
+          children: interactiveItemsList === null || interactiveItemsList === void 0 ? void 0 : interactiveItemsList[0]
+        }), hasNavItems && jsxRuntime.jsx("nav", {
+          children: jsxRuntime.jsx(OverflowMenuList, {
+            children: interactiveItemsList === null || interactiveItemsList === void 0 ? void 0 : interactiveItemsList.slice(navItemsFirstPos, navItemsLastPos + 1)
+          })
+        }), hasNavItems && hasContextItems && jsxRuntime.jsx(StyledDivider$1, {
+          color: "primaryLighter"
+        }), hasContextItems && jsxRuntime.jsx(OverflowMenuList, {
+          "aria-label": "kontekstmeny",
+          children: interactiveItemsList === null || interactiveItemsList === void 0 ? void 0 : interactiveItemsList.slice(contextItemsFirstPos, interactiveItemsList.length)
+        })]
+      });
+    }
+  };
+  var _htmlProps$style = htmlProps.style,
+    style = _htmlProps$style === void 0 ? {} : _htmlProps$style,
+    restHTMLProps = tslib.__rest(htmlProps, ["style"]);
+  var generatedId = React.useId();
+  var containerProps = Object.assign(Object.assign({}, ddsCore.getBaseHTMLProps(id, className, restHTMLProps, rest)), {
+    ref: combinedRef,
+    id: id !== null && id !== void 0 ? id : "".concat(generatedId, "-overflowMenu"),
+    isOpen: isOpen,
+    style: Object.assign(Object.assign({}, style), styles.floating),
+    'aria-hidden': !isOpen,
+    role: 'menu'
+  });
+  return jsxRuntime.jsxs(Container$f, Object.assign({}, containerProps, {
+    "aria-label": "bruk piltaster for \xE5 navigere",
+    children: [hasStaticUser && jsxRuntime.jsx(OverflowMenuItem, {
+      title: username,
+      icon: ddsIcons.PersonIcon
+    }), interactiveContent()]
+  }));
+});
+OverflowMenu.displayName = 'OverflowMenu';
+
+var OverflowMenuGroup = function OverflowMenuGroup(_ref) {
+  var children = _ref.children,
+    onClose = _ref.onClose,
+    onToggle = _ref.onToggle,
+    onOpen = _ref.onOpen,
+    overflowMenuId = _ref.overflowMenuId;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var toggle = function toggle() {
+    return setIsOpen(!isOpen);
+  };
+  var close = function close() {
+    return setIsOpen(false);
+  };
+  var buttonRef = React.useRef(null);
+  var generatedId = React.useId();
+  var uniqueOverflowMenuId = overflowMenuId !== null && overflowMenuId !== void 0 ? overflowMenuId : "".concat(generatedId, "-overflowMenu");
+  var handleClose = function handleClose() {
+    onClose && onClose();
+    close();
+  };
+  var handleToggle = function handleToggle() {
+    onOpen && !isOpen && onOpen();
+    onClose && isOpen && onClose();
+    onToggle && onToggle();
+    toggle();
+  };
+  var Children = React.Children.map(children, function (child, childIndex) {
+    return /*#__PURE__*/React.isValidElement(child) && (childIndex === 0 ? /*#__PURE__*/React.cloneElement(child, {
+      'aria-haspopup': 'menu',
+      'aria-controls': uniqueOverflowMenuId,
+      'aria-expanded': isOpen,
+      onClick: handleToggle,
+      ref: buttonRef
+    }) : /*#__PURE__*/React.cloneElement(child, {
+      isOpen: isOpen,
+      id: uniqueOverflowMenuId,
+      onClose: handleClose,
+      onToggle: handleToggle,
+      anchorRef: buttonRef
+    }));
+  });
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: Children
+  });
+};
+OverflowMenuGroup.displayName = 'OverflowMenuGroup';
+
+var navTokens$1 = appShellTokens.navigation,
+  floatingActionButtons = appShellTokens.floatingActionButtons;
+var LogoBurgerGroup = styled__default.default.div.withConfig({
+  displayName: "TopBar__LogoBurgerGroup",
+  componentId: "sc-1mmx14i-0"
+})(["display:flex;align-items:center;gap:", ";"], navTokens$1.topBar.gap);
+var ActionButtonGroup = styled__default.default.div.withConfig({
+  displayName: "TopBar__ActionButtonGroup",
+  componentId: "sc-1mmx14i-1"
+})(["display:flex;align-items:center;gap:", ";"], navTokens$1.topBar.gap);
+var IconButton = styled__default.default(Button$1).attrs({
+  appearance: 'borderless',
+  purpose: 'secondary'
+}).withConfig({
+  displayName: "TopBar__IconButton",
+  componentId: "sc-1mmx14i-2"
+})(["color:", ";> :first-child{font-size:1.65rem;}@media (max-width:", "){border:0;box-shadow:none;padding:12px;&:hover,&:active{color:", ";text-decoration-color:", ";box-shadow:none;}gap:0;}"], navTokens$1.topBar.buttonTextColor, navTokens$1.mobile.breakpoint, navTokens$1.topBar.buttonTextColor, navTokens$1.topBar.buttonTextColor);
+var IconButtonText = styled__default.default.span.withConfig({
+  displayName: "TopBar__IconButtonText",
+  componentId: "sc-1mmx14i-3"
+})(["display:none;width:0;"]);
+var Bar$1 = styled__default.default.div.withConfig({
+  displayName: "TopBar__Bar",
+  componentId: "sc-1mmx14i-4"
+})(["display:flex;align-items:center;justify-content:space-between;gap:", ";width:100vw;height:", ";color:", ";background-color:", ";box-sizing:border-box;z-index:101;position:fixed;top:", ";left:0;right:0;@media (min-width:", "){justify-content:flex-end;background-color:transparent;margin-left:", ";width:calc(100vw - ", ");pointer-events:none;& > *{pointer-events:initial;}", "{display:none;}", "{padding-right:calc(2 * ", ");gap:", ";}", "{background-color:", ";color:", ";box-shadow:8px 16px 32px 0px rgba(0,0,0,0.1);border-radius:", ";", "{display:unset;}}}"], navTokens$1.topBar.gap, navTokens$1.topBar.height, navTokens$1.color, navTokens$1.backgroundColor, function (_ref) {
+  var environmentBannerActive = _ref.environmentBannerActive;
+  return environmentBannerActive ? developmentUtils.ENVIRONMENT_BANNER_HEIGHT : '0';
+}, navTokens$1.mobile.breakpoint, navTokens$1.width, navTokens$1.width, LogoBurgerGroup, ActionButtonGroup, navTokens$1.topBar.gap, floatingActionButtons.gap, IconButton, floatingActionButtons.backgroundColor, floatingActionButtons.textColor, floatingActionButtons.borderRadius, IconButtonText);
+var TopBar = function TopBar(_ref2) {
+  var user = _ref2.user,
+    userMenuItems = _ref2.userMenuItems,
+    isNavigationOpen = _ref2.isNavigationOpen,
+    onNavigationOpenChange = _ref2.onNavigationOpenChange,
+    environmentBannerActive = _ref2.environmentBannerActive;
+  var Icon = function Icon(props) {
+    return jsxRuntime.jsx(EmbeteIcon, Object.assign({}, props, {
+      type: user.embete.type
+    }));
+  };
+  return jsxRuntime.jsxs(Bar$1, {
+    environmentBannerActive: environmentBannerActive,
+    children: [jsxRuntime.jsxs(LogoBurgerGroup, {
+      children: [jsxRuntime.jsx(IconButton, {
+        icon: isNavigationOpen ? ddsIcons.CloseIcon : ddsIcons.MenuIcon,
+        onClick: function onClick() {
+          return onNavigationOpenChange(!isNavigationOpen);
+        }
+      }), jsxRuntime.jsx(NavigationLogo, {
+        small: true,
+        children: "Lovisa"
+      })]
+    }), jsxRuntime.jsx(ActionButtonGroup, {
+      children: jsxRuntime.jsxs(OverflowMenuGroup, {
+        children: [jsxRuntime.jsx(IconButton, {
+          icon: Icon,
+          label: jsxRuntime.jsx(IconButtonText, {
+            children: user.name
+          })
+        }), jsxRuntime.jsx(OverflowMenu, {
+          items: userMenuItems
+        })]
+      })
+    })]
+  });
+};
+
+var navTokens = appShellTokens.navigation;
+var Sidebar = styled__default.default.div.withConfig({
+  displayName: "Navigation__Sidebar",
+  componentId: "sc-twhp5c-0"
+})(["display:flex;flex-direction:column;height:calc(100vh - ", ");width:100vw;padding:", ";color:", ";background-color:", ";box-sizing:border-box;position:fixed;top:", ";left:0;right:0;bottom:0;z-index:100;transition:transform 0.2s ease-in-out,opacity 0.2s ease-in-out;transform:translateX(", ");opacity:", ";@media (min-width:", "){height:", ";top:", ";width:", ";position:fixed;transform:translateX(0);opacity:1;}"], navTokens.topBar.height, navTokens.padding, navTokens.color, navTokens.backgroundColor, function (_ref) {
+  var environmentBannerActive = _ref.environmentBannerActive;
+  return environmentBannerActive ? "calc(".concat(developmentUtils.ENVIRONMENT_BANNER_HEIGHT, " + ").concat(navTokens.topBar.height, ")") : navTokens.topBar.height;
+}, function (_ref2) {
+  var isOpen = _ref2.isOpen;
+  return isOpen ? '0' : '-100%';
+}, function (_ref3) {
+  var isOpen = _ref3.isOpen;
+  return isOpen ? '1' : '0';
+}, navTokens.mobile.breakpoint, function (_ref4) {
+  var environmentBannerActive = _ref4.environmentBannerActive;
+  return environmentBannerActive ? "calc(100vh - ".concat(developmentUtils.ENVIRONMENT_BANNER_HEIGHT, ")") : '100vh';
+}, function (_ref5) {
+  var environmentBannerActive = _ref5.environmentBannerActive;
+  return environmentBannerActive ? developmentUtils.ENVIRONMENT_BANNER_HEIGHT : 0;
+}, navTokens.width);
+var LogoAndVersionContainer = styled__default.default.div.withConfig({
+  displayName: "Navigation__LogoAndVersionContainer",
+  componentId: "sc-twhp5c-1"
+})(["display:none;@media (min-width:", "){display:flex;flex-direction:column;color:", ";padding:", ";}"], navTokens.mobile.breakpoint, navTokens.logoAndVersion.color, navTokens.logoAndVersion.padding);
+var Version = styled__default.default.span.withConfig({
+  displayName: "Navigation__Version",
+  componentId: "sc-twhp5c-2"
+})(["font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";"], navTokens.logoAndVersion.version.fontSize, navTokens.logoAndVersion.version.fontStyle, navTokens.logoAndVersion.version.fontFamily, navTokens.logoAndVersion.version.fontWeight, navTokens.logoAndVersion.version.lineHeight, navTokens.logoAndVersion.version.letterSpacing);
+var NavigationItems = styled__default.default.nav.withConfig({
+  displayName: "Navigation__NavigationItems",
+  componentId: "sc-twhp5c-3"
+})(["display:flex;flex-direction:column;gap:", ";"], navTokens.navigationItems.gap);
+var DividerWrapper = styled__default.default.div.withConfig({
+  displayName: "Navigation__DividerWrapper",
+  componentId: "sc-twhp5c-4"
+})(["padding-left:", ";padding-right:", ";"], navTokens.navigationItems.item.padding, navTokens.navigationItems.item.padding);
+var StyledDivider = styled__default.default(Divider).withConfig({
+  displayName: "Navigation__StyledDivider",
+  componentId: "sc-twhp5c-5"
+})(["border-color:", ";"], navTokens.dividerColor);
+var Navigation$1 = function Navigation(_ref6) {
+  var version = _ref6.version,
+    user = _ref6.user,
+    userMenuItems = _ref6.userMenuItems,
+    internal = _ref6.internal,
+    external = _ref6.external,
+    environmentBannerActive = _ref6.environmentBannerActive;
+  var _useAppShellContext = useAppShellContext(),
+    isOpen = _useAppShellContext.isOpen,
+    setOpen = _useAppShellContext.setOpen;
+  React.useEffect(function () {
+    var listener = function listener(event) {
+      if (event.key === 'o') {
+        setOpen(function (prev) {
+          return !prev;
+        });
+      }
+    };
+    window.addEventListener('keypress', listener);
+    return function () {
+      return window.removeEventListener('keypress', listener);
+    };
+  });
+  return jsxRuntime.jsxs("div", {
+    children: [jsxRuntime.jsx(TopBar, {
+      user: user,
+      userMenuItems: userMenuItems,
+      isNavigationOpen: isOpen,
+      onNavigationOpenChange: function onNavigationOpenChange(newOpen) {
+        return setOpen(newOpen);
+      },
+      environmentBannerActive: environmentBannerActive
+    }), jsxRuntime.jsxs(Sidebar, {
+      isOpen: isOpen,
+      environmentBannerActive: environmentBannerActive,
+      children: [jsxRuntime.jsxs(LogoAndVersionContainer, {
+        children: [jsxRuntime.jsx(NavigationLogo, {
+          children: "Lovisa"
+        }), version !== '' && jsxRuntime.jsxs(Version, {
+          children: ["v ", version]
+        })]
+      }), jsxRuntime.jsxs(NavigationItems, {
+        children: [React.Children.map(internal, function (item) {
+          if (item.type !== NavigationItem$1) {
+            console.warn("Du bruker en React-komponent som ikke er tillat i AppShell-internal. Du kan kun bruke AppShell.NavItem i AppShell-internal.");
+            return null;
+          }
+          return item;
+        }), external.length > 0 && jsxRuntime.jsx(DividerWrapper, {
+          children: jsxRuntime.jsx(StyledDivider, {})
+        }), React.Children.map(external, function (item) {
+          if (item.type !== NavigationItem$1) {
+            console.warn('Du bruker en React-komponent som ikke er tillat i AppShell-external. Du kan kun bruke AppShell.NavItem i AppShell-external.');
+            return null;
+          }
+          return item;
+        })]
+      })]
+    })]
+  });
+};
+
+var AppShellContainer = styled__default.default.div.withConfig({
+  displayName: "AppShell__AppShellContainer",
+  componentId: "sc-1c8yu5p-0"
+})(["display:flex;flex-direction:column;@media (min-width:", "){flex-direction:row;}"], appShellTokens.navigation.mobile.breakpoint);
+var MainContent = styled__default.default.main.withConfig({
+  displayName: "AppShell__MainContent",
+  componentId: "sc-1c8yu5p-1"
+})(["min-height:calc(100vh - ", ");margin-top:", ";@media (min-width:", "){min-height:unset;margin-top:", ";margin-left:", ";min-width:calc(100vw - ", ");max-width:calc(100vw - ", ");}"], appShellTokens.navigation.topBar.height, function (_ref) {
+  var environmentBannerActive = _ref.environmentBannerActive;
+  return environmentBannerActive ? "calc(".concat(developmentUtils.ENVIRONMENT_BANNER_HEIGHT, " + ").concat(appShellTokens.navigation.topBar.height, ")") : appShellTokens.navigation.topBar.height;
+}, appShellTokens.navigation.mobile.breakpoint, function (_ref2) {
+  var environmentBannerActive = _ref2.environmentBannerActive;
+  return environmentBannerActive ? developmentUtils.ENVIRONMENT_BANNER_HEIGHT : 0;
+}, appShellTokens.navigation.width, appShellTokens.navigation.width, appShellTokens.navigation.width);
+var AppShell$1 = function AppShell(_ref3) {
+  var children = _ref3.children,
+    _ref3$version = _ref3.version,
+    version = _ref3$version === void 0 ? '' : _ref3$version,
+    _ref3$navigation = _ref3.navigation,
+    _ref3$navigation$inte = _ref3$navigation.internal,
+    internal = _ref3$navigation$inte === void 0 ? [] : _ref3$navigation$inte,
+    _ref3$navigation$exte = _ref3$navigation.external,
+    external = _ref3$navigation$exte === void 0 ? [] : _ref3$navigation$exte,
+    user = _ref3.user,
+    userMenuItems = _ref3.userMenuItems,
+    _ref3$environment = _ref3.environment,
+    environment = _ref3$environment === void 0 ? 'PROD' : _ref3$environment;
+  var environmentBannerActive = environment !== 'PROD';
+  return jsxRuntime.jsx(AppShellContextProvider, {
+    children: jsxRuntime.jsxs(AppShellContainer, {
+      children: [jsxRuntime.jsx(developmentUtils.EnvironmentBanner, {
+        environment: environment
+      }), jsxRuntime.jsx(Navigation$1, {
+        user: user,
+        userMenuItems: userMenuItems,
+        version: version,
+        internal: internal,
+        external: external,
+        environmentBannerActive: environmentBannerActive
+      }), jsxRuntime.jsx(MainContent, {
+        environmentBannerActive: environmentBannerActive,
+        children: children
+      })]
+    })
+  });
+};
+AppShell$1.displayName = 'AppShell';
+
+var AppShell = AppShell$1;
+AppShell.NavItem = NavigationItem$1;
+
+var RadioButtonGroupContext = /*#__PURE__*/React__default.default.createContext(null);
+var useRadioButtonGroup = function useRadioButtonGroup() {
+  return React.useContext(RadioButtonGroupContext);
+};
+
+var selectionControlSizeNumberPx = 18;
+var selectionControlSize = "".concat(selectionControlSizeNumberPx, "px");
+
+var colors$o = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$w = ddsDesignTokens.ddsBaseTokens.spacing,
+  borderRadius$6 = ddsDesignTokens.ddsBaseTokens.borderRadius;
+var checkmark$1 = {
+  checkbox: {
+    borderColor: colors$o.DdsColorNeutralsWhite
+  },
+  radio: {
+    backgroundColor: colors$o.DdsColorNeutralsWhite,
+    height: spacing$w.SizesDdsSpacingLocalX05,
+    width: spacing$w.SizesDdsSpacingLocalX05,
+    left: "calc(50% - ".concat(spacing$w.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
+    top: "calc(50% - ".concat(spacing$w.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
+  }
+};
+var selectionControl$2 = {
+  base: {
+    border: '1px solid',
+    borderColor: colors$o.DdsColorNeutralsGray5,
+    backgroundColor: colors$o.DdsColorNeutralsWhite,
+    borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
+    height: selectionControlSize,
+    width: selectionControlSize
+  },
+  hover: {
+    base: {
+      backgroundColor: colors$o.DdsColorInteractiveLightest,
+      boxShadow: "inset 0 0 0 1px ".concat(ddsForm.hoverInputfield.borderColor),
+      borderColor: ddsForm.hoverInputfield.borderColor
+    },
+    danger: {
+      backgroundColor: colors$o.DdsColorDangerLightest,
+      boxShadow: "inset 0 0 0 1px ".concat(ddsForm.dangerInputfield.borderColor),
+      borderColor: ddsForm.dangerInputfield.borderColor
+    }
+  },
+  danger: {
+    boxShadow: "inset 0 0 0 1px ".concat(ddsForm.dangerInputfield.borderColor),
+    borderColor: ddsForm.dangerInputfield.borderColor
+  },
+  disabled: {
+    borderColor: colors$o.DdsColorNeutralsGray5
+  },
+  readOnly: {
+    backgroundColor: 'transparent'
+  },
+  checked: {
+    base: {
+      borderColor: colors$o.DdsColorInteractiveBase,
+      backgroundColor: colors$o.DdsColorInteractiveBase
+    },
+    hover: {
+      backgroundColor: colors$o.DdsColorInteractiveDark,
+      boxShadow: "inset 0 0 0 1px  ".concat(colors$o.DdsColorInteractiveDark),
+      borderColor: colors$o.DdsColorInteractiveDark
+    },
+    disabled: {
+      borderColor: colors$o.DdsColorNeutralsGray6,
+      backgroundColor: colors$o.DdsColorNeutralsGray6
+    },
+    readOnly: {
+      borderColor: colors$o.DdsColorNeutralsGray6,
+      backgroundColor: colors$o.DdsColorNeutralsGray6
+    }
+  },
+  checkbox: {
+    indeterminate: {
+      borderColor: colors$o.DdsColorInteractiveBase,
+      backgroundColor: colors$o.DdsColorInteractiveBase
+    }
+  }
+};
+var container$c = {
+  color: colors$o.DdsColorNeutralsGray9,
+  disabled: {
+    color: colors$o.DdsColorNeutralsGray6
+  },
+  withLabel: {
+    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$w.SizesDdsSpacingLocalX05NumberPx, "px")
+  },
+  noLabel: {
+    padding: "".concat(selectionControlSizeNumberPx / 2, "px")
+  }
+};
+var groupContainer$1 = {
+  row: {
+    gap: spacing$w.SizesDdsSpacingLocalX075
+  },
+  column: {
+    gap: spacing$w.SizesDdsSpacingLocalX05
+  }
+};
+var outerGroupContainer$1 = {
+  gap: spacing$w.SizesDdsSpacingLocalX0125
+};
+var selectionControlTokens = {
+  selectionControl: selectionControl$2,
+  checkmark: checkmark$1,
+  container: container$c,
+  groupContainer: groupContainer$1,
+  outerGroupContainer: outerGroupContainer$1
+};
+
+var selectionControl$1 = selectionControlTokens.selectionControl,
+  container$b = selectionControlTokens.container,
+  checkmark = selectionControlTokens.checkmark,
+  groupContainer = selectionControlTokens.groupContainer,
+  outerGroupContainer = selectionControlTokens.outerGroupContainer;
+var CustomSelectionControl = styled__default.default.span.withConfig({
+  displayName: "SelectionControlstyles__CustomSelectionControl",
+  componentId: "sc-vs1fm0-0"
+})(["position:absolute;left:0;box-sizing:border-box;border:", ";border-color:", ";background-color:", ";border-radius:", ";height:", ";width:", ";", " &:after{content:'';position:absolute;display:none;}"], selectionControl$1.base.border, selectionControl$1.base.borderColor, selectionControl$1.base.backgroundColor, selectionControl$1.base.borderRadius, selectionControl$1.base.height, selectionControl$1.base.width, function (_ref) {
+  var controlType = _ref.controlType;
+  return controlType === 'radio' && styled.css(["border-radius:50%;"]);
+});
+var Container$e = styled__default.default.label.withConfig({
+  displayName: "SelectionControlstyles__Container",
+  componentId: "sc-vs1fm0-1"
+})(["position:relative;display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content;color:", ";", " input ~ ", "{@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}}&:focus-within{", " @media (prefers-reduced-motion:no-preference){transition:", ";}}&:hover input:enabled ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}input:checked:enabled ~ ", ",input[data-indeterminate='true'] ~ ", "{border-color:", ";background-color:", ";}&:hover input:checked:enabled ~ ", ",&:hover input:enabled[data-indeterminate='true'] ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}", " input:disabled ~ ", "{", "}input:checked:disabled ~ ", ",input:disabled[data-indeterminate='true'] ~ ", "{background-color:", ";border-color:", ";}input:checked ~ ", ":after,input[data-indeterminate='true'] ~ ", ":after{display:block;}", " ", ""], container$b.color, function (_ref2) {
+  var hasLabel = _ref2.hasLabel;
+  return hasLabel ? styled.css(["padding-left:", ";"], container$b.withLabel.paddingLeft) : styled.css(["padding:", ";"], container$b.noLabel.padding);
+}, CustomSelectionControl, ddsForm.focusVisible, ddsForm.focusVisibleTransitionValue, CustomSelectionControl, selectionControl$1.hover.base.backgroundColor, selectionControl$1.hover.base.boxShadow, selectionControl$1.hover.base.borderColor, CustomSelectionControl, CustomSelectionControl, selectionControl$1.checked.base.borderColor, selectionControl$1.checked.base.backgroundColor, CustomSelectionControl, CustomSelectionControl, selectionControl$1.checked.hover.backgroundColor, selectionControl$1.checked.hover.boxShadow, selectionControl$1.checked.hover.borderColor, function (_ref3) {
+  var error = _ref3.error;
+  return error && styled.css(["&:hover input:enabled ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}input ~ ", ",input:checked:enabled ~ ", ",&:hover input:checked:enabled ~ ", "{box-shadow:", ";border-color:", ";}"], CustomSelectionControl, selectionControl$1.hover.danger.backgroundColor, selectionControl$1.hover.danger.boxShadow, selectionControl$1.hover.danger.borderColor, CustomSelectionControl, CustomSelectionControl, CustomSelectionControl, selectionControl$1.danger.boxShadow, selectionControl$1.danger.borderColor);
+}, CustomSelectionControl, selectionControl$1.disabled, CustomSelectionControl, CustomSelectionControl, selectionControl$1.checked.disabled.backgroundColor, selectionControl$1.checked.disabled.borderColor, CustomSelectionControl, CustomSelectionControl, function (_ref4) {
+  var disabled = _ref4.disabled;
+  return disabled && styled.css(["cursor:not-allowed;color:", ";"], container$b.disabled.color);
+}, function (_ref5) {
+  var controlType = _ref5.controlType;
+  return controlType === 'checkbox' ? styled.css(["", ":after{border:solid ", ";border-width:0 1px 1px 0;left:35%;top:10%;width:30%;height:65%;transform:rotate(45deg);}input[data-indeterminate='true'] ~ ", ":after{border-width:1px 0 0 0;left:25%;top:50%;width:50%;height:1px;transform:none;}"], CustomSelectionControl, checkmark.checkbox.borderColor, CustomSelectionControl) : styled.css(["", ":after{border-radius:50%;background-color:", ";width:", ";height:", ";left:", ";top:", ";}"], CustomSelectionControl, checkmark.radio.backgroundColor, checkmark.radio.width, checkmark.radio.height, checkmark.radio.left, checkmark.radio.top);
+});
+var OuterGroupContainer = styled__default.default.div.withConfig({
+  displayName: "SelectionControlstyles__OuterGroupContainer",
+  componentId: "sc-vs1fm0-2"
+})(["display:flex;flex-direction:column;gap:", ";"], outerGroupContainer.gap);
+var GroupContainer = styled__default.default.div.withConfig({
+  displayName: "SelectionControlstyles__GroupContainer",
+  componentId: "sc-vs1fm0-3"
+})(["display:flex;", ""], function (_ref6) {
+  var direction = _ref6.direction;
+  return styled.css(["flex-direction:", ";gap:", ";"], direction, groupContainer[direction].gap);
+});
+
+var isValueEqualToGroupValueOrFalsy = function isValueEqualToGroupValueOrFalsy(value, group) {
+  if (typeof value !== 'undefined' && value !== null && group) {
+    if (typeof value === 'number') {
+      return value === Number(group === null || group === void 0 ? void 0 : group.value);
+    }
+    return value === (group === null || group === void 0 ? void 0 : group.value);
+  }
+  return !!value;
+};
+var RadioButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+    name = props.name,
+    label = props.label,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    error = props.error,
+    checked = props.checked,
+    value = props.value,
+    children = props.children,
+    required = props.required,
+    onChange = props.onChange,
+    ariaDescribedby = props['aria-describedby'],
+    className = props.className,
+    _props$htmlProps = props.htmlProps,
+    htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+    rest = tslib.__rest(props, ["id", "name", "label", "disabled", "readOnly", "error", "checked", "value", "children", "required", "onChange", 'aria-describedby', "className", "htmlProps"]);
+  var htmlPropsClassName = htmlProps.className,
+    style = htmlProps.style,
+    restHtmlProps = tslib.__rest(htmlProps, ["className", "style"]);
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-radioButton");
+  var hasLabel = !!label;
+  var radioButtonGroup = useRadioButtonGroup();
+  var handleChange = function handleChange(event) {
+    onChange && onChange(event);
+    radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.onChange(event);
+  };
+  var describedByIds = [];
+  if (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId) describedByIds.push(radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId);
+  if (ariaDescribedby) describedByIds.push(ariaDescribedby);
+  var inputProps = Object.assign(Object.assign({}, ddsCore.getBaseHTMLProps(uniqueId, restHtmlProps, rest)), {
+    type: 'radio',
+    name: name !== null && name !== void 0 ? name : radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.name,
+    disabled: disabled || readOnly || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.disabled) || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.readOnly),
+    required: required || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.required),
+    checked: typeof checked !== 'undefined' ? checked : isValueEqualToGroupValueOrFalsy(value, radioButtonGroup),
+    onChange: handleChange,
+    value: value,
+    'aria-describedby': describedByIds.length > 0 ? describedByIds.join(' ') : undefined,
+    'aria-invalid': error || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.error) ? true : undefined
+  });
+  var containerProps = {
+    error: error || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.error),
+    disabled: disabled || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.disabled),
+    readOnly: readOnly || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.readOnly),
+    style: style,
+    className: ddsCore.joinClassNames(className, htmlPropsClassName),
+    htmlFor: uniqueId,
+    controlType: 'radio',
+    hasLabel: hasLabel
+  };
+  return jsxRuntime.jsxs(Container$e, Object.assign({}, containerProps, {
+    htmlFor: uniqueId,
+    controlType: "radio",
+    children: [jsxRuntime.jsx(ddsForm.HiddenInput, Object.assign({}, inputProps, {
+      ref: ref
+    })), jsxRuntime.jsx(CustomSelectionControl, {
+      controlType: "radio"
+    }), jsxRuntime.jsx(ddsTypography.Typography, {
+      as: "span",
+      children: children !== null && children !== void 0 ? children : label
+    })]
+  }));
+});
+RadioButton.displayName = 'RadioButton';
+
+var colors$n = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$v = ddsDesignTokens.ddsBaseTokens.spacing;
+var message = {
+  tip: {
+    backgroundColor: colors$n.DdsColorNeutralsWhite
+  },
+  error: {
+    padding: "".concat(spacing$v.SizesDdsSpacingLocalX025, " ").concat(spacing$v.SizesDdsSpacingLocalX05),
+    color: colors$n.DdsColorDangerBase,
+    backgroundColor: colors$n.DdsColorDangerLightest,
+    gap: spacing$v.SizesDdsSpacingLocalX05
+  }
+};
+var icon$a = {
+  marginTop: spacing$v.SizesDdsSpacingLocalX0125
+};
+var inputMessageTokens = {
+  message: message,
+  icon: icon$a
+};
+
+var InputMessageWrapper = styled__default.default.div.withConfig({
+  displayName: "InputMessage__InputMessageWrapper",
+  componentId: "sc-c954fy-0"
+})(["display:flex;width:fit-content;word-break:break-word;max-width:100%;", " svg{margin-top:", ";}"], function (_ref) {
+  var messageType = _ref.messageType;
+  return messageType === 'error' ? styled.css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
+}, inputMessageTokens.icon.marginTop);
+var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var message = props.message,
+    messageType = props.messageType,
+    id = props.id,
+    className = props.className,
+    htmlProps = props.htmlProps,
+    rest = tslib.__rest(props, ["message", "messageType", "id", "className", "htmlProps"]);
+  var wrapperProps = Object.assign(Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest)), {
+    ref: ref,
+    messageType: messageType
+  });
+  var isError = messageType === 'error';
+  return jsxRuntime.jsxs(InputMessageWrapper, Object.assign({}, wrapperProps, {
+    children: [isError && jsxRuntime.jsx(ddsIcons.Icon, {
+      icon: ddsIcons.ErrorIcon,
+      iconSize: "inherit"
+    }), jsxRuntime.jsx(ddsTypography.Typography, {
+      typographyType: isError ? 'supportingStyleLabel01' : 'supportingStyleHelperText01',
+      as: "span",
+      bold: isError ? true : undefined,
+      color: isError ? inputMessageTokens.message.error.color : undefined,
+      children: message
+    })]
+  }));
+});
+InputMessage.displayName = 'InputMessage';
+
+var renderInputMessage = function renderInputMessage(tip, tipId, errorMessage, errorMessageId) {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [errorMessage && errorMessageId && jsxRuntime.jsx(InputMessage, {
+      message: errorMessage,
+      messageType: "error",
+      id: errorMessageId
+    }), tip && tipId && !errorMessage && jsxRuntime.jsx(InputMessage, {
+      message: tip,
+      messageType: "tip",
+      id: tipId
+    })]
+  });
+};
+
+var RadioButtonGroupInner = function RadioButtonGroupInner(props, ref) {
+  var name = props.name,
+    label = props.label,
+    groupId = props.groupId,
+    errorMessage = props.errorMessage,
+    tip = props.tip,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'row' : _props$direction,
+    value = props.value,
+    children = props.children,
+    required = props.required,
+    onChange = props.onChange,
+    id = props.id,
+    className = props.className,
+    _props$htmlProps = props.htmlProps,
+    htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+    rest = tslib.__rest(props, ["name", "label", "groupId", "errorMessage", "tip", "disabled", "readOnly", "direction", "value", "children", "required", "onChange", "id", "className", "htmlProps"]);
+  var ariaRequired = htmlProps['aria-required'];
+  var _useState = React.useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    groupValue = _useState2[0],
+    setGroupValue = _useState2[1];
+  var generatedId = React.useId();
+  var uniqueGroupId = groupId !== null && groupId !== void 0 ? groupId : "".concat(generatedId, "-radioButtonGroup");
+  var handleChange = ddsCore.combineHandlers(function (e) {
+    return setGroupValue(e.target.value);
+  }, function (e) {
+    return onChange && onChange(e, e.target.value);
+  });
+  var hasErrorMessage = !!errorMessage;
+  var showRequiredMarker = required || ariaRequired;
+  var tipId = tip && "".concat(uniqueGroupId, "-tip");
+  var errorMessageId = errorMessage && "".concat(uniqueGroupId, "-errorMessage");
+  var contextProps = {
+    name: name,
+    disabled: disabled,
+    error: hasErrorMessage,
+    errorMessageId: errorMessageId,
+    required: required,
+    readOnly: readOnly,
+    value: groupValue,
+    onChange: handleChange
+  };
+  return jsxRuntime.jsxs(OuterGroupContainer, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, Object.assign(Object.assign({}, htmlProps), {
+    'aria-required': ariaRequired
+  }), rest), {
+    ref: ref,
+    children: [jsxRuntime.jsxs(ddsTypography.Typography, {
+      as: "span",
+      typographyType: "supportingStyleLabel01",
+      id: uniqueGroupId,
+      children: [label, " ", showRequiredMarker && jsxRuntime.jsx(ddsCore.RequiredMarker, {})]
+    }), renderInputMessage(tip, tipId), jsxRuntime.jsx(RadioButtonGroupContext.Provider, {
+      value: Object.assign({}, contextProps),
+      children: jsxRuntime.jsx(GroupContainer, {
+        role: "radiogroup",
+        direction: direction,
+        "aria-labelledby": uniqueGroupId,
+        "aria-describedby": tipId,
+        "aria-errormessage": errorMessageId,
+        children: children
+      })
+    }), renderInputMessage(undefined, undefined, errorMessage, errorMessageId)]
+  }));
+};
+var RadioButtonGroup = /*#__PURE__*/React.forwardRef(RadioButtonGroupInner);
+// @ts-expect-error TODO fix RadioButtonGroup type
+RadioButtonGroup.displayName = 'RadioButtonGroup';
+
+var CheckboxGroupContext = /*#__PURE__*/React__default.default.createContext(null);
+var useCheckboxGroup = function useCheckboxGroup() {
+  return React.useContext(CheckboxGroupContext);
+};
+
+var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+    name = props.name,
+    label = props.label,
+    error = props.error,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    indeterminate = props.indeterminate,
+    ariaDescribedby = props['aria-describedby'],
+    className = props.className,
+    _props$htmlProps = props.htmlProps,
+    htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+    rest = tslib.__rest(props, ["id", "name", "label", "error", "disabled", "readOnly", "indeterminate", 'aria-describedby', "className", "htmlProps"]);
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-checkbox");
+  var checkboxGroup = useCheckboxGroup();
+  var hasLabel = !!label;
+  var style = htmlProps.style,
+    htmlPropsClassName = htmlProps.className,
+    restHtmlProps = tslib.__rest(htmlProps, ["style", "className"]);
+  var containerProps = {
+    error: error || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.error),
+    disabled: disabled,
+    indeterminate: indeterminate,
+    htmlFor: uniqueId,
+    hasLabel: hasLabel,
+    className: ddsCore.joinClassNames(className, htmlPropsClassName),
+    style: style
+  };
+  var inputProps = Object.assign(Object.assign({}, ddsCore.getBaseHTMLProps(uniqueId, restHtmlProps, rest)), {
+    ref: ref,
+    name: name,
+    indeterminate: indeterminate,
+    disabled: disabled,
+    'aria-describedby': ddsCore.spaceSeparatedIdListGenerator([checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.tipId, checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.errorMessageId, ariaDescribedby]),
+    'aria-invalid': error || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.error) ? true : undefined,
+    'aria-labelledby': checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.uniqueGroupId,
+    'aria-checked': indeterminate ? 'mixed' : undefined,
+    'aria-readonly': readOnly
+  });
+  return jsxRuntime.jsxs(Container$e, Object.assign({}, containerProps, {
+    controlType: "checkbox",
+    children: [jsxRuntime.jsx(ddsForm.HiddenInput, Object.assign({}, inputProps, {
+      type: "checkbox",
+      "data-indeterminate": indeterminate
+    })), jsxRuntime.jsx(CustomSelectionControl, {
+      controlType: "checkbox"
+    }), hasLabel && jsxRuntime.jsx(ddsTypography.Typography, {
+      color: "inherit",
+      as: "span",
+      typographyType: "bodySans02",
+      children: label
+    })]
+  }));
+});
+Checkbox.displayName = 'Checkbox';
+
+var CheckboxGroup = function CheckboxGroup(props) {
+  var label = props.label,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'row' : _props$direction,
+    errorMessage = props.errorMessage,
+    tip = props.tip,
+    required = props.required,
+    groupId = props.groupId,
+    children = props.children,
+    id = props.id,
+    className = props.className,
+    _props$htmlProps = props.htmlProps,
+    htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+    rest = tslib.__rest(props, ["label", "direction", "errorMessage", "tip", "required", "groupId", "children", "id", "className", "htmlProps"]);
+  var ariaRequired = htmlProps['aria-required'];
+  var generatedId = React.useId();
+  var uniqueGroupId = groupId !== null && groupId !== void 0 ? groupId : "".concat(generatedId, "-checkboxGroup");
+  var hasErrorMessage = !!errorMessage;
+  var showRequiredMarker = required || ariaRequired;
+  var errorMessageId = ddsCore.derivativeIdGenerator(uniqueGroupId, 'errorMessage');
+  var tipId = ddsCore.derivativeIdGenerator(uniqueGroupId, 'tip');
+  var contextProps = {
+    error: hasErrorMessage,
+    errorMessageId: errorMessage ? errorMessageId : undefined,
+    uniqueGroupId: uniqueGroupId,
+    tipId: tip ? tipId : undefined
+  };
+  return jsxRuntime.jsxs(OuterGroupContainer, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, Object.assign(Object.assign({}, htmlProps), {
+    'aria-required': ariaRequired
+  }), rest), {
+    children: [jsxRuntime.jsxs(ddsTypography.Typography, {
+      as: "span",
+      typographyType: "supportingStyleLabel01",
+      id: uniqueGroupId,
+      children: [label, " ", showRequiredMarker && jsxRuntime.jsx(ddsCore.RequiredMarker, {})]
+    }), renderInputMessage(tip, tipId), jsxRuntime.jsx(CheckboxGroupContext.Provider, {
+      value: Object.assign({}, contextProps),
+      children: jsxRuntime.jsx(GroupContainer, {
+        role: "group",
+        "aria-labelledby": uniqueGroupId,
+        "aria-describedby": tip ? tipId : undefined,
+        direction: direction,
+        children: children
+      })
+    }), renderInputMessage(undefined, undefined, errorMessage, errorMessageId)]
+  }));
+};
+CheckboxGroup.displayName = 'CheckboxGroup';
 
-var colors$o = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$w = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$m = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$u = ddsDesignTokens.ddsBaseTokens.spacing,
   iconSizes$5 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var input$3 = {
   withIcon: {
     medium: {
-      paddingLeft: "".concat(spacing$w.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeMediumNumberPx + spacing$w.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$u.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeMediumNumberPx + spacing$u.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     small: {
-      paddingLeft: "".concat(spacing$w.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$w.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$u.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$u.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     tiny: {
-      paddingLeft: "".concat(spacing$w.SizesDdsSpacingLocalX05NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$w.SizesDdsSpacingLocalX025NumberPx, "px")
+      paddingLeft: "".concat(spacing$u.SizesDdsSpacingLocalX05NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$u.SizesDdsSpacingLocalX025NumberPx, "px")
     }
   }
 };
 var affix = {
   border: {
-    color: colors$o.DdsColorNeutralsGray5
+    color: colors$m.DdsColorNeutralsGray5
   }
 };
 var icon$9 = {
-  color: colors$o.DdsColorNeutralsGray9,
+  color: colors$m.DdsColorNeutralsGray9,
   sizes: {
     medium: {
-      top: spacing$w.SizesDdsSpacingLocalX075,
-      left: spacing$w.SizesDdsSpacingLocalX075
+      top: spacing$u.SizesDdsSpacingLocalX075,
+      left: spacing$u.SizesDdsSpacingLocalX075
     },
     small: {
-      top: spacing$w.SizesDdsSpacingLocalX075,
-      left: spacing$w.SizesDdsSpacingLocalX075
+      top: spacing$u.SizesDdsSpacingLocalX075,
+      left: spacing$u.SizesDdsSpacingLocalX075
     },
     tiny: {
-      top: spacing$w.SizesDdsSpacingLocalX05,
-      left: spacing$w.SizesDdsSpacingLocalX05
+      top: spacing$u.SizesDdsSpacingLocalX05,
+      left: spacing$u.SizesDdsSpacingLocalX05
     }
   }
 };
@@ -1913,336 +2729,78 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     maxLength: maxLength,
     value: value,
     defaultValue: defaultValue,
-    'aria-required': ariaRequired,
-    'aria-describedby': ddsCore.spaceSeparatedIdListGenerator([hasTip ? tipId : undefined, hasErrorMessage ? errorMessageId : undefined, maxLength && withCharacterCounter ? characterCounterId : undefined, ariaDescribedby]),
-    'aria-invalid': hasErrorMessage ? true : undefined
-  }, rest);
-  var outerInputContainerProps = {
-    className: className,
-    style: style,
-    width: getWidth$1(componentSize, width)
-  };
-  var showRequiredStyling = !!(required || ariaRequired);
-  var extendedInput = null;
-  if (hasIcon) {
-    extendedInput = jsxRuntime.jsxs(ddsForm.InputContainer, {
-      children: [jsxRuntime.jsx(StyledIcon$3, {
-        icon: icon,
-        iconSize: getFormInputIconSize(componentSize),
-        size: componentSize
-      }), jsxRuntime.jsx(StyledInput$1, Object.assign({
-        ref: ref,
-        onChange: onChangeHandler,
-        type: type,
-        componentSize: componentSize,
-        hasIcon: hasIcon
-      }, generalInputProps))]
-    });
-  } else if (hasAffix) {
-    extendedInput = jsxRuntime.jsxs(ddsForm.InputAffixContainer, {
-      children: [prefix && jsxRuntime.jsx(Prefix, {
-        readOnly: readOnly,
-        ref: prefixRef,
-        "aria-hidden": true,
-        children: prefix
-      }), jsxRuntime.jsx(ddsForm.StatefulInput, Object.assign({
-        ref: ref,
-        onChange: onChangeHandler,
-        type: type,
-        componentSize: componentSize,
-        prefixLength: prefixLength,
-        suffixLength: suffixLength
-      }, generalInputProps)), suffix && jsxRuntime.jsx(Suffix, {
-        readOnly: readOnly,
-        ref: suffixRef,
-        "aria-hidden": true,
-        children: suffix
-      })]
-    });
-  }
-  return jsxRuntime.jsxs(ddsForm.OuterInputContainer, Object.assign({}, outerInputContainerProps, {
-    children: [hasLabel && jsxRuntime.jsx(ddsTypography.Label, {
-      htmlFor: uniqueId,
-      showRequiredStyling: showRequiredStyling,
-      children: label
-    }), extendedInput ? extendedInput : jsxRuntime.jsx(ddsForm.StatefulInput, Object.assign({
-      ref: ref,
-      onChange: onChangeHandler,
-      type: type,
-      componentSize: componentSize
-    }, generalInputProps)), hasMessage && jsxRuntime.jsxs(MessageContainer$1, {
-      children: [renderInputMessage(tip, tipId, errorMessage, errorMessageId), maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && jsxRuntime.jsx(CharCounter, {
-        id: characterCounterId,
-        current: text.length,
-        max: maxLength
-      })]
-    })]
-  }));
-});
-TextInput.displayName = 'TextInput';
-
-var scrollbarWidthNumberPx = 10;
-var scrollbarWidth$1 = "".concat(scrollbarWidthNumberPx, "px");
-var colors$n = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$v = ddsDesignTokens.ddsBaseTokens.spacing;
-var track$3 = {
-  backgroundColor: 'transparent',
-  borderRadius: '100px',
-  width: scrollbarWidth$1
-};
-var thumb$2 = {
-  base: {
-    backgroundColor: colors$n.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)',
-    borderRadius: '100px',
-    width: scrollbarWidth$1
-  },
-  hover: {
-    backgroundColor: colors$n.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
-  }
-};
-var content$5 = {
-  paddingRight: spacing$v.SizesDdsSpacingLocalX05
-};
-var outerContainer$8 = {
-  padding: spacing$v.SizesDdsSpacingLocalX025
-};
-var scrollbarTokens = {
-  minThumbHeightPx: 15,
-  track: track$3,
-  thumb: thumb$2,
-  content: content$5,
-  outerContainer: outerContainer$8
-};
-
-var track$2 = scrollbarTokens.track,
-  thumb$1 = scrollbarTokens.thumb,
-  minThumbHeightPx = scrollbarTokens.minThumbHeightPx;
-var ScrollbarOuterWrapper = styled__default.default.div.withConfig({
-  displayName: "Scrollbar__ScrollbarOuterWrapper",
-  componentId: "sc-mphi5n-0"
-})([""]);
-var ScrollbarElements = styled__default.default.div.withConfig({
-  displayName: "Scrollbar__ScrollbarElements",
-  componentId: "sc-mphi5n-1"
-})(["display:block;height:100%;position:relative;display:grid;justify-items:center;"]);
-var Track = styled__default.default.div.withConfig({
-  displayName: "Scrollbar__Track",
-  componentId: "sc-mphi5n-2"
-})(["bottom:0;top:0;position:absolute;background-color:", ";border-radius:", ";width:", ";"], track$2.backgroundColor, track$2.borderRadius, track$2.width);
-var Thumb = styled__default.default.div.withConfig({
-  displayName: "Scrollbar__Thumb",
-  componentId: "sc-mphi5n-3"
-})(["position:absolute;background-color:", ";border-radius:", ";width:", ";transition:background-color 0.2s;&:hover{background-color:", ";}"], thumb$1.base.backgroundColor, thumb$1.base.borderRadius, thumb$1.base.width, thumb$1.hover.backgroundColor);
-var Scrollbar = function Scrollbar(props) {
-  var id = props.id,
-    className = props.className,
-    htmlProps = props.htmlProps,
-    contentRef = props.contentRef,
-    rest = tslib.__rest(props, ["id", "className", "htmlProps", "contentRef"]);
-  var trackRef = React.useRef(null);
-  var thumbRef = React.useRef(null);
-  var _useState = React.useState(minThumbHeightPx),
-    _useState2 = _slicedToArray(_useState, 2),
-    thumbHeight = _useState2[0],
-    setThumbHeight = _useState2[1];
-  var _useState3 = React.useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isScrollable = _useState4[0],
-    setIsScrollable = _useState4[1];
-  var _useState5 = React.useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    thumbTop = _useState6[0],
-    setThumbTop = _useState6[1];
-  var observer = React.useRef(null);
-  var _useState7 = React.useState(0),
-    _useState8 = _slicedToArray(_useState7, 2),
-    scrollStartPosition = _useState8[0],
-    setScrollStartPosition = _useState8[1];
-  var _useState9 = React.useState(0),
-    _useState10 = _slicedToArray(_useState9, 2),
-    initialScrollTop = _useState10[0],
-    setInitialScrollTop = _useState10[1];
-  var _useState11 = React.useState(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    isDragging = _useState12[0],
-    setIsDragging = _useState12[1];
-  function handleResize(ref, trackSize) {
-    var clientHeight = ref.clientHeight,
-      scrollHeight = ref.scrollHeight;
-    setIsScrollable(clientHeight !== scrollHeight);
-    setThumbHeight(Math.max(clientHeight / scrollHeight * trackSize, minThumbHeightPx));
-  }
-  var handleTrackClick = React.useCallback(function (e) {
-    if (contentRef && contentRef.current) {
-      var trackCurrent = trackRef.current;
-      var contentCurrent = contentRef.current;
-      if (trackCurrent && contentCurrent) {
-        var clientY = e.clientY;
-        var target = e.target;
-        var rect = target.getBoundingClientRect();
-        var trackTop = rect.top;
-        var thumbOffset = -(thumbHeight / 2);
-        var clickRatio = (clientY - trackTop + thumbOffset) / trackCurrent.clientHeight;
-        var scrollAmount = Math.floor(clickRatio * contentCurrent.scrollHeight);
-        contentCurrent.scrollTo({
-          top: scrollAmount,
-          behavior: 'smooth'
-        });
-      }
-    }
-  }, [thumbHeight]);
-  var handleThumbPositioning = React.useCallback(function () {
-    if (!(contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) || !trackRef.current || !thumbRef.current) {
-      return;
-    }
-    var _contentRef$current = contentRef.current,
-      contentTop = _contentRef$current.scrollTop,
-      contentHeight = _contentRef$current.scrollHeight;
-    var clientHeight = trackRef.current.clientHeight;
-    var newTop = +contentTop / +contentHeight * clientHeight;
-    newTop = Math.min(newTop, clientHeight - thumbHeight);
-    setThumbTop(newTop);
-  }, []);
-  React.useEffect(function () {
-    if (contentRef && contentRef.current && trackRef.current) {
-      var ref = contentRef.current;
-      var clientHeight = trackRef.current.clientHeight;
-      observer.current = new ResizeObserver(function () {
-        handleResize(ref, clientHeight);
-      });
-      observer.current.observe(ref);
-      ref.addEventListener('scroll', handleThumbPositioning);
-      return function () {
-        var _a;
-        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.unobserve(ref);
-        ref.removeEventListener('scroll', handleThumbPositioning);
-      };
-    }
-  }, []);
-  var handleThumbMousedown = React.useCallback(function (e) {
-    setScrollStartPosition(e.clientY);
-    if (contentRef && contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
-    setIsDragging(true);
-  }, []);
-  var handleThumbMouseup = React.useCallback(function () {
-    if (isDragging) {
-      setIsDragging(false);
-    }
-  }, [isDragging]);
-  var handleThumbMousemove = React.useCallback(function (e) {
-    if (contentRef && contentRef.current) {
-      if (isDragging) {
-        var _contentRef$current2 = contentRef.current,
-          contentScrollHeight = _contentRef$current2.scrollHeight,
-          contentOffsetHeight = _contentRef$current2.offsetHeight;
-        var deltaY = (e.clientY - scrollStartPosition) * (contentOffsetHeight / thumbHeight);
-        var newScrollTop = Math.min(initialScrollTop + deltaY, contentScrollHeight - contentOffsetHeight);
-        contentRef.current.scrollTop = newScrollTop;
-      }
-    }
-  }, [isDragging, scrollStartPosition, thumbHeight]);
-  React.useEffect(function () {
-    document.addEventListener('mousemove', handleThumbMousemove);
-    document.addEventListener('mouseup', handleThumbMouseup);
-    document.addEventListener('mouseleave', handleThumbMouseup);
-    return function () {
-      document.removeEventListener('mousemove', handleThumbMousemove);
-      document.removeEventListener('mouseup', handleThumbMouseup);
-      document.removeEventListener('mouseleave', handleThumbMouseup);
-    };
-  }, [handleThumbMousemove, handleThumbMouseup]);
-  return isScrollable ? jsxRuntime.jsx(ScrollbarOuterWrapper, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), {
-    children: jsxRuntime.jsxs(ScrollbarElements, {
-      children: [jsxRuntime.jsx(Track, {
-        ref: trackRef,
-        onClick: handleTrackClick
-      }), jsxRuntime.jsx(Thumb, {
-        style: {
-          height: thumbHeight,
-          top: thumbTop
-        },
-        ref: thumbRef,
-        onMouseDown: handleThumbMousedown
+    'aria-required': ariaRequired,
+    'aria-describedby': ddsCore.spaceSeparatedIdListGenerator([hasTip ? tipId : undefined, hasErrorMessage ? errorMessageId : undefined, maxLength && withCharacterCounter ? characterCounterId : undefined, ariaDescribedby]),
+    'aria-invalid': hasErrorMessage ? true : undefined
+  }, rest);
+  var outerInputContainerProps = {
+    className: className,
+    style: style,
+    width: getWidth$1(componentSize, width)
+  };
+  var showRequiredStyling = !!(required || ariaRequired);
+  var extendedInput = null;
+  if (hasIcon) {
+    extendedInput = jsxRuntime.jsxs(ddsForm.InputContainer, {
+      children: [jsxRuntime.jsx(StyledIcon$3, {
+        icon: icon,
+        iconSize: getFormInputIconSize(componentSize),
+        size: componentSize
+      }), jsxRuntime.jsx(StyledInput$1, Object.assign({
+        ref: ref,
+        onChange: onChangeHandler,
+        type: type,
+        componentSize: componentSize,
+        hasIcon: hasIcon
+      }, generalInputProps))]
+    });
+  } else if (hasAffix) {
+    extendedInput = jsxRuntime.jsxs(ddsForm.InputAffixContainer, {
+      children: [prefix && jsxRuntime.jsx(Prefix, {
+        readOnly: readOnly,
+        ref: prefixRef,
+        "aria-hidden": true,
+        children: prefix
+      }), jsxRuntime.jsx(ddsForm.StatefulInput, Object.assign({
+        ref: ref,
+        onChange: onChangeHandler,
+        type: type,
+        componentSize: componentSize,
+        prefixLength: prefixLength,
+        suffixLength: suffixLength
+      }, generalInputProps)), suffix && jsxRuntime.jsx(Suffix, {
+        readOnly: readOnly,
+        ref: suffixRef,
+        "aria-hidden": true,
+        children: suffix
       })]
-    })
-  })) : null;
-};
-Scrollbar.displayName = 'Scrollbar';
-
-var track$1 = scrollbarTokens.track,
-  content$4 = scrollbarTokens.content,
-  outerContainer$7 = scrollbarTokens.outerContainer;
-var StyledScrollableContainer = styled__default.default.div.withConfig({
-  displayName: "ScrollableContainer__StyledScrollableContainer",
-  componentId: "sc-t0dczu-0"
-})(["grid-template:auto / 1fr ", ";overflow:hidden;position:relative;display:grid;padding:", ";"], track$1.width, outerContainer$7.padding);
-var Content$2 = styled__default.default.div.withConfig({
-  displayName: "ScrollableContainer__Content",
-  componentId: "sc-t0dczu-1"
-})(["height:", ";overflow:auto;scrollbar-width:none;::-webkit-scrollbar{display:none;}padding-right:", ";@media (prefers-reduced-motion:no-preference){transition:", ";}:focus-visible,.focus-visible{outline:", ";outline-offset:", ";}"], function (_ref) {
-  var height = _ref.height;
-  return height;
-}, content$4.paddingRight, ddsForm.focusVisibleTransitionValue, ddsForm.focusVisible.outline, ddsForm.focusVisible.outlineOffset);
-var ScrollableContainer = function ScrollableContainer(props) {
-  var children = props.children,
-    id = props.id,
-    className = props.className,
-    _props$contentHeight = props.contentHeight,
-    contentHeight = _props$contentHeight === void 0 ? '90vh' : _props$contentHeight,
-    htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["children", "id", "className", "contentHeight", "htmlProps"]);
-  var ref = React.useRef(null);
-  return jsxRuntime.jsxs(StyledScrollableContainer, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), {
-    children: [jsxRuntime.jsx(Content$2, {
-      height: contentHeight,
+    });
+  }
+  return jsxRuntime.jsxs(ddsForm.OuterInputContainer, Object.assign({}, outerInputContainerProps, {
+    children: [hasLabel && jsxRuntime.jsx(ddsTypography.Label, {
+      htmlFor: uniqueId,
+      showRequiredStyling: showRequiredStyling,
+      children: label
+    }), extendedInput ? extendedInput : jsxRuntime.jsx(ddsForm.StatefulInput, Object.assign({
       ref: ref,
-      tabIndex: 0,
-      children: children
-    }), jsxRuntime.jsx(Scrollbar, {
-      contentRef: ref
+      onChange: onChangeHandler,
+      type: type,
+      componentSize: componentSize
+    }, generalInputProps)), hasMessage && jsxRuntime.jsxs(MessageContainer$1, {
+      children: [renderInputMessage(tip, tipId, errorMessage, errorMessageId), maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && jsxRuntime.jsx(CharCounter, {
+        id: characterCounterId,
+        current: text.length,
+        max: maxLength
+      })]
     })]
   }));
-};
-ScrollableContainer.displayName = 'ScrollableContainer';
-
-var thumb = scrollbarTokens.thumb,
-  track = scrollbarTokens.track;
-var scrollbarWidth = 'thin';
-/**
- * CSS-in-JS scrollbar styling til bruk der det ikke passer å bruke dedikerte komponenter. Inkluderer styling for webkit pseudo-elementer og for Firefox.
- */
-var scrollbarStyling = {
-  webkit: {
-    /* width */
-    '&::-webkit-scrollbar': {
-      width: track.width,
-      height: track.width
-    },
-    /* Track */
-    '&::-webkit-scrollbar-track': {
-      background: track.backgroundColor,
-      borderRadius: track.borderRadius
-    },
-    /* Handle */
-    '&::-webkit-scrollbar-thumb': {
-      background: thumb.base.backgroundColor,
-      borderRadius: thumb.base.borderRadius
-    }
-  },
-  /* Handle on hover */
-  '&::-webkit-scrollbar-thumb:hover': {
-    background: thumb.hover.backgroundColor
-  },
-  firefox: {
-    scrollbarColor: thumb.base.backgroundColor + ' ' + track.backgroundColor,
-    scrollbarWidth: scrollbarWidth
-  }
-};
+});
+TextInput.displayName = 'TextInput';
 
-var colors$m = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$u = ddsDesignTokens.ddsBaseTokens.spacing,
-  borderRadius$6 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-  border$9 = ddsDesignTokens.ddsBaseTokens.border;
+var colors$l = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$t = ddsDesignTokens.ddsBaseTokens.spacing,
+  borderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+  border$8 = ddsDesignTokens.ddsBaseTokens.border;
 var textDefault$3 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var placeholderTypographyTypes = {
   medium: 'supportingStylePlaceholderText01',
@@ -2258,14 +2816,14 @@ var typographyTypes$5 = {
   multiValueLabel: 'bodySans01'
 };
 var control = {
-  borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
-  border: "".concat(border$9.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  borderColor: colors$m.DdsColorNeutralsGray5,
-  backgroundColor: colors$m.DdsColorNeutralsWhite,
-  color: colors$m.DdsColorNeutralsGray9,
+  borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
+  border: "".concat(border$8.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  borderColor: colors$l.DdsColorNeutralsGray5,
+  backgroundColor: colors$l.DdsColorNeutralsWhite,
+  color: colors$l.DdsColorNeutralsGray9,
   disabled: {
-    backgroundColor: colors$m.DdsColorNeutralsGray1,
-    borderColor: colors$m.DdsColorNeutralsGray5
+    backgroundColor: colors$l.DdsColorNeutralsGray1,
+    borderColor: colors$l.DdsColorNeutralsGray5
   },
   readOnly: {
     borderColor: 'transparent',
@@ -2274,37 +2832,37 @@ var control = {
   isMulti: {
     sizes: {
       medium: {
-        padding: "".concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$t.SizesDdsSpacingLocalX075, " ").concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX075, " ").concat(spacing$t.SizesDdsSpacingLocalX075)
       },
       small: {
-        padding: "".concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX075)
       },
       tiny: {
-        padding: "".concat(spacing$u.SizesDdsSpacingLocalX025, " ").concat(spacing$u.SizesDdsSpacingLocalX05)
+        padding: "".concat(spacing$t.SizesDdsSpacingLocalX025, " ").concat(spacing$t.SizesDdsSpacingLocalX05)
       }
     }
   },
   sizes: {
     medium: {
-      padding: "".concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$t.SizesDdsSpacingLocalX075, " ").concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX075, " ").concat(spacing$t.SizesDdsSpacingLocalX075)
     },
     small: {
-      padding: "".concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX075)
     },
     tiny: {
-      padding: "".concat(spacing$u.SizesDdsSpacingLocalX025, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX025, " ").concat(spacing$u.SizesDdsSpacingLocalX05)
+      padding: "".concat(spacing$t.SizesDdsSpacingLocalX025, " ").concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX025, " ").concat(spacing$t.SizesDdsSpacingLocalX05)
     }
   }
 };
 var placeholder = {
-  color: colors$m.DdsColorNeutralsGray6
+  color: colors$l.DdsColorNeutralsGray6
 };
 var dropdownIndicator = {
   base: {
-    color: colors$m.DdsColorNeutralsGray6
+    color: colors$l.DdsColorNeutralsGray6
   },
   hover: {
-    color: colors$m.DdsColorInteractiveBase
+    color: colors$l.DdsColorInteractiveBase
   },
   readOnly: {
     color: 'transparent'
@@ -2312,77 +2870,77 @@ var dropdownIndicator = {
 };
 var clearIndicator = {
   base: {
-    color: colors$m.DdsColorNeutralsGray6
+    color: colors$l.DdsColorNeutralsGray6
   },
   hover: {
-    color: colors$m.DdsColorInteractiveBase
+    color: colors$l.DdsColorInteractiveBase
   }
 };
 var loadingIndicator = {
-  color: colors$m.DdsColorNeutralsGray6
+  color: colors$l.DdsColorNeutralsGray6
 };
 var menu = {
   border: '1px solid',
-  borderColor: colors$m.DdsColorInteractiveBase,
-  backgroundColor: colors$m.DdsColorNeutralsWhite,
-  borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
-  marginTop: spacing$u.SizesDdsSpacingLocalX025,
-  marginBottom: spacing$u.SizesDdsSpacingLocalX025
+  borderColor: colors$l.DdsColorInteractiveBase,
+  backgroundColor: colors$l.DdsColorNeutralsWhite,
+  borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
+  marginTop: spacing$t.SizesDdsSpacingLocalX025,
+  marginBottom: spacing$t.SizesDdsSpacingLocalX025
 };
 var groupHeading = {
-  color: colors$m.DdsColorNeutralsGray7,
-  padding: "".concat(spacing$u.SizesDdsSpacingLocalX05, "  ").concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX0125, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
+  color: colors$l.DdsColorNeutralsGray7,
+  padding: "".concat(spacing$t.SizesDdsSpacingLocalX05, "  ").concat(spacing$t.SizesDdsSpacingLocalX075, " ").concat(spacing$t.SizesDdsSpacingLocalX0125, " ").concat(spacing$t.SizesDdsSpacingLocalX075)
 };
 var option = {
   base: {
-    gap: spacing$u.SizesDdsSpacingLocalX05,
-    padding: "".concat(spacing$u.SizesDdsSpacingLocalX075),
-    backgroundColor: colors$m.DdsColorNeutralsWhite
+    gap: spacing$t.SizesDdsSpacingLocalX05,
+    padding: "".concat(spacing$t.SizesDdsSpacingLocalX075),
+    backgroundColor: colors$l.DdsColorNeutralsWhite
   },
   hover: {
     color: textDefault$3.textColor,
-    backgroundColor: colors$m.DdsColorInteractiveLightest
+    backgroundColor: colors$l.DdsColorInteractiveLightest
   },
   focus: {
     color: textDefault$3.textColor,
-    backgroundColor: colors$m.DdsColorInteractiveLightest
+    backgroundColor: colors$l.DdsColorInteractiveLightest
   },
   selected: {
-    backgroundColor: colors$m.DdsColorNeutralsWhite
+    backgroundColor: colors$l.DdsColorNeutralsWhite
   }
 };
 var noOptionsMessage = {
-  padding: "".concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX1),
-  color: colors$m.DdsColorNeutralsGray6
+  padding: "".concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX1),
+  color: colors$l.DdsColorNeutralsGray6
 };
 var multiValue = {
-  borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
-  backgroundColor: colors$m.DdsColorNeutralsGray2
+  borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
+  backgroundColor: colors$l.DdsColorNeutralsGray2
 };
 var multiValueLabel = {
-  padding: "0 ".concat(spacing$u.SizesDdsSpacingLocalX025),
-  color: colors$m.DdsColorNeutralsGray9
+  padding: "0 ".concat(spacing$t.SizesDdsSpacingLocalX025),
+  color: colors$l.DdsColorNeutralsGray9
 };
 var multiValueRemove = {
   base: {
-    color: colors$m.DdsColorNeutralsGray9,
-    padding: "0 ".concat(spacing$u.SizesDdsSpacingLocalX025),
-    borderTopRightRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
-    borderBottomRightRadius: borderRadius$6.RadiiDdsBorderRadius1Radius
+    color: colors$l.DdsColorNeutralsGray9,
+    padding: "0 ".concat(spacing$t.SizesDdsSpacingLocalX025),
+    borderTopRightRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
+    borderBottomRightRadius: borderRadius$5.RadiiDdsBorderRadius1Radius
   },
   hover: {
-    color: colors$m.DdsColorNeutralsWhite,
-    backgroundColor: colors$m.DdsColorInteractiveBase,
-    boxShadow: "inset 0 0 0 1px ".concat(colors$m.DdsColorNeutralsGray9)
+    color: colors$l.DdsColorNeutralsWhite,
+    backgroundColor: colors$l.DdsColorInteractiveBase,
+    boxShadow: "inset 0 0 0 1px ".concat(colors$l.DdsColorNeutralsGray9)
   }
 };
 var valueContainer = {
   isMulti: {
-    gap: spacing$u.SizesDdsSpacingLocalX025
+    gap: spacing$t.SizesDdsSpacingLocalX025
   }
 };
 var icon$7 = {
-  marginRight: spacing$u.SizesDdsSpacingLocalX05
+  marginRight: spacing$t.SizesDdsSpacingLocalX05
 };
 var selectTokens = {
   control: control,
@@ -2419,7 +2977,7 @@ var prefix = 'dds-select';
 function getContainerControlPadding(componentSize, isMulti) {
   return isMulti ? _control.isMulti.sizes[componentSize].padding : _control.sizes[componentSize].padding;
 }
-var Container$e = styled__default.default.div.withConfig({
+var Container$d = styled__default.default.div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-0"
 })(["margin:0;width:", ";position:relative;*::selection{", "}", " ", " &:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{color:", ";}", ""], function (_ref) {
@@ -2798,7 +3356,7 @@ var SelectInner = function SelectInner(props, ref) {
     'aria-invalid': hasErrorMessage ? true : undefined,
     required: required
   }, rest);
-  return jsxRuntime.jsxs(Container$e, Object.assign({}, containerProps, {
+  return jsxRuntime.jsxs(Container$d, Object.assign({}, containerProps, {
     children: [hasLabel && jsxRuntime.jsx(ddsTypography.Label, {
       htmlFor: uniqueId,
       showRequiredStyling: showRequiredStyling,
@@ -2812,32 +3370,32 @@ var Select = /*#__PURE__*/React__default.default.forwardRef(SelectInner);
 // @ts-expect-error TODO fix Select type
 Select.displayName = 'Select';
 
-var colors$l = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$t = ddsDesignTokens.ddsBaseTokens.spacing;
-var typographyType$5 = 'bodySans02';
-var container$c = {
+var colors$k = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$s = ddsDesignTokens.ddsBaseTokens.spacing;
+var typographyType$4 = 'bodySans02';
+var container$a = {
   borderBottom: '2px solid',
-  padding: "0 ".concat(spacing$t.SizesDdsSpacingLocalX1),
+  padding: "0 ".concat(spacing$s.SizesDdsSpacingLocalX1),
   info: {
-    borderColor: colors$l.DdsColorInfoLighter,
-    backgroundColor: colors$l.DdsColorInfoLightest
+    borderColor: colors$k.DdsColorInfoLighter,
+    backgroundColor: colors$k.DdsColorInfoLightest
   },
   danger: {
-    borderColor: colors$l.DdsColorDangerLighter,
-    backgroundColor: colors$l.DdsColorDangerLightest
+    borderColor: colors$k.DdsColorDangerLighter,
+    backgroundColor: colors$k.DdsColorDangerLightest
   },
   warning: {
-    borderColor: colors$l.DdsColorWarningLighter,
-    backgroundColor: colors$l.DdsColorWarningLightest
+    borderColor: colors$k.DdsColorWarningLighter,
+    backgroundColor: colors$k.DdsColorWarningLightest
   }
 };
 var contentContainer$5 = {
-  paddingRight: spacing$t.SizesDdsSpacingLocalX15,
-  paddingTop: spacing$t.SizesDdsSpacingLocalX075,
-  paddingBottom: spacing$t.SizesDdsSpacingLocalX075,
-  gap: spacing$t.SizesDdsSpacingLocalX075,
+  paddingRight: spacing$s.SizesDdsSpacingLocalX15,
+  paddingTop: spacing$s.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing$s.SizesDdsSpacingLocalX075,
+  gap: spacing$s.SizesDdsSpacingLocalX075,
   withClosable: {
-    paddingRight: spacing$t.SizesDdsSpacingLocalX075
+    paddingRight: spacing$s.SizesDdsSpacingLocalX075
   }
 };
 var purposeVariants$2 = {
@@ -2855,31 +3413,31 @@ var purposeVariants$2 = {
   }
 };
 var globalMessageTokens = {
-  container: container$c,
+  container: container$a,
   contentContainer: contentContainer$5,
   icon: {
-    marginRight: "".concat(spacing$t.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(spacing$s.SizesDdsSpacingLocalX075),
     info: {
-      color: colors$l.DdsColorInfoDarkest
+      color: colors$k.DdsColorInfoDarkest
     },
     danger: {
-      color: colors$l.DdsColorDangerDarkest
+      color: colors$k.DdsColorDangerDarkest
     },
     warning: {
-      color: colors$l.DdsColorWarningDarkest
+      color: colors$k.DdsColorWarningDarkest
     }
   }
 };
 
-var container$b = globalMessageTokens.container,
+var container$9 = globalMessageTokens.container,
   contentContainer$4 = globalMessageTokens.contentContainer,
   icon$5 = globalMessageTokens.icon;
-var Container$d = styled__default.default.div.withConfig({
+var Container$c = styled__default.default.div.withConfig({
   displayName: "GlobalMessage__Container",
   componentId: "sc-bf2l65-0"
-})(["display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;padding:", ";border-bottom:", ";", " ", ""], container$b.padding, container$b.borderBottom, ddsTypography.getFontStyling(typographyType$5, true), function (_ref) {
+})(["display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;padding:", ";border-bottom:", ";", " ", ""], container$9.padding, container$9.borderBottom, ddsTypography.getFontStyling(typographyType$4, true), function (_ref) {
   var purpose = _ref.purpose;
-  return purpose && styled.css(["border-color:", ";background-color:", ";"], container$b[purpose].borderColor, container$b[purpose].backgroundColor);
+  return purpose && styled.css(["border-color:", ";background-color:", ";"], container$9[purpose].borderColor, container$9[purpose].backgroundColor);
 });
 var MessageIconWrapper$1 = styled__default.default(ddsIcons.Icon).withConfig({
   displayName: "GlobalMessage__MessageIconWrapper",
@@ -2915,7 +3473,7 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref,
     purpose: purpose
   });
-  return !isClosed ? jsxRuntime.jsxs(Container$d, Object.assign({}, containerProps, {
+  return !isClosed ? jsxRuntime.jsxs(Container$c, Object.assign({}, containerProps, {
     children: [jsxRuntime.jsxs(ContentContainer$3, {
       closable: closable,
       children: [jsxRuntime.jsx(MessageIconWrapper$1, {
@@ -2942,43 +3500,43 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 GlobalMessage.displayName = 'GlobalMessage';
 
-var colors$k = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$s = ddsDesignTokens.ddsBaseTokens.spacing,
-  borderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-  border$8 = ddsDesignTokens.ddsBaseTokens.border,
+var colors$j = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$r = ddsDesignTokens.ddsBaseTokens.spacing,
+  borderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+  border$7 = ddsDesignTokens.ddsBaseTokens.border,
   outerShadow = ddsDesignTokens.ddsBaseTokens.outerShadow;
-var container$a = {
+var container$8 = {
   base: {
     boxShadow: outerShadow.DdsShadow1Onlight,
-    borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
-    border: "".concat(border$8.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-    padding: spacing$s.SizesDdsSpacingLocalX075,
-    gap: spacing$s.SizesDdsSpacingLocalX05
+    borderRadius: borderRadius$4.RadiiDdsBorderRadius1Radius,
+    border: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+    padding: spacing$r.SizesDdsSpacingLocalX075,
+    gap: spacing$r.SizesDdsSpacingLocalX05
   },
   purpose: {
     info: {
-      borderColor: colors$k.DdsColorInfoLighter,
-      backgroundColor: colors$k.DdsColorInfoLightest
+      borderColor: colors$j.DdsColorInfoLighter,
+      backgroundColor: colors$j.DdsColorInfoLightest
     },
     warning: {
-      borderColor: colors$k.DdsColorWarningLighter,
-      backgroundColor: colors$k.DdsColorWarningLightest
+      borderColor: colors$j.DdsColorWarningLighter,
+      backgroundColor: colors$j.DdsColorWarningLightest
     },
     danger: {
-      borderColor: colors$k.DdsColorDangerLighter,
-      backgroundColor: colors$k.DdsColorDangerLightest
+      borderColor: colors$j.DdsColorDangerLighter,
+      backgroundColor: colors$j.DdsColorDangerLightest
     },
     success: {
-      borderColor: colors$k.DdsColorSuccessLighter,
-      backgroundColor: colors$k.DdsColorSuccessLightest
+      borderColor: colors$j.DdsColorSuccessLighter,
+      backgroundColor: colors$j.DdsColorSuccessLightest
     },
     tips: {
-      borderColor: colors$k.DdsColorPrimaryLighter,
-      backgroundColor: colors$k.DdsColorPrimaryLightest
+      borderColor: colors$j.DdsColorPrimaryLighter,
+      backgroundColor: colors$j.DdsColorPrimaryLightest
     },
     confidential: {
-      borderColor: colors$k.DdsColorDangerBase,
-      backgroundColor: colors$k.DdsColorDangerLightest
+      borderColor: colors$j.DdsColorDangerBase,
+      backgroundColor: colors$j.DdsColorDangerLightest
     }
   }
 };
@@ -3009,37 +3567,37 @@ var purposeVariants$1 = {
   }
 };
 var icon$4 = {
-  marginRight: "".concat(spacing$s.SizesDdsSpacingLocalX075),
+  marginRight: "".concat(spacing$r.SizesDdsSpacingLocalX075),
   info: {
-    color: colors$k.DdsColorInfoDarkest
+    color: colors$j.DdsColorInfoDarkest
   },
   danger: {
-    color: colors$k.DdsColorDangerDarkest
+    color: colors$j.DdsColorDangerDarkest
   },
   warning: {
-    color: colors$k.DdsColorWarningDarkest
+    color: colors$j.DdsColorWarningDarkest
   },
   success: {
-    color: colors$k.DdsColorSuccessDarkest
+    color: colors$j.DdsColorSuccessDarkest
   },
   tips: {
-    color: colors$k.DdsColorPrimaryDarkest
+    color: colors$j.DdsColorPrimaryDarkest
   },
   confidential: {
-    color: colors$k.DdsColorDangerDarkest
+    color: colors$j.DdsColorDangerDarkest
   }
 };
 var localMessageTokens = {
-  container: container$a,
+  container: container$8,
   purposeVariants: purposeVariants$1,
   icon: icon$4
 };
 
 var defaultWidth$3 = '400px';
-var container$9 = localMessageTokens.container,
+var container$7 = localMessageTokens.container,
   icon$3 = localMessageTokens.icon,
   purposeVariants = localMessageTokens.purposeVariants;
-var Container$c = styled__default.default.div.withConfig({
+var Container$b = styled__default.default.div.withConfig({
   displayName: "LocalMessage__Container",
   componentId: "sc-kmfp8w-0"
 })(["box-sizing:border-box;display:grid;grid-template-areas:", ";grid-template-columns:", ";box-shadow:", ";border:", ";border-radius:", ";padding:", ";gap:", ";align-items:center;", " *::selection{", "}", " width:", ";"], function (_ref) {
@@ -3050,9 +3608,9 @@ var Container$c = styled__default.default.div.withConfig({
   var layout = _ref2.layout,
     closable = _ref2.closable;
   return getGridTemplateColumns(layout, closable);
-}, container$9.base.boxShadow, container$9.base.border, container$9.base.borderRadius, container$9.base.padding, container$9.base.gap, ddsTypography.getFontStyling(ddsTypography.defaultTypographyType, true), ddsCore.selection, function (_ref3) {
+}, container$7.base.boxShadow, container$7.base.border, container$7.base.borderRadius, container$7.base.padding, container$7.base.gap, ddsTypography.getFontStyling(ddsTypography.defaultTypographyType, true), ddsCore.selection, function (_ref3) {
   var purpose = _ref3.purpose;
-  return purpose && styled.css(["border-color:", ";background-color:", ";"], container$9.purpose[purpose].borderColor, container$9.purpose[purpose].backgroundColor);
+  return purpose && styled.css(["border-color:", ";background-color:", ";"], container$7.purpose[purpose].borderColor, container$7.purpose[purpose].backgroundColor);
 }, function (_ref4) {
   var width = _ref4.width;
   return width;
@@ -3087,7 +3645,7 @@ var TextContainer = styled__default.default.div.withConfig({
 var CloseButton = styled__default.default(Button$1).withConfig({
   displayName: "LocalMessage__CloseButton",
   componentId: "sc-kmfp8w-3"
-})(["grid-area:closeButton;margin:-", " 0;"], container$9.base.padding);
+})(["grid-area:closeButton;margin:-", " 0;"], container$7.base.padding);
 var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var message = props.message,
     _props$purpose = props.purpose,
@@ -3117,7 +3675,7 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   if (isClosed) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
-  return jsxRuntime.jsxs(Container$c, Object.assign({}, containerProps, {
+  return jsxRuntime.jsxs(Container$b, Object.assign({}, containerProps, {
     children: [jsxRuntime.jsx(MessageIconWrapper, {
       icon: purposeVariants[purpose].icon,
       color: icon$3[purpose].color
@@ -3169,50 +3727,50 @@ var useAutocompleteSearch = function useAutocompleteSearch() {
   return React.useContext(AutocompleteSearchContext);
 };
 
-var spacing$r = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$q = ddsDesignTokens.ddsBaseTokens.spacing,
   iconSizes$3 = ddsDesignTokens.ddsBaseTokens.iconSizes,
-  colors$j = ddsDesignTokens.ddsBaseTokens.colors;
+  colors$i = ddsDesignTokens.ddsBaseTokens.colors;
 var textDefault$2 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var typographyTypes$4 = {
   small: 'bodySans01',
   medium: 'bodySans02',
   large: 'bodySans04'
 };
-var paddingLeftSmall = "".concat(spacing$r.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$r.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftMedium = "".concat(spacing$r.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$r.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftLarge = "".concat(spacing$r.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$r.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftSmall = "".concat(spacing$q.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$q.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftMedium = "".concat(spacing$q.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$q.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftLarge = "".concat(spacing$q.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$q.SizesDdsSpacingLocalX05NumberPx, "px");
 var input$1 = {
   base: {
-    paddingRight: spacing$r.SizesDdsSpacingLocalX25,
-    paddingLeft: spacing$r.SizesDdsSpacingLocalX3
+    paddingRight: spacing$q.SizesDdsSpacingLocalX25,
+    paddingLeft: spacing$q.SizesDdsSpacingLocalX3
   },
   sizes: {
     small: {
-      paddingTop: spacing$r.SizesDdsSpacingLocalX05,
-      paddingBottom: spacing$r.SizesDdsSpacingLocalX05,
+      paddingTop: spacing$q.SizesDdsSpacingLocalX05,
+      paddingBottom: spacing$q.SizesDdsSpacingLocalX05,
       paddingLeft: paddingLeftSmall
     },
     medium: {
-      paddingTop: spacing$r.SizesDdsSpacingLocalX075,
-      paddingBottom: spacing$r.SizesDdsSpacingLocalX075,
+      paddingTop: spacing$q.SizesDdsSpacingLocalX075,
+      paddingBottom: spacing$q.SizesDdsSpacingLocalX075,
       paddingLeft: paddingLeftMedium
     },
     large: {
-      paddingTop: spacing$r.SizesDdsSpacingLocalX1,
-      paddingBottom: spacing$r.SizesDdsSpacingLocalX1,
+      paddingTop: spacing$q.SizesDdsSpacingLocalX1,
+      paddingBottom: spacing$q.SizesDdsSpacingLocalX1,
       paddingLeft: paddingLeftLarge
     }
   }
 };
 var horisontalContainer$1 = {
-  gap: spacing$r.SizesDdsSpacingLocalX05
+  gap: spacing$q.SizesDdsSpacingLocalX05
 };
 var outerContainer$6 = {
-  gap: spacing$r.SizesDdsSpacingLocalX0125
+  gap: spacing$q.SizesDdsSpacingLocalX0125
 };
 var searchIcon$1 = {
   base: {
-    left: spacing$r.SizesDdsSpacingLocalX075,
+    left: spacing$q.SizesDdsSpacingLocalX075,
     color: textDefault$2.textColor
   },
   small: {
@@ -3226,17 +3784,17 @@ var searchIcon$1 = {
   }
 };
 var clearButton$1 = {
-  right: spacing$r.SizesDdsSpacingLocalX075,
+  right: spacing$q.SizesDdsSpacingLocalX075,
   top: "calc(50% - 14px)",
   color: textDefault$2.textColor
 };
 var suggestionsContainer$1 = {
-  marginTop: spacing$r.SizesDdsSpacingLocalX025,
-  border: "1px solid ".concat(colors$j.DdsColorInteractiveBase),
-  boxShadow: "0 0 0 1px ".concat(colors$j.DdsColorInteractiveBase)
+  marginTop: spacing$q.SizesDdsSpacingLocalX025,
+  border: "1px solid ".concat(colors$i.DdsColorInteractiveBase),
+  boxShadow: "0 0 0 1px ".concat(colors$i.DdsColorInteractiveBase)
 };
 var suggestionsHeader$1 = {
-  paddingLeft: spacing$r.SizesDdsSpacingLocalX1
+  paddingLeft: spacing$q.SizesDdsSpacingLocalX1
 };
 var searchTokens = {
   input: input$1,
@@ -3262,168 +3820,25 @@ function createEmptyChangeEvent(inputElementId) {
     target: inputElement,
     currentTarget: inputElement,
     bubbles: true,
-    cancelable: false,
-    defaultPrevented: false,
-    eventPhase: 0,
-    isTrusted: false,
-    preventDefault: function preventDefault() {},
-    stopPropagation: function stopPropagation() {},
-    nativeEvent: new Event('input'),
-    persist: function persist() {},
-    type: 'change',
-    timeStamp: Date.now(),
-    isDefaultPrevented: function isDefaultPrevented() {
-      return false;
-    },
-    isPropagationStopped: function isPropagationStopped() {
-      return false;
-    }
-  };
-  return emptyChangeEvent;
-}
-
-var border$7 = ddsDesignTokens.ddsBaseTokens.border,
-  borderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-  colors$i = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$q = ddsDesignTokens.ddsBaseTokens.spacing,
-  fontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
-var typographyType$4 = 'bodySans01';
-var element$1 = {
-  base: {
-    color: colors$i.DdsColorNeutralsGray9,
-    textDecoration: 'none',
-    backgroundColor: colors$i.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$q.SizesDdsSpacingLocalX075, " ").concat(spacing$q.SizesDdsSpacingLocalX1),
-    gap: spacing$q.SizesDdsSpacingLocalX025
-  }
-};
-var iconHeight = ddsCore.calculateHeightWithLineHeight(fontPackages$2.body_sans_01.numbers.lineHeightNumber, fontPackages$2.body_sans_01.numbers.fontSizeNumber);
-var link$3 = {
-  iconWrapper: {
-    height: "".concat(iconHeight, "px")
-  },
-  hover: {
-    backgroundColor: colors$i.DdsColorInteractiveLightest
-  },
-  active: {
-    backgroundColor: colors$i.DdsColorInteractiveLightest
-  }
-};
-var container$8 = {
-  border: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$7.BordersDdsBorderStyleLightStroke, " solid "),
-  backgroundColor: colors$i.DdsColorNeutralsWhite,
-  borderRadius: borderRadius$4.RadiiDdsBorderRadius1Radius
-};
-var divider$1 = {
-  marginRight: spacing$q.SizesDdsSpacingLocalX15,
-  marginLeft: spacing$q.SizesDdsSpacingLocalX15
-};
-var overflowMenuTokens = {
-  container: container$8,
-  element: element$1,
-  link: link$3,
-  divider: divider$1,
-  offset: spacing$q.SizesDdsSpacingLocalX0125NumberPx
-};
-
-var element = overflowMenuTokens.element,
-  link$2 = overflowMenuTokens.link;
-var elementBaseCSS = styled.css(["display:flex;box-sizing:border-box;color:", ";text-decoration:", ";background-color:", ";padding:", ";gap:", ";", ""], element.base.color, element.base.textDecoration, element.base.backgroundColor, element.base.padding, element.base.gap, ddsTypography.getFontStyling(typographyType$4));
-var Span = styled__default.default.span.withConfig({
-  displayName: "OverflowMenuItem__Span",
-  componentId: "sc-1ka2asi-0"
-})(["", ""], elementBaseCSS);
-var Link$2 = styled__default.default.a.withConfig({
-  displayName: "OverflowMenuItem__Link",
-  componentId: "sc-1ka2asi-1"
-})(["", " text-align:left;user-select:text;border:none;cursor:pointer;outline:inherit;width:100%;", " @media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}&:hover{background-color:", ";}&:active{background-color:", ";}&:focus-visible,&.focus-visible{", "}"], ddsCore.normalizeButton, elementBaseCSS, link$2.hover.backgroundColor, link$2.active.backgroundColor, ddsTypography.focusVisibleLink);
-var IconWrapper$1 = styled__default.default.span.withConfig({
-  displayName: "OverflowMenuItem__IconWrapper",
-  componentId: "sc-1ka2asi-2"
-})(["display:flex;align-items:center;height:", ";"], link$2.iconWrapper.height);
-var isAnchorProps = function isAnchorProps(props) {
-  return props.href !== undefined;
-};
-var isButtonProps = function isButtonProps(props) {
-  return props.href === undefined && props.onClick !== undefined;
-};
-var OverflowMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var title = props.title,
-    icon = props.icon,
-    focus = props.focus,
-    setFocus = props.setFocus,
-    index = props.index,
-    id = props.id,
-    className = props.className,
-    _props$htmlProps = props.htmlProps,
-    htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-    rest = tslib.__rest(props, ["title", "icon", "focus", "setFocus", "index", "id", "className", "htmlProps"]);
-  var onKeyDown = htmlProps.onKeyDown;
-  var href;
-  var onClick;
-  if (isAnchorProps(props)) {
-    href = props.href;
-  } else if (isButtonProps(props)) {
-    onClick = props.onClick;
-  }
-  var itemRef = React.useRef(null);
-  var combinedRef = ddsCore.useCombinedRef(ref, itemRef);
-  React.useEffect(function () {
-    var _a;
-    if (focus) {
-      (_a = itemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-  }, [focus]);
-  var handleSelect = React.useCallback(function () {
-    if (setFocus && index) {
-      setFocus(index);
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    preventDefault: function preventDefault() {},
+    stopPropagation: function stopPropagation() {},
+    nativeEvent: new Event('input'),
+    persist: function persist() {},
+    type: 'change',
+    timeStamp: Date.now(),
+    isDefaultPrevented: function isDefaultPrevented() {
+      return false;
+    },
+    isPropagationStopped: function isPropagationStopped() {
+      return false;
     }
-  }, [index, setFocus]);
-  var handleOnClick = function handleOnClick(e) {
-    handleSelect();
-    onClick && onClick(e);
-  };
-  var handleOnKeyDown = function handleOnKeyDown(e) {
-    handleSelect();
-    onKeyDown && onKeyDown(e);
-  };
-  var linkProps = {
-    href: href,
-    onClick: handleOnClick,
-    onKeyDown: handleOnKeyDown,
-    role: 'menuitem',
-    tabIndex: focus ? 0 : -1
   };
-  var iconElement = icon && jsxRuntime.jsx(ddsIcons.Icon, {
-    iconSize: "inherit",
-    icon: icon
-  });
-  if (!href && !onClick) {
-    return jsxRuntime.jsxs(Span, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), {
-      ref: ref,
-      children: [jsxRuntime.jsx(IconWrapper$1, {
-        children: iconElement
-      }), title]
-    }));
-  }
-  if (!href) {
-    return jsxRuntime.jsxs(Link$2, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), linkProps, {
-      as: "button",
-      ref: combinedRef,
-      children: [jsxRuntime.jsx(IconWrapper$1, {
-        children: iconElement
-      }), title]
-    }));
-  }
-  return jsxRuntime.jsxs(Link$2, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), linkProps, {
-    as: "a",
-    ref: combinedRef,
-    children: [jsxRuntime.jsx(IconWrapper$1, {
-      children: iconElement
-    }), title]
-  }));
-});
-OverflowMenuItem.displayName = 'OverflowMenuItem';
+  return emptyChangeEvent;
+}
 
 var suggestionsContainer = searchTokens.suggestionsContainer,
   suggestionsHeader = searchTokens.suggestionsHeader;
@@ -4921,7 +5336,7 @@ var cardTokens = {
   colors: cardColors
 };
 
-var Container$b = styled__default.default.div.withConfig({
+var Container$a = styled__default.default.div.withConfig({
   displayName: "Card__Container",
   componentId: "sc-410ao9-0"
 })(["border:", ";", ";&::selection,*::selection{", "}@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s;}", " ", ""], cardTokens.base.border, ddsTypography.getFontStyling(ddsTypography.defaultTypographyType), ddsCore.selection, function (_ref) {
@@ -4944,7 +5359,7 @@ var Card = function Card(props) {
   if (cardType === 'navigation') {
     var href = props.href,
       target = props.target;
-    return jsxRuntime.jsx(Container$b, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), {
+    return jsxRuntime.jsx(Container$a, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), {
       cardType: cardType,
       color: color,
       as: "a",
@@ -4954,7 +5369,7 @@ var Card = function Card(props) {
       children: children
     }));
   }
-  return jsxRuntime.jsx(Container$b, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), {
+  return jsxRuntime.jsx(Container$a, Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest), {
     cardType: cardType,
     color: color,
     as: "div",
@@ -5280,202 +5695,6 @@ var internalHeaderTokens = {
   contextGroup: contextGroup$1
 };
 
-var container$7 = overflowMenuTokens.container,
-  divider = overflowMenuTokens.divider;
-var Container$a = styled__default.default.div.withConfig({
-  displayName: "OverflowMenu__Container",
-  componentId: "sc-kh744b-0"
-})(["box-sizing:border-box;z-index:100;overflow-y:auto;min-width:180px;max-width:300px;", " border:", ";background-color:", ";border-radius:", ";", " ", " *::selection{", "}"], function (_ref) {
-  var isOpen = _ref.isOpen;
-  return ddsCore.visibilityTransition(isOpen);
-}, container$7.border, container$7.backgroundColor, container$7.borderRadius, scrollbarStyling.webkit, scrollbarStyling.firefox, ddsCore.selection);
-var OverflowMenuList = styled__default.default.ul.withConfig({
-  displayName: "OverflowMenu__OverflowMenuList",
-  componentId: "sc-kh744b-1"
-})(["display:flex;flex-direction:column;list-style-type:none;padding:0;margin:0;"]);
-var StyledDivider = styled__default.default(Divider).withConfig({
-  displayName: "OverflowMenu__StyledDivider",
-  componentId: "sc-kh744b-2"
-})(["margin-left:", ";margin-right:", ";"], divider.marginLeft, divider.marginRight);
-var OverflowMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _a, _b;
-  var anchorRef = props.anchorRef,
-    onClose = props.onClose,
-    onToggle = props.onToggle,
-    _props$isOpen = props.isOpen,
-    isOpen = _props$isOpen === void 0 ? false : _props$isOpen,
-    _props$placement = props.placement,
-    placement = _props$placement === void 0 ? 'bottom-end' : _props$placement,
-    items = props.items,
-    navItems = props.navItems,
-    userProps = props.userProps,
-    id = props.id,
-    _props$offset = props.offset,
-    offset = _props$offset === void 0 ? overflowMenuTokens.offset : _props$offset,
-    className = props.className,
-    _props$htmlProps = props.htmlProps,
-    htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-    rest = tslib.__rest(props, ["anchorRef", "onClose", "onToggle", "isOpen", "placement", "items", "navItems", "userProps", "id", "offset", "className", "htmlProps"]);
-  var _useFloatPosition = ddsCore.useFloatPosition(null, {
-      placement: placement,
-      offset: offset
-    }),
-    reference = _useFloatPosition.reference,
-    floating = _useFloatPosition.floating,
-    refs = _useFloatPosition.refs,
-    styles = _useFloatPosition.styles;
-  var combinedRef = ddsCore.useCombinedRef(ref, floating);
-  React.useEffect(function () {
-    anchorRef ? reference(anchorRef.current) : reference(null);
-  }, [anchorRef]);
-  ddsCore.useOnClickOutside([(_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current, (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current], function () {
-    if (isOpen) {
-      onClose && onClose();
-      onToggle && onToggle();
-    }
-  });
-  ddsCore.useOnKeyDown(['Esc', 'Escape'], function () {
-    var _a;
-    if (isOpen) {
-      onClose && onClose();
-      onToggle && onToggle();
-      anchorRef && ((_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-    }
-  });
-  ddsCore.useOnKeyDown(['Tab'], function () {
-    if (isOpen) {
-      onClose && onClose();
-      onToggle && onToggle();
-    }
-  });
-  var interactiveItems = [];
-  var hasContextItems = !!items && items.length > 0;
-  var hasNavItems = !!navItems && navItems.length > 0;
-  var _c = userProps || {},
-    username = _c.name,
-    userPropsRest = tslib.__rest(_c, ["name"]);
-  var hasStaticUser = username && userProps && !userProps.href && !userProps.onClick;
-  var hasInteractiveUser = username && userProps && (!!userProps.href || !!userProps.onClick);
-  hasInteractiveUser && interactiveItems.push(Object.assign({
-    title: username
-  }, userPropsRest));
-  hasNavItems && interactiveItems.push.apply(interactiveItems, _toConsumableArray(navItems));
-  hasContextItems && interactiveItems.push.apply(interactiveItems, _toConsumableArray(items));
-  var hasInteractiveItems = interactiveItems.length > 0;
-  var _useRoveFocus = ddsCore.useRoveFocus(interactiveItems && interactiveItems.length, !isOpen),
-    _useRoveFocus2 = _slicedToArray(_useRoveFocus, 2),
-    focus = _useRoveFocus2[0],
-    setFocus = _useRoveFocus2[1];
-  var interactiveItemsList = hasInteractiveItems ? interactiveItems.map(function (item, index) {
-    return jsxRuntime.jsx("li", {
-      children: jsxRuntime.jsx(OverflowMenuItem, Object.assign({
-        index: index,
-        focus: focus === index && isOpen,
-        setFocus: setFocus,
-        icon: hasInteractiveUser && index === 0 ? ddsIcons.PersonIcon : undefined
-      }, item, {
-        onClick: function onClick(e) {
-          item.onClick && item.onClick(e);
-          onToggle && onToggle();
-          onClose && onClose();
-        }
-      }))
-    }, index);
-  }) : null;
-  var interactiveContent = function interactiveContent() {
-    if (hasInteractiveItems) {
-      var userPropsPos = hasInteractiveUser ? 0 : -1;
-      var navItemsFirstPos = hasNavItems ? userPropsPos + 1 : -1;
-      var navItemsLastPos = hasNavItems ? userPropsPos + navItems.length : -1;
-      var contextItemsFirstPos = !hasContextItems ? -1 : hasNavItems ? navItemsLastPos + 1 : userPropsPos + 1;
-      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [hasInteractiveUser && jsxRuntime.jsx(OverflowMenuList, {
-          children: interactiveItemsList === null || interactiveItemsList === void 0 ? void 0 : interactiveItemsList[0]
-        }), hasNavItems && jsxRuntime.jsx("nav", {
-          children: jsxRuntime.jsx(OverflowMenuList, {
-            children: interactiveItemsList === null || interactiveItemsList === void 0 ? void 0 : interactiveItemsList.slice(navItemsFirstPos, navItemsLastPos + 1)
-          })
-        }), hasNavItems && hasContextItems && jsxRuntime.jsx(StyledDivider, {
-          color: "primaryLighter"
-        }), hasContextItems && jsxRuntime.jsx(OverflowMenuList, {
-          "aria-label": "kontekstmeny",
-          children: interactiveItemsList === null || interactiveItemsList === void 0 ? void 0 : interactiveItemsList.slice(contextItemsFirstPos, interactiveItemsList.length)
-        })]
-      });
-    }
-  };
-  var _htmlProps$style = htmlProps.style,
-    style = _htmlProps$style === void 0 ? {} : _htmlProps$style,
-    restHTMLProps = tslib.__rest(htmlProps, ["style"]);
-  var generatedId = React.useId();
-  var containerProps = Object.assign(Object.assign({}, ddsCore.getBaseHTMLProps(id, className, restHTMLProps, rest)), {
-    ref: combinedRef,
-    id: id !== null && id !== void 0 ? id : "".concat(generatedId, "-overflowMenu"),
-    isOpen: isOpen,
-    style: Object.assign(Object.assign({}, style), styles.floating),
-    'aria-hidden': !isOpen,
-    role: 'menu'
-  });
-  return jsxRuntime.jsxs(Container$a, Object.assign({}, containerProps, {
-    "aria-label": "bruk piltaster for \xE5 navigere",
-    children: [hasStaticUser && jsxRuntime.jsx(OverflowMenuItem, {
-      title: username,
-      icon: ddsIcons.PersonIcon
-    }), interactiveContent()]
-  }));
-});
-OverflowMenu.displayName = 'OverflowMenu';
-
-var OverflowMenuGroup = function OverflowMenuGroup(_ref) {
-  var children = _ref.children,
-    onClose = _ref.onClose,
-    onToggle = _ref.onToggle,
-    onOpen = _ref.onOpen,
-    overflowMenuId = _ref.overflowMenuId;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var toggle = function toggle() {
-    return setIsOpen(!isOpen);
-  };
-  var close = function close() {
-    return setIsOpen(false);
-  };
-  var buttonRef = React.useRef(null);
-  var generatedId = React.useId();
-  var uniqueOverflowMenuId = overflowMenuId !== null && overflowMenuId !== void 0 ? overflowMenuId : "".concat(generatedId, "-overflowMenu");
-  var handleClose = function handleClose() {
-    onClose && onClose();
-    close();
-  };
-  var handleToggle = function handleToggle() {
-    onOpen && !isOpen && onOpen();
-    onClose && isOpen && onClose();
-    onToggle && onToggle();
-    toggle();
-  };
-  var Children = React.Children.map(children, function (child, childIndex) {
-    return /*#__PURE__*/React.isValidElement(child) && (childIndex === 0 ? /*#__PURE__*/React.cloneElement(child, {
-      'aria-haspopup': 'menu',
-      'aria-controls': uniqueOverflowMenuId,
-      'aria-expanded': isOpen,
-      onClick: handleToggle,
-      ref: buttonRef
-    }) : /*#__PURE__*/React.cloneElement(child, {
-      isOpen: isOpen,
-      id: uniqueOverflowMenuId,
-      onClose: handleClose,
-      onToggle: handleToggle,
-      anchorRef: buttonRef
-    }));
-  });
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: Children
-  });
-};
-OverflowMenuGroup.displayName = 'OverflowMenuGroup';
-
 var outerContainer$1 = internalHeaderTokens.outerContainer,
   applicationNameWrapper = internalHeaderTokens.applicationNameWrapper,
   lovisaWrapper = internalHeaderTokens.lovisaWrapper,
@@ -9110,7 +9329,7 @@ exports.CheckboxGroup = CheckboxGroup;
 exports.Chip = Chip;
 exports.ChipGroup = ChipGroup;
 exports.CollapsibleTable = CollapsibleTable;
-exports.Container = Container$a;
+exports.Container = Container$f;
 exports.Datepicker = Datepicker;
 exports.DescriptionList = DescriptionList;
 exports.DescriptionListDesc = DescriptionListDesc;