@norges-domstoler/dds-components 0.0.16 → 0.0.17

package/dist/components/Select/Select.styles.d.ts

@@ -6,7 +6,8 @@ declare type StyledContainerProps = {
     errorMessage?: string;
     isDisabled?: boolean;
     readOnly?: boolean;
-    label?: string;
+    hasLabel: boolean;
+    isMulti?: boolean;
 };
 export declare const Container: import("styled-components").StyledComponent<"div", any, StyledContainerProps, never>;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {

package/dist/components/Select/Select.tokens.d.ts

@@ -1,14 +1,9 @@
 import { CSSObject } from 'styled-components';
+export declare const multiValueContainerMinHeight: string;
 export declare const selectTokens: {
     container: {
         base: CSSObject;
         defaultWidth: string;
-        withLabel: {
-            base: CSSObject;
-        };
-        noLabel: {
-            base: CSSObject;
-        };
         hover: {
             base: CSSObject;
         };
@@ -45,6 +40,11 @@ export declare const selectTokens: {
         noLabel: {
             base: CSSObject;
         };
+        isMulti: {
+            noLabel: {
+                base: CSSObject;
+            };
+        };
     };
     placeholder: {
         base: CSSObject;
@@ -65,6 +65,60 @@ export declare const selectTokens: {
             };
         };
     };
+    valueContainer: {
+        withLabel: {
+            base: CSSObject;
+        };
+        noLabel: {
+            base: CSSObject;
+        };
+        isMulti: {
+            base: CSSObject;
+            withLabel: {
+                base: CSSObject;
+            };
+            noLabel: {
+                base: CSSObject;
+            };
+        };
+    };
+    multiValue: {
+        base: CSSObject;
+        enabled: {
+            base: CSSObject;
+        };
+        disabled: {
+            base: CSSObject;
+        };
+    };
+    multiValueLabel: {
+        base: CSSObject;
+    };
+    multiValueRemove: {
+        base: CSSObject;
+        hover: {
+            base: CSSObject;
+        };
+        icon: {
+            base: CSSObject;
+        };
+    };
+    indicatorsContainer: {
+        withLabel: {
+            base: CSSObject;
+        };
+        noLabel: {
+            base: CSSObject;
+        };
+        isMulti: {
+            withLabel: {
+                base: CSSObject;
+            };
+            noLabel: {
+                base: CSSObject;
+            };
+        };
+    };
     dropdownIndicator: {
         base: CSSObject;
         hover: {
@@ -83,4 +137,7 @@ export declare const selectTokens: {
             base: CSSObject;
         };
     };
+    loadingIndicator: {
+        base: CSSObject;
+    };
 };

package/dist/index.es.js

@@ -20051,13 +20051,13 @@ var StyledTypography = styled.p.withConfig({
   return color && Ae(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), getTextColor(color));
 }, function (_a) {
   var bold = _a.bold;
-  return bold && Ae(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.bold.base);
+  return bold && Ae(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.bold.base);
 }, function (_a) {
   var italic = _a.italic;
-  return italic && Ae(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.italic.base);
+  return italic && Ae(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.italic.base);
 }, function (_a) {
   var underline = _a.underline;
-  return underline && Ae(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.underline.base);
+  return underline && Ae(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.underline.base);
 });
 var Typography = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.typographyType,
@@ -20086,7 +20086,7 @@ var Typography = /*#__PURE__*/forwardRef(function (_a, ref) {
     }, void 0) : '']
   }), void 0);
 });
-var templateObject_1$D, templateObject_2$s, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
+var templateObject_1$D, templateObject_2$s, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$2;
 
 var RadioButtonGroupContext = /*#__PURE__*/React__default.createContext(null);
 var useRadioButtonGroup = function useRadioButtonGroup() {
@@ -20565,12 +20565,12 @@ var checkmarkIndeterminateBase = {
 
 var containerBase$3 = __assign({}, FontPackages$e.body_sans_02.base);
 
-var containerWithLabelBase$1 = __assign(__assign({}, FontPackages$e.body_sans_02.base), {
+var containerWithLabelBase = __assign(__assign({}, FontPackages$e.body_sans_02.base), {
   marginRight: Spacing$k.SizesDdsSpacingLocalX075,
   padding: "0 " + Spacing$k.SizesDdsSpacingLocalX025 + " 0 " + (FontPackages$e.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$k.SizesDdsSpacingLocalX075NumberPx) + "px"
 });
 
-var containerNoLabelBase$1 = {
+var containerNoLabelBase = {
   padding: Spacing$k.SizesDdsSpacingLocalX075 + " " + Spacing$k.SizesDdsSpacingLocalX0125 + " " + Spacing$k.SizesDdsSpacingLocalX075 + " " + Spacing$k.SizesDdsSpacingLocalX15
 };
 var checkboxTokens = {
@@ -20631,10 +20631,10 @@ var checkboxTokens = {
       width: Border$6.BordersDdsBorderStyle1StrokeWeight
     },
     withLabel: {
-      base: containerWithLabelBase$1
+      base: containerWithLabelBase
     },
     noLabel: {
-      base: containerNoLabelBase$1
+      base: containerNoLabelBase
     }
   }
 };
@@ -20672,12 +20672,12 @@ var Container$7 = styled.label.withConfig({
 }, function (_a) {
   var readOnly = _a.readOnly,
       indeterminate = _a.indeterminate;
-  return readOnly && Ae(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "], ["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "])), CustomCheckbox, checkboxTokens.checkbox.readOnly.base, CustomCheckbox, checkboxTokens.checkbox.checked.readOnly.base, indeterminate && Ae(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
+  return readOnly && Ae(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "], ["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "])), CustomCheckbox, checkboxTokens.checkbox.readOnly.base, CustomCheckbox, checkboxTokens.checkbox.checked.readOnly.base, indeterminate && Ae(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
 }, CustomCheckbox, checkboxTokens.checkmark.color, function (_a) {
   var indeterminate = _a.indeterminate;
-  return indeterminate ? Ae(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "], ["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), checkboxTokens.checkmark.base);
+  return indeterminate ? Ae(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "], ["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), checkboxTokens.checkmark.base);
 });
-var templateObject_1$y, templateObject_2$o, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13$1;
+var templateObject_1$y, templateObject_2$o, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$1;
 
 var nextUniqueId$5 = 0;
 var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -21347,7 +21347,7 @@ var ButtonWrapper$1 = styled.button.withConfig({
 var IconWithTextWrapper = styled(IconWrapper$1).withConfig({
   displayName: "Buttonstyles__IconWithTextWrapper",
   componentId: "sc-14dutqk-1"
-})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
   var size = _a.size,
       iconPosition = _a.iconPosition;
   return iconPosition === 'left' ? Ae(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n          margin-inline-end: ", ";\n        "], ["\n          margin-inline-end: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? Ae(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n          margin-inline-start: ", ";\n        "], ["\n          margin-inline-start: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : '';
@@ -21355,15 +21355,15 @@ var IconWithTextWrapper = styled(IconWrapper$1).withConfig({
 var JustIconWrapper = styled.span.withConfig({
   displayName: "Buttonstyles__JustIconWrapper",
   componentId: "sc-14dutqk-2"
-})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"])), function (_a) {
+})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"])), function (_a) {
   var size = _a.size;
-  return Ae(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), buttonTokens.sizes[size].justIconWrapper.base);
+  return Ae(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), buttonTokens.sizes[size].justIconWrapper.base);
 });
 var Label$2 = styled.span.withConfig({
   displayName: "Buttonstyles__Label",
   componentId: "sc-14dutqk-3"
 })(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
-var templateObject_1$v, templateObject_2$l, templateObject_3$f, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$2, templateObject_11$1, templateObject_12, templateObject_13;
+var templateObject_1$v, templateObject_2$l, templateObject_3$f, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13;
 
 var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
   var label = _a.label,
@@ -21659,15 +21659,15 @@ var SingleLineLabel = styled(Typography).withConfig({
 var InputContainer$2 = styled.div.withConfig({
   displayName: "Inputstyles__InputContainer",
   componentId: "sc-1oz9x8w-2"
-})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
 var OuterInputContainer = styled.div.withConfig({
   displayName: "Inputstyles__OuterInputContainer",
   componentId: "sc-1oz9x8w-3"
-})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"])), function (_a) {
+})(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"])), function (_a) {
   var width = _a.width;
   return width;
 });
-var templateObject_1$s, templateObject_2$k, templateObject_3$e, templateObject_4$c, templateObject_5$9, templateObject_6$8, templateObject_7$6, templateObject_8$3, templateObject_9$3, templateObject_10$1, templateObject_11;
+var templateObject_1$s, templateObject_2$k, templateObject_3$e, templateObject_4$c, templateObject_5$9, templateObject_6$8, templateObject_7$6, templateObject_8$3, templateObject_9$3, templateObject_10$2, templateObject_11$1;
 
 var scrollbarStyling = Ae(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  /* width */\n  &::-webkit-scrollbar {\n    width: 16px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 100px;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 100px;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Firefox */\n  scrollbar-color: ", "\n    transparent;\n  scrollbar-width: thin;\n"], ["\n  /* width */\n  &::-webkit-scrollbar {\n    width: 16px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 100px;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 100px;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Firefox */\n  scrollbar-color: ", "\n    transparent;\n  scrollbar-width: thin;\n"])), ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)');
 var templateObject_1$r;
@@ -21718,7 +21718,7 @@ var Label$1 = styled(SingleLineLabel).withConfig({
 var InputContainer$1 = styled(InputContainer$2).withConfig({
   displayName: "TextInputstyles__InputContainer",
   componentId: "sc-165zflr-3"
-})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n  height: ", ";\n"], ["\n  ", "\n  height: ", ";\n"])), function (_a) {
+})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  ", "\n  height: ", ";\n"], ["\n  ", "\n  height: ", ";\n"])), function (_a) {
   var multiline = _a.multiline;
   return multiline && Ae(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n      display: inline-block;\n    "], ["\n      display: inline-block;\n    "])));
 }, function (_a) {
@@ -21733,7 +21733,7 @@ var InputContainer$1 = styled(InputContainer$2).withConfig({
     return textInputTokens.container.multiline.noLabel.height;
   }
 });
-var templateObject_1$q, templateObject_2$j, templateObject_3$d, templateObject_4$b, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10;
+var templateObject_1$q, templateObject_2$j, templateObject_3$d, templateObject_4$b, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$1;
 
 var nextUniqueId$3 = 0;
 var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -28724,8 +28724,14 @@ var Colors$a = ddsBaseTokens.colors,
     Spacing$e = ddsBaseTokens.spacing,
     FontPackages$b = ddsBaseTokens.fontPackages,
     BorderRadius$1 = ddsBaseTokens.borderRadius,
-    Border$4 = ddsBaseTokens.border;
+    Border$4 = ddsBaseTokens.border,
+    IconSizes = ddsBaseTokens.iconSizes;
 var textDefault$6 = ddsReferenceTokens.textDefault;
+var multiValueContainerMinHeight = Spacing$e.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing$e.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages$b.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages$b.supportingStyle_inputtext_01.numbers.fontSizeNumber) + "px"; //custom spacing so that multiselect has same height as single value select
+
+var valueContainerMarginBottomMultiWithLabel = Spacing$e.SizesDdsSpacingLocalX025NumberPx + Spacing$e.SizesDdsSpacingLocalX0125NumberPx + "px"; //custom spacing so that multiselect has same height as single value select
+
+var inputMultiNoLabelPaddingTop = Spacing$e.SizesDdsSpacingLocalX05NumberPx + Spacing$e.SizesDdsSpacingLocalX0125NumberPx + "px";
 
 var labelBase = __assign({
   color: Colors$a.DdsColorNeutralsGray7,
@@ -28741,20 +28747,27 @@ var labelHoverBase = {
 var labelFocusBase = {
   color: Colors$a.DdsColorInteractiveBase
 };
+var valueContainerWithLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX075
+};
+var valueContainerNoLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX075
+};
+var valueContainerIsMultiBase = {
+  minHeight: multiValueContainerMinHeight
+};
+var valueContainerIsMultiWithLabelBase = {
+  marginBottom: valueContainerMarginBottomMultiWithLabel
+};
+var valueContainerIsMultiNoLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX05
+};
 var containerBase$2 = {
   borderRadius: BorderRadius$1.RadiiDdsBorderRadius1Radius,
   border: Border$4.BordersDdsBorderStyle1StrokeWeight + " solid",
   borderColor: Colors$a.DdsColorNeutralsGray5,
   backgroundColor: Colors$a.DdsColorNeutralsWhite
 };
-var withLabelHeight = Spacing$e.SizesDdsSpacingLocalX075NumberPx * 2 + FontPackages$b.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * FontPackages$b.supportingStyle_label_01.numbers.fontSizeNumber + FontPackages$b.supportingStyle_inputtext_02.numbers.lineHeightNumber * 0.01 * FontPackages$b.supportingStyle_inputtext_02.numbers.fontSizeNumber + Border$4.BordersDdsBorderStyle1StrokeWeightNumberPx * 2;
-var containerWithLabelBase = {
-  height: withLabelHeight + "px"
-};
-var noLabelHeight = Spacing$e.SizesDdsSpacingLocalX075NumberPx * 2 + FontPackages$b.supportingStyle_inputtext_02.numbers.lineHeightNumber * 0.01 * FontPackages$b.supportingStyle_inputtext_02.numbers.fontSizeNumber + Border$4.BordersDdsBorderStyle1StrokeWeightNumberPx * 2;
-var containerNoLabelBase = {
-  height: noLabelHeight + "px"
-};
 var containerHoverBase = {
   backgroundColor: Colors$a.DdsColorInteractiveLightest,
   borderColor: Colors$a.DdsColorInteractiveBase
@@ -28780,11 +28793,26 @@ var inputBase$1 = __assign({
 var inputNoLabelBase = {
   paddingTop: Spacing$e.SizesDdsSpacingLocalX075
 };
+var inputIsMultiNoLabelBase = {
+  paddingTop: inputMultiNoLabelPaddingTop
+};
 
 var placeholderBase = __assign({
   color: Colors$a.DdsColorNeutralsGray6
 }, FontPackages$b.supportingStyle_placeholdertext_01.base);
 
+var indicatorsContainerWithLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX1
+};
+var indicatorsContainerNoLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX075
+};
+var indicatorsContainerIsMultiWithLabelBase = {
+  marginBottom: valueContainerMarginBottomMultiWithLabel
+};
+var indicatorsContainerIsMultiNoLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX05
+};
 var dropdownIndicatorBase = {
   color: Colors$a.DdsColorNeutralsGray6,
   padding: 0
@@ -28799,6 +28827,10 @@ var clearIndicatorBase = {
   color: Colors$a.DdsColorNeutralsGray6,
   padding: " 0 " + Spacing$e.SizesDdsSpacingLocalX025 + " 0 0"
 };
+var loadingIndicatorBase = {
+  color: Colors$a.DdsColorNeutralsGray6,
+  padding: 0
+};
 var clearIndicatorHoverBase = {
   color: Colors$a.DdsColorInteractiveBase
 };
@@ -28830,6 +28862,39 @@ var noOptionsMessageBase = __assign({
   color: Colors$a.DdsColorNeutralsGray6
 }, FontPackages$b.supportingStyle_placeholdertext_01.base);
 
+var multiValueBase = {
+  borderRadius: BorderRadius$1.RadiiDdsBorderRadius1Radius,
+  margin: Spacing$e.SizesDdsSpacingLocalX0125
+};
+var multiValueEnabledBase = {
+  backgroundColor: Colors$a.DdsColorInteractiveLighter
+};
+var multiValueDisabledBase = {
+  backgroundColor: Colors$a.DdsColorNeutralsGray3
+};
+
+var multiValueLabelBase = __assign(__assign({
+  paddingTop: "" + Spacing$e.SizesDdsSpacingLocalX025,
+  paddingRight: "" + Spacing$e.SizesDdsSpacingLocalX05,
+  paddingLeft: "" + Spacing$e.SizesDdsSpacingLocalX05,
+  paddingBottom: "" + Spacing$e.SizesDdsSpacingLocalX025,
+  color: Colors$a.DdsColorNeutralsGray9
+}, FontPackages$b.supportingStyle_inputtext_01.base), {
+  fontWeight: 'bold'
+});
+
+var multiValueRemoveBase = {
+  padding: "" + Spacing$e.SizesDdsSpacingLocalX025,
+  color: Colors$a.DdsColorNeutralsGray9
+};
+var multiValueRemoveHoverBase = {
+  color: Colors$a.DdsColorNeutralsWhite,
+  backgroundColor: Colors$a.DdsColorInteractiveBase
+};
+var multiValueRemoveIconBase = {
+  height: IconSizes.DdsIconsizeSmall,
+  width: IconSizes.DdsIconsizeSmall
+};
 var containerDisabledBase = {
   backgroundColor: Colors$a.DdsColorNeutralsGray1,
   borderColor: Colors$a.DdsColorNeutralsGray5
@@ -28843,12 +28908,6 @@ var selectTokens = {
   container: {
     base: containerBase$2,
     defaultWidth: defaultWidth$1,
-    withLabel: {
-      base: containerWithLabelBase
-    },
-    noLabel: {
-      base: containerNoLabelBase
-    },
     hover: {
       base: containerHoverBase
     },
@@ -28884,6 +28943,11 @@ var selectTokens = {
     base: inputBase$1,
     noLabel: {
       base: inputNoLabelBase
+    },
+    isMulti: {
+      noLabel: {
+        base: inputIsMultiNoLabelBase
+      }
     }
   },
   placeholder: {
@@ -28906,6 +28970,60 @@ var selectTokens = {
       }
     }
   },
+  valueContainer: {
+    withLabel: {
+      base: valueContainerWithLabelBase
+    },
+    noLabel: {
+      base: valueContainerNoLabelBase
+    },
+    isMulti: {
+      base: valueContainerIsMultiBase,
+      withLabel: {
+        base: valueContainerIsMultiWithLabelBase
+      },
+      noLabel: {
+        base: valueContainerIsMultiNoLabelBase
+      }
+    }
+  },
+  multiValue: {
+    base: multiValueBase,
+    enabled: {
+      base: multiValueEnabledBase
+    },
+    disabled: {
+      base: multiValueDisabledBase
+    }
+  },
+  multiValueLabel: {
+    base: multiValueLabelBase
+  },
+  multiValueRemove: {
+    base: multiValueRemoveBase,
+    hover: {
+      base: multiValueRemoveHoverBase
+    },
+    icon: {
+      base: multiValueRemoveIconBase
+    }
+  },
+  indicatorsContainer: {
+    withLabel: {
+      base: indicatorsContainerWithLabelBase
+    },
+    noLabel: {
+      base: indicatorsContainerNoLabelBase
+    },
+    isMulti: {
+      withLabel: {
+        base: indicatorsContainerIsMultiWithLabelBase
+      },
+      noLabel: {
+        base: indicatorsContainerIsMultiNoLabelBase
+      }
+    }
+  },
   dropdownIndicator: {
     base: dropdownIndicatorBase,
     hover: {
@@ -28923,6 +29041,9 @@ var selectTokens = {
     hover: {
       base: clearIndicatorHoverBase
     }
+  },
+  loadingIndicator: {
+    base: loadingIndicatorBase
   }
 };
 
@@ -28934,30 +29055,34 @@ var Label = styled(Typography).withConfig({
 var Container$5 = styled.div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-1"
-})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"], ["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"])), selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_a) {
-  var label = _a.label;
-  return label ? Ae(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), selectTokens.container.withLabel.base) : Ae(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n          ", "\n          .", "__control {\n            ", "\n          }\n        "], ["\n          ", "\n          .", "__control {\n            ", "\n          }\n        "])), selectTokens.container.noLabel.base, prefix, selectTokens.input.noLabel.base);
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"], ["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"])), selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_a) {
+  var isMulti = _a.isMulti;
+  return isMulti && Ae(templateObject_2$i || (templateObject_2$i = __makeTemplateObject([""], [""])));
+}, function (_a) {
+  var hasLabel = _a.hasLabel,
+      isMulti = _a.isMulti;
+  return isMulti && hasLabel ? Ae(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.valueContainer.isMulti.withLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.withLabel.base) : isMulti && !hasLabel ? Ae(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.input.isMulti.noLabel.base, prefix, selectTokens.valueContainer.isMulti.noLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.noLabel.base) : hasLabel ? Ae(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.valueContainer.withLabel.base, prefix, selectTokens.indicatorsContainer.withLabel.base) : Ae(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.input.noLabel.base, prefix, selectTokens.valueContainer.noLabel.base, prefix, selectTokens.indicatorsContainer.noLabel.base);
 }, selectTokens.container.hover.base, selectTokens.container.hover.base.borderColor, Label, selectTokens.label.hover.base, selectTokens.container.focus.base, selectTokens.container.focus.base.borderColor, Label, selectTokens.label.focus.base, function (_a) {
   var errorMessage = _a.errorMessage;
-  return errorMessage && Ae(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "], ["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "])), selectTokens.container.danger.base, selectTokens.container.danger.base.borderColor, selectTokens.container.danger.hover.base, selectTokens.container.danger.hover.base.borderColor, selectTokens.container.danger.focus.base, selectTokens.container.danger.focus.base.borderColor);
+  return errorMessage && Ae(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "], ["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "])), selectTokens.container.danger.base, selectTokens.container.danger.base.borderColor, selectTokens.container.danger.hover.base, selectTokens.container.danger.hover.base.borderColor, selectTokens.container.danger.focus.base, selectTokens.container.danger.focus.base.borderColor);
 }, prefix, scrollbarStyling, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_a) {
   var isDisabled = _a.isDisabled;
-  return isDisabled && Ae(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "], ["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "])), selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
+  return isDisabled && Ae(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "], ["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "])), selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
 }, function (_a) {
   var readOnly = _a.readOnly;
-  return readOnly && Ae(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "], ["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "])), selectTokens.container.readOnly.base, selectTokens.container.readOnly.base, Label, selectTokens.label.base, prefix, prefix, selectTokens.dropdownIndicator.readOnly.base);
+  return readOnly && Ae(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "], ["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "])), selectTokens.container.readOnly.base, selectTokens.container.readOnly.base, Label, selectTokens.label.base, prefix, prefix, selectTokens.dropdownIndicator.readOnly.base);
 });
 var Wrapper$2 = styled.div.withConfig({
   displayName: "Selectstyles__Wrapper",
   componentId: "sc-19jkd5s-2"
-})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  margin: 0;\n  width: ", ";\n"], ["\n  margin: 0;\n  width: ", ";\n"])), function (_a) {
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  margin: 0;\n  width: ", ";\n"], ["\n  margin: 0;\n  width: ", ";\n"])), function (_a) {
   var width = _a.width;
   return width;
 });
 var SelectedIconWrapper = styled(IconWrapper$1).withConfig({
   displayName: "Selectstyles__SelectedIconWrapper",
   componentId: "sc-19jkd5s-3"
-})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), selectTokens.option.selected.icon.margin);
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), selectTokens.option.selected.icon.margin);
 var CustomStyles = {
   placeholder: function placeholder() {
     return __assign({}, selectTokens.placeholder.base);
@@ -28981,8 +29106,9 @@ var CustomStyles = {
       flexWrap: 'wrap'
     }, selectTokens.input.base);
   },
-  valueContainer: function valueContainer(provided) {
-    return __assign(__assign({}, provided), {
+  valueContainer: function valueContainer(provided, state) {
+    var isMultiStyles = state.selectProps.isMulti ? __assign({}, selectTokens.valueContainer.isMulti.base) : {};
+    return __assign(__assign(__assign({}, provided), isMultiStyles), {
       padding: 0
     });
   },
@@ -28991,16 +29117,34 @@ var CustomStyles = {
       margin: 0
     });
   },
-  menu: function menu() {
-    return __assign({
-      position: 'relative',
+  multiValue: function multiValue(provided, state) {
+    var variantStyles = state.selectProps.isDisabled ? __assign({}, selectTokens.multiValue.disabled.base) : __assign({}, selectTokens.multiValue.enabled.base);
+    return __assign(__assign(__assign({}, provided), selectTokens.multiValue.base), variantStyles);
+  },
+  multiValueLabel: function multiValueLabel(provided) {
+    return __assign(__assign({}, provided), selectTokens.multiValueLabel.base);
+  },
+  multiValueRemove: function multiValueRemove(provided, state) {
+    return state.selectProps.isDisabled ? {
+      display: 'none'
+    } : __assign(__assign(__assign(__assign({}, provided), {
+      transition: '0.2s'
+    }), selectTokens.multiValueRemove.base), {
+      svg: __assign({}, selectTokens.multiValueRemove.icon.base),
+      '&:hover': __assign({}, selectTokens.multiValueRemove.hover.base),
+      '&:focus': {
+        backgroundColor: 'blue'
+      }
+    });
+  },
+  menu: function menu(provided) {
+    return __assign(__assign(__assign({}, provided), {
       zIndex: 3,
       transition: '0.2s',
       width: 'calc(100% + 2px)',
       transform: 'translate(-1px)',
-      top: selectTokens.optionsList.spaceTop,
       boxShadow: "0 0 0 1px " + selectTokens.optionsList.base.borderColor
-    }, selectTokens.optionsList.base);
+    }), selectTokens.optionsList.base);
   },
   option: function option(provided, state) {
     var selectedBase = state.isSelected ? __assign({}, selectTokens.option.selected.base) : {};
@@ -29016,6 +29160,9 @@ var CustomStyles = {
   noOptionsMessage: function noOptionsMessage() {
     return __assign({}, selectTokens.noOptionsMessage.base);
   },
+  indicatorsContainer: function indicatorsContainer(provided) {
+    return __assign({}, provided);
+  },
   clearIndicator: function clearIndicator() {
     return __assign(__assign({
       display: 'flex'
@@ -29023,11 +29170,14 @@ var CustomStyles = {
       '&:hover': __assign({}, selectTokens.clearIndicator.hover.base)
     });
   },
+  loadingIndicator: function loadingIndicator(provided) {
+    return __assign(__assign({}, provided), selectTokens.loadingIndicator.base);
+  },
   input: function input() {
     return {};
   }
 };
-var templateObject_1$p, templateObject_2$i, templateObject_3$c, templateObject_4$a, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1;
+var templateObject_1$p, templateObject_2$i, templateObject_3$c, templateObject_4$a, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1, templateObject_10, templateObject_11, templateObject_12;
 
 var DdsOption = components.Option,
     NoOptionsMessage = components.NoOptionsMessage;
@@ -29065,10 +29215,12 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
       required = _a.required,
       readOnly = _a.readOnly,
       options = _a.options,
+      isMulti = _a.isMulti,
       value = _a.value,
       defaultValue = _a.defaultValue,
       _b = _a.width,
       width = _b === void 0 ? selectTokens.container.defaultWidth : _b,
+      closeMenuOnSelect = _a.closeMenuOnSelect,
       className = _a.className,
       style = _a.style,
       isDisabled = _a.isDisabled,
@@ -29076,28 +29228,33 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
       isClearable = _c === void 0 ? true : _c,
       _d = _a.placeholder,
       placeholder = _d === void 0 ? '-- Velg fra listen --' : _d,
-      rest = __rest(_a, ["id", "label", "errorMessage", "tip", "required", "readOnly", "options", "value", "defaultValue", "width", "className", "style", "isDisabled", "isClearable", "placeholder"]);
+      rest = __rest(_a, ["id", "label", "errorMessage", "tip", "required", "readOnly", "options", "isMulti", "value", "defaultValue", "width", "closeMenuOnSelect", "className", "style", "isDisabled", "isClearable", "placeholder"]);
 
   var uniqueId = useState(id !== null && id !== void 0 ? id : "select-" + nextUniqueId$2++)[0];
+  var hasLabel = !!label;
   var wrapperProps = {
     width: width
   };
   var containerProps = {
     errorMessage: errorMessage,
     isDisabled: isDisabled,
+    isMulti: isMulti,
     readOnly: readOnly,
-    label: label,
+    hasLabel: hasLabel,
     className: className,
     style: style
   };
 
   var reactSelectProps = __assign({
+    ref: ref,
     options: options,
     value: value,
     defaultValue: defaultValue,
     isDisabled: isDisabled || readOnly,
     isClearable: isClearable,
     placeholder: placeholder,
+    closeMenuOnSelect: closeMenuOnSelect ? closeMenuOnSelect : isMulti ? false : true,
+    isMulti: isMulti,
     inputId: uniqueId,
     name: uniqueId,
     classNamePrefix: prefix,
@@ -29120,9 +29277,7 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
         typographyType: "supportingStyleLabel01"
       }, {
         children: [label, " ", required && jsxRuntime.jsx(RequiredMarker, {}, void 0)]
-      }), void 0), jsxRuntime.jsx(ReactSelect, __assign({}, reactSelectProps, {
-        ref: ref
-      }), void 0)]
+      }), void 0), jsxRuntime.jsx(ReactSelect, __assign({}, reactSelectProps), void 0)]
     }), void 0), errorMessage && jsxRuntime.jsx(InputMessage, {
       messageType: "error",
       message: errorMessage

package/dist/index.js

@@ -20079,13 +20079,13 @@ var StyledTypography = styled.p.withConfig({
   return color && Ae(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), getTextColor(color));
 }, function (_a) {
   var bold = _a.bold;
-  return bold && Ae(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.bold.base);
+  return bold && Ae(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.bold.base);
 }, function (_a) {
   var italic = _a.italic;
-  return italic && Ae(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.italic.base);
+  return italic && Ae(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.italic.base);
 }, function (_a) {
   var underline = _a.underline;
-  return underline && Ae(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.underline.base);
+  return underline && Ae(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.underline.base);
 });
 var Typography = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.typographyType,
@@ -20114,7 +20114,7 @@ var Typography = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0) : '']
   }), void 0);
 });
-var templateObject_1$D, templateObject_2$s, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
+var templateObject_1$D, templateObject_2$s, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$2;
 
 var RadioButtonGroupContext = /*#__PURE__*/React__default['default'].createContext(null);
 var useRadioButtonGroup = function useRadioButtonGroup() {
@@ -20593,12 +20593,12 @@ var checkmarkIndeterminateBase = {
 
 var containerBase$3 = __assign({}, FontPackages$e.body_sans_02.base);
 
-var containerWithLabelBase$1 = __assign(__assign({}, FontPackages$e.body_sans_02.base), {
+var containerWithLabelBase = __assign(__assign({}, FontPackages$e.body_sans_02.base), {
   marginRight: Spacing$k.SizesDdsSpacingLocalX075,
   padding: "0 " + Spacing$k.SizesDdsSpacingLocalX025 + " 0 " + (FontPackages$e.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$k.SizesDdsSpacingLocalX075NumberPx) + "px"
 });
 
-var containerNoLabelBase$1 = {
+var containerNoLabelBase = {
   padding: Spacing$k.SizesDdsSpacingLocalX075 + " " + Spacing$k.SizesDdsSpacingLocalX0125 + " " + Spacing$k.SizesDdsSpacingLocalX075 + " " + Spacing$k.SizesDdsSpacingLocalX15
 };
 var checkboxTokens = {
@@ -20659,10 +20659,10 @@ var checkboxTokens = {
       width: Border$6.BordersDdsBorderStyle1StrokeWeight
     },
     withLabel: {
-      base: containerWithLabelBase$1
+      base: containerWithLabelBase
     },
     noLabel: {
-      base: containerNoLabelBase$1
+      base: containerNoLabelBase
     }
   }
 };
@@ -20700,12 +20700,12 @@ var Container$7 = styled.label.withConfig({
 }, function (_a) {
   var readOnly = _a.readOnly,
       indeterminate = _a.indeterminate;
-  return readOnly && Ae(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "], ["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "])), CustomCheckbox, checkboxTokens.checkbox.readOnly.base, CustomCheckbox, checkboxTokens.checkbox.checked.readOnly.base, indeterminate && Ae(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
+  return readOnly && Ae(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "], ["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "])), CustomCheckbox, checkboxTokens.checkbox.readOnly.base, CustomCheckbox, checkboxTokens.checkbox.checked.readOnly.base, indeterminate && Ae(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
 }, CustomCheckbox, checkboxTokens.checkmark.color, function (_a) {
   var indeterminate = _a.indeterminate;
-  return indeterminate ? Ae(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "], ["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), checkboxTokens.checkmark.base);
+  return indeterminate ? Ae(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "], ["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), checkboxTokens.checkmark.base);
 });
-var templateObject_1$y, templateObject_2$o, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13$1;
+var templateObject_1$y, templateObject_2$o, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$1;
 
 var nextUniqueId$5 = 0;
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -21375,7 +21375,7 @@ var ButtonWrapper$1 = styled.button.withConfig({
 var IconWithTextWrapper = styled(IconWrapper$1).withConfig({
   displayName: "Buttonstyles__IconWithTextWrapper",
   componentId: "sc-14dutqk-1"
-})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
   var size = _a.size,
       iconPosition = _a.iconPosition;
   return iconPosition === 'left' ? Ae(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n          margin-inline-end: ", ";\n        "], ["\n          margin-inline-end: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? Ae(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n          margin-inline-start: ", ";\n        "], ["\n          margin-inline-start: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : '';
@@ -21383,15 +21383,15 @@ var IconWithTextWrapper = styled(IconWrapper$1).withConfig({
 var JustIconWrapper = styled.span.withConfig({
   displayName: "Buttonstyles__JustIconWrapper",
   componentId: "sc-14dutqk-2"
-})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"])), function (_a) {
+})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"])), function (_a) {
   var size = _a.size;
-  return Ae(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), buttonTokens.sizes[size].justIconWrapper.base);
+  return Ae(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), buttonTokens.sizes[size].justIconWrapper.base);
 });
 var Label$2 = styled.span.withConfig({
   displayName: "Buttonstyles__Label",
   componentId: "sc-14dutqk-3"
 })(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
-var templateObject_1$v, templateObject_2$l, templateObject_3$f, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$2, templateObject_11$1, templateObject_12, templateObject_13;
+var templateObject_1$v, templateObject_2$l, templateObject_3$f, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13;
 
 var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
@@ -21687,15 +21687,15 @@ var SingleLineLabel = styled(Typography).withConfig({
 var InputContainer$2 = styled.div.withConfig({
   displayName: "Inputstyles__InputContainer",
   componentId: "sc-1oz9x8w-2"
-})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
 var OuterInputContainer = styled.div.withConfig({
   displayName: "Inputstyles__OuterInputContainer",
   componentId: "sc-1oz9x8w-3"
-})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"])), function (_a) {
+})(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"])), function (_a) {
   var width = _a.width;
   return width;
 });
-var templateObject_1$s, templateObject_2$k, templateObject_3$e, templateObject_4$c, templateObject_5$9, templateObject_6$8, templateObject_7$6, templateObject_8$3, templateObject_9$3, templateObject_10$1, templateObject_11;
+var templateObject_1$s, templateObject_2$k, templateObject_3$e, templateObject_4$c, templateObject_5$9, templateObject_6$8, templateObject_7$6, templateObject_8$3, templateObject_9$3, templateObject_10$2, templateObject_11$1;
 
 var scrollbarStyling = Ae(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  /* width */\n  &::-webkit-scrollbar {\n    width: 16px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 100px;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 100px;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Firefox */\n  scrollbar-color: ", "\n    transparent;\n  scrollbar-width: thin;\n"], ["\n  /* width */\n  &::-webkit-scrollbar {\n    width: 16px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 100px;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 100px;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Firefox */\n  scrollbar-color: ", "\n    transparent;\n  scrollbar-width: thin;\n"])), ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)');
 var templateObject_1$r;
@@ -21746,7 +21746,7 @@ var Label$1 = styled(SingleLineLabel).withConfig({
 var InputContainer$1 = styled(InputContainer$2).withConfig({
   displayName: "TextInputstyles__InputContainer",
   componentId: "sc-165zflr-3"
-})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n  height: ", ";\n"], ["\n  ", "\n  height: ", ";\n"])), function (_a) {
+})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  ", "\n  height: ", ";\n"], ["\n  ", "\n  height: ", ";\n"])), function (_a) {
   var multiline = _a.multiline;
   return multiline && Ae(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n      display: inline-block;\n    "], ["\n      display: inline-block;\n    "])));
 }, function (_a) {
@@ -21761,7 +21761,7 @@ var InputContainer$1 = styled(InputContainer$2).withConfig({
     return textInputTokens.container.multiline.noLabel.height;
   }
 });
-var templateObject_1$q, templateObject_2$j, templateObject_3$d, templateObject_4$b, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10;
+var templateObject_1$q, templateObject_2$j, templateObject_3$d, templateObject_4$b, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$1;
 
 var nextUniqueId$3 = 0;
 var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -28752,8 +28752,14 @@ var Colors$a = ddsBaseTokens.colors,
     Spacing$e = ddsBaseTokens.spacing,
     FontPackages$b = ddsBaseTokens.fontPackages,
     BorderRadius$1 = ddsBaseTokens.borderRadius,
-    Border$4 = ddsBaseTokens.border;
+    Border$4 = ddsBaseTokens.border,
+    IconSizes = ddsBaseTokens.iconSizes;
 var textDefault$6 = ddsReferenceTokens.textDefault;
+var multiValueContainerMinHeight = Spacing$e.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing$e.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages$b.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages$b.supportingStyle_inputtext_01.numbers.fontSizeNumber) + "px"; //custom spacing so that multiselect has same height as single value select
+
+var valueContainerMarginBottomMultiWithLabel = Spacing$e.SizesDdsSpacingLocalX025NumberPx + Spacing$e.SizesDdsSpacingLocalX0125NumberPx + "px"; //custom spacing so that multiselect has same height as single value select
+
+var inputMultiNoLabelPaddingTop = Spacing$e.SizesDdsSpacingLocalX05NumberPx + Spacing$e.SizesDdsSpacingLocalX0125NumberPx + "px";
 
 var labelBase = __assign({
   color: Colors$a.DdsColorNeutralsGray7,
@@ -28769,20 +28775,27 @@ var labelHoverBase = {
 var labelFocusBase = {
   color: Colors$a.DdsColorInteractiveBase
 };
+var valueContainerWithLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX075
+};
+var valueContainerNoLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX075
+};
+var valueContainerIsMultiBase = {
+  minHeight: multiValueContainerMinHeight
+};
+var valueContainerIsMultiWithLabelBase = {
+  marginBottom: valueContainerMarginBottomMultiWithLabel
+};
+var valueContainerIsMultiNoLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX05
+};
 var containerBase$2 = {
   borderRadius: BorderRadius$1.RadiiDdsBorderRadius1Radius,
   border: Border$4.BordersDdsBorderStyle1StrokeWeight + " solid",
   borderColor: Colors$a.DdsColorNeutralsGray5,
   backgroundColor: Colors$a.DdsColorNeutralsWhite
 };
-var withLabelHeight = Spacing$e.SizesDdsSpacingLocalX075NumberPx * 2 + FontPackages$b.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * FontPackages$b.supportingStyle_label_01.numbers.fontSizeNumber + FontPackages$b.supportingStyle_inputtext_02.numbers.lineHeightNumber * 0.01 * FontPackages$b.supportingStyle_inputtext_02.numbers.fontSizeNumber + Border$4.BordersDdsBorderStyle1StrokeWeightNumberPx * 2;
-var containerWithLabelBase = {
-  height: withLabelHeight + "px"
-};
-var noLabelHeight = Spacing$e.SizesDdsSpacingLocalX075NumberPx * 2 + FontPackages$b.supportingStyle_inputtext_02.numbers.lineHeightNumber * 0.01 * FontPackages$b.supportingStyle_inputtext_02.numbers.fontSizeNumber + Border$4.BordersDdsBorderStyle1StrokeWeightNumberPx * 2;
-var containerNoLabelBase = {
-  height: noLabelHeight + "px"
-};
 var containerHoverBase = {
   backgroundColor: Colors$a.DdsColorInteractiveLightest,
   borderColor: Colors$a.DdsColorInteractiveBase
@@ -28808,11 +28821,26 @@ var inputBase$1 = __assign({
 var inputNoLabelBase = {
   paddingTop: Spacing$e.SizesDdsSpacingLocalX075
 };
+var inputIsMultiNoLabelBase = {
+  paddingTop: inputMultiNoLabelPaddingTop
+};
 
 var placeholderBase = __assign({
   color: Colors$a.DdsColorNeutralsGray6
 }, FontPackages$b.supportingStyle_placeholdertext_01.base);
 
+var indicatorsContainerWithLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX1
+};
+var indicatorsContainerNoLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX075
+};
+var indicatorsContainerIsMultiWithLabelBase = {
+  marginBottom: valueContainerMarginBottomMultiWithLabel
+};
+var indicatorsContainerIsMultiNoLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX05
+};
 var dropdownIndicatorBase = {
   color: Colors$a.DdsColorNeutralsGray6,
   padding: 0
@@ -28827,6 +28855,10 @@ var clearIndicatorBase = {
   color: Colors$a.DdsColorNeutralsGray6,
   padding: " 0 " + Spacing$e.SizesDdsSpacingLocalX025 + " 0 0"
 };
+var loadingIndicatorBase = {
+  color: Colors$a.DdsColorNeutralsGray6,
+  padding: 0
+};
 var clearIndicatorHoverBase = {
   color: Colors$a.DdsColorInteractiveBase
 };
@@ -28858,6 +28890,39 @@ var noOptionsMessageBase = __assign({
   color: Colors$a.DdsColorNeutralsGray6
 }, FontPackages$b.supportingStyle_placeholdertext_01.base);
 
+var multiValueBase = {
+  borderRadius: BorderRadius$1.RadiiDdsBorderRadius1Radius,
+  margin: Spacing$e.SizesDdsSpacingLocalX0125
+};
+var multiValueEnabledBase = {
+  backgroundColor: Colors$a.DdsColorInteractiveLighter
+};
+var multiValueDisabledBase = {
+  backgroundColor: Colors$a.DdsColorNeutralsGray3
+};
+
+var multiValueLabelBase = __assign(__assign({
+  paddingTop: "" + Spacing$e.SizesDdsSpacingLocalX025,
+  paddingRight: "" + Spacing$e.SizesDdsSpacingLocalX05,
+  paddingLeft: "" + Spacing$e.SizesDdsSpacingLocalX05,
+  paddingBottom: "" + Spacing$e.SizesDdsSpacingLocalX025,
+  color: Colors$a.DdsColorNeutralsGray9
+}, FontPackages$b.supportingStyle_inputtext_01.base), {
+  fontWeight: 'bold'
+});
+
+var multiValueRemoveBase = {
+  padding: "" + Spacing$e.SizesDdsSpacingLocalX025,
+  color: Colors$a.DdsColorNeutralsGray9
+};
+var multiValueRemoveHoverBase = {
+  color: Colors$a.DdsColorNeutralsWhite,
+  backgroundColor: Colors$a.DdsColorInteractiveBase
+};
+var multiValueRemoveIconBase = {
+  height: IconSizes.DdsIconsizeSmall,
+  width: IconSizes.DdsIconsizeSmall
+};
 var containerDisabledBase = {
   backgroundColor: Colors$a.DdsColorNeutralsGray1,
   borderColor: Colors$a.DdsColorNeutralsGray5
@@ -28871,12 +28936,6 @@ var selectTokens = {
   container: {
     base: containerBase$2,
     defaultWidth: defaultWidth$1,
-    withLabel: {
-      base: containerWithLabelBase
-    },
-    noLabel: {
-      base: containerNoLabelBase
-    },
     hover: {
       base: containerHoverBase
     },
@@ -28912,6 +28971,11 @@ var selectTokens = {
     base: inputBase$1,
     noLabel: {
       base: inputNoLabelBase
+    },
+    isMulti: {
+      noLabel: {
+        base: inputIsMultiNoLabelBase
+      }
     }
   },
   placeholder: {
@@ -28934,6 +28998,60 @@ var selectTokens = {
       }
     }
   },
+  valueContainer: {
+    withLabel: {
+      base: valueContainerWithLabelBase
+    },
+    noLabel: {
+      base: valueContainerNoLabelBase
+    },
+    isMulti: {
+      base: valueContainerIsMultiBase,
+      withLabel: {
+        base: valueContainerIsMultiWithLabelBase
+      },
+      noLabel: {
+        base: valueContainerIsMultiNoLabelBase
+      }
+    }
+  },
+  multiValue: {
+    base: multiValueBase,
+    enabled: {
+      base: multiValueEnabledBase
+    },
+    disabled: {
+      base: multiValueDisabledBase
+    }
+  },
+  multiValueLabel: {
+    base: multiValueLabelBase
+  },
+  multiValueRemove: {
+    base: multiValueRemoveBase,
+    hover: {
+      base: multiValueRemoveHoverBase
+    },
+    icon: {
+      base: multiValueRemoveIconBase
+    }
+  },
+  indicatorsContainer: {
+    withLabel: {
+      base: indicatorsContainerWithLabelBase
+    },
+    noLabel: {
+      base: indicatorsContainerNoLabelBase
+    },
+    isMulti: {
+      withLabel: {
+        base: indicatorsContainerIsMultiWithLabelBase
+      },
+      noLabel: {
+        base: indicatorsContainerIsMultiNoLabelBase
+      }
+    }
+  },
   dropdownIndicator: {
     base: dropdownIndicatorBase,
     hover: {
@@ -28951,6 +29069,9 @@ var selectTokens = {
     hover: {
       base: clearIndicatorHoverBase
     }
+  },
+  loadingIndicator: {
+    base: loadingIndicatorBase
   }
 };
 
@@ -28962,30 +29083,34 @@ var Label = styled(Typography).withConfig({
 var Container$5 = styled.div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-1"
-})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"], ["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"])), selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_a) {
-  var label = _a.label;
-  return label ? Ae(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), selectTokens.container.withLabel.base) : Ae(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n          ", "\n          .", "__control {\n            ", "\n          }\n        "], ["\n          ", "\n          .", "__control {\n            ", "\n          }\n        "])), selectTokens.container.noLabel.base, prefix, selectTokens.input.noLabel.base);
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"], ["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"])), selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_a) {
+  var isMulti = _a.isMulti;
+  return isMulti && Ae(templateObject_2$i || (templateObject_2$i = __makeTemplateObject([""], [""])));
+}, function (_a) {
+  var hasLabel = _a.hasLabel,
+      isMulti = _a.isMulti;
+  return isMulti && hasLabel ? Ae(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.valueContainer.isMulti.withLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.withLabel.base) : isMulti && !hasLabel ? Ae(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.input.isMulti.noLabel.base, prefix, selectTokens.valueContainer.isMulti.noLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.noLabel.base) : hasLabel ? Ae(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.valueContainer.withLabel.base, prefix, selectTokens.indicatorsContainer.withLabel.base) : Ae(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.input.noLabel.base, prefix, selectTokens.valueContainer.noLabel.base, prefix, selectTokens.indicatorsContainer.noLabel.base);
 }, selectTokens.container.hover.base, selectTokens.container.hover.base.borderColor, Label, selectTokens.label.hover.base, selectTokens.container.focus.base, selectTokens.container.focus.base.borderColor, Label, selectTokens.label.focus.base, function (_a) {
   var errorMessage = _a.errorMessage;
-  return errorMessage && Ae(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "], ["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "])), selectTokens.container.danger.base, selectTokens.container.danger.base.borderColor, selectTokens.container.danger.hover.base, selectTokens.container.danger.hover.base.borderColor, selectTokens.container.danger.focus.base, selectTokens.container.danger.focus.base.borderColor);
+  return errorMessage && Ae(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "], ["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "])), selectTokens.container.danger.base, selectTokens.container.danger.base.borderColor, selectTokens.container.danger.hover.base, selectTokens.container.danger.hover.base.borderColor, selectTokens.container.danger.focus.base, selectTokens.container.danger.focus.base.borderColor);
 }, prefix, scrollbarStyling, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_a) {
   var isDisabled = _a.isDisabled;
-  return isDisabled && Ae(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "], ["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "])), selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
+  return isDisabled && Ae(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "], ["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "])), selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
 }, function (_a) {
   var readOnly = _a.readOnly;
-  return readOnly && Ae(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "], ["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "])), selectTokens.container.readOnly.base, selectTokens.container.readOnly.base, Label, selectTokens.label.base, prefix, prefix, selectTokens.dropdownIndicator.readOnly.base);
+  return readOnly && Ae(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "], ["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "])), selectTokens.container.readOnly.base, selectTokens.container.readOnly.base, Label, selectTokens.label.base, prefix, prefix, selectTokens.dropdownIndicator.readOnly.base);
 });
 var Wrapper$2 = styled.div.withConfig({
   displayName: "Selectstyles__Wrapper",
   componentId: "sc-19jkd5s-2"
-})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  margin: 0;\n  width: ", ";\n"], ["\n  margin: 0;\n  width: ", ";\n"])), function (_a) {
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  margin: 0;\n  width: ", ";\n"], ["\n  margin: 0;\n  width: ", ";\n"])), function (_a) {
   var width = _a.width;
   return width;
 });
 var SelectedIconWrapper = styled(IconWrapper$1).withConfig({
   displayName: "Selectstyles__SelectedIconWrapper",
   componentId: "sc-19jkd5s-3"
-})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), selectTokens.option.selected.icon.margin);
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), selectTokens.option.selected.icon.margin);
 var CustomStyles = {
   placeholder: function placeholder() {
     return __assign({}, selectTokens.placeholder.base);
@@ -29009,8 +29134,9 @@ var CustomStyles = {
       flexWrap: 'wrap'
     }, selectTokens.input.base);
   },
-  valueContainer: function valueContainer(provided) {
-    return __assign(__assign({}, provided), {
+  valueContainer: function valueContainer(provided, state) {
+    var isMultiStyles = state.selectProps.isMulti ? __assign({}, selectTokens.valueContainer.isMulti.base) : {};
+    return __assign(__assign(__assign({}, provided), isMultiStyles), {
       padding: 0
     });
   },
@@ -29019,16 +29145,34 @@ var CustomStyles = {
       margin: 0
     });
   },
-  menu: function menu() {
-    return __assign({
-      position: 'relative',
+  multiValue: function multiValue(provided, state) {
+    var variantStyles = state.selectProps.isDisabled ? __assign({}, selectTokens.multiValue.disabled.base) : __assign({}, selectTokens.multiValue.enabled.base);
+    return __assign(__assign(__assign({}, provided), selectTokens.multiValue.base), variantStyles);
+  },
+  multiValueLabel: function multiValueLabel(provided) {
+    return __assign(__assign({}, provided), selectTokens.multiValueLabel.base);
+  },
+  multiValueRemove: function multiValueRemove(provided, state) {
+    return state.selectProps.isDisabled ? {
+      display: 'none'
+    } : __assign(__assign(__assign(__assign({}, provided), {
+      transition: '0.2s'
+    }), selectTokens.multiValueRemove.base), {
+      svg: __assign({}, selectTokens.multiValueRemove.icon.base),
+      '&:hover': __assign({}, selectTokens.multiValueRemove.hover.base),
+      '&:focus': {
+        backgroundColor: 'blue'
+      }
+    });
+  },
+  menu: function menu(provided) {
+    return __assign(__assign(__assign({}, provided), {
       zIndex: 3,
       transition: '0.2s',
       width: 'calc(100% + 2px)',
       transform: 'translate(-1px)',
-      top: selectTokens.optionsList.spaceTop,
       boxShadow: "0 0 0 1px " + selectTokens.optionsList.base.borderColor
-    }, selectTokens.optionsList.base);
+    }), selectTokens.optionsList.base);
   },
   option: function option(provided, state) {
     var selectedBase = state.isSelected ? __assign({}, selectTokens.option.selected.base) : {};
@@ -29044,6 +29188,9 @@ var CustomStyles = {
   noOptionsMessage: function noOptionsMessage() {
     return __assign({}, selectTokens.noOptionsMessage.base);
   },
+  indicatorsContainer: function indicatorsContainer(provided) {
+    return __assign({}, provided);
+  },
   clearIndicator: function clearIndicator() {
     return __assign(__assign({
       display: 'flex'
@@ -29051,11 +29198,14 @@ var CustomStyles = {
       '&:hover': __assign({}, selectTokens.clearIndicator.hover.base)
     });
   },
+  loadingIndicator: function loadingIndicator(provided) {
+    return __assign(__assign({}, provided), selectTokens.loadingIndicator.base);
+  },
   input: function input() {
     return {};
   }
 };
-var templateObject_1$p, templateObject_2$i, templateObject_3$c, templateObject_4$a, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1;
+var templateObject_1$p, templateObject_2$i, templateObject_3$c, templateObject_4$a, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1, templateObject_10, templateObject_11, templateObject_12;
 
 var DdsOption = components.Option,
     NoOptionsMessage = components.NoOptionsMessage;
@@ -29093,10 +29243,12 @@ var Select = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       required = _a.required,
       readOnly = _a.readOnly,
       options = _a.options,
+      isMulti = _a.isMulti,
       value = _a.value,
       defaultValue = _a.defaultValue,
       _b = _a.width,
       width = _b === void 0 ? selectTokens.container.defaultWidth : _b,
+      closeMenuOnSelect = _a.closeMenuOnSelect,
       className = _a.className,
       style = _a.style,
       isDisabled = _a.isDisabled,
@@ -29104,28 +29256,33 @@ var Select = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       isClearable = _c === void 0 ? true : _c,
       _d = _a.placeholder,
       placeholder = _d === void 0 ? '-- Velg fra listen --' : _d,
-      rest = __rest(_a, ["id", "label", "errorMessage", "tip", "required", "readOnly", "options", "value", "defaultValue", "width", "className", "style", "isDisabled", "isClearable", "placeholder"]);
+      rest = __rest(_a, ["id", "label", "errorMessage", "tip", "required", "readOnly", "options", "isMulti", "value", "defaultValue", "width", "closeMenuOnSelect", "className", "style", "isDisabled", "isClearable", "placeholder"]);
 
   var uniqueId = React.useState(id !== null && id !== void 0 ? id : "select-" + nextUniqueId$2++)[0];
+  var hasLabel = !!label;
   var wrapperProps = {
     width: width
   };
   var containerProps = {
     errorMessage: errorMessage,
     isDisabled: isDisabled,
+    isMulti: isMulti,
     readOnly: readOnly,
-    label: label,
+    hasLabel: hasLabel,
     className: className,
     style: style
   };
 
   var reactSelectProps = __assign({
+    ref: ref,
     options: options,
     value: value,
     defaultValue: defaultValue,
     isDisabled: isDisabled || readOnly,
     isClearable: isClearable,
     placeholder: placeholder,
+    closeMenuOnSelect: closeMenuOnSelect ? closeMenuOnSelect : isMulti ? false : true,
+    isMulti: isMulti,
     inputId: uniqueId,
     name: uniqueId,
     classNamePrefix: prefix,
@@ -29148,9 +29305,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         typographyType: "supportingStyleLabel01"
       }, {
         children: [label, " ", required && jsxRuntime.jsx(RequiredMarker, {}, void 0)]
-      }), void 0), jsxRuntime.jsx(ReactSelect, __assign({}, reactSelectProps, {
-        ref: ref
-      }), void 0)]
+      }), void 0), jsxRuntime.jsx(ReactSelect, __assign({}, reactSelectProps), void 0)]
     }), void 0), errorMessage && jsxRuntime.jsx(InputMessage, {
       messageType: "error",
       message: errorMessage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "React components used in Domstolenes designsystem",
   "author": "DDS team",
   "license": "MIT",