@norges-domstoler/dds-components 13.6.1 → 13.6.3

package/dist/cjs/index.js

@@ -5,11 +5,11 @@ var ddsCore = require('@norges-domstoler/dds-core');
 var ddsForm = require('@norges-domstoler/dds-form');
 var ddsIcons = require('@norges-domstoler/dds-icons');
 var ddsTypography = require('@norges-domstoler/dds-typography');
-var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var styled = require('styled-components');
+var React = require('react');
 var ddsDesignTokens = require('@norges-domstoler/dds-design-tokens');
+var tslib = require('tslib');
 var ReactSelect = require('react-select');
 var reactDom = require('react-dom');
 var fileSelector = require('file-selector');
@@ -17,11 +17,251 @@ var accepted = require('attr-accept');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var ReactSelect__default = /*#__PURE__*/_interopDefaultCompat(ReactSelect);
 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;
+var navigationItems = {
+  gap: spacing$B.SizesDdsSpacingLocalX05,
+  item: Object.assign(Object.assign({}, fontPackages$4.body_sans_02.base), {
+    color: colors$s.DdsColorNeutralsGray1,
+    borderRadius: borderRadius$9.RadiiDdsBorderRadius3Radius,
+    padding: spacing$B.SizesDdsSpacingLocalX075,
+    gap: spacing$B.SizesDdsSpacingLocalX05,
+    external: Object.assign({}, fontPackages$4.body_sans_01.base),
+    hover: {
+      backgroundColor: colors$s.DdsColorPrimaryDark
+    },
+    active: {
+      color: colors$s.DdsColorNeutralsWhite,
+      backgroundColor: colors$s.DdsColorPrimaryDarker
+    }
+  })
+};
+var logoAndVersion = {
+  padding: '36px 24px',
+  color: colors$s.DdsColorNeutralsWhite,
+  logo: Object.assign(Object.assign({}, fontPackages$4.heading_sans_05.base), {
+    fontWeight: 700
+  }),
+  version: Object.assign({}, fontPackages$4.supportingStyle_tiny_01.base)
+};
+var navigation$2 = {
+  navigationItems: navigationItems,
+  logoAndVersion: logoAndVersion,
+  color: colors$s.DdsColorNeutralsGray1,
+  backgroundColor: colors$s.DdsColorPrimaryBase,
+  gap: spacing$B.SizesDdsSpacingLocalX05,
+  dividerColor: colors$s.DdsColorPrimaryLight,
+  padding: spacing$B.SizesDdsSpacingLocalX1,
+  width: '264px',
+  mobile: {
+    iconColors: colors$s.DdsColorNeutralsGray3
+  }
+};
+var floatingActionButtons = {
+  gap: spacing$B.SizesDdsSpacingLocalX1,
+  textColor: colors$s.DdsColorNeutralsGray7,
+  backgroundColor: colors$s.DdsColorPrimaryDarker
+};
+var appShellTokens = {
+  navigation: navigation$2,
+  floatingActionButtons: floatingActionButtons
+};
+
+var border$b = ddsDesignTokens.ddsBaseTokens.border,
+  spacing$A = ddsDesignTokens.ddsBaseTokens.spacing;
+var divider$2 = {
+  borderTop: "".concat(border$b.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  marginTop: spacing$A.SizesDdsSpacingLocalX1,
+  marginBottom: spacing$A.SizesDdsSpacingLocalX1,
+  color: {
+    primary: {
+      borderColor: border$b.BordersDdsBorderStyleDarkStroke
+    },
+    primaryLighter: {
+      borderColor: border$b.BordersDdsBorderStyleLightStroke
+    }
+  }
+};
+var dividerTokens = Object.assign({}, divider$2);
+
+var StyledDivider$2 = styled__default.default.hr.withConfig({
+  displayName: "Divider__StyledDivider",
+  componentId: "sc-ggdopz-0"
+})(["border:0;background-color:transparent;border-top:", ";margin-top:", ";margin-bottom:", ";", ""], dividerTokens.borderTop, dividerTokens.marginTop, dividerTokens.marginBottom, function (_ref) {
+  var color = _ref.color;
+  return color && styled.css(["border-color:", ";"], dividerTokens.color[color].borderColor);
+});
+var Divider = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$color = props.color,
+    color = _props$color === void 0 ? 'primary' : _props$color,
+    id = props.id,
+    className = props.className,
+    htmlProps = props.htmlProps,
+    rest = tslib.__rest(props, ["color", "id", "className", "htmlProps"]);
+  var lineProps = Object.assign(Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest)), {
+    color: color
+  });
+  return jsxRuntime.jsx(StyledDivider$2, Object.assign({
+    ref: ref
+  }, lineProps));
+});
+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:", ";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, i) {
+        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 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
+    }), 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);
@@ -31,7 +271,7 @@ var selectionControlSizeNumberPx = 18;
 var selectionControlSize = "".concat(selectionControlSizeNumberPx, "px");
 
 var colors$r = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$A = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$z = ddsDesignTokens.ddsBaseTokens.spacing,
   borderRadius$8 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var checkmark$1 = {
   checkbox: {
@@ -39,10 +279,10 @@ var checkmark$1 = {
   },
   radio: {
     backgroundColor: colors$r.DdsColorNeutralsWhite,
-    height: spacing$A.SizesDdsSpacingLocalX05,
-    width: spacing$A.SizesDdsSpacingLocalX05,
-    left: "calc(50% - ".concat(spacing$A.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
-    top: "calc(50% - ".concat(spacing$A.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
+    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 = {
@@ -108,7 +348,7 @@ var container$e = {
     color: colors$r.DdsColorNeutralsGray6
   },
   withLabel: {
-    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$A.SizesDdsSpacingLocalX05NumberPx, "px")
+    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$z.SizesDdsSpacingLocalX05NumberPx, "px")
   },
   noLabel: {
     padding: "".concat(selectionControlSizeNumberPx / 2, "px")
@@ -116,14 +356,14 @@ var container$e = {
 };
 var groupContainer$1 = {
   row: {
-    gap: spacing$A.SizesDdsSpacingLocalX075
+    gap: spacing$z.SizesDdsSpacingLocalX075
   },
   column: {
-    gap: spacing$A.SizesDdsSpacingLocalX05
+    gap: spacing$z.SizesDdsSpacingLocalX05
   }
 };
 var outerGroupContainer$1 = {
-  gap: spacing$A.SizesDdsSpacingLocalX0125
+  gap: spacing$z.SizesDdsSpacingLocalX0125
 };
 var selectionControlTokens = {
   selectionControl: selectionControl$2,
@@ -641,20 +881,20 @@ function _toPropertyKey(arg) {
 }
 
 var colors$q = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$z = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$y = ddsDesignTokens.ddsBaseTokens.spacing;
 var message = {
   tip: {
     backgroundColor: colors$q.DdsColorNeutralsWhite
   },
   error: {
-    padding: "".concat(spacing$z.SizesDdsSpacingLocalX025, " ").concat(spacing$z.SizesDdsSpacingLocalX05),
+    padding: "".concat(spacing$y.SizesDdsSpacingLocalX025, " ").concat(spacing$y.SizesDdsSpacingLocalX05),
     color: colors$q.DdsColorDangerBase,
     backgroundColor: colors$q.DdsColorDangerLightest,
-    gap: spacing$z.SizesDdsSpacingLocalX05
+    gap: spacing$y.SizesDdsSpacingLocalX05
   }
 };
 var icon$a = {
-  marginTop: spacing$z.SizesDdsSpacingLocalX0125
+  marginTop: spacing$y.SizesDdsSpacingLocalX0125
 };
 var inputMessageTokens = {
   message: message,
@@ -892,8 +1132,8 @@ var CheckboxGroup = function CheckboxGroup(props) {
 CheckboxGroup.displayName = 'CheckboxGroup';
 
 var colors$p = ddsDesignTokens.ddsBaseTokens.colors,
-  border$b = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$y = ddsDesignTokens.ddsBaseTokens.spacing,
+  border$a = ddsDesignTokens.ddsBaseTokens.border,
+  spacing$x = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages,
   borderRadius$7 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   outerShadow$1 = ddsDesignTokens.ddsBaseTokens.outerShadow;
@@ -907,7 +1147,7 @@ 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$y.SizesDdsSpacingLocalX0125NumberPx;
+var svgOffset = spacing$x.SizesDdsSpacingLocalX0125NumberPx;
 var filledButtonColors = {
   primary: {
     base: {
@@ -972,7 +1212,7 @@ var sizes$2 = {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-        padding: spacing$y.SizesDdsSpacingLocalX1
+        padding: spacing$x.SizesDdsSpacingLocalX1
       },
       wrapper: {
         height: "".concat(iconSizeLargePx, "px"),
@@ -980,17 +1220,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$y.SizesDdsSpacingLocalX1, " ").concat(spacing$y.SizesDdsSpacingLocalX2NumberPx - 2, "px")
+      padding: "".concat(spacing$x.SizesDdsSpacingLocalX1, " ").concat(spacing$x.SizesDdsSpacingLocalX2NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$y.SizesDdsSpacingLocalX1
+      gap: spacing$x.SizesDdsSpacingLocalX1
     }
   },
   medium: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-        padding: spacing$y.SizesDdsSpacingLocalX075
+        padding: spacing$x.SizesDdsSpacingLocalX075
       },
       wrapper: {
         height: "".concat(iconSizeMediumPx, "px"),
@@ -998,17 +1238,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$y.SizesDdsSpacingLocalX075, " ").concat(spacing$y.SizesDdsSpacingLocalX15NumberPx - 2, "px")
+      padding: "".concat(spacing$x.SizesDdsSpacingLocalX075, " ").concat(spacing$x.SizesDdsSpacingLocalX15NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$y.SizesDdsSpacingLocalX075
+      gap: spacing$x.SizesDdsSpacingLocalX075
     }
   },
   small: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-        padding: spacing$y.SizesDdsSpacingLocalX05
+        padding: spacing$x.SizesDdsSpacingLocalX05
       },
       wrapper: {
         height: "".concat(iconSizeSmallPx, "px"),
@@ -1016,17 +1256,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$y.SizesDdsSpacingLocalX05, " ").concat(spacing$y.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+      padding: "".concat(spacing$x.SizesDdsSpacingLocalX05, " ").concat(spacing$x.SizesDdsSpacingLocalX1NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$y.SizesDdsSpacingLocalX05
+      gap: spacing$x.SizesDdsSpacingLocalX05
     }
   },
   tiny: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-        padding: spacing$y.SizesDdsSpacingLocalX025
+        padding: spacing$x.SizesDdsSpacingLocalX025
       },
       wrapper: {
         height: "".concat(iconSizeTinyPx, "px"),
@@ -1034,10 +1274,10 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$y.SizesDdsSpacingLocalX025, " ").concat(spacing$y.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$x.SizesDdsSpacingLocalX025, " ").concat(spacing$x.SizesDdsSpacingLocalX075)
     },
     textAndIcon: {
-      gap: spacing$y.SizesDdsSpacingLocalX05
+      gap: spacing$x.SizesDdsSpacingLocalX05
     }
   }
 };
@@ -1229,7 +1469,7 @@ var appearances$2 = {
 };
 var button$1 = {
   base: {
-    border: "".concat(border$b.BordersDdsBorderStyleLightStrokeWeight, " solid")
+    border: "".concat(border$a.BordersDdsBorderStyleLightStrokeWeight, " solid")
   },
   sizes: sizes$2,
   appearances: appearances$2
@@ -1464,18 +1704,18 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Button$1.displayName = 'Button';
 
 var colors$o = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$x = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$w = ddsDesignTokens.ddsBaseTokens.spacing,
   iconSizes$5 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var input$3 = {
   withIcon: {
     medium: {
-      paddingLeft: "".concat(spacing$x.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeMediumNumberPx + spacing$x.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$w.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeMediumNumberPx + spacing$w.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     small: {
-      paddingLeft: "".concat(spacing$x.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$x.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$w.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$w.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     tiny: {
-      paddingLeft: "".concat(spacing$x.SizesDdsSpacingLocalX05NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$x.SizesDdsSpacingLocalX025NumberPx, "px")
+      paddingLeft: "".concat(spacing$w.SizesDdsSpacingLocalX05NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$w.SizesDdsSpacingLocalX025NumberPx, "px")
     }
   }
 };
@@ -1488,16 +1728,16 @@ var icon$9 = {
   color: colors$o.DdsColorNeutralsGray9,
   sizes: {
     medium: {
-      top: spacing$x.SizesDdsSpacingLocalX075,
-      left: spacing$x.SizesDdsSpacingLocalX075
+      top: spacing$w.SizesDdsSpacingLocalX075,
+      left: spacing$w.SizesDdsSpacingLocalX075
     },
     small: {
-      top: spacing$x.SizesDdsSpacingLocalX075,
-      left: spacing$x.SizesDdsSpacingLocalX075
+      top: spacing$w.SizesDdsSpacingLocalX075,
+      left: spacing$w.SizesDdsSpacingLocalX075
     },
     tiny: {
-      top: spacing$x.SizesDdsSpacingLocalX05,
-      left: spacing$x.SizesDdsSpacingLocalX05
+      top: spacing$w.SizesDdsSpacingLocalX05,
+      left: spacing$w.SizesDdsSpacingLocalX05
     }
   }
 };
@@ -1738,7 +1978,7 @@ TextInput.displayName = 'TextInput';
 var scrollbarWidthNumberPx = 10;
 var scrollbarWidth$1 = "".concat(scrollbarWidthNumberPx, "px");
 var colors$n = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$w = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$v = ddsDesignTokens.ddsBaseTokens.spacing;
 var track$3 = {
   backgroundColor: 'transparent',
   borderRadius: '100px',
@@ -1755,10 +1995,10 @@ var thumb$2 = {
   }
 };
 var content$5 = {
-  paddingRight: spacing$w.SizesDdsSpacingLocalX05
+  paddingRight: spacing$v.SizesDdsSpacingLocalX05
 };
 var outerContainer$8 = {
-  padding: spacing$w.SizesDdsSpacingLocalX025
+  padding: spacing$v.SizesDdsSpacingLocalX025
 };
 var scrollbarTokens = {
   minThumbHeightPx: 15,
@@ -1994,9 +2234,9 @@ var scrollbarStyling = {
 };
 
 var colors$m = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$v = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$u = ddsDesignTokens.ddsBaseTokens.spacing,
   borderRadius$6 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-  border$a = ddsDesignTokens.ddsBaseTokens.border;
+  border$9 = ddsDesignTokens.ddsBaseTokens.border;
 var textDefault$3 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var placeholderTypographyTypes = {
   medium: 'supportingStylePlaceholderText01',
@@ -2013,7 +2253,7 @@ var typographyTypes$5 = {
 };
 var control = {
   borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
-  border: "".concat(border$a.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  border: "".concat(border$9.BordersDdsBorderStyleLightStrokeWeight, " solid"),
   borderColor: colors$m.DdsColorNeutralsGray5,
   backgroundColor: colors$m.DdsColorNeutralsWhite,
   color: colors$m.DdsColorNeutralsGray9,
@@ -2028,25 +2268,25 @@ var control = {
   isMulti: {
     sizes: {
       medium: {
-        padding: "".concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
       },
       small: {
-        padding: "".concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
       },
       tiny: {
-        padding: "".concat(spacing$v.SizesDdsSpacingLocalX025, " ").concat(spacing$v.SizesDdsSpacingLocalX05)
+        padding: "".concat(spacing$u.SizesDdsSpacingLocalX025, " ").concat(spacing$u.SizesDdsSpacingLocalX05)
       }
     }
   },
   sizes: {
     medium: {
-      padding: "".concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
     },
     small: {
-      padding: "".concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
     },
     tiny: {
-      padding: "".concat(spacing$v.SizesDdsSpacingLocalX025, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX025, " ").concat(spacing$v.SizesDdsSpacingLocalX05)
+      padding: "".concat(spacing$u.SizesDdsSpacingLocalX025, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX025, " ").concat(spacing$u.SizesDdsSpacingLocalX05)
     }
   }
 };
@@ -2080,17 +2320,17 @@ var menu = {
   borderColor: colors$m.DdsColorInteractiveBase,
   backgroundColor: colors$m.DdsColorNeutralsWhite,
   borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
-  marginTop: spacing$v.SizesDdsSpacingLocalX025,
-  marginBottom: spacing$v.SizesDdsSpacingLocalX025
+  marginTop: spacing$u.SizesDdsSpacingLocalX025,
+  marginBottom: spacing$u.SizesDdsSpacingLocalX025
 };
 var groupHeading = {
   color: colors$m.DdsColorNeutralsGray7,
-  padding: "".concat(spacing$v.SizesDdsSpacingLocalX05, "  ").concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX0125, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
+  padding: "".concat(spacing$u.SizesDdsSpacingLocalX05, "  ").concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX0125, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
 };
 var option = {
   base: {
-    gap: spacing$v.SizesDdsSpacingLocalX05,
-    padding: "".concat(spacing$v.SizesDdsSpacingLocalX075),
+    gap: spacing$u.SizesDdsSpacingLocalX05,
+    padding: "".concat(spacing$u.SizesDdsSpacingLocalX075),
     backgroundColor: colors$m.DdsColorNeutralsWhite
   },
   hover: {
@@ -2106,7 +2346,7 @@ var option = {
   }
 };
 var noOptionsMessage = {
-  padding: "".concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX1),
+  padding: "".concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX1),
   color: colors$m.DdsColorNeutralsGray6
 };
 var multiValue = {
@@ -2114,13 +2354,13 @@ var multiValue = {
   backgroundColor: colors$m.DdsColorNeutralsGray2
 };
 var multiValueLabel = {
-  padding: "0 ".concat(spacing$v.SizesDdsSpacingLocalX025),
+  padding: "0 ".concat(spacing$u.SizesDdsSpacingLocalX025),
   color: colors$m.DdsColorNeutralsGray9
 };
 var multiValueRemove = {
   base: {
     color: colors$m.DdsColorNeutralsGray9,
-    padding: "0 ".concat(spacing$v.SizesDdsSpacingLocalX025),
+    padding: "0 ".concat(spacing$u.SizesDdsSpacingLocalX025),
     borderTopRightRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
     borderBottomRightRadius: borderRadius$6.RadiiDdsBorderRadius1Radius
   },
@@ -2132,11 +2372,11 @@ var multiValueRemove = {
 };
 var valueContainer = {
   isMulti: {
-    gap: spacing$v.SizesDdsSpacingLocalX025
+    gap: spacing$u.SizesDdsSpacingLocalX025
   }
 };
 var icon$7 = {
-  marginRight: spacing$v.SizesDdsSpacingLocalX05
+  marginRight: spacing$u.SizesDdsSpacingLocalX05
 };
 var selectTokens = {
   control: control,
@@ -2567,11 +2807,11 @@ var Select = /*#__PURE__*/React__default.default.forwardRef(SelectInner);
 Select.displayName = 'Select';
 
 var colors$l = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$u = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$t = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyType$5 = 'bodySans02';
 var container$c = {
   borderBottom: '2px solid',
-  padding: "0 ".concat(spacing$u.SizesDdsSpacingLocalX1),
+  padding: "0 ".concat(spacing$t.SizesDdsSpacingLocalX1),
   info: {
     borderColor: colors$l.DdsColorInfoLighter,
     backgroundColor: colors$l.DdsColorInfoLightest
@@ -2586,12 +2826,12 @@ var container$c = {
   }
 };
 var contentContainer$5 = {
-  paddingRight: spacing$u.SizesDdsSpacingLocalX15,
-  paddingTop: spacing$u.SizesDdsSpacingLocalX075,
-  paddingBottom: spacing$u.SizesDdsSpacingLocalX075,
-  gap: spacing$u.SizesDdsSpacingLocalX075,
+  paddingRight: spacing$t.SizesDdsSpacingLocalX15,
+  paddingTop: spacing$t.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing$t.SizesDdsSpacingLocalX075,
+  gap: spacing$t.SizesDdsSpacingLocalX075,
   withClosable: {
-    paddingRight: spacing$u.SizesDdsSpacingLocalX075
+    paddingRight: spacing$t.SizesDdsSpacingLocalX075
   }
 };
 var purposeVariants$2 = {
@@ -2612,7 +2852,7 @@ var globalMessageTokens = {
   container: container$c,
   contentContainer: contentContainer$5,
   icon: {
-    marginRight: "".concat(spacing$u.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(spacing$t.SizesDdsSpacingLocalX075),
     info: {
       color: colors$l.DdsColorInfoDarkest
     },
@@ -2697,17 +2937,17 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
 GlobalMessage.displayName = 'GlobalMessage';
 
 var colors$k = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$t = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$s = ddsDesignTokens.ddsBaseTokens.spacing,
   borderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-  border$9 = ddsDesignTokens.ddsBaseTokens.border,
+  border$8 = ddsDesignTokens.ddsBaseTokens.border,
   outerShadow = ddsDesignTokens.ddsBaseTokens.outerShadow;
 var container$a = {
   base: {
     boxShadow: outerShadow.DdsShadow1Onlight,
     borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
-    border: "".concat(border$9.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-    padding: spacing$t.SizesDdsSpacingLocalX075,
-    gap: spacing$t.SizesDdsSpacingLocalX05
+    border: "".concat(border$8.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+    padding: spacing$s.SizesDdsSpacingLocalX075,
+    gap: spacing$s.SizesDdsSpacingLocalX05
   },
   purpose: {
     info: {
@@ -2763,7 +3003,7 @@ var purposeVariants$1 = {
   }
 };
 var icon$4 = {
-  marginRight: "".concat(spacing$t.SizesDdsSpacingLocalX075),
+  marginRight: "".concat(spacing$s.SizesDdsSpacingLocalX075),
   info: {
     color: colors$k.DdsColorInfoDarkest
   },
@@ -2923,7 +3163,7 @@ var useAutocompleteSearch = function useAutocompleteSearch() {
   return React.useContext(AutocompleteSearchContext);
 };
 
-var spacing$s = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$r = ddsDesignTokens.ddsBaseTokens.spacing,
   iconSizes$3 = ddsDesignTokens.ddsBaseTokens.iconSizes,
   colors$j = ddsDesignTokens.ddsBaseTokens.colors;
 var textDefault$2 = ddsDesignTokens.ddsReferenceTokens.textDefault;
@@ -2932,41 +3172,41 @@ var typographyTypes$4 = {
   medium: 'bodySans02',
   large: 'bodySans04'
 };
-var paddingLeftSmall = "".concat(spacing$s.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$s.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftMedium = "".concat(spacing$s.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$s.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftLarge = "".concat(spacing$s.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$s.SizesDdsSpacingLocalX05NumberPx, "px");
+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 input$1 = {
   base: {
-    paddingRight: spacing$s.SizesDdsSpacingLocalX25,
-    paddingLeft: spacing$s.SizesDdsSpacingLocalX3
+    paddingRight: spacing$r.SizesDdsSpacingLocalX25,
+    paddingLeft: spacing$r.SizesDdsSpacingLocalX3
   },
   sizes: {
     small: {
-      paddingTop: spacing$s.SizesDdsSpacingLocalX05,
-      paddingBottom: spacing$s.SizesDdsSpacingLocalX05,
+      paddingTop: spacing$r.SizesDdsSpacingLocalX05,
+      paddingBottom: spacing$r.SizesDdsSpacingLocalX05,
       paddingLeft: paddingLeftSmall
     },
     medium: {
-      paddingTop: spacing$s.SizesDdsSpacingLocalX075,
-      paddingBottom: spacing$s.SizesDdsSpacingLocalX075,
+      paddingTop: spacing$r.SizesDdsSpacingLocalX075,
+      paddingBottom: spacing$r.SizesDdsSpacingLocalX075,
       paddingLeft: paddingLeftMedium
     },
     large: {
-      paddingTop: spacing$s.SizesDdsSpacingLocalX1,
-      paddingBottom: spacing$s.SizesDdsSpacingLocalX1,
+      paddingTop: spacing$r.SizesDdsSpacingLocalX1,
+      paddingBottom: spacing$r.SizesDdsSpacingLocalX1,
       paddingLeft: paddingLeftLarge
     }
   }
 };
 var horisontalContainer$1 = {
-  gap: spacing$s.SizesDdsSpacingLocalX05
+  gap: spacing$r.SizesDdsSpacingLocalX05
 };
 var outerContainer$6 = {
-  gap: spacing$s.SizesDdsSpacingLocalX0125
+  gap: spacing$r.SizesDdsSpacingLocalX0125
 };
 var searchIcon$1 = {
   base: {
-    left: spacing$s.SizesDdsSpacingLocalX075,
+    left: spacing$r.SizesDdsSpacingLocalX075,
     color: textDefault$2.textColor
   },
   small: {
@@ -2980,17 +3220,17 @@ var searchIcon$1 = {
   }
 };
 var clearButton$1 = {
-  right: spacing$s.SizesDdsSpacingLocalX075,
+  right: spacing$r.SizesDdsSpacingLocalX075,
   top: "calc(50% - 14px)",
   color: textDefault$2.textColor
 };
 var suggestionsContainer$1 = {
-  marginTop: spacing$s.SizesDdsSpacingLocalX025,
+  marginTop: spacing$r.SizesDdsSpacingLocalX025,
   border: "1px solid ".concat(colors$j.DdsColorInteractiveBase),
   boxShadow: "0 0 0 1px ".concat(colors$j.DdsColorInteractiveBase)
 };
 var suggestionsHeader$1 = {
-  paddingLeft: spacing$s.SizesDdsSpacingLocalX1
+  paddingLeft: spacing$r.SizesDdsSpacingLocalX1
 };
 var searchTokens = {
   input: input$1,
@@ -3002,10 +3242,10 @@ var searchTokens = {
   suggestionsHeader: suggestionsHeader$1
 };
 
-var border$8 = ddsDesignTokens.ddsBaseTokens.border,
+var border$7 = ddsDesignTokens.ddsBaseTokens.border,
   borderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   colors$i = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$r = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$q = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var typographyType$4 = 'bodySans01';
 var element$1 = {
@@ -3013,8 +3253,8 @@ var element$1 = {
     color: colors$i.DdsColorNeutralsGray9,
     textDecoration: 'none',
     backgroundColor: colors$i.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$r.SizesDdsSpacingLocalX075, " ").concat(spacing$r.SizesDdsSpacingLocalX1),
-    gap: spacing$r.SizesDdsSpacingLocalX025
+    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);
@@ -3030,20 +3270,20 @@ var link$3 = {
   }
 };
 var container$8 = {
-  border: "".concat(border$8.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$8.BordersDdsBorderStyleLightStroke, " solid "),
+  border: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$7.BordersDdsBorderStyleLightStroke, " solid "),
   backgroundColor: colors$i.DdsColorNeutralsWhite,
   borderRadius: borderRadius$4.RadiiDdsBorderRadius1Radius
 };
-var divider$2 = {
-  marginRight: spacing$r.SizesDdsSpacingLocalX15,
-  marginLeft: spacing$r.SizesDdsSpacingLocalX15
+var divider$1 = {
+  marginRight: spacing$q.SizesDdsSpacingLocalX15,
+  marginLeft: spacing$q.SizesDdsSpacingLocalX15
 };
 var overflowMenuTokens = {
   container: container$8,
   element: element$1,
   link: link$3,
-  divider: divider$2,
-  offset: spacing$r.SizesDdsSpacingLocalX0125NumberPx
+  divider: divider$1,
+  offset: spacing$q.SizesDdsSpacingLocalX0125NumberPx
 };
 
 var element = overflowMenuTokens.element,
@@ -3520,8 +3760,8 @@ Search.Suggestions = SearchSuggestions;
 
 var font = ddsDesignTokens.ddsBaseTokens.font,
   colors$h = ddsDesignTokens.ddsBaseTokens.colors,
-  border$7 = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$q = ddsDesignTokens.ddsBaseTokens.spacing,
+  border$6 = ddsDesignTokens.ddsBaseTokens.border,
+  spacing$p = ddsDesignTokens.ddsBaseTokens.spacing,
   iconSizes$2 = ddsDesignTokens.ddsBaseTokens.iconSizes,
   borderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var row$2 = {
@@ -3540,8 +3780,8 @@ var row$2 = {
     },
     mode: {
       sum: {
-        borderTop: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$h.DdsColorNeutralsGray4),
-        borderBottom: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$h.DdsColorNeutralsGray4),
+        borderTop: "".concat(border$6.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$h.DdsColorNeutralsGray4),
+        borderBottom: "".concat(border$6.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$h.DdsColorNeutralsGray4),
         backgroundColor: colors$h.DdsColorNeutralsWhite
       }
     },
@@ -3559,28 +3799,28 @@ var row$2 = {
 var cell$3 = {
   density: {
     normal: {
-      padding: "".concat(spacing$q.SizesDdsSpacingLocalX15, " ").concat(spacing$q.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$p.SizesDdsSpacingLocalX15, " ").concat(spacing$p.SizesDdsSpacingLocalX075)
     },
     compact: {
-      padding: "".concat(spacing$q.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$p.SizesDdsSpacingLocalX075)
     },
     extraCompact: {
-      padding: "".concat(spacing$q.SizesDdsSpacingLocalX025, " ").concat(spacing$q.SizesDdsSpacingLocalX05)
+      padding: "".concat(spacing$p.SizesDdsSpacingLocalX025, " ").concat(spacing$p.SizesDdsSpacingLocalX05)
     }
   },
   head: {
     backgroundColor: colors$h.DdsColorPrimaryLightest
   },
   sort: {
-    gap: spacing$q.SizesDdsSpacingLocalX05,
+    gap: spacing$p.SizesDdsSpacingLocalX05,
     icon: {
-      marginInlineStart: spacing$q.SizesDdsSpacingLocalX05
+      marginInlineStart: spacing$p.SizesDdsSpacingLocalX05
     }
   },
   layout: {
     textAndIcon: {
-      gap: spacing$q.SizesDdsSpacingLocalX075,
-      marginRight: spacing$q.SizesDdsSpacingLocalX075
+      gap: spacing$p.SizesDdsSpacingLocalX075,
+      marginRight: spacing$p.SizesDdsSpacingLocalX075
     }
   }
 };
@@ -3755,7 +3995,7 @@ var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 });
 Row.displayName = 'Table.Row';
 
-var spacing$p = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$o = ddsDesignTokens.ddsBaseTokens.spacing,
   colors$g = ddsDesignTokens.ddsBaseTokens.colors;
 var term$1 = {
   appearance: {
@@ -3767,29 +4007,29 @@ var term$1 = {
     }
   },
   firstOfType: {
-    marginTop: spacing$p.SizesDdsSpacingLocalX1
+    marginTop: spacing$o.SizesDdsSpacingLocalX1
   }
 };
 var desc$1 = {
   base: {
-    gap: spacing$p.SizesDdsSpacingLocalX025,
+    gap: spacing$o.SizesDdsSpacingLocalX025,
     color: colors$g.DdsColorNeutralsGray9
   },
   lastChild: {
-    marginBottom: spacing$p.SizesDdsSpacingLocalX1
+    marginBottom: spacing$o.SizesDdsSpacingLocalX1
   }
 };
 var list$7 = {
   beforeNextTerm: {
-    marginTop: spacing$p.SizesDdsSpacingLocalX2
+    marginTop: spacing$o.SizesDdsSpacingLocalX2
   },
   rowDirection: {
-    columnGap: spacing$p.SizesDdsSpacingLocalX2
+    columnGap: spacing$o.SizesDdsSpacingLocalX2
   }
 };
 var group$2 = {
   base: {
-    margin: spacing$p.SizesDdsSpacingLocalX2
+    margin: spacing$o.SizesDdsSpacingLocalX2
   }
 };
 var descriptionListTokens = {
@@ -4218,16 +4458,16 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Breadcrumb.displayName = 'Breadcrumb';
 
 var colors$f = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$o = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$n = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyType$3 = 'bodySans02';
 var icon$2 = {
   color: colors$f.DdsColorInteractiveBase
 };
 var listItem$3 = {
-  gap: spacing$o.SizesDdsSpacingLocalX05
+  gap: spacing$n.SizesDdsSpacingLocalX05
 };
 var list$5 = {
-  gap: spacing$o.SizesDdsSpacingLocalX05
+  gap: spacing$n.SizesDdsSpacingLocalX05
 };
 var breadcrumbTokens = {
   list: list$5,
@@ -4310,19 +4550,19 @@ function PaginationGenerator(pagesAmount, activePage) {
   return arrayRange(1, pagesAmount);
 }
 
-var spacing$n = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$m = ddsDesignTokens.ddsBaseTokens.spacing,
   colors$e = ddsDesignTokens.ddsBaseTokens.colors;
 var list$3 = {
-  gap: spacing$n.SizesDdsSpacingLocalX075
+  gap: spacing$m.SizesDdsSpacingLocalX075
 };
 var truncationIcon$1 = {
   color: colors$e.DdsColorNeutralsGray7
 };
 var outerContainer$4 = {
-  gap: spacing$n.SizesDdsSpacingLocalX075
+  gap: spacing$m.SizesDdsSpacingLocalX075
 };
 var indicatorsContainer$1 = {
-  gap: spacing$n.SizesDdsSpacingLocalX075
+  gap: spacing$m.SizesDdsSpacingLocalX075
 };
 var paginationTokens = {
   outerContainer: outerContainer$4,
@@ -4550,46 +4790,6 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 Pagination.displayName = 'Pagination';
 
-var border$6 = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$m = ddsDesignTokens.ddsBaseTokens.spacing;
-var divider$1 = {
-  borderTop: "".concat(border$6.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  marginTop: spacing$m.SizesDdsSpacingLocalX1,
-  marginBottom: spacing$m.SizesDdsSpacingLocalX1,
-  color: {
-    primary: {
-      borderColor: border$6.BordersDdsBorderStyleDarkStroke
-    },
-    primaryLighter: {
-      borderColor: border$6.BordersDdsBorderStyleLightStroke
-    }
-  }
-};
-var dividerTokens = Object.assign({}, divider$1);
-
-var StyledDivider$1 = styled__default.default.hr.withConfig({
-  displayName: "Divider__StyledDivider",
-  componentId: "sc-ggdopz-0"
-})(["border:0;background-color:transparent;border-top:", ";margin-top:", ";margin-bottom:", ";", ""], dividerTokens.borderTop, dividerTokens.marginTop, dividerTokens.marginBottom, function (_ref) {
-  var color = _ref.color;
-  return color && styled.css(["border-color:", ";"], dividerTokens.color[color].borderColor);
-});
-var Divider = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$color = props.color,
-    color = _props$color === void 0 ? 'primary' : _props$color,
-    id = props.id,
-    className = props.className,
-    htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["color", "id", "className", "htmlProps"]);
-  var lineProps = Object.assign(Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest)), {
-    color: color
-  });
-  return jsxRuntime.jsx(StyledDivider$1, Object.assign({
-    ref: ref
-  }, lineProps));
-});
-Divider.displayName = 'Divider';
-
 var img$3 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6.7085' cy='6.7085' r='2.625' fill='%230B0D0E'/%3e%3c/svg%3e";
   var bulletLvl1 = img$3;
 
@@ -5904,6 +6104,9 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else {
       handleElementWithBackdropUnmount(document.body);
     }
+    return function () {
+      return handleElementWithBackdropUnmount(document.body);
+    };
   }, [isOpen]);
   ddsCore.useOnClickOutside(modalRef.current, function () {
     return handleClose();
@@ -8887,6 +9090,7 @@ Object.defineProperty(exports, 'useScreenSize', {
   enumerable: true,
   get: function () { return ddsCore.useScreenSize; }
 });
+exports.AppShell = AppShell;
 exports.BackLink = BackLink;
 exports.Breadcrumb = Breadcrumb;
 exports.Breadcrumbs = Breadcrumbs;