@laerdal/life-react-components 3.5.2 → 3.5.3

package/dist/Dropdown/CommonStyling.cjs

@@ -14,95 +14,31 @@ var _typography = require("../styles/typography");
 var _zIndexes = require("../styles/z-indexes");
 var _TooltipStyles = require("../Tooltips/TooltipStyles");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var DropdownContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n\n  ", "\n  ", "\n  ", "\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ", ";\n  }\n\n  input:hover + div {\n    color: ", ";\n  }\n\n  input:active + div {\n    color: ", ";\n  }\n\n\n"])), function (props) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n\n  ", "\n  ", "\n  ", "\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ", ";\n  }\n\n  input:hover + div {\n    color: ", ";\n  }\n\n  input:active + div {\n    color: ", ";\n  }\n\n\n"])), function (props) {
   return !props.isButton && (props !== null && props !== void 0 && props.minWidth ? "width: 100%; min-width: ".concat(props.minWidth, ";") : 'width: 100%; min-width: 344px;');
 }, function (props) {
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : 'margin-bottom: 4px;';
-}, _zIndexes.Z_INDEXES.focus, function (props) {
-  return _styles.COLORS.getColor('primary_600', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_800', props.theme);
-});
+}, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_600, _styles.COLORS.primary_800);
 exports.DropdownContainer = DropdownContainer;
-var lockedState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ", " !important;\n  }\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n"])), function (props) {
-  return _styles.COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_600', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_600', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-});
-var disabledState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n\n  input {\n    color: ", " !important;\n\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), function (props) {
-  return _styles.COLORS.getColor('white', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-});
-var activeValidationMessage = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), function (props) {
-  return _styles.COLORS.getColor('critical_400', props.theme);
-});
-var placeholderStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (props) {
-  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_600', props.theme));
-});
-var DropdownInputField = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  min-width: 0px;\n  color: ", " !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\n  ", "\n  \n  ::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n"])), function (props) {
-  return _styles.COLORS.getColor('black', props.theme);
-}, function (props) {
+var lockedState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ", " !important;\n  }\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600, _styles.COLORS.neutral_600, _styles.COLORS.neutral_300);
+var disabledState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n\n  input {\n    color: ", " !important;\n\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
+var activeValidationMessage = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.critical_400);
+var placeholderStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600));
+var DropdownInputField = _styledComponents.default.input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  min-width: 0px;\n  color: ", " !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\n  ", "\n  \n  ::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n"])), _styles.COLORS.black, function (props) {
   return props.ellipsis ? 'text-overflow: ellipsis;' : '';
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_600', props.theme);
-});
+}, _styles.COLORS.neutral_600);
 exports.DropdownInputField = DropdownInputField;
-var DropdownInputFieldStyles = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ", ";\n  width: 100%;\n\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  ", "\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ", ";\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n  }\n\n  &.button {\n    ", "\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ", ";\n      background: ", ";\n    }\n  }\n\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", ";\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ", " !important;\n    ", "\n  }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), function (props) {
+var DropdownInputFieldStyles = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ", ";\n  width: 100%;\n\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  ", "\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ", ";\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n  }\n\n  &.button {\n    ", "\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ", ";\n      background: ", ";\n    }\n  }\n\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", ";\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ", " !important;\n    ", "\n  }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), function (props) {
   return props.minWidth ? "".concat(props.minWidth) : '344px';
-}, function (props) {
-  return _styles.COLORS.getColor('white', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_400', props.theme);
-}, (0, _TooltipStyles.TooltipTrigger)('hover'), function (props) {
-  return (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_600', props.theme));
-}, _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), function (props) {
-  return (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_600', props.theme));
-}, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), function (props) {
-  return (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_600', props.theme));
-}, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), function (props) {
-  return (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_600', props.theme));
-}, function (props) {
-  return props.isPlaceholder ? _styles.COLORS.getColor('neutral_600', props.theme) : undefined;
-}, function (props) {
-  return _styles.COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_200', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_600', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_600', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_300', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, props.disabled ? _styles.COLORS.getColor('neutral_300', props.theme) : _styles.COLORS.getColor('neutral_600', props.theme));
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_800', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_20', props.theme);
-}, function (props) {
+}, _styles.COLORS.white, _styles.COLORS.neutral_400, (0, _TooltipStyles.TooltipTrigger)('hover'), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), function (props) {
+  return props.isPlaceholder ? _styles.COLORS.neutral_600 : undefined;
+}, _styles.COLORS.primary_800, _styles.COLORS.primary_200, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.COLORS.primary_300, _styles.COLORS.primary_800, _styles.COLORS.primary_800, function (props) {
+  return (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, props.disabled ? _styles.COLORS.neutral_300 : _styles.COLORS.neutral_600);
+}, _styles.COLORS.neutral_800, _styles.COLORS.neutral_20, function (props) {
   return props.disabled ? disabledState : '';
 }, function (props) {
   return props.readOnly ? lockedState : '';
@@ -112,32 +48,16 @@ var DropdownInputFieldStyles = _styledComponents["default"].div(_templateObject7
   return props.isPlaceholder ? placeholderStyling : '';
 }, _common.CommonInteractionStyling, _zIndexes.Z_INDEXES.dropdown + 1, _styles.focusStyles);
 exports.DropdownInputFieldStyles = DropdownInputFieldStyles;
-var DropdownContentButtonStyling = (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  min-width: 344px;\n"])));
+var DropdownContentButtonStyling = (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 344px;\n"])));
 exports.DropdownContentButtonStyling = DropdownContentButtonStyling;
-var DropdownButtonTextContent = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n"])));
+var DropdownButtonTextContent = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n"])));
 exports.DropdownButtonTextContent = DropdownButtonTextContent;
-var DropdownButtonTextIcon = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 24px;\n  height: 24px;\n"])));
+var DropdownButtonTextIcon = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  width: 24px;\n  height: 24px;\n"])));
 exports.DropdownButtonTextIcon = DropdownButtonTextIcon;
-var DropdownButtonTextArrow = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n"])));
+var DropdownButtonTextArrow = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n"])));
 exports.DropdownButtonTextArrow = DropdownButtonTextArrow;
-var DropdownButtonTextStyles = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1\n"])));
+var DropdownButtonTextStyles = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1\n"])));
 exports.DropdownButtonTextStyles = DropdownButtonTextStyles;
-var DropdownButtonTextWrapper = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ", "\n\n  .expanded {\n    color: ", ";\n\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:hover:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ", ";\n  }\n\n}"])), function (props) {
-  return (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme));
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_800', props.theme);
-}, DropdownButtonTextContent, function (props) {
-  return _styles.COLORS.getColor('neutral_20', props.theme);
-}, _styles.focusStyles, DropdownButtonTextContent, function (props) {
-  return _styles.COLORS.getColor('primary_20', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_700', props.theme);
-}, DropdownButtonTextContent, function (props) {
-  return _styles.COLORS.getColor('primary_100', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-});
+var DropdownButtonTextWrapper = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ", "\n\n  .expanded {\n    color: ", ";\n\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:hover:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ", ";\n  }\n\n}"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.COLORS.neutral_800, DropdownButtonTextContent, _styles.COLORS.neutral_20, _styles.focusStyles, DropdownButtonTextContent, _styles.COLORS.primary_20, _styles.COLORS.primary_700, DropdownButtonTextContent, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300);
 exports.DropdownButtonTextWrapper = DropdownButtonTextWrapper;
 //# sourceMappingURL=CommonStyling.cjs.map

package/dist/Dropdown/CommonStyling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyling.cjs","names":["_styledComponents","_interopRequireWildcard","require","_common","_styles","_typography","_zIndexes","_TooltipStyles","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DropdownContainer","styled","div","_taggedTemplateLiteral2","props","isButton","minWidth","concat","readOnly","disabled","margin","Z_INDEXES","focus","COLORS","getColor","theme","exports","lockedState","css","disabledState","activeValidationMessage","placeholderStyling","ComponentMStyling","ComponentTextStyle","Italic","DropdownInputField","input","ellipsis","DropdownInputFieldStyles","ComponentSStyling","Regular","TooltipTrigger","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","isPlaceholder","undefined","Bold","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\r\nimport {CommonInteractionStyling} from '../common';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\n\r\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\r\n  display: inline-block;\r\n\r\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\r\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\r\n  .show {\r\n    display: block;\r\n  }\r\n\r\n  .value {\r\n    flex-grow: 1;\r\n  }\r\n\r\n  &:focus-within {\r\n    z-index: ${Z_INDEXES.focus};\r\n  }\r\n\r\n  input:hover + div {\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n  }\r\n\r\n  input:active + div {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n\r\n`;\r\n\r\nconst lockedState = css`\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  input {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n`;\r\n\r\nconst disabledState = css`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  .dropdown-arrow {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n\r\n  input {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n\r\n    ::placeholder {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    }\r\n  }\r\n`;\r\n\r\nconst activeValidationMessage = css`\r\n  box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n`;\r\n\r\nconst placeholderStyling = css`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\r\n  border: none;\r\n  outline: none;\r\n  background-color: inherit;\r\n  cursor: pointer;\r\n  min-width: 0px;\r\n  color: ${props => COLORS.getColor('black', props.theme)} !important;\r\n  padding: 0;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\r\n  \r\n  ::placeholder {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n    font-style: italic;\r\n  }\r\n\r\n  ::-webkit-search-decoration,\r\n  ::-webkit-search-cancel-button,\r\n  ::-webkit-search-results-button,\r\n  ::-webkit-search-results-decoration {\r\n    -webkit-appearance: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; minWidth?: string }>`\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n\r\n  padding: 12px 16px;\r\n  height: 48px;\r\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\r\n  width: 100%;\r\n\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  box-sizing: border-box;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  position: relative;\r\n\r\n  input {\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n    color: inherit;\r\n  }\r\n\r\n  ${TooltipTrigger('hover')}\r\n\r\n  &::placeholder {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 16px;\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 12px 16px;\r\n    height: 48px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    height: 56px;\r\n    padding: 16px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    pointer-events: none;\r\n    width: 24px;\r\n    height: 24px;\r\n    color: ${(props) => props.isPlaceholder ? COLORS.getColor('neutral_600', props.theme) : undefined};\r\n  }\r\n\r\n  &:focus {\r\n    outline: 3px solid #ddd;\r\n  }\r\n\r\n  &:focus-within,\r\n  &.focus-visible-within {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:hover:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('primary_200', props.theme)};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n\r\n    cursor: pointer;\r\n  }\r\n\r\n  &:active:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('primary_300', props.theme)};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.button {\r\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.getColor('neutral_300', props.theme) : COLORS.getColor('neutral_600', props.theme))}\r\n\r\n    box-sizing: border-box;\r\n    height: 32px;\r\n    padding: 0 8px;\r\n    width: initial;\r\n    min-width: initial;\r\n    border: none !important;\r\n    box-shadow: none;\r\n    border-radius: 4px;\r\n\r\n    &.expanded {\r\n      color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  ${(props) => (props.disabled ? disabledState : '')}\r\n  ${(props) => (props.readOnly ? lockedState : '')}\r\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\r\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\r\n\r\n  ${CommonInteractionStyling};\r\n\r\n  &.focus-visible,\r\n  &.focus-visible-within {\r\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const DropdownContentButtonStyling = css`\r\n  min-width: 344px;\r\n`;\r\n\r\n\r\n\r\nexport const DropdownButtonTextContent = styled.div`\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  min-width: 64px;\r\n  min-height: 32px;\r\n  padding: 4px 8px;\r\n  border-radius: 4px;\r\n`;\r\n\r\nexport const DropdownButtonTextIcon = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n`;\r\n\r\nexport const DropdownButtonTextArrow = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  svg {\r\n    pointer-events: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownButtonTextStyles = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nexport const DropdownButtonTextWrapper = styled.div`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  cursor: pointer;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  .expanded {\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    ${DropdownButtonTextContent} {\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  }\r\n\r\n}`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CommonStyling.cjs","names":["DropdownContainer","styled","div","props","isButton","minWidth","readOnly","disabled","margin","Z_INDEXES","focus","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","Italic","DropdownInputField","input","black","ellipsis","DropdownInputFieldStyles","ComponentSStyling","Regular","neutral_400","TooltipTrigger","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\r\nimport {CommonInteractionStyling} from '../common';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\n\r\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\r\n  display: inline-block;\r\n\r\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\r\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\r\n  .show {\r\n    display: block;\r\n  }\r\n\r\n  .value {\r\n    flex-grow: 1;\r\n  }\r\n\r\n  &:focus-within {\r\n    z-index: ${Z_INDEXES.focus};\r\n  }\r\n\r\n  input:hover + div {\r\n    color: ${COLORS.primary_600};\r\n  }\r\n\r\n  input:active + div {\r\n    color: ${COLORS.primary_800};\r\n  }\r\n\r\n\r\n`;\r\n\r\nconst lockedState = css`\r\n  background-color: ${COLORS.neutral_100};\r\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\r\n  color: ${COLORS.neutral_600};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  input {\r\n    color: ${COLORS.neutral_600} !important;\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n`;\r\n\r\nconst disabledState = css`\r\n  background-color: ${COLORS.white};\r\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\r\n  color: ${COLORS.neutral_300};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  .dropdown-arrow {\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n\r\n  input {\r\n    color: ${COLORS.neutral_300} !important;\r\n\r\n    ::placeholder {\r\n      color: ${COLORS.neutral_300} !important;\r\n    }\r\n  }\r\n`;\r\n\r\nconst activeValidationMessage = css`\r\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\r\n`;\r\n\r\nconst placeholderStyling = css`\r\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n`;\r\n\r\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\r\n  border: none;\r\n  outline: none;\r\n  background-color: inherit;\r\n  cursor: pointer;\r\n  min-width: 0px;\r\n  color: ${COLORS.black} !important;\r\n  padding: 0;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\r\n  \r\n  ::placeholder {\r\n    color: ${COLORS.neutral_600};\r\n    font-style: italic;\r\n  }\r\n\r\n  ::-webkit-search-decoration,\r\n  ::-webkit-search-cancel-button,\r\n  ::-webkit-search-results-button,\r\n  ::-webkit-search-results-decoration {\r\n    -webkit-appearance: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n\r\n  padding: 12px 16px;\r\n  height: 48px;\r\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\r\n  width: 100%;\r\n\r\n  background: ${COLORS.white};\r\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\r\n  box-sizing: border-box;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  position: relative;\r\n\r\n  input {\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n    color: inherit;\r\n  }\r\n\r\n  ${TooltipTrigger('hover')}\r\n\r\n  &::placeholder {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 16px;\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 12px 16px;\r\n    height: 48px;\r\n\r\n    &::placeholder {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    height: 56px;\r\n    padding: 16px;\r\n\r\n    &::placeholder {\r\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    pointer-events: none;\r\n    width: 24px;\r\n    height: 24px;\r\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\r\n  }\r\n\r\n  &:focus {\r\n    outline: 3px solid #ddd;\r\n  }\r\n\r\n  &:focus-within,\r\n  &.focus-visible-within {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &:hover:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${COLORS.primary_600};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${COLORS.primary_600};\r\n    }\r\n\r\n    cursor: pointer;\r\n  }\r\n\r\n  &:active:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.button {\r\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\r\n\r\n    box-sizing: border-box;\r\n    height: 32px;\r\n    padding: 0 8px;\r\n    width: initial;\r\n    min-width: initial;\r\n    border: none !important;\r\n    box-shadow: none;\r\n    border-radius: 4px;\r\n\r\n    &.expanded {\r\n      color: ${COLORS.neutral_800};\r\n      background: ${COLORS.neutral_20};\r\n    }\r\n  }\r\n\r\n\r\n  ${(props) => (props.disabled ? disabledState : '')}\r\n  ${(props) => (props.readOnly ? lockedState : '')}\r\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\r\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\r\n\r\n  ${CommonInteractionStyling};\r\n\r\n  &.focus-visible,\r\n  &.focus-visible-within {\r\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const DropdownContentButtonStyling = css`\r\n  min-width: 344px;\r\n`;\r\n\r\n\r\n\r\nexport const DropdownButtonTextContent = styled.div`\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  min-width: 64px;\r\n  min-height: 32px;\r\n  padding: 4px 8px;\r\n  border-radius: 4px;\r\n`;\r\n\r\nexport const DropdownButtonTextIcon = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n`;\r\n\r\nexport const DropdownButtonTextArrow = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  svg {\r\n    pointer-events: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownButtonTextStyles = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nexport const DropdownButtonTextWrapper = styled.div`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  cursor: pointer;\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n\r\n  .expanded {\r\n    color: ${COLORS.neutral_800};\r\n\r\n    ${DropdownButtonTextContent} {\r\n      background: ${COLORS.neutral_20};\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${COLORS.primary_20};\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    color: ${COLORS.neutral_300};\r\n  }\r\n\r\n}`;\r\n"],"mappings":"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"}

package/dist/Dropdown/CommonStyling.d.ts

@@ -13,6 +13,7 @@ export declare const DropdownInputFieldStyles: import("styled-components").Style
     readOnly: boolean;
     showValidationMessage?: boolean | undefined;
     isPlaceholder?: boolean | undefined;
+    fontSize?: string | undefined;
     minWidth?: string | undefined;
 }, never>;
 export declare const DropdownContentButtonStyling: import("styled-components").FlattenSimpleInterpolation;

package/dist/Dropdown/CommonStyling.js

@@ -12,85 +12,21 @@ export var DropdownContainer = styled.div(_templateObject || (_templateObject =
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : 'margin-bottom: 4px;';
-}, Z_INDEXES.focus, function (props) {
-  return COLORS.getColor('primary_600', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-});
-var lockedState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ", " !important;\n  }\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n"])), function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_600', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_600', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-});
-var disabledState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n\n  input {\n    color: ", " !important;\n\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), function (props) {
-  return COLORS.getColor('white', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-});
-var activeValidationMessage = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), function (props) {
-  return COLORS.getColor('critical_400', props.theme);
-});
-var placeholderStyling = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
-  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
-});
-export var DropdownInputField = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  min-width: 0px;\n  color: ", " !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\n  ", "\n  \n  ::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n"])), function (props) {
-  return COLORS.getColor('black', props.theme);
-}, function (props) {
+}, Z_INDEXES.focus, COLORS.primary_600, COLORS.primary_800);
+var lockedState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ", " !important;\n  }\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600, COLORS.neutral_600, COLORS.neutral_300);
+var disabledState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n\n  input {\n    color: ", " !important;\n\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), COLORS.white, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
+var activeValidationMessage = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.critical_400);
+var placeholderStyling = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
+export var DropdownInputField = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  min-width: 0px;\n  color: ", " !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\n  ", "\n  \n  ::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n"])), COLORS.black, function (props) {
   return props.ellipsis ? 'text-overflow: ellipsis;' : '';
-}, function (props) {
-  return COLORS.getColor('neutral_600', props.theme);
-});
+}, COLORS.neutral_600);
 export var DropdownInputFieldStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ", ";\n  width: 100%;\n\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  ", "\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ", ";\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n  }\n\n  &.button {\n    ", "\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ", ";\n      background: ", ";\n    }\n  }\n\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", ";\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ", " !important;\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), function (props) {
   return props.minWidth ? "".concat(props.minWidth) : '344px';
-}, function (props) {
-  return COLORS.getColor('white', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_400', props.theme);
-}, TooltipTrigger('hover'), function (props) {
-  return ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
-}, BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), function (props) {
-  return ComponentXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
-}, ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), function (props) {
-  return ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
-}, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), function (props) {
-  return ComponentXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
-}, function (props) {
-  return props.isPlaceholder ? COLORS.getColor('neutral_600', props.theme) : undefined;
-}, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_200', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_600', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_600', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_300', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.getColor('neutral_300', props.theme) : COLORS.getColor('neutral_600', props.theme));
-}, function (props) {
-  return COLORS.getColor('neutral_800', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_20', props.theme);
-}, function (props) {
+}, COLORS.white, COLORS.neutral_400, TooltipTrigger('hover'), ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), function (props) {
+  return props.isPlaceholder ? COLORS.neutral_600 : undefined;
+}, COLORS.primary_800, COLORS.primary_200, COLORS.primary_600, COLORS.primary_600, COLORS.primary_300, COLORS.primary_800, COLORS.primary_800, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600);
+}, COLORS.neutral_800, COLORS.neutral_20, function (props) {
   return props.disabled ? disabledState : '';
 }, function (props) {
   return props.readOnly ? lockedState : '';
@@ -104,21 +40,5 @@ export var DropdownButtonTextContent = styled.div(_templateObject9 || (_template
 export var DropdownButtonTextIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n"])));
 export var DropdownButtonTextArrow = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n"])));
 export var DropdownButtonTextStyles = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  flex: 1\n"])));
-export var DropdownButtonTextWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ", "\n\n  .expanded {\n    color: ", ";\n\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:hover:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ", ";\n  }\n\n}"])), function (props) {
-  return ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme));
-}, function (props) {
-  return COLORS.getColor('neutral_800', props.theme);
-}, DropdownButtonTextContent, function (props) {
-  return COLORS.getColor('neutral_20', props.theme);
-}, focusStyles, DropdownButtonTextContent, function (props) {
-  return COLORS.getColor('primary_20', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-}, DropdownButtonTextContent, function (props) {
-  return COLORS.getColor('primary_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-});
+export var DropdownButtonTextWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ", "\n\n  .expanded {\n    color: ", ";\n\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:hover:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ", ";\n  }\n\n}"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.neutral_800, DropdownButtonTextContent, COLORS.neutral_20, focusStyles, DropdownButtonTextContent, COLORS.primary_20, COLORS.primary_700, DropdownButtonTextContent, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300);
 //# sourceMappingURL=CommonStyling.js.map

package/dist/Dropdown/CommonStyling.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyling.js","names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","TooltipTrigger","DropdownContainer","div","_templateObject","_taggedTemplateLiteral","props","isButton","minWidth","concat","readOnly","disabled","margin","focus","getColor","theme","lockedState","_templateObject2","disabledState","_templateObject3","activeValidationMessage","_templateObject4","placeholderStyling","_templateObject5","Italic","DropdownInputField","input","_templateObject6","ellipsis","DropdownInputFieldStyles","_templateObject7","Regular","MEDIUM","isPlaceholder","undefined","Bold","showValidationMessage","dropdown","DropdownContentButtonStyling","_templateObject8","DropdownButtonTextContent","_templateObject9","DropdownButtonTextIcon","_templateObject10","DropdownButtonTextArrow","_templateObject11","DropdownButtonTextStyles","_templateObject12","DropdownButtonTextWrapper","_templateObject13"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\r\nimport {CommonInteractionStyling} from '../common';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\n\r\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\r\n  display: inline-block;\r\n\r\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\r\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\r\n  .show {\r\n    display: block;\r\n  }\r\n\r\n  .value {\r\n    flex-grow: 1;\r\n  }\r\n\r\n  &:focus-within {\r\n    z-index: ${Z_INDEXES.focus};\r\n  }\r\n\r\n  input:hover + div {\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n  }\r\n\r\n  input:active + div {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n\r\n`;\r\n\r\nconst lockedState = css`\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  input {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n`;\r\n\r\nconst disabledState = css`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  .dropdown-arrow {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n\r\n  input {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n\r\n    ::placeholder {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    }\r\n  }\r\n`;\r\n\r\nconst activeValidationMessage = css`\r\n  box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n`;\r\n\r\nconst placeholderStyling = css`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\r\n  border: none;\r\n  outline: none;\r\n  background-color: inherit;\r\n  cursor: pointer;\r\n  min-width: 0px;\r\n  color: ${props => COLORS.getColor('black', props.theme)} !important;\r\n  padding: 0;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\r\n  \r\n  ::placeholder {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n    font-style: italic;\r\n  }\r\n\r\n  ::-webkit-search-decoration,\r\n  ::-webkit-search-cancel-button,\r\n  ::-webkit-search-results-button,\r\n  ::-webkit-search-results-decoration {\r\n    -webkit-appearance: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; minWidth?: string }>`\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n\r\n  padding: 12px 16px;\r\n  height: 48px;\r\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\r\n  width: 100%;\r\n\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  box-sizing: border-box;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  position: relative;\r\n\r\n  input {\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n    color: inherit;\r\n  }\r\n\r\n  ${TooltipTrigger('hover')}\r\n\r\n  &::placeholder {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 16px;\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 12px 16px;\r\n    height: 48px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    height: 56px;\r\n    padding: 16px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    pointer-events: none;\r\n    width: 24px;\r\n    height: 24px;\r\n    color: ${(props) => props.isPlaceholder ? COLORS.getColor('neutral_600', props.theme) : undefined};\r\n  }\r\n\r\n  &:focus {\r\n    outline: 3px solid #ddd;\r\n  }\r\n\r\n  &:focus-within,\r\n  &.focus-visible-within {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:hover:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('primary_200', props.theme)};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n\r\n    cursor: pointer;\r\n  }\r\n\r\n  &:active:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('primary_300', props.theme)};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.button {\r\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.getColor('neutral_300', props.theme) : COLORS.getColor('neutral_600', props.theme))}\r\n\r\n    box-sizing: border-box;\r\n    height: 32px;\r\n    padding: 0 8px;\r\n    width: initial;\r\n    min-width: initial;\r\n    border: none !important;\r\n    box-shadow: none;\r\n    border-radius: 4px;\r\n\r\n    &.expanded {\r\n      color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  ${(props) => (props.disabled ? disabledState : '')}\r\n  ${(props) => (props.readOnly ? lockedState : '')}\r\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\r\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\r\n\r\n  ${CommonInteractionStyling};\r\n\r\n  &.focus-visible,\r\n  &.focus-visible-within {\r\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const DropdownContentButtonStyling = css`\r\n  min-width: 344px;\r\n`;\r\n\r\n\r\n\r\nexport const DropdownButtonTextContent = styled.div`\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  min-width: 64px;\r\n  min-height: 32px;\r\n  padding: 4px 8px;\r\n  border-radius: 4px;\r\n`;\r\n\r\nexport const DropdownButtonTextIcon = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n`;\r\n\r\nexport const DropdownButtonTextArrow = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  svg {\r\n    pointer-events: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownButtonTextStyles = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nexport const DropdownButtonTextWrapper = styled.div`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  cursor: pointer;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  .expanded {\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    ${DropdownButtonTextContent} {\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  }\r\n\r\n}`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CommonStyling.js","names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","TooltipTrigger","DropdownContainer","div","props","isButton","minWidth","readOnly","disabled","margin","focus","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","Italic","DropdownInputField","input","black","ellipsis","DropdownInputFieldStyles","Regular","neutral_400","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","dropdown","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\r\nimport {CommonInteractionStyling} from '../common';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\n\r\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\r\n  display: inline-block;\r\n\r\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\r\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\r\n  .show {\r\n    display: block;\r\n  }\r\n\r\n  .value {\r\n    flex-grow: 1;\r\n  }\r\n\r\n  &:focus-within {\r\n    z-index: ${Z_INDEXES.focus};\r\n  }\r\n\r\n  input:hover + div {\r\n    color: ${COLORS.primary_600};\r\n  }\r\n\r\n  input:active + div {\r\n    color: ${COLORS.primary_800};\r\n  }\r\n\r\n\r\n`;\r\n\r\nconst lockedState = css`\r\n  background-color: ${COLORS.neutral_100};\r\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\r\n  color: ${COLORS.neutral_600};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  input {\r\n    color: ${COLORS.neutral_600} !important;\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n`;\r\n\r\nconst disabledState = css`\r\n  background-color: ${COLORS.white};\r\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\r\n  color: ${COLORS.neutral_300};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  .dropdown-arrow {\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n\r\n  input {\r\n    color: ${COLORS.neutral_300} !important;\r\n\r\n    ::placeholder {\r\n      color: ${COLORS.neutral_300} !important;\r\n    }\r\n  }\r\n`;\r\n\r\nconst activeValidationMessage = css`\r\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\r\n`;\r\n\r\nconst placeholderStyling = css`\r\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n`;\r\n\r\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\r\n  border: none;\r\n  outline: none;\r\n  background-color: inherit;\r\n  cursor: pointer;\r\n  min-width: 0px;\r\n  color: ${COLORS.black} !important;\r\n  padding: 0;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\r\n  \r\n  ::placeholder {\r\n    color: ${COLORS.neutral_600};\r\n    font-style: italic;\r\n  }\r\n\r\n  ::-webkit-search-decoration,\r\n  ::-webkit-search-cancel-button,\r\n  ::-webkit-search-results-button,\r\n  ::-webkit-search-results-decoration {\r\n    -webkit-appearance: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n\r\n  padding: 12px 16px;\r\n  height: 48px;\r\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\r\n  width: 100%;\r\n\r\n  background: ${COLORS.white};\r\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\r\n  box-sizing: border-box;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  position: relative;\r\n\r\n  input {\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n    color: inherit;\r\n  }\r\n\r\n  ${TooltipTrigger('hover')}\r\n\r\n  &::placeholder {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 16px;\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 12px 16px;\r\n    height: 48px;\r\n\r\n    &::placeholder {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    height: 56px;\r\n    padding: 16px;\r\n\r\n    &::placeholder {\r\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    pointer-events: none;\r\n    width: 24px;\r\n    height: 24px;\r\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\r\n  }\r\n\r\n  &:focus {\r\n    outline: 3px solid #ddd;\r\n  }\r\n\r\n  &:focus-within,\r\n  &.focus-visible-within {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &:hover:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${COLORS.primary_600};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${COLORS.primary_600};\r\n    }\r\n\r\n    cursor: pointer;\r\n  }\r\n\r\n  &:active:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.button {\r\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\r\n\r\n    box-sizing: border-box;\r\n    height: 32px;\r\n    padding: 0 8px;\r\n    width: initial;\r\n    min-width: initial;\r\n    border: none !important;\r\n    box-shadow: none;\r\n    border-radius: 4px;\r\n\r\n    &.expanded {\r\n      color: ${COLORS.neutral_800};\r\n      background: ${COLORS.neutral_20};\r\n    }\r\n  }\r\n\r\n\r\n  ${(props) => (props.disabled ? disabledState : '')}\r\n  ${(props) => (props.readOnly ? lockedState : '')}\r\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\r\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\r\n\r\n  ${CommonInteractionStyling};\r\n\r\n  &.focus-visible,\r\n  &.focus-visible-within {\r\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const DropdownContentButtonStyling = css`\r\n  min-width: 344px;\r\n`;\r\n\r\n\r\n\r\nexport const DropdownButtonTextContent = styled.div`\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  min-width: 64px;\r\n  min-height: 32px;\r\n  padding: 4px 8px;\r\n  border-radius: 4px;\r\n`;\r\n\r\nexport const DropdownButtonTextIcon = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n`;\r\n\r\nexport const DropdownButtonTextArrow = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  svg {\r\n    pointer-events: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownButtonTextStyles = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nexport const DropdownButtonTextWrapper = styled.div`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  cursor: pointer;\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n\r\n  .expanded {\r\n    color: ${COLORS.neutral_800};\r\n\r\n    ${DropdownButtonTextContent} {\r\n      background: ${COLORS.neutral_20};\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${COLORS.primary_20};\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    color: ${COLORS.neutral_300};\r\n  }\r\n\r\n}`;\r\n"],"mappings":"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"}

package/dist/Dropdown/DropdownButton.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.DropdownButtonContainer = void 0;
+exports.default = exports.DropdownButtonContainer = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -19,18 +19,9 @@ var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value", "id", "dataTestId"];
 var _templateObject;
-/**
- * Import React libraries.
- */
-/**
- * Import custom components.
- */
-/**
- * Import custom types.
- */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var DropdownButtonContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n"])));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var DropdownButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n"])));
 exports.DropdownButtonContainer = DropdownButtonContainer;
 var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var items = _ref.items,
@@ -59,26 +50,26 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     value = _ref.value,
     id = _ref.id,
     dataTestId = _ref.dataTestId,
-    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Globally used variables within the view.
   var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     dropdownOpen = _React$useState2[0],
     setDropdownOpen = _React$useState2[1];
   var _React$useState3 = React.useState(),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
     activeDescendant = _React$useState4[0],
     setActiveDescendant = _React$useState4[1];
   var _React$useState5 = React.useState([]),
-    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
     selectedValues = _React$useState6[0],
     setSelectedValues = _React$useState6[1];
   var _React$useState7 = React.useState(null),
-    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
     focused = _React$useState8[0],
     setFocused = _React$useState8[1];
   var _React$useState9 = React.useState(false),
-    _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
+    _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
     keyboardNavigated = _React$useState10[0],
     setKeyboardNavigated = _React$useState10[1];
   var dropdownRef = React.useRef(null);
@@ -175,7 +166,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownButtonContainer, {
     className: className,
     ref: containerRef,
-    children: [renderButton(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent["default"], {
+    children: [renderButton(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
       ref: dropdownRef,
       ariaRolesType: "menu",
       containerRef: containerRef,
@@ -214,5 +205,5 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
 });
 var _default = DropdownButton;
-exports["default"] = _default;
+exports.default = _default;
 //# sourceMappingURL=DropdownButton.cjs.map