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

package/dist/Dropdown/CommonStyling.js

@@ -1,44 +1,24 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-import styled, { css } from 'styled-components';
-import { CommonInteractionStyling } from '../common';
-import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../styles';
-import { ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';
-import { Z_INDEXES } from '../styles/z-indexes';
-import { TooltipTrigger } from '../Tooltips/TooltipStyles';
-export var DropdownContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  ", "\n  ", "\n  ", "\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ", ";\n  }\n\n  input:hover + div {\n    color: ", ";\n  }\n\n  input:active + div {\n    color: ", ";\n  }\n\n\n"])), function (props) {
-  return !props.isButton && (props !== null && props !== void 0 && props.minWidth ? "width: 100%; min-width: ".concat(props.minWidth, ";") : 'width: 100%; min-width: 344px;');
-}, function (props) {
-  return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
-}, function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : 'margin-bottom: 4px;';
-}, Z_INDEXES.focus, COLORS.primary_600, COLORS.primary_800);
-var lockedState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ", " !important;\n  }\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600, COLORS.neutral_600, COLORS.neutral_300);
-var disabledState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n\n  input {\n    color: ", " !important;\n\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), COLORS.white, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
-var activeValidationMessage = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.critical_400);
-var placeholderStyling = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
-export var DropdownInputField = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ", " !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\n  ", "\n  \n  ::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n"])), COLORS.black, function (props) {
-  return props.ellipsis ? 'text-overflow: ellipsis;' : '';
-}, COLORS.neutral_600);
-export var DropdownInputFieldStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ", ";\n  width: 100%;\n\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  ", "\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ", ";\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n  }\n\n  &.button {\n    ", "\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ", ";\n      background: ", ";\n    }\n  }\n\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", ";\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ", " !important;\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), function (props) {
-  return props.minWidth ? "".concat(props.minWidth) : '344px';
-}, COLORS.white, COLORS.neutral_400, TooltipTrigger('hover'), ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), function (props) {
-  return props.isPlaceholder ? COLORS.neutral_600 : undefined;
-}, COLORS.primary_800, COLORS.primary_200, COLORS.primary_600, COLORS.primary_600, COLORS.primary_300, COLORS.primary_800, COLORS.primary_800, function (props) {
-  return ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600);
-}, COLORS.neutral_800, COLORS.neutral_20, function (props) {
-  return props.disabled ? disabledState : '';
-}, function (props) {
-  return props.readOnly ? lockedState : '';
-}, function (props) {
-  return props.showValidationMessage ? activeValidationMessage : '';
-}, function (props) {
-  return props.isPlaceholder ? placeholderStyling : '';
-}, CommonInteractionStyling, Z_INDEXES.dropdown + 1, focusStyles);
-export var DropdownContentButtonStyling = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: 344px;\n"])));
-export var DropdownButtonTextContent = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n"])));
-export var DropdownButtonTextIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n"])));
-export var DropdownButtonTextArrow = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n"])));
-export var DropdownButtonTextStyles = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  flex: 1\n"])));
-export var DropdownButtonTextWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ", "\n\n  .expanded {\n    color: ", ";\n\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:hover:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ", ";\n  }\n\n}"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.neutral_800, DropdownButtonTextContent, COLORS.neutral_20, focusStyles, DropdownButtonTextContent, COLORS.primary_20, COLORS.primary_700, DropdownButtonTextContent, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300);
-//# sourceMappingURL=CommonStyling.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { CommonInteractionStyling } from '../common';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../styles';
+import { ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
+import { TooltipTrigger } from '../Tooltips/TooltipStyles';
+export var DropdownContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n\n  ", "\n  ", "\n  ", "\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ", ";\n  }\n\n  input:hover + div {\n    color: ", ";\n  }\n\n  input:active + div {\n    color: ", ";\n  }\n\n\n"], ["\n  display: inline-block;\n\n  ", "\n  ", "\n  ", "\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ", ";\n  }\n\n  input:hover + div {\n    color: ", ";\n  }\n\n  input:active + div {\n    color: ", ";\n  }\n\n\n"])), function (props) { return !props.isButton && ((props === null || props === void 0 ? void 0 : props.minWidth) ? "width: 100%; min-width: ".concat(props.minWidth, ";") : 'width: 100%; min-width: 344px;'); }, function (props) { return (props.readOnly || props.disabled ? 'cursor: not-allowed;' : ''); }, function (props) { return (props.margin ? "margin: ".concat(props.margin, ";") : 'margin-bottom: 4px;'); }, Z_INDEXES.focus, COLORS.primary_600, COLORS.primary_800);
+var lockedState = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ", " !important;\n  }\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n"], ["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ", " !important;\n  }\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600, COLORS.neutral_600, COLORS.neutral_300);
+var disabledState = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n\n  input {\n    color: ", " !important;\n\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"], ["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n\n  input {\n    color: ", " !important;\n\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), COLORS.white, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
+var activeValidationMessage = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"], ["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.critical_400);
+var placeholderStyling = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
+export var DropdownInputField = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ", " !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\n  ", "\n  \n  ::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n"], ["\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ", " !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\n  ", "\n  \n  ::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n"])), COLORS.black, function (props) { return props.ellipsis ? 'text-overflow: ellipsis;' : ''; }, COLORS.neutral_600);
+export var DropdownInputFieldStyles = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ", ";\n  width: 100%;\n\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  ", "\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ", ";\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n  }\n\n  &.button {\n    ", "\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ", ";\n      background: ", ";\n    }\n  }\n\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", ";\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ", " !important;\n    ", "\n  }\n"], ["\n  ", "\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ", ";\n  width: 100%;\n\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  ", "\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ", ";\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n  }\n\n  &.button {\n    ", "\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ", ";\n      background: ", ";\n    }\n  }\n\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", ";\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ", " !important;\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), function (props) { return (props.minWidth ? "".concat(props.minWidth) : '344px'); }, COLORS.white, COLORS.neutral_400, TooltipTrigger('hover'), ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), function (props) { return props.isPlaceholder ? COLORS.neutral_600 : undefined; }, COLORS.primary_800, COLORS.primary_200, COLORS.primary_600, COLORS.primary_600, COLORS.primary_300, COLORS.primary_800, COLORS.primary_800, function (props) { return ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600); }, COLORS.neutral_800, COLORS.neutral_20, function (props) { return (props.disabled ? disabledState : ''); }, function (props) { return (props.readOnly ? lockedState : ''); }, function (props) { return (props.showValidationMessage ? activeValidationMessage : ''); }, function (props) { return (props.isPlaceholder ? placeholderStyling : ''); }, CommonInteractionStyling, Z_INDEXES.dropdown + 1, focusStyles);
+export var DropdownContentButtonStyling = css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  min-width: 344px;\n"], ["\n  min-width: 344px;\n"])));
+export var DropdownButtonTextContent = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n"], ["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n"])));
+export var DropdownButtonTextIcon = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  width: 24px;\n  height: 24px;\n"], ["\n  width: 24px;\n  height: 24px;\n"])));
+export var DropdownButtonTextArrow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n"], ["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n"])));
+export var DropdownButtonTextStyles = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  flex: 1\n"], ["\n  flex: 1\n"])));
+export var DropdownButtonTextWrapper = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ", "\n\n  .expanded {\n    color: ", ";\n\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:hover:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ", ";\n  }\n\n}"], ["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ", "\n\n  .expanded {\n    color: ", ";\n\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:hover:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ", ";\n  }\n\n}"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.neutral_800, DropdownButtonTextContent, COLORS.neutral_20, focusStyles, DropdownButtonTextContent, COLORS.primary_20, COLORS.primary_700, DropdownButtonTextContent, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/dist/Dropdown/DropdownButton.js

@@ -1,210 +1,107 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-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;
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 /**
  * Import React libraries.
- */
-import * as React from 'react';
-
+ */
+import * as React from 'react';
 /**
  * Import custom components.
- */
-import { IconButton } from '../Button';
-import DropdownContent from './DropdownContent';
-import styled from 'styled-components';
-
-/**
- * Import custom types.
- */
-
-import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef } from '../common';
-import { DropdownButtonTextArrow, DropdownButtonTextContent, DropdownButtonTextIcon, DropdownButtonTextStyles, DropdownButtonTextWrapper } from './CommonStyling';
-import { SystemIcons } from '../icons';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var DropdownButtonContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n"])));
-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 = _objectWithoutProperties(_ref, _excluded);
-  // Globally used variables within the view.
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    dropdownOpen = _React$useState2[0],
-    setDropdownOpen = _React$useState2[1];
-  var _React$useState3 = React.useState(),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    activeDescendant = _React$useState4[0],
-    setActiveDescendant = _React$useState4[1];
-  var _React$useState5 = React.useState([]),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    selectedValues = _React$useState6[0],
-    setSelectedValues = _React$useState6[1];
-  var _React$useState7 = React.useState(null),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    focused = _React$useState8[0],
-    setFocused = _React$useState8[1];
-  var _React$useState9 = React.useState(false),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    keyboardNavigated = _React$useState10[0],
-    setKeyboardNavigated = _React$useState10[1];
-  var dropdownRef = React.useRef(null);
-  var containerRef = useFocusOutsideRef(function () {
-    return setDropdownOpen(false);
-  }, [dropdownRef]);
-  useClickOutsideRef(function () {
-    return setDropdownOpen(false);
-  }, [], containerRef);
-  React.useEffect(function () {
-    !dropdownOpen && setKeyboardNavigated(false);
-  }, [dropdownOpen]);
-  React.useEffect(function () {
-    disabled && setDropdownOpen(false);
-  }, [disabled]);
-  React.useEffect(function () {
-    setSelectedValues(value || []);
-  }, [value]);
-  var handleValueSelect = function handleValueSelect(values) {
-    // Do all required actions
-    onClick(values);
-  };
-
-  /**
-   * Renders Icon Button dropdown menu.
-   * @returns HTML View for the Icon button dropdown menu.
-   */
-  var renderButton = function renderButton() {
-    switch (rest.type) {
-      case 'icon':
-        return /*#__PURE__*/_jsx(IconButton, {
-          ref: ref,
-          variant: "secondary",
-          shape: "circular",
-          role: "button",
-          tooltip: rest.tooltip,
-          id: id,
-          "data-testid": dataTestId,
-          "aria-controls": "".concat(id, "_dropdowncontent"),
-          "aria-activedescendant": activeDescendant,
-          action: function action(event) {
-            setDropdownOpen(!dropdownOpen);
-            if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
-              setKeyboardNavigated(true);
-            }
-          },
-          disabled: disabled,
-          children: icon
-        });
-      case 'text':
-        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(', ');
-        var cls = "".concat(disabled && 'disabled', " ").concat(dropdownOpen && 'expanded', " ").concat(className);
-        return /*#__PURE__*/_jsx(DropdownButtonTextWrapper, {
-          tabIndex: !disabled ? 0 : -1,
-          className: cls,
-          role: "button",
-          id: id,
-          "data-testid": dataTestId,
-          "aria-controls": "".concat(id, "_dropdowncontent"),
-          "aria-activedescendant": activeDescendant,
-          onMouseDown: defaultOnMouseDownHandler,
-          onKeyDown: function onKeyDown(e) {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault();
-              e.stopPropagation();
-              setDropdownOpen(!dropdownOpen);
-              setKeyboardNavigated(true);
-            }
-          },
-          onClick: function onClick() {
-            return !disabled && setDropdownOpen(!dropdownOpen);
-          },
-          children: /*#__PURE__*/_jsxs(DropdownButtonTextContent, {
-            children: [icon && /*#__PURE__*/_jsx(DropdownButtonTextIcon, {
-              children: icon
-            }), /*#__PURE__*/_jsx(DropdownButtonTextStyles, {
-              children: label
-            }), /*#__PURE__*/_jsx(DropdownButtonTextArrow, {
-              children: dropdownOpen ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropUp, {
-                size: "24px"
-              }) : /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {
-                size: "24px"
-              })
-            })]
-          })
-        });
-    }
-  };
-  return /*#__PURE__*/_jsxs(DropdownButtonContainer, {
-    className: className,
-    ref: containerRef,
-    children: [renderButton(), /*#__PURE__*/_jsx(DropdownContent, {
-      ref: dropdownRef,
-      ariaRolesType: "menu",
-      containerRef: containerRef,
-      customizationProps: {
-        itemsType: itemsType,
-        action: action !== null && action !== void 0 ? action : function () {},
-        actionLabel: actionLabel,
-        actionVariant: actionVariant,
-        onValueUpdate: handleValueSelect,
-        multiSelect: multiSelect,
-        actionIcon: actionIcon,
-        actionLoading: actionLoading,
-        scrollable: scrollable,
-        pinTopItem: pinTopItem,
-        maxHeight: maxHeight,
-        items: items
-      },
-      onActiveDescendantChanged: function onActiveDescendantChanged(e) {
-        return setActiveDescendant(e);
-      },
-      focused: focused,
-      setFocused: setFocused,
-      size: size,
-      width: width,
-      alignLeft: alignLeft,
-      isOpen: dropdownOpen,
-      setIsOpen: setDropdownOpen,
-      outline: keyboardNavigated,
-      filter: "",
-      selectedValues: rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues,
-      setSelectedValues: setSelectedValues,
-      messageOnNoResults: "No results",
-      isButton: true,
-      id: "".concat(id, "_dropdowncontent")
-    })]
-  });
-});
-export default DropdownButton;
-//# sourceMappingURL=DropdownButton.js.map
+ */
+import { IconButton } from '../Button';
+import DropdownContent from './DropdownContent';
+import styled from 'styled-components';
+import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef } from '../common';
+import { DropdownButtonTextArrow, DropdownButtonTextContent, DropdownButtonTextIcon, DropdownButtonTextStyles, DropdownButtonTextWrapper } from './CommonStyling';
+import { SystemIcons } from '../icons';
+export var DropdownButtonContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
+var DropdownButton = React.forwardRef(function (_a, ref) {
+    var items = _a.items, icon = _a.icon, disabled = _a.disabled, onClick = _a.onClick, _b = _a.itemsType, itemsType = _b === void 0 ? 'normal' : _b, action = _a.action, _c = _a.actionLabel, actionLabel = _c === void 0 ? '' : _c, actionVariant = _a.actionVariant, actionIcon = _a.actionIcon, actionLoading = _a.actionLoading, size = _a.size, width = _a.width, alignLeft = _a.alignLeft, _d = _a.multiSelect, multiSelect = _d === void 0 ? false : _d, _e = _a.scrollable, scrollable = _e === void 0 ? false : _e, _f = _a.pinTopItem, pinTopItem = _f === void 0 ? false : _f, maxHeight = _a.maxHeight, className = _a.className, value = _a.value, id = _a.id, dataTestId = _a.dataTestId, rest = __rest(_a, ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value", "id", "dataTestId"]);
+    // Globally used variables within the view.
+    var _g = React.useState(false), dropdownOpen = _g[0], setDropdownOpen = _g[1];
+    var _h = React.useState(), activeDescendant = _h[0], setActiveDescendant = _h[1];
+    var _j = React.useState([]), selectedValues = _j[0], setSelectedValues = _j[1];
+    var _k = React.useState(null), focused = _k[0], setFocused = _k[1];
+    var _l = React.useState(false), keyboardNavigated = _l[0], setKeyboardNavigated = _l[1];
+    var dropdownRef = React.useRef(null);
+    var containerRef = useFocusOutsideRef(function () { return setDropdownOpen(false); }, [dropdownRef]);
+    useClickOutsideRef(function () { return setDropdownOpen(false); }, [], containerRef);
+    React.useEffect(function () {
+        !dropdownOpen && setKeyboardNavigated(false);
+    }, [dropdownOpen]);
+    React.useEffect(function () {
+        disabled && setDropdownOpen(false);
+    }, [disabled]);
+    React.useEffect(function () {
+        setSelectedValues(value || []);
+    }, [value]);
+    var handleValueSelect = function (values) {
+        // Do all required actions
+        onClick(values);
+    };
+    /**
+     * Renders Icon Button dropdown menu.
+     * @returns HTML View for the Icon button dropdown menu.
+     */
+    var renderButton = function () {
+        switch (rest.type) {
+            case 'icon':
+                return (React.createElement(IconButton, { ref: ref, variant: "secondary", shape: "circular", role: "button", tooltip: rest.tooltip, id: id, "data-testid": dataTestId, "aria-controls": "".concat(id, "_dropdowncontent"), "aria-activedescendant": activeDescendant, action: function (event) {
+                        setDropdownOpen(!dropdownOpen);
+                        if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
+                            setKeyboardNavigated(true);
+                        }
+                    }, disabled: disabled }, icon));
+            case 'text':
+                var label = rest.keepLabel || !(selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length)
+                    ? rest.label
+                    : items.filter(function (a) { return selectedValues.includes(a.value); }).map(function (a) { var _a; return (_a = a.displayLabel) !== null && _a !== void 0 ? _a : a.value; }).join(', ');
+                var cls = "".concat(disabled && 'disabled', " ").concat(dropdownOpen && 'expanded', " ").concat(className);
+                return React.createElement(DropdownButtonTextWrapper, { tabIndex: !disabled ? 0 : -1, className: cls, role: "button", id: id, "data-testid": dataTestId, "aria-controls": "".concat(id, "_dropdowncontent"), "aria-activedescendant": activeDescendant, onMouseDown: defaultOnMouseDownHandler, onKeyDown: function (e) {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setDropdownOpen(!dropdownOpen);
+                            setKeyboardNavigated(true);
+                        }
+                    }, onClick: function () { return !disabled && setDropdownOpen(!dropdownOpen); } },
+                    React.createElement(DropdownButtonTextContent, null,
+                        icon && React.createElement(DropdownButtonTextIcon, null, icon),
+                        React.createElement(DropdownButtonTextStyles, null, label),
+                        React.createElement(DropdownButtonTextArrow, null, dropdownOpen
+                            ? React.createElement(SystemIcons.ArrowDropUp, { size: "24px" })
+                            : React.createElement(SystemIcons.ArrowDropDown, { size: "24px" }))));
+        }
+    };
+    return (React.createElement(DropdownButtonContainer, { className: className, ref: containerRef },
+        renderButton(),
+        React.createElement(DropdownContent, { ref: dropdownRef, ariaRolesType: "menu", containerRef: containerRef, customizationProps: {
+                itemsType: itemsType,
+                action: action !== null && action !== void 0 ? action : (function () {
+                }),
+                actionLabel: actionLabel,
+                actionVariant: actionVariant,
+                onValueUpdate: handleValueSelect,
+                multiSelect: multiSelect,
+                actionIcon: actionIcon,
+                actionLoading: actionLoading,
+                scrollable: scrollable,
+                pinTopItem: pinTopItem,
+                maxHeight: maxHeight,
+                items: items
+            }, onActiveDescendantChanged: function (e) { return setActiveDescendant(e); }, focused: focused, setFocused: setFocused, size: size, width: width, alignLeft: alignLeft, isOpen: dropdownOpen, setIsOpen: setDropdownOpen, outline: keyboardNavigated, filter: "", selectedValues: rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues, setSelectedValues: setSelectedValues, messageOnNoResults: "No results", isButton: true, id: "".concat(id, "_dropdowncontent") })));
+});
+export default DropdownButton;
+var templateObject_1;

package/dist/Dropdown/DropdownButtonTypes.d.ts

@@ -3,35 +3,62 @@ import { Size, Testable } from '../types';
 import { DropdownItem } from './DropdownContent';
 import { TooltipProps } from "../Tooltips/TooltipTypes";
 export interface DropdownButtonBaseProps extends Testable {
+    /** Optional. Id of the top level component, button or text wrapper, depending on 'type'. */
     id?: string;
+    /** Required. Array of items to be shown in the dropdown. */
     items: DropdownItem[];
+    /** Optional. Currently selected items. */
     value?: string[];
+    /** Optional. Handler to be called, provides array of values of currently selected items. */
     onClick: (value: string[]) => void;
+    /** Optional. If disabled user can not interact with the button. */
     disabled?: boolean;
-    size?: Size;
+    /** Optional. Size of the items in the dropdown content, does not affect button itself. */
+    size?: Size.Small | Size.Medium | Size.Large;
+    /** Optional. Type of the items to be shown in the dropdown. */
     itemsType?: 'normal' | 'radio' | 'checkbox';
+    /** Optional. Handler of the extra action item to be shown in the dropdown content. */
     action?: () => void;
+    /** Optional. Label of the extra action item to be shown in the dropdown content. */
     actionLabel?: string;
+    /** Optional. Icon of the extra action item to be shown in the dropdown content. */
     actionIcon?: React.ReactNode;
+    /** Optional. Loading state of the extra action item to be shown in the dropdown content. */
     actionLoading?: boolean;
+    /** Optional. Button variant of the extra action item in the dropdown contnet. */
     actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
+    /** Optional. If set, then user can select multiple items in the dropdown. */
     multiSelect?: boolean;
+    /** Optional. If set, then dropdown content is scrollable. */
     scrollable?: boolean;
+    /** Optional. Maximum height of the dropdown content container. */
     maxHeight?: string;
+    /** Optional. If this flag is set, multiselect flag is set and checkbox or radio item types are used, then
+     *  will show extra item in the top that will allow to 'Select all' items. */
     pinTopItem?: boolean;
+    /** Optional. Custom classname to set on the top level container of the component */
     className?: string;
+    /** Optional. Icon of the component, is required if type 'icon' is used. */
     icon?: React.ReactNode;
+    /** Optional. Sets width of the dropdown container. */
     width?: string;
+    /** Optional. If set, then dropdown content will be aligned with the left edge of the button, otherwise with the right edge. */
     alignLeft?: boolean;
 }
-export type IconDropdownButtonProps = DropdownButtonBaseProps & {
+export declare type IconDropdownButtonProps = DropdownButtonBaseProps & {
+    /** Icon type of the dropdown button. */
     type: 'icon';
+    /** Required. Icon to be shown with the component. */
     icon: React.ReactNode;
+    /** Optional. Tooltip to be shown with the component. */
     tooltip?: TooltipProps;
 };
-export type TextDropdownButtonProps = DropdownButtonBaseProps & {
+export declare type TextDropdownButtonProps = DropdownButtonBaseProps & {
+    /** Text drodown button type. */
     type: 'text';
+    /** Optional. Label to be shown with the dropdown button if none of the items in the dropdown is selected. */
     label?: string;
+    /** Optional. If set to true, then 'label' will be shown even if user selects items in the dropdown. */
     keepLabel?: boolean;
 };
-export type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;
+export declare type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;

package/dist/Dropdown/DropdownButtonTypes.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=DropdownButtonTypes.js.map
+export {};

package/dist/Dropdown/DropdownContent.d.ts

@@ -19,14 +19,23 @@ export declare const DropdownContentListContainer: import("styled-components").S
     outline?: boolean | undefined;
 }, never>;
 export interface DropdownItem {
+    /** Required. Value of the DropdownItem. */
     value: string;
+    /** Optional. Display label to show in the MenuItem. If not provided then 'value' will be used as label. */
     displayLabel?: string;
+    /** Optional. Note label to be shown under the Display label in the MenuItem. */
     noteLabel?: string;
+    /**  */
     suggestion?: boolean;
+    /** Optional. Show dividing line on the top of the item. */
     showDividerAbove?: boolean;
+    /** Optional. If disabled user can not interact with the item. */
     disabled?: boolean;
+    /** Optional. If item is locked then user can not interact with the item and 'lock' icon is shown on the right side of the item. */
     locked?: boolean;
+    /** Optional. Icon to be shown on the left side of the menu item */
     icon?: React.ReactNode;
+    /**  */
     customContent?: React.ReactNode;
 }
 export interface DropdownCustomizationProps {
@@ -51,7 +60,7 @@ export interface DropdownProps {
     alignLeft?: boolean;
     isOpen: boolean;
     setIsOpen: (open: boolean) => void;
-    size?: Size;
+    size?: Size.Small | Size.Medium | Size.Large;
     id: string;
     filter: string;
     width?: string;