@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.13

package/dist/Dropdown/BasicDropdown.js

@@ -1,153 +1,305 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import { COLORS } from '../styles';
-import { SystemIcons } from '../icons';
-import { LoadingIndicator } from '../LoadingIndicator';
-import { DropdownContainer, DropdownInputFieldStyles, DropdownInputField } from './CommonStyling';
-import DropdownContent from './DropdownContent';
-import { AutofilledMessage, ErrorMessage } from '../InputFields';
-import TooltipOverflow from '../Tooltips/TooltipOverflow';
-import { Size } from '../types';
-import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef } from '../common';
-import { useFocusOutsideRef } from '../common';
-var BasicDropdown = React.forwardRef(function (props, ref) {
-    var id = props.id, list = props.list, placeholder = props.placeholder, messageOnNoResults = props.messageOnNoResults, _a = props.itemsType, itemsType = _a === void 0 ? 'normal' : _a, action = props.action, actionLabel = props.actionLabel, actionVariant = props.actionVariant, actionIcon = props.actionIcon, actionLoading = props.actionLoading, actionDisabled = props.actionDisabled, pinTopItem = props.pinTopItem, _b = props.scrollable, scrollable = _b === void 0 ? true : _b, maxHeight = props.maxHeight, disabled = props.disabled, readOnly = props.readOnly, isButton = props.isButton, activeValidationMessage = props.activeValidationMessage, autofilledMessage = props.autofilledMessage, size = props.size, margin = props.margin, minWidth = props.minWidth, className = props.className, overflowTooltipPosition = props.overflowTooltipPosition, onBlur = props.onBlur, dataTestId = props.dataTestId, onSelect = props.onSelect, _c = props.textOverflow, textOverflow = _c === void 0 ? 'ellipsis' : _c, rest = __rest(props, ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "overflowTooltipPosition", "onBlur", "dataTestId", "onSelect", "textOverflow"]);
-    var _d = React.useState(false), isOpen = _d[0], setIsOpen = _d[1];
-    var _e = React.useState(), activeDescendant = _e[0], setActiveDescendant = _e[1];
-    var _f = React.useState(false), isLoading = _f[0], setIsLoading = _f[1];
-    var _g = React.useState(''), input = _g[0], setInput = _g[1];
-    var _h = React.useState(null), focused = _h[0], setFocused = _h[1];
-    var _j = React.useState(false), keyboardNavigated = _j[0], setKeyboardNavigated = _j[1];
-    var inputRef = React.useRef(null);
-    var styledFieldRef = useFocusVisibleRef([inputRef]);
-    var dropdownRef = React.useRef(null);
-    var resetDropdown = function () {
-        setIsOpen(false);
-        setFocused(null);
-    };
-    var containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);
-    useClickOutsideRef(resetDropdown, [], containerRef);
-    var handleKeyDown = function (e) {
-        if (e.key === 'Enter' || e.key === ' ') {
-            setIsOpen(!isOpen);
-            setKeyboardNavigated(true);
-        }
-    };
-    var handleValueSelect = function (values) {
-        var _a;
-        setInput(values.join(', '));
-        if (props.multiSelect === true) {
-            props.onSelect(values);
-        }
-        else if (props.multiSelect === false || props.multiSelect === undefined) {
-            props.onSelect(values[0]);
-        }
-        //don't close dropdown on item select if have custom action or multiselect
-        if (actionLabel || props.multiSelect)
-            return;
-        if (keyboardNavigated) {
-            (_a = styledFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus({ focusVisible: true });
-        }
-        setIsOpen(false);
-        setFocused(null);
-    };
-    React.useEffect(function () {
-        if (props.value) {
-            if (props.multiSelect) {
-                setInput(props.value.join(', '));
-            }
-            else if (props.multiSelect === false || props.multiSelect === undefined) {
-                setInput(props.value);
-            }
-        }
-        else {
-            setInput('');
-        }
-    }, [props.value, props.multiSelect]);
-    React.useEffect(function () {
-        setIsLoading(false);
-    }, [input]);
-    React.useEffect(function () {
-        !isOpen && setKeyboardNavigated(false);
-    }, [isOpen]);
-    React.useImperativeHandle(ref, function () { return inputRef.current; }, [inputRef]);
-    var customSetIsOpen = function (isOpen) {
-        setIsOpen(isOpen);
-    };
-    var getDisplayItems = function () {
-        var values = input.split(',').map(function (val) { return val.trim(); });
-        var listDisplayLabels = list.filter(function (item) { return values.includes(item.value); }).map(function (l) { return l.displayLabel; });
-        return listDisplayLabels.join(', ');
-    };
-    var handleBlur = function (e) {
-        // @ts-ignore
-        if (!e.currentTarget.contains(e.relatedTarget)) {
-            onBlur && onBlur(e);
-        }
-    };
-    var cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? " ".concat(className) : '');
-    return (React.createElement(React.Fragment, null,
-        React.createElement(DropdownContainer, { ref: containerRef, "aria-expanded": isOpen ? true : false, "aria-activedescendant": activeDescendant, "aria-controls": "".concat(id, "_dropdowncontent"), role: "listbox", "aria-multiselectable": props.multiSelect, isButton: isButton || false, className: size ? size : '', readOnly: readOnly, disabled: disabled, margin: margin, onBlur: handleBlur, minWidth: minWidth },
-            React.createElement(DropdownInputFieldStyles, __assign({ ref: styledFieldRef, className: cls, onMouseDown: defaultOnMouseDownHandler, onClick: function (e) {
-                    var _a, _b;
-                    if (!readOnly && !disabled) {
-                        e.stopPropagation();
-                        setIsOpen(!isOpen);
-                        if (isOpen) {
-                            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-                        }
-                        else {
-                            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-                        }
-                    }
-                }, tabIndex: disabled || readOnly ? -1 : 0, disabled: disabled || false, readOnly: readOnly || false, isPlaceholder: !input, showValidationMessage: !!activeValidationMessage, onKeyDown: handleKeyDown, minWidth: minWidth }, rest),
-                React.createElement(DropdownInputField, { ref: inputRef, type: "search", ellipsis: textOverflow == 'ellipsis', id: id, "data-testid": dataTestId, readOnly: true, placeholder: placeholder, value: getDisplayItems(), className: size ? "".concat(size, " value") : 'value', tabIndex: -1, disabled: disabled || false }),
-                !isOpen ? React.createElement(TooltipOverflow, { position: overflowTooltipPosition, input: inputRef, withArrow: true, maxWidth: "100%", size: size, align: 'end' }, getDisplayItems()) : null,
-                isLoading ? React.createElement(LoadingIndicator, { size: Size.Small, color: COLORS.neutral_600 }) : null,
-                React.createElement("div", { className: 'icon dropdown-arrow' }, isOpen ? React.createElement(SystemIcons.ArrowDropUp, { size: "24px", className: size ? size : '' }) :
-                    React.createElement(SystemIcons.ArrowDropDown, { size: "24px", className: size ? size : '' }))),
-            !readOnly && !disabled && (React.createElement(DropdownContent, { ref: dropdownRef, containerRef: containerRef, onActiveDescendantChanged: function (id) { return setActiveDescendant(id); }, customizationProps: {
-                    itemsType: itemsType,
-                    action: action !== null && action !== void 0 ? action : (function () {
-                    }),
-                    actionLabel: actionLabel,
-                    actionVariant: actionVariant,
-                    actionDisabled: actionDisabled,
-                    scrollable: scrollable,
-                    onValueUpdate: handleValueSelect,
-                    items: list,
-                    multiSelect: props.multiSelect,
-                    pinTopItem: pinTopItem,
-                    maxHeight: maxHeight,
-                    actionIcon: actionIcon,
-                    actionLoading: actionLoading,
-                }, ariaRolesType: "input", focused: focused, setFocused: setFocused, size: size !== null && size !== void 0 ? size : Size.Small, filter: '', isOpen: isOpen, setIsOpen: customSetIsOpen, messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '', outline: keyboardNavigated, isButton: isButton || false, selectedValues: props.multiSelect ? props.value || [] : [props.value || ''], setSelectedValues: handleValueSelect, id: "".concat(id, "_dropdowncontent") }))),
-        activeValidationMessage && (React.createElement(ErrorMessage, null,
-            React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400 }),
-            React.createElement("span", null, activeValidationMessage))),
-        autofilledMessage && (React.createElement(AutofilledMessage, null,
-            React.createElement(SystemIcons.Information, { color: COLORS.neutral_600 }),
-            React.createElement("span", null, autofilledMessage)))));
-});
-export default BasicDropdown;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _pt from "prop-types";
+var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "overflowTooltipPosition", "onBlur", "dataTestId", "onSelect", "textOverflow"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as React from 'react';
+import { COLORS } from '../styles';
+import { SystemIcons } from '../icons';
+import { LoadingIndicator } from '../LoadingIndicator';
+import { DropdownContainer, DropdownInputFieldStyles, DropdownInputField } from './CommonStyling';
+import DropdownContent from './DropdownContent';
+import { AutofilledMessage, ErrorMessage } from '../InputFields';
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
+import { Size } from '../types';
+import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef } from '../common';
+import { useFocusOutsideRef } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+    list = props.list,
+    placeholder = props.placeholder,
+    messageOnNoResults = props.messageOnNoResults,
+    _props$itemsType = props.itemsType,
+    itemsType = _props$itemsType === void 0 ? 'normal' : _props$itemsType,
+    action = props.action,
+    actionLabel = props.actionLabel,
+    actionVariant = props.actionVariant,
+    actionIcon = props.actionIcon,
+    actionLoading = props.actionLoading,
+    actionDisabled = props.actionDisabled,
+    pinTopItem = props.pinTopItem,
+    _props$scrollable = props.scrollable,
+    scrollable = _props$scrollable === void 0 ? true : _props$scrollable,
+    maxHeight = props.maxHeight,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    isButton = props.isButton,
+    activeValidationMessage = props.activeValidationMessage,
+    autofilledMessage = props.autofilledMessage,
+    size = props.size,
+    margin = props.margin,
+    minWidth = props.minWidth,
+    className = props.className,
+    overflowTooltipPosition = props.overflowTooltipPosition,
+    onBlur = props.onBlur,
+    dataTestId = props.dataTestId,
+    onSelect = props.onSelect,
+    _props$textOverflow = props.textOverflow,
+    textOverflow = _props$textOverflow === void 0 ? 'ellipsis' : _props$textOverflow,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isOpen = _React$useState2[0],
+    setIsOpen = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    activeDescendant = _React$useState4[0],
+    setActiveDescendant = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isLoading = _React$useState6[0],
+    setIsLoading = _React$useState6[1];
+  var _React$useState7 = React.useState(''),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    input = _React$useState8[0],
+    setInput = _React$useState8[1];
+  var _React$useState9 = React.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    focused = _React$useState10[0],
+    setFocused = _React$useState10[1];
+  var _React$useState11 = React.useState(false),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    keyboardNavigated = _React$useState12[0],
+    setKeyboardNavigated = _React$useState12[1];
+  var inputRef = React.useRef(null);
+  var styledFieldRef = useFocusVisibleRef([inputRef]);
+  var dropdownRef = React.useRef(null);
+  var resetDropdown = function resetDropdown() {
+    setIsOpen(false);
+    setFocused(null);
+  };
+  var containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);
+  useClickOutsideRef(resetDropdown, [], containerRef);
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      setIsOpen(!isOpen);
+      setKeyboardNavigated(true);
+    }
+  };
+  var handleValueSelect = function handleValueSelect(values) {
+    setInput(values.join(', '));
+    if (props.multiSelect === true) {
+      props.onSelect(values);
+    } else if (props.multiSelect === false || props.multiSelect === undefined) {
+      props.onSelect(values[0]);
+    }
+
+    //don't close dropdown on item select if have custom action or multiselect
+    if (actionLabel || props.multiSelect) return;
+    if (keyboardNavigated) {
+      var _styledFieldRef$curre;
+      (_styledFieldRef$curre = styledFieldRef.current) === null || _styledFieldRef$curre === void 0 ? void 0 : _styledFieldRef$curre.focus({
+        focusVisible: true
+      });
+    }
+    setIsOpen(false);
+    setFocused(null);
+  };
+  React.useEffect(function () {
+    if (props.value) {
+      if (props.multiSelect) {
+        setInput(props.value.join(', '));
+      } else if (props.multiSelect === false || props.multiSelect === undefined) {
+        setInput(props.value);
+      }
+    } else {
+      setInput('');
+    }
+  }, [props.value, props.multiSelect]);
+  React.useEffect(function () {
+    setIsLoading(false);
+  }, [input]);
+  React.useEffect(function () {
+    !isOpen && setKeyboardNavigated(false);
+  }, [isOpen]);
+  React.useImperativeHandle(ref, function () {
+    return inputRef.current;
+  }, [inputRef]);
+  var customSetIsOpen = function customSetIsOpen(isOpen) {
+    setIsOpen(isOpen);
+  };
+  var getDisplayItems = function getDisplayItems() {
+    var values = input.split(',').map(function (val) {
+      return val.trim();
+    });
+    var listDisplayLabels = list.filter(function (item) {
+      return values.includes(item.value);
+    }).map(function (l) {
+      return l.displayLabel;
+    });
+    return listDisplayLabels.join(', ');
+  };
+  var handleBlur = function handleBlur(e) {
+    // @ts-ignore
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      onBlur && onBlur(e);
+    }
+  };
+  var cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? " ".concat(className) : '');
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(DropdownContainer, {
+      ref: containerRef,
+      "aria-expanded": isOpen ? true : false,
+      "aria-activedescendant": activeDescendant,
+      "aria-controls": "".concat(id, "_dropdowncontent"),
+      role: "listbox",
+      "aria-multiselectable": props.multiSelect,
+      isButton: isButton || false,
+      className: size ? size : '',
+      readOnly: readOnly,
+      disabled: disabled,
+      margin: margin,
+      onBlur: handleBlur,
+      minWidth: minWidth,
+      children: [/*#__PURE__*/_jsxs(DropdownInputFieldStyles, _objectSpread(_objectSpread({
+        ref: styledFieldRef,
+        className: cls,
+        onMouseDown: defaultOnMouseDownHandler,
+        onClick: function onClick(e) {
+          if (!readOnly && !disabled) {
+            e.stopPropagation();
+            setIsOpen(!isOpen);
+            if (isOpen) {
+              var _inputRef$current;
+              (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+            } else {
+              var _inputRef$current2;
+              (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+            }
+          }
+        },
+        tabIndex: disabled || readOnly ? -1 : 0,
+        disabled: disabled || false,
+        readOnly: readOnly || false,
+        isPlaceholder: !input,
+        showValidationMessage: !!activeValidationMessage,
+        onKeyDown: handleKeyDown,
+        minWidth: minWidth
+      }, rest), {}, {
+        children: [/*#__PURE__*/_jsx(DropdownInputField, {
+          ref: inputRef,
+          type: "search",
+          ellipsis: textOverflow == 'ellipsis',
+          id: id,
+          "data-testid": dataTestId,
+          readOnly: true,
+          placeholder: placeholder,
+          value: getDisplayItems(),
+          className: size ? "".concat(size, " value") : 'value',
+          tabIndex: -1,
+          disabled: disabled || false
+        }), !isOpen ? /*#__PURE__*/_jsx(TooltipOverflow, {
+          position: overflowTooltipPosition,
+          input: inputRef,
+          withArrow: true,
+          maxWidth: "100%",
+          size: size,
+          align: "end",
+          children: getDisplayItems()
+        }) : null, isLoading ? /*#__PURE__*/_jsx(LoadingIndicator, {
+          size: Size.Small,
+          color: COLORS.neutral_600
+        }) : null, /*#__PURE__*/_jsx("div", {
+          className: 'icon dropdown-arrow',
+          children: isOpen ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropUp, {
+            size: "24px",
+            className: size ? size : ''
+          }) : /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {
+            size: "24px",
+            className: size ? size : ''
+          })
+        })]
+      })), !readOnly && !disabled && /*#__PURE__*/_jsx(DropdownContent, {
+        ref: dropdownRef,
+        containerRef: containerRef,
+        onActiveDescendantChanged: function onActiveDescendantChanged(id) {
+          return setActiveDescendant(id);
+        },
+        customizationProps: {
+          itemsType: itemsType,
+          action: action !== null && action !== void 0 ? action : function () {},
+          actionLabel: actionLabel,
+          actionVariant: actionVariant,
+          actionDisabled: actionDisabled,
+          scrollable: scrollable,
+          onValueUpdate: handleValueSelect,
+          items: list,
+          multiSelect: props.multiSelect,
+          pinTopItem: pinTopItem,
+          maxHeight: maxHeight,
+          actionIcon: actionIcon,
+          actionLoading: actionLoading
+        },
+        ariaRolesType: "input",
+        focused: focused,
+        setFocused: setFocused,
+        size: size !== null && size !== void 0 ? size : Size.Small,
+        filter: '',
+        isOpen: isOpen,
+        setIsOpen: customSetIsOpen,
+        messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
+        outline: keyboardNavigated,
+        isButton: isButton || false,
+        selectedValues: props.multiSelect ? props.value || [] : [props.value || ''],
+        setSelectedValues: handleValueSelect,
+        id: "".concat(id, "_dropdowncontent")
+      })]
+    }), activeValidationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
+      children: [/*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
+        color: COLORS.critical_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: activeValidationMessage
+      })]
+    }), autofilledMessage && /*#__PURE__*/_jsxs(AutofilledMessage, {
+      children: [/*#__PURE__*/_jsx(SystemIcons.Information, {
+        color: COLORS.neutral_600
+      }), /*#__PURE__*/_jsx("span", {
+        children: autofilledMessage
+      })]
+    })]
+  });
+});
+BasicDropdown.propTypes = {
+  list: _pt.array.isRequired,
+  itemsType: _pt.oneOf(['normal', 'checkbox', 'radio']),
+  action: _pt.func,
+  actionLabel: _pt.string,
+  actionIcon: _pt.node,
+  actionLoading: _pt.bool,
+  actionDisabled: _pt.bool,
+  pinTopItem: _pt.bool,
+  scrollable: _pt.bool,
+  maxHeight: _pt.string,
+  placeholder: _pt.string,
+  disableSorting: _pt.bool,
+  messageOnNoResults: _pt.string,
+  disabled: _pt.bool,
+  readOnly: _pt.bool,
+  isButton: _pt.bool,
+  activeValidationMessage: _pt.string,
+  autofilledMessage: _pt.string,
+  margin: _pt.string,
+  minWidth: _pt.string,
+  textOverflow: _pt.oneOf(['ellipsis', 'default']),
+  overflowTooltipPosition: _pt.oneOf(['top', 'bottom']),
+  multiSelect: _pt.oneOf([false]),
+  value: _pt.string,
+  onSelect: _pt.func.isRequired
+};
+export default BasicDropdown;
+//# sourceMappingURL=BasicDropdown.js.map

package/dist/Dropdown/CommonStyling.js

@@ -1,24 +1,44 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled, { css } from 'styled-components';
-import { CommonInteractionStyling } from '../common';
-import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../styles';
-import { ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';
-import { Z_INDEXES } from '../styles/z-indexes';
-import { TooltipTrigger } from '../Tooltips/TooltipStyles';
-export var DropdownContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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 ? 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;'); }, Z_INDEXES.focus, COLORS.primary_600, COLORS.primary_800);
-var lockedState = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\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(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"], ["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.critical_400);
-var placeholderStyling = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
-export var DropdownInputField = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\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"], ["\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\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;' : ''; }, COLORS.neutral_600);
-export var DropdownInputFieldStyles = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\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"], ["\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'); }, 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 : ''); }, function (props) { return (props.showValidationMessage ? activeValidationMessage : ''); }, function (props) { return (props.isPlaceholder ? placeholderStyling : ''); }, CommonInteractionStyling, Z_INDEXES.dropdown + 1, focusStyles);
-export var DropdownContentButtonStyling = css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  min-width: 344px;\n"], ["\n  min-width: 344px;\n"])));
-export var DropdownButtonTextContent = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\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"], ["\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"])));
-export var DropdownButtonTextIcon = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  width: 24px;\n  height: 24px;\n"], ["\n  width: 24px;\n  height: 24px;\n"])));
-export var DropdownButtonTextArrow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n"], ["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n"])));
-export var DropdownButtonTextStyles = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  flex: 1\n"], ["\n  flex: 1\n"])));
-export var DropdownButtonTextWrapper = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\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}"], ["\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);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+import styled, { css } from 'styled-components';
+import { CommonInteractionStyling } from '../common';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../styles';
+import { ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
+import { TooltipTrigger } from '../Tooltips/TooltipStyles';
+export var DropdownContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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;';
+}, 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  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;' : '';
+}, 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';
+}, 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 : '';
+}, function (props) {
+  return props.showValidationMessage ? activeValidationMessage : '';
+}, function (props) {
+  return props.isPlaceholder ? placeholderStyling : '';
+}, CommonInteractionStyling, Z_INDEXES.dropdown + 1, focusStyles);
+export var DropdownContentButtonStyling = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: 344px;\n"])));
+export var DropdownButtonTextContent = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\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"])));
+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}"])), 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