@laerdal/life-react-components 5.0.8-dev.2.full → 5.0.9

package/dist/Dropdown/CommonStyling.cjs.map

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

package/dist/Dropdown/CommonStyling.js

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

package/dist/Dropdown/DropdownButton.cjs

@@ -1,10 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DropdownButtonContainer = void 0;
+exports["default"] = exports.DropdownButtonContainer = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var React = _interopRequireWildcard(require("react"));
@@ -15,7 +17,7 @@ var _common = require("../common");
 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 _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.
@@ -26,53 +28,76 @@ var _templateObject;
 /**
  * Import custom types.
  */
-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 DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      items,
-      icon,
-      disabled,
-      onClick,
-      itemsType = 'normal',
-      action,
-      actionLabel = '',
-      actionVariant,
-      actionIcon,
-      actionLoading,
-      size,
-      width,
-      alignLeft,
-      multiSelect = false,
-      scrollable = false,
-      pinTopItem = false,
-      maxHeight,
-      className,
-      value,
-      id,
-      dataTestId
-    } = _ref,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var DropdownButtonContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n"])));
+exports.DropdownButtonContainer = DropdownButtonContainer;
+var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var items = _ref.items,
+    icon = _ref.icon,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    _ref$itemsType = _ref.itemsType,
+    itemsType = _ref$itemsType === void 0 ? 'normal' : _ref$itemsType,
+    action = _ref.action,
+    _ref$actionLabel = _ref.actionLabel,
+    actionLabel = _ref$actionLabel === void 0 ? '' : _ref$actionLabel,
+    actionVariant = _ref.actionVariant,
+    actionIcon = _ref.actionIcon,
+    actionLoading = _ref.actionLoading,
+    size = _ref.size,
+    width = _ref.width,
+    alignLeft = _ref.alignLeft,
+    _ref$multiSelect = _ref.multiSelect,
+    multiSelect = _ref$multiSelect === void 0 ? false : _ref$multiSelect,
+    _ref$scrollable = _ref.scrollable,
+    scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
+    _ref$pinTopItem = _ref.pinTopItem,
+    pinTopItem = _ref$pinTopItem === void 0 ? false : _ref$pinTopItem,
+    maxHeight = _ref.maxHeight,
+    className = _ref.className,
+    value = _ref.value,
+    id = _ref.id,
+    dataTestId = _ref.dataTestId,
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   // Globally used variables within the view.
-  const [dropdownOpen, setDropdownOpen] = React.useState(false);
-  const [activeDescendant, setActiveDescendant] = React.useState();
-  const [selectedValues, setSelectedValues] = React.useState([]);
-  const [focused, setFocused] = React.useState(null);
-  const [keyboardNavigated, setKeyboardNavigated] = React.useState(false);
-  const dropdownRef = React.useRef(null);
-  const containerRef = (0, _common.useFocusOutsideRef)(() => setDropdownOpen(false), [dropdownRef]);
-  (0, _common.useClickOutsideRef)(() => setDropdownOpen(false), [], containerRef);
-  React.useEffect(() => {
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    dropdownOpen = _React$useState2[0],
+    setDropdownOpen = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    activeDescendant = _React$useState4[0],
+    setActiveDescendant = _React$useState4[1];
+  var _React$useState5 = React.useState([]),
+    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+    selectedValues = _React$useState6[0],
+    setSelectedValues = _React$useState6[1];
+  var _React$useState7 = React.useState(null),
+    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+    focused = _React$useState8[0],
+    setFocused = _React$useState8[1];
+  var _React$useState9 = React.useState(false),
+    _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
+    keyboardNavigated = _React$useState10[0],
+    setKeyboardNavigated = _React$useState10[1];
+  var dropdownRef = React.useRef(null);
+  var containerRef = (0, _common.useFocusOutsideRef)(function () {
+    return setDropdownOpen(false);
+  }, [dropdownRef]);
+  (0, _common.useClickOutsideRef)(function () {
+    return setDropdownOpen(false);
+  }, [], containerRef);
+  React.useEffect(function () {
     !dropdownOpen && setKeyboardNavigated(false);
   }, [dropdownOpen]);
-  React.useEffect(() => {
+  React.useEffect(function () {
     disabled && setDropdownOpen(false);
   }, [disabled]);
-  React.useEffect(() => {
+  React.useEffect(function () {
     setSelectedValues(value || []);
   }, [value]);
-  const handleValueSelect = values => {
+  var handleValueSelect = function handleValueSelect(values) {
     // Do all required actions
     onClick(values);
   };
@@ -81,7 +106,7 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
    * Renders Icon Button dropdown menu.
    * @returns HTML View for the Icon button dropdown menu.
    */
-  const renderButton = () => {
+  var renderButton = function renderButton() {
     switch (rest.type) {
       case 'icon':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
@@ -95,7 +120,7 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           "data-testid": dataTestId,
           "aria-controls": "".concat(id, "_dropdowncontent"),
           "aria-activedescendant": activeDescendant,
-          action: event => {
+          action: function action(event) {
             setDropdownOpen(!dropdownOpen);
             if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
               setKeyboardNavigated(true);
@@ -105,11 +130,13 @@ 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 label = rest.keepLabel || !(selectedValues !== null && selectedValues !== void 0 && selectedValues.length) ? rest.label : items.filter(function (a) {
+          return selectedValues.includes(a.value);
+        }).map(function (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);
+        var cls = "".concat(disabled && 'disabled', " ").concat(dropdownOpen && 'expanded', " ").concat(className);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.DropdownButtonTextWrapper, {
           tabIndex: !disabled ? 0 : -1,
           className: cls,
@@ -120,7 +147,7 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           "aria-controls": "".concat(id, "_dropdowncontent"),
           "aria-activedescendant": activeDescendant,
           onMouseDown: _common.defaultOnMouseDownHandler,
-          onKeyDown: e => {
+          onKeyDown: function onKeyDown(e) {
             if (e.key === 'Enter' || e.key === ' ') {
               e.preventDefault();
               e.stopPropagation();
@@ -128,7 +155,9 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               setKeyboardNavigated(true);
             }
           },
-          onClick: () => !disabled && setDropdownOpen(!dropdownOpen),
+          onClick: function onClick() {
+            return !disabled && setDropdownOpen(!dropdownOpen);
+          },
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.DropdownButtonTextContent, {
             children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.DropdownButtonTextIcon, {
               children: icon
@@ -150,13 +179,13 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownButtonContainer, {
     className: className,
     ref: containerRef,
-    children: [renderButton(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
+    children: [renderButton(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent["default"], {
       ref: dropdownRef,
       ariaRolesType: "menu",
       containerRef: containerRef,
       customizationProps: {
         itemsType: itemsType,
-        action: action !== null && action !== void 0 ? action : () => {},
+        action: action !== null && action !== void 0 ? action : function () {},
         actionLabel: actionLabel,
         actionVariant: actionVariant,
         onValueUpdate: handleValueSelect,
@@ -168,7 +197,9 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         maxHeight: maxHeight,
         items: items
       },
-      onActiveDescendantChanged: e => setActiveDescendant(e),
+      onActiveDescendantChanged: function onActiveDescendantChanged(e) {
+        return setActiveDescendant(e);
+      },
       focused: focused,
       setFocused: setFocused,
       size: size,
@@ -186,5 +217,6 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })]
   });
 });
-var _default = exports.default = DropdownButton;
+var _default = DropdownButton;
+exports["default"] = _default;
 //# sourceMappingURL=DropdownButton.cjs.map