@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/src/ChipsInput/ChipInput.js

@@ -1,99 +0,0 @@
-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;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom components.
- */
-import { Size } from '../types';
-import { ChipInputContainer, ChipInputField } from './ChipInputField';
-var ChipInput = React.forwardRef(function (_a, ref) {
-    var values = _a.values, inputId = _a.inputId, variants = _a.variants, icon = _a.icon, placeholder = _a.placeholder, disabled = _a.disabled, altPlaceholder = _a.altPlaceholder, validationMessage = _a.validationMessage, onValueChange = _a.onValueChange, _b = _a.multiLine, multiLine = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? Size.Medium : _c, _d = _a.autoSave, autoSave = _d === void 0 ? false : _d, rest = __rest(_a, ["values", "inputId", "variants", "icon", "placeholder", "disabled", "altPlaceholder", "validationMessage", "onValueChange", "multiLine", "size", "autoSave"]);
-    var _e = React.useState([]), chips = _e[0], setChips = _e[1];
-    var _f = React.useState(''), value = _f[0], setValue = _f[1];
-    var _g = React.useState([]), chipItems = _g[0], setChipItems = _g[1];
-    /**
-     * Sets initial values for the chips.
-     */
-    React.useEffect(function () {
-        // Let's add initial chip values
-        setChips(values);
-    }, [values]);
-    /**
-     * Set chip items for chip input field
-     * */
-    React.useEffect(function () {
-        setChipItems(chips.map(function (chip, index) { return ({
-            label: chip,
-            icon: icon,
-            disabled: false,
-            variant: variants && variants[index],
-        }); }));
-    }, [chips, variants, icon, size]);
-    var handleInputBlur = function (event) {
-        var _a, _b;
-        if (autoSave && value && !((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest("".concat(ChipInputContainer))) === null || _b === void 0 ? void 0 : _b.contains(event.relatedTarget))) {
-            setChips(__spreadArray(__spreadArray([], chips, true), [value], false));
-            onValueChange(__spreadArray(__spreadArray([], chips, true), [value], false));
-            setValue('');
-        }
-    };
-    /**
-     * Adds a chip to the chip list.
-     * @param event - Event handler from the key down event.
-     */
-    var handleInputKeyDown = function (event) {
-        if ((event.key === 'Enter' || event.key === ' ') && value) {
-            event.preventDefault();
-            setChips(__spreadArray(__spreadArray([], chips, true), [value], false));
-            onValueChange(__spreadArray(__spreadArray([], chips, true), [value], false));
-            setValue('');
-        }
-    };
-    /**
-     * Removes a specific chip from the chip list.
-     * @param index - Index of the chip that needs to be removed.
-     */
-    var onRemoveChip = function (index) {
-        var newChips = __spreadArray([], chips, true);
-        newChips.splice(index, 1);
-        setChips(newChips);
-        onValueChange(newChips);
-    };
-    /**
-     * Return Chip Input component.
-     */
-    return (React.createElement(ChipInputField, __assign({ inputId: inputId, ref: ref, items: chipItems, onRemoveItem: function (item, index) { return onRemoveChip(index); }, inputValue: value, onInputValueChange: function (value) { return setValue(value); }, onInputKeyDown: handleInputKeyDown, placeholder: placeholder, altPlaceholder: altPlaceholder, disabled: disabled, validationMessage: validationMessage, multiLine: multiLine, size: size, onBlur: handleInputBlur }, rest)));
-});
-export default ChipInput;

package/dist/src/ChipsInput/ChipInputField.d.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-import { ChipItem } from './ChipInputTypes';
-import { Size } from '../types';
-export declare const ChipInputBoundItems: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChipInputContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChipInputEl: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const ChipInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {
-    inputId: string;
-    items: ChipItem[];
-    disabled?: boolean;
-    placeholder?: string;
-    altPlaceholder?: string;
-    multiLine?: boolean;
-    size?: Size.Large | Size.Medium | Size.Small;
-    loading?: boolean;
-    required?: boolean;
-    validationMessage?: string;
-    onRemoveItem: (item: ChipItem, index: number) => void;
-    inputValue: string;
-    onInputValueChange: (value: string) => void;
-    onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onActivationChange?: (active: boolean) => void;
-}
-export declare const ChipInputField: React.ForwardRefExoticComponent<ChipInputFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/ChipsInput/ChipInputField.js

@@ -1,114 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 React from 'react';
-import { Size, States } from '../types';
-import { InputChip } from '../Chips';
-import { ErrorMessage } from '../InputFields';
-import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';
-import styled from 'styled-components';
-import { LoadingIndicator } from '../LoadingIndicator';
-import { useFocusVisibleRef } from '../common';
-import { IconButton } from '../Button';
-import { SystemIcons } from '../icons';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var Loading = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 20px;\n  width: 20px;\n"], ["\n  height: 20px;\n  width: 20px;\n"])));
-export var ChipInputBoundItems = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n"])));
-export var ChipInputContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ", "\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n"], ["\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ", "\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n"])), scrollBarStyling(Size.Small));
-export var ChipInputEl = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"], ["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), COLORS.black, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
-export var ChipInputContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), COLORS.neutral_400, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ChipInputEl, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputEl, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputContentContainer, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.critical_500, ChipInputContentContainer, COLORS.neutral_100, COLORS.neutral_300);
-export var ChipInputField = React.forwardRef(function (_a, ref) {
-    var inputId = _a.inputId, items = _a.items, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeholder = _a.placeholder, altPlaceholder = _a.altPlaceholder, _c = _a.multiLine, multiLine = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? Size.Medium : _d, validationMessage = _a.validationMessage, loading = _a.loading, onRemoveItem = _a.onRemoveItem, onInputValueChange = _a.onInputValueChange, onInputKeyDown = _a.onInputKeyDown, onActivationChange = _a.onActivationChange, inputValue = _a.inputValue, required = _a.required, onBlur = _a.onBlur, rest = __rest(_a, ["inputId", "items", "disabled", "placeholder", "altPlaceholder", "multiLine", "size", "validationMessage", "loading", "onRemoveItem", "onInputValueChange", "onInputKeyDown", "onActivationChange", "inputValue", "required", "onBlur"]);
-    var containerRef = React.useRef(null);
-    var inputRef = useFocusVisibleRef([containerRef]);
-    React.useImperativeHandle(ref, function () { return inputRef.current; }, [inputRef]);
-    /**
-     * Scroll container to last item on change
-     * */
-    React.useEffect(function () {
-        if (inputRef.current && document.activeElement === inputRef.current) {
-            inputRef.current.scrollIntoView({
-                block: 'nearest',
-                inline: 'nearest',
-            });
-        }
-    }, [containerRef, inputRef, items]);
-    /**
-     * Remove last cheap on backspace
-     * */
-    var handleInputKeyDown = function (e) {
-        var _a;
-        if (e.key === 'Backspace' && !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) && !e.repeat && items.length > 0) {
-            onRemoveItem(items[items.length - 1], items.length - 1);
-        }
-        else {
-            onInputKeyDown(e);
-        }
-    };
-    var handleItemRemove = function (event, item, index) {
-        var _a;
-        onRemoveItem(item, index);
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ focusVisible: event.detail !== 1 });
-    };
-    var handleInputClear = function (e) {
-        var _a;
-        onInputValueChange('');
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1 });
-    };
-    var handleContainerKeyDown = function (e) {
-        if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight'))
-            return;
-        var items = containerRef.current.querySelectorAll('[tabindex="0"]');
-        var currentIndex = Array.from(items).indexOf(e.target);
-        var direction = e.key === 'ArrowLeft' ? -1 : 1;
-        var item = items[currentIndex + direction];
-        item === null || item === void 0 ? void 0 : item.focus({ focusVisible: true });
-        onActivationChange && onActivationChange(false);
-    };
-    var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationMessage ? 'invalid' : '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
-    return (React.createElement(Wrapper, { onBlur: onBlur },
-        React.createElement(ChipInputContainer, { "data-testid": "chip-input-container", ref: containerRef, onKeyDown: handleContainerKeyDown, onClick: function () { var _a; return !disabled && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus()); }, className: cls },
-            React.createElement(ChipInputContentContainer, null, items === null || items === void 0 ? void 0 :
-                items.map(function (chip, index) { return (React.createElement(InputChip, { key: "chip_".concat(index), icon: chip === null || chip === void 0 ? void 0 : chip.icon, size: size, disabled: chip.disabled || disabled, variant: chip.variant || States.Default, text: chip.label, onRemove: function (e) { return handleItemRemove(e, chip, index); } })); }),
-                React.createElement(ChipInputBoundItems, null,
-                    React.createElement(ChipInputEl, __assign({ ref: inputRef, type: "text", id: inputId, required: required, tabIndex: disabled ? -1 : 0, value: inputValue, onChange: function (e) { return onInputValueChange(e.target.value); }, onKeyDown: handleInputKeyDown, placeholder: (items === null || items === void 0 ? void 0 : items.length) === 0 ? placeholder : altPlaceholder || '', onClick: function (e) {
-                            e.stopPropagation();
-                            onActivationChange && onActivationChange(true);
-                        } }, rest)),
-                    inputValue && !disabled && (React.createElement(IconButton, { id: "clear-btn-".concat(inputId), dataTestId: "clear-btn-".concat(inputId), action: handleInputClear, ref: function (ref) {
-                            ref === null || ref === void 0 ? void 0 : ref.scrollIntoView({
-                                block: 'nearest',
-                                inline: 'nearest',
-                            });
-                        }, useTransparentBackground: true, shape: 'circular', style: { marginLeft: '-8px' }, focusOnClick: true, variant: 'secondary' },
-                        React.createElement(SystemIcons.Clear, null))),
-                    loading && (React.createElement(Loading, { className: size },
-                        React.createElement(LoadingIndicator, { size: Size.Small, color: COLORS.neutral_600 })))))),
-        validationMessage && (React.createElement(ErrorMessage, null,
-            React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400 }),
-            React.createElement("span", null, validationMessage)))));
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/ChipsInput/ChipInputTypes.d.ts

@@ -1,24 +0,0 @@
-import { Size } from '../types';
-import { ChipVariant } from '../Chips/ChipTypes';
-import React from "react";
-export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'autoSave' | 'list' | 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {
-    inputId: string;
-    values: string[];
-    icon?: React.ReactNode;
-    variants?: ChipVariant[];
-    placeholder?: string;
-    altPlaceholder?: string;
-    onValueChange: (chips: string[]) => void;
-    multiLine?: boolean;
-    disabled?: boolean;
-    size?: Size.Medium | Size.Small;
-    validationMessage?: string;
-    required?: boolean;
-    autoSave?: boolean;
-}
-export interface ChipItem {
-    label: string;
-    icon?: React.ReactNode;
-    disabled?: boolean;
-    variant?: ChipVariant;
-}

package/dist/src/ChipsInput/ChipInputTypes.js

@@ -1 +0,0 @@
-export {};

package/dist/src/ChipsInput/index.d.ts

@@ -1,2 +0,0 @@
-export * from './ChipDropdownInput';
-export * from './ChipInputField';

package/dist/src/ChipsInput/index.js

@@ -1,2 +0,0 @@
-export * from './ChipDropdownInput';
-export * from './ChipInputField';

package/dist/src/Dropdown/BasicDropdown.d.ts

@@ -1,117 +0,0 @@
-import * as React from 'react';
-import { DropdownItem } from './DropdownContent';
-import { Size, Testable } from '../types';
-export interface BasicDropdownCommonProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {
-    /**
-    * Required. An array of DropdownItem objects representing the items in the dropdown.
-    */
-    list: DropdownItem[];
-    /**
-    * Optional. The type of the items in the dropdown. Can be 'normal', 'checkbox', or 'radio'.
-    */
-    itemsType?: 'normal' | 'checkbox' | 'radio';
-    /**
-    * Optional. A function to be called when the action button in the dropdown is clicked.
-    */
-    action?: () => void;
-    /**
-    * Optional. The label for the action button in the dropdown.
-    */
-    actionLabel?: string;
-    /**
-    * Optional. The variant of the action button in the dropdown. Can be 'primary', 'secondary', 'tertiary', or undefined.
-    */
-    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
-    /**
-    * Optional. The icon for the action button in the dropdown.
-    */
-    actionIcon?: React.ReactNode;
-    /**
-    * Optional. A boolean indicating whether the action button in the dropdown is loading.
-    */
-    actionLoading?: boolean;
-    /**
-    * Optional. A boolean indicating whether the action button in the dropdown is disabled.
-    */
-    actionDisabled?: boolean;
-    /**
-    * Optional. A boolean indicating whether the top item in the dropdown should be pinned.
-    */
-    pinTopItem?: boolean;
-    /**
-    * Optional. A boolean indicating whether the dropdown content is scrollable.
-    */
-    scrollable?: boolean;
-    /**
-    * Optional. The maximum height of the dropdown.
-    */
-    maxHeight?: string;
-    placeholder?: string;
-    /**
-    * Optional. A boolean indicating whether sorting is disabled in the dropdown.
-    */
-    disableSorting?: boolean;
-    /**
-     * Optional. The message to be displayed when there are no results in the dropdown.
-     */
-    messageOnNoResults?: string;
-    /**
-    * Optional. A boolean indicating whether the dropdown is disabled.
-    */
-    disabled?: boolean;
-    /**
-     * Optional. A boolean indicating whether the dropdown is read-only.
-     */
-    readOnly?: boolean;
-    /**
-     * Optional. A boolean indicating whether the dropdown is a button.
-     */
-    isButton?: boolean;
-    /**
-     * Optional. The validation message to be displayed when the dropdown is active.
-     */
-    activeValidationMessage?: string;
-    /**
-     * Optional. The message to be displayed when the dropdown is autofilled.
-     */
-    autofilledMessage?: string;
-    /**
-     * Optional. The size of the dropdown. Can be 'Small' or 'Medium'.
-     */
-    size?: Size.Small | Size.Medium;
-    /**
-     * Optional. The margin of the dropdown. Can be any valid CSS margin value.
-     */
-    margin?: string;
-    /**
-     * Optional. The minimum width of the dropdown.
-     */
-    minWidth?: string;
-    /**
-     * Optional. The text overflow behavior of the dropdown. Can be 'ellipsis' or 'default'.
-     */
-    textOverflow?: 'ellipsis' | 'default';
-    /**
-   * Optional. The position of the tooltip when dropdown is closed. Can be 'top' or 'bottom'.
-   */
-    overflowTooltipPosition?: 'top' | 'bottom';
-}
-export declare type BasicDropdownMultiSelectProps = BasicDropdownCommonProps & {
-    /** Required. If this flag is set then user can select multiple items. */
-    multiSelect: true;
-    /** Required. Selected items. */
-    value?: string[];
-    /** Required. Callback handler to call when user selects one of the items. Provides all selected items after last change. */
-    onSelect: (value: string[]) => void;
-};
-export declare type BasucDropdownSingleSelectProps = BasicDropdownCommonProps & {
-    /** Required. If this flag is set then user can select multiple items. */
-    multiSelect?: false;
-    /** Required. Selected item. */
-    value?: string;
-    /** Required. Callback handler to call when user selects one of the items. Provides value of selected item. */
-    onSelect: (value: string) => void;
-};
-export declare type BasicDropdownProps = BasucDropdownSingleSelectProps | BasicDropdownMultiSelectProps;
-declare const BasicDropdown: React.ForwardRefExoticComponent<BasicDropdownProps & React.RefAttributes<unknown>>;
-export default BasicDropdown;

package/dist/src/Dropdown/BasicDropdown.js

@@ -1,153 +0,0 @@
-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;

package/dist/src/Dropdown/CommonStyling.d.ts

@@ -1,23 +0,0 @@
-export declare const DropdownContainer: import("styled-components").StyledComponent<"div", any, {
-    isButton: boolean;
-    readOnly?: boolean | undefined;
-    disabled?: boolean | undefined;
-    margin?: string | undefined;
-    minWidth?: string | undefined;
-}, never>;
-export declare const DropdownInputField: import("styled-components").StyledComponent<"input", any, {
-    ellipsis?: boolean | undefined;
-}, never>;
-export declare const DropdownInputFieldStyles: import("styled-components").StyledComponent<"div", any, {
-    disabled: boolean;
-    readOnly: boolean;
-    showValidationMessage?: boolean | undefined;
-    isPlaceholder?: boolean | undefined;
-    minWidth?: string | undefined;
-}, never>;
-export declare const DropdownContentButtonStyling: import("styled-components").FlattenSimpleInterpolation;
-export declare const DropdownButtonTextContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DropdownButtonTextIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DropdownButtonTextArrow: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DropdownButtonTextStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DropdownButtonTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/src/Dropdown/CommonStyling.js

@@ -1,24 +0,0 @@
-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;