@czi-sds/components 15.1.1 → 15.2.0

package/dist/index.cjs.d.ts

@@ -612,9 +612,11 @@ interface InputDropdownProps extends CommonThemeProps {
     open?: boolean;
     sdsStage: "default" | "userInput";
     sdsStyle?: "minimal" | "square" | "rounded";
-    sdsType?: "singleSelect" | "multiSelect";
-    details?: string;
-    counter?: string;
+    sdsType?: "label" | "value";
+    multiple?: boolean;
+    details?: ReactNode;
+    counter?: ReactNode;
+    value?: ReactNode;
     shouldTruncateMinimalDetails?: boolean;
     shouldPutAColonAfterLabel?: boolean;
 }

package/dist/index.cjs.js

@@ -605,18 +605,18 @@ var AccordionDetails = function (props) {
     return jsxRuntime.jsx(StyledAccordionDetails, { children: children });
 };
 
-var _path$1N, _path2$r, _path3$1;
+var _path$1M, _path2$q, _path3$1;
 function _extends$1T() { _extends$1T = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1T.apply(this, arguments); }
 var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1T({
     xmlns: "http://www.w3.org/2000/svg",
     width: 22,
     height: 22
-  }, props), _path$1N || (_path$1N = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1M || (_path$1M = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M11.188 13.473a1.793 1.793 0 1 1-3.585 0 1.793 1.793 0 0 1 3.585 0Zm-1.792.693a.693.693 0 1 0 0-1.385.693.693 0 0 0 0 1.385Z",
     clipRule: "evenodd"
-  })), _path2$r || (_path2$r = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$q || (_path2$q = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.06 7.332a.938.938 0 1 0 0-1.877.938.938 0 0 0 0 1.877ZM11.72 11.128a.693.693 0 0 1 .221-.954l.947-.59a.693.693 0 1 1 .733 1.176l-.947.59a.693.693 0 0 1-.954-.222ZM9.312 8.534a.693.693 0 1 0 1.366-.228L10.45 6.94a.693.693 0 1 0-1.366.228l.228 1.367Z"
   })), _path3$1 || (_path3$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
@@ -625,22 +625,27 @@ var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
   })));
 };
 
-var _path$1M, _path2$q;
+var _g$2, _defs$1;
 function _extends$1S() { _extends$1S = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1S.apply(this, arguments); }
 var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1S({
     xmlns: "http://www.w3.org/2000/svg",
     width: 14,
     height: 14
-  }, props), _path$1M || (_path$1M = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    d: "M2.87 3.263a4.615 4.615 0 0 0-.093.231L1.423 7.161a4.542 4.542 0 0 0 6.626 5.452l.7.61a1 1 0 0 0 1.315-1.506l-.574-.501c.18-.279.334-.582.454-.907L11.3 6.642c.307-.83.355-1.694.186-2.501l.573-.116a1 1 0 0 0-.398-1.96l-1.04.21a4.541 4.541 0 0 0-6.566-.634l-.548-.478A1 1 0 1 0 2.19 2.668l.68.595Zm2.408 7.747a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm3.677-6.537a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
-    clipRule: "evenodd"
-  })), _path2$q || (_path2$q = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#IconBacteriaSmall_svg__a)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M6.796 6.357a1.298 1.298 0 1 0-.002-2.597 1.298 1.298 0 0 0 .002 2.597ZM5.286 10.108a1.293 1.293 0 1 0-.001-2.586 1.293 1.293 0 0 0 .001 2.586Z"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
-    d: "m4.459 3.18-.28.648a3.186 3.186 0 0 0-.065.16l-1.337-.494c.03-.078.06-.155.093-.231l-.68-.595a1 1 0 1 1 1.317-1.505l.548.479a4.541 4.541 0 0 1 6.566.634l1.04-.211a1 1 0 1 1 .397 1.96l-.573.116.012.058a4.52 4.52 0 0 1-.198 2.443L9.944 10.31c-.12.325-.273.628-.454.907l.574.501a1 1 0 1 1-1.315 1.507l-.7-.611a4.542 4.542 0 0 1-6.626-5.452l1.354-3.667 1.337.494L2.76 7.655a3.126 3.126 0 0 0-.17.7 2.926 2.926 0 1 1 5.104 2.805l.217-.132.384-.59c.123-.19.229-.398.312-.623l1.355-3.667c.069-.188.12-.377.151-.567A2.425 2.425 0 1 1 7.82 2.05a3.117 3.117 0 0 0-2.83.667l-.531.461Zm2.319 6.33a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm1.177-4.037a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
+    d: "M2.14 3.785.335 2.075A1.069 1.069 0 0 1 .292.564 1.066 1.066 0 0 1 1.8.521L3.21 1.855a4.712 4.712 0 0 1 7.675.965l1.645-.671a1.067 1.067 0 1 1 .806 1.978l-1.91.78a4.703 4.703 0 0 1-.291 1.74l-1.378 3.734 1.666 1.54c.433.4.46 1.076.06 1.51-.4.433-1.075.46-1.508.06L8.59 12.21a4.71 4.71 0 0 1-4.918 1.04 4.718 4.718 0 0 1-2.79-6.058l1.259-3.408Zm7.418 2.28L8.15 9.88a3.031 3.031 0 0 1-3.896 1.794 3.036 3.036 0 0 1-1.795-3.898L3.867 3.96a3.031 3.031 0 0 1 3.896-1.794 3.036 3.036 0 0 1 1.795 3.899Z",
     clipRule: "evenodd"
-  })));
+  }))), _defs$1 || (_defs$1 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "IconBacteriaSmall_svg__a"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h14v14H0z"
+  })))));
 };
 
 var _path$1L;
@@ -3206,7 +3211,7 @@ var doNotForwardProps$j = [
 ];
 var StyledButtonIcon$2 = styles.styled(material.IconButton, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
-})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  padding: 0;\n\n  :focus {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  ", "\n"], ["\n  padding: 0;\n\n  :focus {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  ", "\n"])), function (props) {
+})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  padding: 0;\n\n  :focus-visible {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  ", "\n"], ["\n  padding: 0;\n\n  :focus-visible {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  ", "\n"])), function (props) {
     var on = props.on, disabled = props.disabled, sdsSize = props.sdsSize, sdsType = props.sdsType;
     return react.css(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), on && isOn(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
 });
@@ -4112,12 +4117,12 @@ var inputDropdownStyles = function (props) {
     var palette = getPalette(props);
     var spacings = getSpaces(props);
     var borders = getBorders(props);
-    return react.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n    border: ", ";\n    color: ", ";\n    cursor: pointer;\n    padding: ", "px;\n    justify-content: start;\n\n    &.MuiButton-text {\n      &:hover {\n        color: #000;\n      }\n\n      .styled-label {\n        margin-left: ", "px;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      svg {\n        margin-right: ", "px;\n        margin-left: ", "px;\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: unset;\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n\n      .styled-label {\n        color: #000;\n      }\n    }\n\n    &:active {\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:focus {\n      outline-offset: -1px;\n    }\n  "], ["\n    border: ", ";\n    color: ", ";\n    cursor: pointer;\n    padding: ", "px;\n    justify-content: start;\n\n    &.MuiButton-text {\n      &:hover {\n        color: #000;\n      }\n\n      .styled-label {\n        margin-left: ", "px;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      svg {\n        margin-right: ", "px;\n        margin-left: ", "px;\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: unset;\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n\n      .styled-label {\n        color: #000;\n      }\n    }\n\n    &:active {\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:focus {\n      outline-offset: -1px;\n    }\n  "])), borders === null || borders === void 0 ? void 0 : borders.gray[400], (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.l, colors === null || colors === void 0 ? void 0 : colors.gray[500], borders === null || borders === void 0 ? void 0 : borders.gray[500], (_b = palette === null || palette === void 0 ? void 0 : palette.text) === null || _b === void 0 ? void 0 : _b.primary, colors === null || colors === void 0 ? void 0 : colors.gray[600], borders === null || borders === void 0 ? void 0 : borders.primary[400], (_c = palette === null || palette === void 0 ? void 0 : palette.text) === null || _c === void 0 ? void 0 : _c.primary, colors === null || colors === void 0 ? void 0 : colors.primary[400]);
+    return react.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n    border: ", ";\n    color: ", ";\n    cursor: pointer;\n    padding: ", "px;\n    justify-content: start;\n\n    &.MuiButton-text {\n      &:hover {\n        color: #000;\n      }\n\n      .styled-label {\n        margin-left: ", "px;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      svg {\n        margin-right: ", "px;\n        margin-left: ", "px;\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: unset;\n      border-color: black;\n      color: ", ";\n\n      path {\n        fill: black;\n      }\n\n      .styled-label {\n        color: #000;\n      }\n    }\n\n    &:active {\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:focus {\n      outline-offset: -1px;\n    }\n  "], ["\n    border: ", ";\n    color: ", ";\n    cursor: pointer;\n    padding: ", "px;\n    justify-content: start;\n\n    &.MuiButton-text {\n      &:hover {\n        color: #000;\n      }\n\n      .styled-label {\n        margin-left: ", "px;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      svg {\n        margin-right: ", "px;\n        margin-left: ", "px;\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: unset;\n      border-color: black;\n      color: ", ";\n\n      path {\n        fill: black;\n      }\n\n      .styled-label {\n        color: #000;\n      }\n    }\n\n    &:active {\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:focus {\n      outline-offset: -1px;\n    }\n  "])), borders === null || borders === void 0 ? void 0 : borders.gray[400], (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.l, colors === null || colors === void 0 ? void 0 : colors.gray[500], (_b = palette === null || palette === void 0 ? void 0 : palette.text) === null || _b === void 0 ? void 0 : _b.primary, borders === null || borders === void 0 ? void 0 : borders.primary[400], (_c = palette === null || palette === void 0 ? void 0 : palette.text) === null || _c === void 0 ? void 0 : _c.primary, colors === null || colors === void 0 ? void 0 : colors.primary[400]);
 };
 var minimal$1 = function (props) {
     var colors = getColors(props);
     var spacings = getSpaces(props);
-    return react.css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n    ", "\n\n    /* this is needed to left align the label text */\n    align-items: flex-start;\n    border: none;\n    flex-direction: column;\n    padding: ", "px ", "px;\n\n    /* Nesting to increase CSS specificity for style override */\n    &.MuiButton-text {\n      .styled-label {\n        margin: 0;\n      }\n    }\n\n    span {\n      color: ", ";\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:active {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &.MuiButton-root.MuiButton-text > span {\n      ", "\n      margin-left: 0;\n    }\n\n    &.MuiButton-root.MuiButton-text svg {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "], ["\n    ", "\n\n    /* this is needed to left align the label text */\n    align-items: flex-start;\n    border: none;\n    flex-direction: column;\n    padding: ", "px ", "px;\n\n    /* Nesting to increase CSS specificity for style override */\n    &.MuiButton-text {\n      .styled-label {\n        margin: 0;\n      }\n    }\n\n    span {\n      color: ", ";\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:active {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &.MuiButton-root.MuiButton-text > span {\n      ", "\n      margin-left: 0;\n    }\n\n    &.MuiButton-root.MuiButton-text svg {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "])), labelStyle(props), spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[100], colors === null || colors === void 0 ? void 0 : colors.gray[100], labelFontBodyS(props), spacings === null || spacings === void 0 ? void 0 : spacings.xs);
+    return react.css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n    ", "\n\n    /* this is needed to left align the label text */\n    align-items: flex-start;\n    border: none;\n    flex-direction: column;\n    padding: ", "px ", "px;\n\n    /* Nesting to increase CSS specificity for style override */\n    &.MuiButton-text {\n      .styled-label {\n        margin: 0;\n      }\n    }\n\n    span {\n      color: ", ";\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:active {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:focus-visible {\n      outline: 5px auto Highlight;\n      outline: 5px auto -webkit-focus-ring-color;\n    }\n\n    &.MuiButton-root.MuiButton-text > span {\n      ", "\n      margin-left: 0;\n    }\n\n    &.MuiButton-root.MuiButton-text svg {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "], ["\n    ", "\n\n    /* this is needed to left align the label text */\n    align-items: flex-start;\n    border: none;\n    flex-direction: column;\n    padding: ", "px ", "px;\n\n    /* Nesting to increase CSS specificity for style override */\n    &.MuiButton-text {\n      .styled-label {\n        margin: 0;\n      }\n    }\n\n    span {\n      color: ", ";\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:active {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:focus-visible {\n      outline: 5px auto Highlight;\n      outline: 5px auto -webkit-focus-ring-color;\n    }\n\n    &.MuiButton-root.MuiButton-text > span {\n      ", "\n      margin-left: 0;\n    }\n\n    &.MuiButton-root.MuiButton-text svg {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "])), labelStyle(props), spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[100], colors === null || colors === void 0 ? void 0 : colors.gray[100], labelFontBodyS(props), spacings === null || spacings === void 0 ? void 0 : spacings.xs);
 };
 var square$1 = function (props) {
     var corners = getCorners(props);
@@ -4125,7 +4130,7 @@ var square$1 = function (props) {
 };
 var rounded$1 = function (props) {
     var corners = getCorners(props);
-    return react.css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n    ", "\n\n    border-radius: ", "px;\n    height: 34px;\n    min-width: 90px;\n  "], ["\n    ", "\n\n    border-radius: ", "px;\n    height: 34px;\n    min-width: 90px;\n  "])), labelStyle(props), corners === null || corners === void 0 ? void 0 : corners.l);
+    return react.css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n    border-radius: ", "px;\n    height: 34px;\n    min-width: 90px;\n  "], ["\n    border-radius: ", "px;\n    height: 34px;\n    min-width: 90px;\n  "])), corners === null || corners === void 0 ? void 0 : corners.l);
 };
 var userInput = function (props) {
     var _a;
@@ -4154,6 +4159,7 @@ var doNotForwardProps$b = [
     "intent",
     "open",
     "sdsStage",
+    "sdsType",
     "isMinimal",
     "shouldTruncateMinimalDetails",
     "shouldPutAColonAfterLabel",
@@ -4175,13 +4181,14 @@ var StyledLabel$1 = styles.styled("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
 })(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
-    var details = props.details, counter = props.counter;
+    var details = props.details, counter = props.counter, sdsType = props.sdsType;
     var colors = getColors(props);
     var palette = getPalette(props);
+    var fontWeights = getFontWeights(props);
     var labelColor = details || counter !== undefined
         ? (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary
         : colors === null || colors === void 0 ? void 0 : colors.gray[500];
-    return "\n      color: ".concat(labelColor, ";\n    ");
+    return "\n      color: ".concat(labelColor, ";\n\n      font-weight: ").concat(sdsType === "label" ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n    ");
 });
 var StyledCounter = styles.styled("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
@@ -4215,7 +4222,7 @@ function labelStyle(props) {
     var labelColor = props.disabled
         ? colors === null || colors === void 0 ? void 0 : colors.gray[300]
         : (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary;
-    return react.css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    &.MuiButton-text {\n      .styled-label {\n        font-weight: 600;\n        color: ", ";\n      }\n    }\n  "], ["\n    &.MuiButton-text {\n      .styled-label {\n        font-weight: 600;\n        color: ", ";\n      }\n    }\n  "])), labelColor);
+    return react.css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n  "])), labelColor);
 }
 var templateObject_1$y, templateObject_2$i, templateObject_3$9, templateObject_4$7, templateObject_5$5, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
 
@@ -4223,30 +4230,64 @@ var templateObject_1$y, templateObject_2$i, templateObject_3$9, templateObject_4
  * @see https://mui.com/material-ui/react-button/
  */
 var InputDropdown = function (props) {
-    var label = props.label, open = props.open, sdsType = props.sdsType, sdsStyle = props.sdsStyle, details = props.details, counter = props.counter, shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails, _a = props.shouldPutAColonAfterLabel, shouldPutAColonAfterLabel = _a === void 0 ? true : _a;
+    var label = props.label, open = props.open, _a = props.multiple, multiple = _a === void 0 ? false : _a, sdsStyle = props.sdsStyle, _b = props.sdsType, sdsType = _b === void 0 ? "label" : _b, details = props.details, counter = props.counter, shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails, _c = props.shouldPutAColonAfterLabel, shouldPutAColonAfterLabel = _c === void 0 ? true : _c, value = props.value;
     var isMinimal = sdsStyle === "minimal";
     if (open !== undefined) {
         // eslint-disable-next-line no-console
         console.warn("Warning: InputDropdown prop `open` has been replaced by `sdsStage` and will be deprecated.");
     }
-    var shouldRenderDetails = sdsType === "singleSelect" && details && !isMinimal;
-    var shouldRenderCounter = sdsType === "multiSelect" && counter !== undefined && !isMinimal;
-    return (jsxRuntime.jsxs(StyledInputDropdown, __assign({}, props, { children: [jsxRuntime.jsxs(LabelWrapper, { isMinimal: isMinimal, children: [jsxRuntime.jsx(StyledLabel$1, { className: "styled-label", details: details, counter: counter, children: renderLabelText({
+    var shouldRenderDetails = !multiple && (details || value) && !isMinimal;
+    var shouldRenderInlineMinimalDetails = isMinimal && sdsType === "value" && !multiple;
+    var shouldRenderMinimalDetails = isMinimal && sdsType === "label";
+    var shouldRenderCounter = multiple && counter !== undefined && counter !== "0" && !isMinimal;
+    return (jsxRuntime.jsxs(StyledInputDropdown, __assign({}, props, { children: [jsxRuntime.jsxs(LabelWrapper, { isMinimal: isMinimal, children: [jsxRuntime.jsx(StyledLabel$1, { className: "styled-label", details: details, counter: counter, sdsType: sdsType, children: renderLabelText({
                             counter: counter,
                             details: details,
                             isMinimal: isMinimal,
                             label: label,
+                            multiple: multiple,
+                            sdsType: sdsType,
                             shouldPutAColonAfterLabel: shouldPutAColonAfterLabel,
-                        }) }), shouldRenderDetails && jsxRuntime.jsx(StyledDetail, { children: details }), shouldRenderCounter && jsxRuntime.jsx(StyledCounter, { children: counter }), jsxRuntime.jsx(IconWrapper, { children: jsxRuntime.jsx(Icon, { sdsIcon: "chevronDown", sdsSize: "s", sdsType: "interactive" }) })] }), isMinimal && (jsxRuntime.jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: details }))] })));
+                            value: value,
+                        }) }), shouldRenderDetails && (jsxRuntime.jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsxRuntime.jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && jsxRuntime.jsx(StyledCounter, { children: counter }), jsxRuntime.jsx(IconWrapper, { children: jsxRuntime.jsx(Icon, { sdsIcon: "chevronDown", sdsSize: "s", sdsType: "interactive" }) })] }), shouldRenderMinimalDetails && (jsxRuntime.jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
 };
-function renderLabelText(_a) {
-    var counter = _a.counter, details = _a.details, isMinimal = _a.isMinimal, label = _a.label, shouldPutAColonAfterLabel = _a.shouldPutAColonAfterLabel;
-    if (isMinimal) {
+function renderLabelText(props) {
+    var sdsType = props.sdsType;
+    if (sdsType === "label") {
+        return renderLabelTypeLabelText(props);
+    }
+    if (sdsType === "value") {
+        return renderValueTypeLabelText(props);
+    }
+    return null;
+}
+function renderLabelTypeLabelText(_a) {
+    var isMinimal = _a.isMinimal, label = _a.label, counter = _a.counter, value = _a.value, shouldPutAColonAfterLabel = _a.shouldPutAColonAfterLabel;
+    if (isMinimal)
         return label;
+    return (counter || value) && shouldPutAColonAfterLabel ? "".concat(label, ":") : label;
+}
+function renderValueTypeLabelText(_a) {
+    var value = _a.value, multiple = _a.multiple, isMinimal = _a.isMinimal, label = _a.label, counter = _a.counter, details = _a.details, shouldPutAColonAfterLabel = _a.shouldPutAColonAfterLabel;
+    if (!value || multiple) {
+        if (isMinimal)
+            return label;
+        return counter && shouldPutAColonAfterLabel ? "".concat(label, ":") : label;
+    }
+    if (isMinimal)
+        return value;
+    return (counter || details) && shouldPutAColonAfterLabel
+        ? "".concat(value, ":")
+        : value;
+}
+function renderDetailsText(_a) {
+    var details = _a.details, sdsType = _a.sdsType, value = _a.value;
+    if (sdsType === "label" && value) {
+        return value;
+    }
+    else if (sdsType === "value") {
+        return details;
     }
-    return (counter !== undefined || details) && shouldPutAColonAfterLabel
-        ? "".concat(label, ":")
-        : label;
 }
 
 var withoutIcon = function (props) {
@@ -5369,9 +5410,10 @@ var templateObject_1$c, templateObject_2$5;
  * @returns Object containing the visibility status of each observed item.
  */
 function useInView(items) {
-    // If IntersectionObserver is not available (e.g., in a test environment),
+    // If the window object is not available (e.g., in a node environment) or
+    // If the IntersectionObserver is not available (e.g., in a test environment),
     // return a default result indicating that all elements are not in view
-    if (!window.IntersectionObserver) {
+    if (typeof window === "undefined" || !window.IntersectionObserver) {
         return items.map(function (item) {
             return {
                 el: item.elementRef,

package/dist/index.esm.d.ts

@@ -612,9 +612,11 @@ interface InputDropdownProps extends CommonThemeProps {
     open?: boolean;
     sdsStage: "default" | "userInput";
     sdsStyle?: "minimal" | "square" | "rounded";
-    sdsType?: "singleSelect" | "multiSelect";
-    details?: string;
-    counter?: string;
+    sdsType?: "label" | "value";
+    multiple?: boolean;
+    details?: ReactNode;
+    counter?: ReactNode;
+    value?: ReactNode;
     shouldTruncateMinimalDetails?: boolean;
     shouldPutAColonAfterLabel?: boolean;
 }

package/dist/index.esm.js

@@ -585,18 +585,18 @@ var AccordionDetails = function (props) {
     return jsx(StyledAccordionDetails, { children: children });
 };
 
-var _path$1N, _path2$r, _path3$1;
+var _path$1M, _path2$q, _path3$1;
 function _extends$1T() { _extends$1T = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1T.apply(this, arguments); }
 var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1T({
     xmlns: "http://www.w3.org/2000/svg",
     width: 22,
     height: 22
-  }, props), _path$1N || (_path$1N = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1M || (_path$1M = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M11.188 13.473a1.793 1.793 0 1 1-3.585 0 1.793 1.793 0 0 1 3.585 0Zm-1.792.693a.693.693 0 1 0 0-1.385.693.693 0 0 0 0 1.385Z",
     clipRule: "evenodd"
-  })), _path2$r || (_path2$r = /*#__PURE__*/React.createElement("path", {
+  })), _path2$q || (_path2$q = /*#__PURE__*/React.createElement("path", {
     d: "M13.06 7.332a.938.938 0 1 0 0-1.877.938.938 0 0 0 0 1.877ZM11.72 11.128a.693.693 0 0 1 .221-.954l.947-.59a.693.693 0 1 1 .733 1.176l-.947.59a.693.693 0 0 1-.954-.222ZM9.312 8.534a.693.693 0 1 0 1.366-.228L10.45 6.94a.693.693 0 1 0-1.366.228l.228 1.367Z"
   })), _path3$1 || (_path3$1 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
@@ -605,22 +605,27 @@ var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
   })));
 };
 
-var _path$1M, _path2$q;
+var _g$2, _defs$1;
 function _extends$1S() { _extends$1S = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1S.apply(this, arguments); }
 var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1S({
     xmlns: "http://www.w3.org/2000/svg",
     width: 14,
     height: 14
-  }, props), _path$1M || (_path$1M = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M2.87 3.263a4.615 4.615 0 0 0-.093.231L1.423 7.161a4.542 4.542 0 0 0 6.626 5.452l.7.61a1 1 0 0 0 1.315-1.506l-.574-.501c.18-.279.334-.582.454-.907L11.3 6.642c.307-.83.355-1.694.186-2.501l.573-.116a1 1 0 0 0-.398-1.96l-1.04.21a4.541 4.541 0 0 0-6.566-.634l-.548-.478A1 1 0 1 0 2.19 2.668l.68.595Zm2.408 7.747a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm3.677-6.537a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
-    clipRule: "evenodd"
-  })), _path2$q || (_path2$q = /*#__PURE__*/React.createElement("path", {
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#IconBacteriaSmall_svg__a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6.796 6.357a1.298 1.298 0 1 0-.002-2.597 1.298 1.298 0 0 0 .002 2.597ZM5.286 10.108a1.293 1.293 0 1 0-.001-2.586 1.293 1.293 0 0 0 .001 2.586Z"
+  }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "m4.459 3.18-.28.648a3.186 3.186 0 0 0-.065.16l-1.337-.494c.03-.078.06-.155.093-.231l-.68-.595a1 1 0 1 1 1.317-1.505l.548.479a4.541 4.541 0 0 1 6.566.634l1.04-.211a1 1 0 1 1 .397 1.96l-.573.116.012.058a4.52 4.52 0 0 1-.198 2.443L9.944 10.31c-.12.325-.273.628-.454.907l.574.501a1 1 0 1 1-1.315 1.507l-.7-.611a4.542 4.542 0 0 1-6.626-5.452l1.354-3.667 1.337.494L2.76 7.655a3.126 3.126 0 0 0-.17.7 2.926 2.926 0 1 1 5.104 2.805l.217-.132.384-.59c.123-.19.229-.398.312-.623l1.355-3.667c.069-.188.12-.377.151-.567A2.425 2.425 0 1 1 7.82 2.05a3.117 3.117 0 0 0-2.83.667l-.531.461Zm2.319 6.33a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm1.177-4.037a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
+    d: "M2.14 3.785.335 2.075A1.069 1.069 0 0 1 .292.564 1.066 1.066 0 0 1 1.8.521L3.21 1.855a4.712 4.712 0 0 1 7.675.965l1.645-.671a1.067 1.067 0 1 1 .806 1.978l-1.91.78a4.703 4.703 0 0 1-.291 1.74l-1.378 3.734 1.666 1.54c.433.4.46 1.076.06 1.51-.4.433-1.075.46-1.508.06L8.59 12.21a4.71 4.71 0 0 1-4.918 1.04 4.718 4.718 0 0 1-2.79-6.058l1.259-3.408Zm7.418 2.28L8.15 9.88a3.031 3.031 0 0 1-3.896 1.794 3.036 3.036 0 0 1-1.795-3.898L3.867 3.96a3.031 3.031 0 0 1 3.896-1.794 3.036 3.036 0 0 1 1.795 3.899Z",
     clipRule: "evenodd"
-  })));
+  }))), _defs$1 || (_defs$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "IconBacteriaSmall_svg__a"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h14v14H0z"
+  })))));
 };
 
 var _path$1L;
@@ -3186,7 +3191,7 @@ var doNotForwardProps$j = [
 ];
 var StyledButtonIcon$2 = styled(IconButton, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
-})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  padding: 0;\n\n  :focus {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  ", "\n"], ["\n  padding: 0;\n\n  :focus {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  ", "\n"])), function (props) {
+})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  padding: 0;\n\n  :focus-visible {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  ", "\n"], ["\n  padding: 0;\n\n  :focus-visible {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  ", "\n"])), function (props) {
     var on = props.on, disabled = props.disabled, sdsSize = props.sdsSize, sdsType = props.sdsType;
     return css(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), on && isOn(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
 });
@@ -4092,12 +4097,12 @@ var inputDropdownStyles = function (props) {
     var palette = getPalette(props);
     var spacings = getSpaces(props);
     var borders = getBorders(props);
-    return css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n    border: ", ";\n    color: ", ";\n    cursor: pointer;\n    padding: ", "px;\n    justify-content: start;\n\n    &.MuiButton-text {\n      &:hover {\n        color: #000;\n      }\n\n      .styled-label {\n        margin-left: ", "px;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      svg {\n        margin-right: ", "px;\n        margin-left: ", "px;\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: unset;\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n\n      .styled-label {\n        color: #000;\n      }\n    }\n\n    &:active {\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:focus {\n      outline-offset: -1px;\n    }\n  "], ["\n    border: ", ";\n    color: ", ";\n    cursor: pointer;\n    padding: ", "px;\n    justify-content: start;\n\n    &.MuiButton-text {\n      &:hover {\n        color: #000;\n      }\n\n      .styled-label {\n        margin-left: ", "px;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      svg {\n        margin-right: ", "px;\n        margin-left: ", "px;\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: unset;\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n\n      .styled-label {\n        color: #000;\n      }\n    }\n\n    &:active {\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:focus {\n      outline-offset: -1px;\n    }\n  "])), borders === null || borders === void 0 ? void 0 : borders.gray[400], (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.l, colors === null || colors === void 0 ? void 0 : colors.gray[500], borders === null || borders === void 0 ? void 0 : borders.gray[500], (_b = palette === null || palette === void 0 ? void 0 : palette.text) === null || _b === void 0 ? void 0 : _b.primary, colors === null || colors === void 0 ? void 0 : colors.gray[600], borders === null || borders === void 0 ? void 0 : borders.primary[400], (_c = palette === null || palette === void 0 ? void 0 : palette.text) === null || _c === void 0 ? void 0 : _c.primary, colors === null || colors === void 0 ? void 0 : colors.primary[400]);
+    return css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n    border: ", ";\n    color: ", ";\n    cursor: pointer;\n    padding: ", "px;\n    justify-content: start;\n\n    &.MuiButton-text {\n      &:hover {\n        color: #000;\n      }\n\n      .styled-label {\n        margin-left: ", "px;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      svg {\n        margin-right: ", "px;\n        margin-left: ", "px;\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: unset;\n      border-color: black;\n      color: ", ";\n\n      path {\n        fill: black;\n      }\n\n      .styled-label {\n        color: #000;\n      }\n    }\n\n    &:active {\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:focus {\n      outline-offset: -1px;\n    }\n  "], ["\n    border: ", ";\n    color: ", ";\n    cursor: pointer;\n    padding: ", "px;\n    justify-content: start;\n\n    &.MuiButton-text {\n      &:hover {\n        color: #000;\n      }\n\n      .styled-label {\n        margin-left: ", "px;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      svg {\n        margin-right: ", "px;\n        margin-left: ", "px;\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: unset;\n      border-color: black;\n      color: ", ";\n\n      path {\n        fill: black;\n      }\n\n      .styled-label {\n        color: #000;\n      }\n    }\n\n    &:active {\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:focus {\n      outline-offset: -1px;\n    }\n  "])), borders === null || borders === void 0 ? void 0 : borders.gray[400], (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.l, colors === null || colors === void 0 ? void 0 : colors.gray[500], (_b = palette === null || palette === void 0 ? void 0 : palette.text) === null || _b === void 0 ? void 0 : _b.primary, borders === null || borders === void 0 ? void 0 : borders.primary[400], (_c = palette === null || palette === void 0 ? void 0 : palette.text) === null || _c === void 0 ? void 0 : _c.primary, colors === null || colors === void 0 ? void 0 : colors.primary[400]);
 };
 var minimal$1 = function (props) {
     var colors = getColors(props);
     var spacings = getSpaces(props);
-    return css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n    ", "\n\n    /* this is needed to left align the label text */\n    align-items: flex-start;\n    border: none;\n    flex-direction: column;\n    padding: ", "px ", "px;\n\n    /* Nesting to increase CSS specificity for style override */\n    &.MuiButton-text {\n      .styled-label {\n        margin: 0;\n      }\n    }\n\n    span {\n      color: ", ";\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:active {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &.MuiButton-root.MuiButton-text > span {\n      ", "\n      margin-left: 0;\n    }\n\n    &.MuiButton-root.MuiButton-text svg {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "], ["\n    ", "\n\n    /* this is needed to left align the label text */\n    align-items: flex-start;\n    border: none;\n    flex-direction: column;\n    padding: ", "px ", "px;\n\n    /* Nesting to increase CSS specificity for style override */\n    &.MuiButton-text {\n      .styled-label {\n        margin: 0;\n      }\n    }\n\n    span {\n      color: ", ";\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:active {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &.MuiButton-root.MuiButton-text > span {\n      ", "\n      margin-left: 0;\n    }\n\n    &.MuiButton-root.MuiButton-text svg {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "])), labelStyle(props), spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[100], colors === null || colors === void 0 ? void 0 : colors.gray[100], labelFontBodyS(props), spacings === null || spacings === void 0 ? void 0 : spacings.xs);
+    return css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n    ", "\n\n    /* this is needed to left align the label text */\n    align-items: flex-start;\n    border: none;\n    flex-direction: column;\n    padding: ", "px ", "px;\n\n    /* Nesting to increase CSS specificity for style override */\n    &.MuiButton-text {\n      .styled-label {\n        margin: 0;\n      }\n    }\n\n    span {\n      color: ", ";\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:active {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:focus-visible {\n      outline: 5px auto Highlight;\n      outline: 5px auto -webkit-focus-ring-color;\n    }\n\n    &.MuiButton-root.MuiButton-text > span {\n      ", "\n      margin-left: 0;\n    }\n\n    &.MuiButton-root.MuiButton-text svg {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "], ["\n    ", "\n\n    /* this is needed to left align the label text */\n    align-items: flex-start;\n    border: none;\n    flex-direction: column;\n    padding: ", "px ", "px;\n\n    /* Nesting to increase CSS specificity for style override */\n    &.MuiButton-text {\n      .styled-label {\n        margin: 0;\n      }\n    }\n\n    span {\n      color: ", ";\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:active {\n      background-color: ", ";\n      border: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:focus-visible {\n      outline: 5px auto Highlight;\n      outline: 5px auto -webkit-focus-ring-color;\n    }\n\n    &.MuiButton-root.MuiButton-text > span {\n      ", "\n      margin-left: 0;\n    }\n\n    &.MuiButton-root.MuiButton-text svg {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "])), labelStyle(props), spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[100], colors === null || colors === void 0 ? void 0 : colors.gray[100], labelFontBodyS(props), spacings === null || spacings === void 0 ? void 0 : spacings.xs);
 };
 var square$1 = function (props) {
     var corners = getCorners(props);
@@ -4105,7 +4110,7 @@ var square$1 = function (props) {
 };
 var rounded$1 = function (props) {
     var corners = getCorners(props);
-    return css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n    ", "\n\n    border-radius: ", "px;\n    height: 34px;\n    min-width: 90px;\n  "], ["\n    ", "\n\n    border-radius: ", "px;\n    height: 34px;\n    min-width: 90px;\n  "])), labelStyle(props), corners === null || corners === void 0 ? void 0 : corners.l);
+    return css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n    border-radius: ", "px;\n    height: 34px;\n    min-width: 90px;\n  "], ["\n    border-radius: ", "px;\n    height: 34px;\n    min-width: 90px;\n  "])), corners === null || corners === void 0 ? void 0 : corners.l);
 };
 var userInput = function (props) {
     var _a;
@@ -4134,6 +4139,7 @@ var doNotForwardProps$b = [
     "intent",
     "open",
     "sdsStage",
+    "sdsType",
     "isMinimal",
     "shouldTruncateMinimalDetails",
     "shouldPutAColonAfterLabel",
@@ -4155,13 +4161,14 @@ var StyledLabel$1 = styled("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
 })(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
-    var details = props.details, counter = props.counter;
+    var details = props.details, counter = props.counter, sdsType = props.sdsType;
     var colors = getColors(props);
     var palette = getPalette(props);
+    var fontWeights = getFontWeights(props);
     var labelColor = details || counter !== undefined
         ? (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary
         : colors === null || colors === void 0 ? void 0 : colors.gray[500];
-    return "\n      color: ".concat(labelColor, ";\n    ");
+    return "\n      color: ".concat(labelColor, ";\n\n      font-weight: ").concat(sdsType === "label" ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n    ");
 });
 var StyledCounter = styled("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
@@ -4195,7 +4202,7 @@ function labelStyle(props) {
     var labelColor = props.disabled
         ? colors === null || colors === void 0 ? void 0 : colors.gray[300]
         : (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary;
-    return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    &.MuiButton-text {\n      .styled-label {\n        font-weight: 600;\n        color: ", ";\n      }\n    }\n  "], ["\n    &.MuiButton-text {\n      .styled-label {\n        font-weight: 600;\n        color: ", ";\n      }\n    }\n  "])), labelColor);
+    return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n  "])), labelColor);
 }
 var templateObject_1$y, templateObject_2$i, templateObject_3$9, templateObject_4$7, templateObject_5$5, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
 
@@ -4203,30 +4210,64 @@ var templateObject_1$y, templateObject_2$i, templateObject_3$9, templateObject_4
  * @see https://mui.com/material-ui/react-button/
  */
 var InputDropdown = function (props) {
-    var label = props.label, open = props.open, sdsType = props.sdsType, sdsStyle = props.sdsStyle, details = props.details, counter = props.counter, shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails, _a = props.shouldPutAColonAfterLabel, shouldPutAColonAfterLabel = _a === void 0 ? true : _a;
+    var label = props.label, open = props.open, _a = props.multiple, multiple = _a === void 0 ? false : _a, sdsStyle = props.sdsStyle, _b = props.sdsType, sdsType = _b === void 0 ? "label" : _b, details = props.details, counter = props.counter, shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails, _c = props.shouldPutAColonAfterLabel, shouldPutAColonAfterLabel = _c === void 0 ? true : _c, value = props.value;
     var isMinimal = sdsStyle === "minimal";
     if (open !== undefined) {
         // eslint-disable-next-line no-console
         console.warn("Warning: InputDropdown prop `open` has been replaced by `sdsStage` and will be deprecated.");
     }
-    var shouldRenderDetails = sdsType === "singleSelect" && details && !isMinimal;
-    var shouldRenderCounter = sdsType === "multiSelect" && counter !== undefined && !isMinimal;
-    return (jsxs(StyledInputDropdown, __assign({}, props, { children: [jsxs(LabelWrapper, { isMinimal: isMinimal, children: [jsx(StyledLabel$1, { className: "styled-label", details: details, counter: counter, children: renderLabelText({
+    var shouldRenderDetails = !multiple && (details || value) && !isMinimal;
+    var shouldRenderInlineMinimalDetails = isMinimal && sdsType === "value" && !multiple;
+    var shouldRenderMinimalDetails = isMinimal && sdsType === "label";
+    var shouldRenderCounter = multiple && counter !== undefined && counter !== "0" && !isMinimal;
+    return (jsxs(StyledInputDropdown, __assign({}, props, { children: [jsxs(LabelWrapper, { isMinimal: isMinimal, children: [jsx(StyledLabel$1, { className: "styled-label", details: details, counter: counter, sdsType: sdsType, children: renderLabelText({
                             counter: counter,
                             details: details,
                             isMinimal: isMinimal,
                             label: label,
+                            multiple: multiple,
+                            sdsType: sdsType,
                             shouldPutAColonAfterLabel: shouldPutAColonAfterLabel,
-                        }) }), shouldRenderDetails && jsx(StyledDetail, { children: details }), shouldRenderCounter && jsx(StyledCounter, { children: counter }), jsx(IconWrapper, { children: jsx(Icon, { sdsIcon: "chevronDown", sdsSize: "s", sdsType: "interactive" }) })] }), isMinimal && (jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: details }))] })));
+                            value: value,
+                        }) }), shouldRenderDetails && (jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && jsx(StyledCounter, { children: counter }), jsx(IconWrapper, { children: jsx(Icon, { sdsIcon: "chevronDown", sdsSize: "s", sdsType: "interactive" }) })] }), shouldRenderMinimalDetails && (jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
 };
-function renderLabelText(_a) {
-    var counter = _a.counter, details = _a.details, isMinimal = _a.isMinimal, label = _a.label, shouldPutAColonAfterLabel = _a.shouldPutAColonAfterLabel;
-    if (isMinimal) {
+function renderLabelText(props) {
+    var sdsType = props.sdsType;
+    if (sdsType === "label") {
+        return renderLabelTypeLabelText(props);
+    }
+    if (sdsType === "value") {
+        return renderValueTypeLabelText(props);
+    }
+    return null;
+}
+function renderLabelTypeLabelText(_a) {
+    var isMinimal = _a.isMinimal, label = _a.label, counter = _a.counter, value = _a.value, shouldPutAColonAfterLabel = _a.shouldPutAColonAfterLabel;
+    if (isMinimal)
         return label;
+    return (counter || value) && shouldPutAColonAfterLabel ? "".concat(label, ":") : label;
+}
+function renderValueTypeLabelText(_a) {
+    var value = _a.value, multiple = _a.multiple, isMinimal = _a.isMinimal, label = _a.label, counter = _a.counter, details = _a.details, shouldPutAColonAfterLabel = _a.shouldPutAColonAfterLabel;
+    if (!value || multiple) {
+        if (isMinimal)
+            return label;
+        return counter && shouldPutAColonAfterLabel ? "".concat(label, ":") : label;
+    }
+    if (isMinimal)
+        return value;
+    return (counter || details) && shouldPutAColonAfterLabel
+        ? "".concat(value, ":")
+        : value;
+}
+function renderDetailsText(_a) {
+    var details = _a.details, sdsType = _a.sdsType, value = _a.value;
+    if (sdsType === "label" && value) {
+        return value;
+    }
+    else if (sdsType === "value") {
+        return details;
     }
-    return (counter !== undefined || details) && shouldPutAColonAfterLabel
-        ? "".concat(label, ":")
-        : label;
 }
 
 var withoutIcon = function (props) {
@@ -5349,9 +5390,10 @@ var templateObject_1$c, templateObject_2$5;
  * @returns Object containing the visibility status of each observed item.
  */
 function useInView(items) {
-    // If IntersectionObserver is not available (e.g., in a test environment),
+    // If the window object is not available (e.g., in a node environment) or
+    // If the IntersectionObserver is not available (e.g., in a test environment),
     // return a default result indicating that all elements are not in view
-    if (!window.IntersectionObserver) {
+    if (typeof window === "undefined" || !window.IntersectionObserver) {
         return items.map(function (item) {
             return {
                 el: item.elementRef,

package/dist/src/common/helpers/scrollStop.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Custom hook that listens for scroll stop events and triggers a callback function.
+ *
+ * @param callback - The callback function to be executed when scrolling stops.
+ * @param timeout - The duration (in milliseconds) after which the callback is triggered when scrolling stops. Default is 50ms.
+ */
+declare const useScrollStopListener: (callback: () => void, timeout?: number) => void;
+export default useScrollStopListener;

package/dist/src/common/helpers/scrollStop.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+/**
+ * Creates a scroll stop listener with a given callback and timeout.
+ *
+ * @param callback - The callback function to be executed when scrolling stops.
+ * @param timeout - The duration (in milliseconds) after which the callback is triggered when scrolling stops. Default is 50ms.
+ * @returns A function to destroy the scroll stop listener and clean up the event listener.
+ */
+var createScrollStopListener = function (callback, timeout) {
+    if (timeout === void 0) { timeout = 50; }
+    var removed = false;
+    var handle = null;
+    var onScroll = function () {
+        if (handle) {
+            clearTimeout(handle);
+        }
+        handle = setTimeout(callback, timeout);
+    };
+    // Attach scroll event listener to the specified element
+    document.addEventListener("scroll", onScroll, true);
+    return function () {
+        if (removed) {
+            return;
+        }
+        removed = true;
+        if (handle) {
+            clearTimeout(handle);
+        }
+        // Remove the scroll event listener from the element
+        document.removeEventListener("scroll", onScroll);
+    };
+};
+/**
+ * Custom hook that listens for scroll stop events and triggers a callback function.
+ *
+ * @param callback - The callback function to be executed when scrolling stops.
+ * @param timeout - The duration (in milliseconds) after which the callback is triggered when scrolling stops. Default is 50ms.
+ */
+var useScrollStopListener = function (callback, timeout) {
+    if (timeout === void 0) { timeout = 50; }
+    var callbackRef = (0, react_1.useRef)();
+    callbackRef.current = callback;
+    (0, react_1.useEffect)(function () {
+        var destroyListener = createScrollStopListener(function () {
+            if (callbackRef.current) {
+                callbackRef.current();
+            }
+        }, timeout);
+        return function () { return destroyListener(); };
+    }, []);
+};
+exports.default = useScrollStopListener;

package/dist/src/common/storybookConstants.d.ts

@@ -0,0 +1,3 @@
+export interface Template {
+    args: Record<string, never>;
+}

package/dist/src/common/storybookConstants.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/common/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const noop: () => void;
+export declare const toKebabCase: (str: string) => string;

package/dist/src/common/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toKebabCase = exports.noop = void 0;
+var noop = function () { };
+exports.noop = noop;
+var toKebabCase = function (str) {
+    return str.replace(/[\s_]+/g, "-").toLowerCase();
+};
+exports.toKebabCase = toKebabCase;