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

package/dist/Dropdown/CommonStyling.js

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

@@ -27,13 +27,17 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 var MAX_MENU_HEIGHT = 240;
 var AVG_OPTION_HEIGHT = 48;
 var OFFSET_BEFORE_SHOW = 1000000;
-var DropdownContentContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), _styles.COLORS.white, _zIndexes.Z_INDEXES.dropdown, function (props) {
+var DropdownContentContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, _zIndexes.Z_INDEXES.dropdown, function (props) {
   return props.isButton ? '-4px' : '4px 0px';
 }, function (props) {
   return "transform: translate(".concat(props.offsetLeft, ", ").concat(props.offsetTop, ");");
 }, OFFSET_BEFORE_SHOW, OFFSET_BEFORE_SHOW, function (props) {
   return props.isButton ? _CommonStyling.DropdownContentButtonStyling : '';
-}, _styles.COLORS.neutral_100, function (props) {
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
   return props.size == _types.Size.Large ? '320px' : props.size == _types.Size.Medium ? '280px' : '240px';
 }, function (props) {
   return props.size == _types.Size.Large ? '10px' : props.size == _types.Size.Medium ? '8px' : '6px';
@@ -58,28 +62,30 @@ var DropdownContentListContainer = _styledComponents["default"].div(_templateObj
 }, (0, _styles.scrollBarStyling)(_types.Size.Small));
 exports.DropdownContentListContainer = DropdownContentListContainer;
 var DropdownContentMenuContentContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  h1,\n  h2,\n  h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"])), function (props) {
-  return props.size == _types.Size.Large && (0, _typography.ComponentXLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500);
+  return props.size == _types.Size.Large && (0, _typography.ComponentXLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme));
 }, function (props) {
-  return props.size == _types.Size.Medium && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500);
+  return props.size == _types.Size.Medium && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme));
 }, function (props) {
-  return (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500);
+  return (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme));
 }, function (props) {
   return props.size == _types.Size.Small || !props.size ? '10px 16px 6px' : props.size == _types.Size.Medium ? '16px 24px 8px' : '16px 32px 8px';
 }, function (props) {
-  return props.size == _types.Size.Large && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_500);
+  return props.size == _types.Size.Large && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme));
 }, function (props) {
-  return props.size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_500);
+  return props.size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme));
 }, function (props) {
-  return (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_500);
+  return (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme));
 }, function (props) {
   return props.size == _types.Size.Small || !props.size ? '8px 16px' : props.size == _types.Size.Medium ? '12px 24px' : '16px 32px';
 });
 var DividerContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n\n  margin-top: ", ";\n\n  div.divider {\n    width: 100%;\n    margin: 0px;\n  }\n"])), function (props) {
   return props.size == _types.Size.Large ? '16px' : props.size == _types.Size.Medium ? '12px' : props.size == _types.Size.Small || !props.size ? '8px' : '6px';
 });
-var DropdownContentTopItemContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"])), _styles.COLORS.neutral_200);
+var DropdownContentTopItemContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+});
 var DropdownContentActionButtonContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), function (props) {
-  return props.scrollable ? "border-top: 1px solid  ".concat(_styles.COLORS.neutral_200, ";") : '';
+  return props.scrollable ? "border-top: 1px solid  ".concat(_styles.COLORS.getColor('neutral_200', props.theme), ";") : '';
 }, function (props) {
   return props.scrollable ? 'margin-top: 4px;' : '';
 }, function (props) {