@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/Dropdown/CommonStyling.d.ts

@@ -1,24 +1,23 @@
-/// <reference types="react" />
-export declare const DropdownContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $isButton: boolean;
-    $readOnly?: boolean | undefined;
-    $disabled?: boolean | undefined;
-    margin?: string | undefined;
-    minWidth?: string | undefined;
-}>> & string;
-export declare const DropdownInputField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
-    $ellipsis?: boolean | undefined;
-}>> & string;
-export declare const DropdownInputFieldStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $disabled: boolean;
-    $readOnly: boolean;
-    $showValidationMessage?: boolean | undefined;
-    $isPlaceholder?: boolean | undefined;
-    $minWidth?: string | undefined;
-}>> & string;
-export declare const DropdownContentButtonStyling: import("styled-components").RuleSet<object>;
-export declare const DropdownButtonTextContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DropdownButtonTextIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DropdownButtonTextArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DropdownButtonTextStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DropdownButtonTextWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DropdownContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isButton: boolean;
+    $readOnly?: boolean;
+    $disabled?: boolean;
+    margin?: string;
+    minWidth?: string;
+}>> & string;
+export declare const DropdownInputField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    $ellipsis?: boolean;
+}>> & string;
+export declare const DropdownInputFieldStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $disabled: boolean;
+    $readOnly: boolean;
+    $showValidationMessage?: boolean;
+    $isPlaceholder?: boolean;
+    $minWidth?: string;
+}>> & string;
+export declare const DropdownContentButtonStyling: import("styled-components").RuleSet<object>;
+export declare const DropdownButtonTextContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DropdownButtonTextIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DropdownButtonTextArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DropdownButtonTextStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DropdownButtonTextWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/Dropdown/CommonStyling.js

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

package/dist/Dropdown/CommonStyling.js.map

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

package/dist/Dropdown/DropdownButton.cjs

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.DropdownButtonContainer = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var React = _interopRequireWildcard(require("react"));
 var _Button = require("../Button");
 var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
@@ -16,7 +15,6 @@ var _CommonStyling = require("./CommonStyling");
 var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value", "id", "dataTestId"];
-var _templateObject;
 /**
  * Import React libraries.
  */
@@ -28,7 +26,9 @@ var _templateObject;
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const DropdownButtonContainer = exports.DropdownButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n"])));
+const DropdownButtonContainer = exports.DropdownButtonContainer = _styledComponents.default.div`
+  display: inline-block;
+`;
 const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       items,
@@ -93,11 +93,11 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           id: id,
           "aria-expanded": dropdownOpen,
           "data-testid": dataTestId,
-          "aria-controls": "".concat(id, "_dropdowncontent"),
+          "aria-controls": `${id}_dropdowncontent`,
           "aria-activedescendant": activeDescendant,
           action: event => {
             setDropdownOpen(!dropdownOpen);
-            if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
+            if (event?.detail !== 1) {
               setKeyboardNavigated(true);
             }
           },
@@ -105,11 +105,8 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           children: icon
         });
       case 'text':
-        const label = rest.keepLabel || !(selectedValues !== null && selectedValues !== void 0 && selectedValues.length) ? rest.label : items.filter(a => selectedValues.includes(a.value)).map(a => {
-          var _a$displayLabel;
-          return (_a$displayLabel = a.displayLabel) !== null && _a$displayLabel !== void 0 ? _a$displayLabel : a.value;
-        }).join(', ');
-        const cls = "".concat(disabled && 'disabled', " ").concat(dropdownOpen && 'expanded', " ").concat(className);
+        const label = rest.keepLabel || !selectedValues?.length ? rest.label : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');
+        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.DropdownButtonTextWrapper, {
           tabIndex: !disabled ? 0 : -1,
           className: cls,
@@ -117,7 +114,7 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           id: id,
           "data-testid": dataTestId,
           "aria-expanded": dropdownOpen,
-          "aria-controls": "".concat(id, "_dropdowncontent"),
+          "aria-controls": `${id}_dropdowncontent`,
           "aria-activedescendant": activeDescendant,
           onMouseDown: _common.defaultOnMouseDownHandler,
           onKeyDown: e => {
@@ -156,7 +153,7 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       containerRef: containerRef,
       customizationProps: {
         itemsType: itemsType,
-        action: action !== null && action !== void 0 ? action : () => {},
+        action: action ?? (() => {}),
         actionLabel: actionLabel,
         actionVariant: actionVariant,
         onValueUpdate: handleValueSelect,
@@ -182,7 +179,7 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       setSelectedValues: setSelectedValues,
       messageOnNoResults: "No results",
       isButton: true,
-      id: "".concat(id, "_dropdowncontent")
+      id: `${id}_dropdowncontent`
     })]
   });
 });