@laerdal/life-react-components 3.5.2-uss.hackathon → 3.5.3

package/dist/js/Dropdown/CommonStyling.js

@@ -1,93 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ButtonDropdownWrapper = exports.DropdownButtonCSS = exports.DropdownButton = exports.DropdownContentStyling = exports.ButtonDropdownContentStyling = exports.StyledField = exports.InputField = exports.Dropdown = void 0;
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _common = require("../common");
-
-var _styles = require("../styles");
-
-var _typography = require("../styles/typography");
-
-var _types = require("../types");
-
-var _zIndexes = require("../styles/z-indexes");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Dropdown = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  ", "\n  ", "\n  ", "\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ", ";\n  }\n\n  input:active + div {\n    color: ", ";\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.locked || props.disabled ? 'cursor: not-allowed;' : '';
-}, function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, _styles.COLORS.primary_600, _styles.COLORS.primary_800);
-
-exports.Dropdown = Dropdown;
-var lockedState = (0, _styledComponents.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  input {\n    color: ", " !important;\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600, _styles.COLORS.neutral_600);
-var disabledState = (0, _styledComponents.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  svg {\n    color: ", " !important;\n  }\n  input {\n    color: ", " !important;\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
-var activeValidationMessage = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.warning_400, _styles.COLORS.warning_400, _styles.COLORS.warning_400);
-var placeholderStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600));
-
-var InputField = _styledComponents.default.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ", " !important;\n  padding: 0;\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  ::placeholder {\n    ", "\n\n    ", " {\n      ", "\n    }\n    &.small {\n      ", "\n    }\n    &.medium {\n      ", "\n    }\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.black, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600));
-
-exports.InputField = InputField;
-
-var StyledField = _styledComponents.default.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\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ", "\n    }\n  }\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\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"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), function (props) {
-  return props.minWidth ? "".concat(props.minWidth) : '344px';
-}, _styles.COLORS.white, _styles.COLORS.neutral_400, (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_200, _styles.COLORS.primary_600, _styles.COLORS.primary_300, _styles.COLORS.primary_800, function (props) {
-  return (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, props.disabled ? _styles.COLORS.neutral_300 : _styles.COLORS.neutral_600);
-}, _styles.COLORS.neutral_800, _styles.COLORS.neutral_20, function (props) {
-  return props.disabled ? disabledState : '';
-}, function (props) {
-  return props.locked ? lockedState : '';
-}, function (props) {
-  return props.showValidationMessage ? activeValidationMessage : '';
-}, function (props) {
-  return props.isPlaceholder ? placeholderStyling : '';
-}, _common.CommonInteractionStyling);
-
-exports.StyledField = StyledField;
-var ButtonDropdownContentStyling = (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: 344px;\n  right: 0;\n"])));
-exports.ButtonDropdownContentStyling = ButtonDropdownContentStyling;
-
-var DropdownContentStyling = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n  width: 100%;\n  z-index: ", ";\n  margin-top: ", ";\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\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  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), _styles.COLORS.white, _zIndexes.Z_INDEXES.dropdown, function (props) {
-  return props.isButton ? '-4px' : '2px';
-}, function (props) {
-  return props.isButton ? ButtonDropdownContentStyling : '';
-}, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.neutral_200, _styles.COLORS.neutral_400);
-
-exports.DropdownContentStyling = DropdownContentStyling;
-
-var DropdownButton = _styledComponents.default.button(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
-  return DropdownButtonCSS(props.size);
-});
-
-exports.DropdownButton = DropdownButton;
-
-var DropdownButtonCSS = function DropdownButtonCSS(size) {
-  return (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n  ", "\n\n  position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    div.item-content {\n      margin: auto 0 auto 16px;\n      display: flex;\n      align-items: center;\n\n      div.item-label {\n        flex: 1 0 calc(100% - 40px);\n      }\n\n      div.item-icon {\n        margin-right: 6px;\n      }\n      div.item-icon-old {\n        flex: 1 0 40px;\n        display: flex;\n        justify-content: flex-end;\n      }\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ", ";\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
-};
-
-exports.DropdownButtonCSS = DropdownButtonCSS;
-
-var ButtonDropdownWrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ", "\n  ", "\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n\n}"])), function (props) {
-  return props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;';
-}, function (props) {
-  return props.disabled ? 'pointer-events: none;' : '';
-}, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800);
-
-exports.ButtonDropdownWrapper = ButtonDropdownWrapper;
-//# sourceMappingURL=CommonStyling.js.map

package/dist/js/Dropdown/CommonStyling.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","isButton","minWidth","locked","disabled","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentTextStyle","Italic","InputField","input","Regular","black","BREAKPOINTS","MEDIUM","StyledField","neutral_400","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContentStyling","Z_INDEXES","dropdown","neutral_200","DropdownButton","button","DropdownButtonCSS","size","Size","Small","Medium","Large","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\r\nimport { ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\r\nimport { Size } from '../types';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\r\n  position: relative;\r\n  display: inline-block;\r\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\r\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n\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  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\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  input {\r\n    color: ${COLORS.neutral_600} !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  svg {\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n  input {\r\n    color: ${COLORS.neutral_300} !important;\r\n    ::placeholder {\r\n      color: ${COLORS.neutral_300} !important;\r\n    }\r\n  }\r\n`;\r\n\r\nconst activeValidationMessage = css`\r\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\r\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\r\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\r\n`;\r\n\r\nconst placeholderStyling = css`\r\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n`;\r\n\r\nexport const InputField = styled.input`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\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  ::-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  ::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n    &.small {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n    &.medium {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n`;\r\n\r\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; 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\r\n  input {\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n    color: inherit;\r\n  }\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    &::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    &::placeholder {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    height: 56px;\r\n    padding: 16px;\r\n    &::placeholder {\r\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    outline: 3px solid #ddd;\r\n  }\r\n  &:focus-within {\r\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n  }\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\r\n    input {\r\n      ::placeholder {\r\n        color: ${COLORS.primary_600};\r\n      }\r\n    }\r\n    cursor: pointer;\r\n  }\r\n  &:active {\r\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\r\n    input {\r\n      ::placeholder {\r\n        color: ${COLORS.primary_800};\r\n      }\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  ${(props) => (props.disabled ? disabledState : '')}\r\n  ${(props) => (props.locked ? lockedState : '')}\r\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\r\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\r\n\r\n  ${CommonInteractionStyling};\r\n`;\r\n\r\nexport const ButtonDropdownContentStyling = css`\r\n  min-width: 344px;\r\n  right: 0;\r\n`;\r\n\r\nexport const DropdownContentStyling = styled.div<{ isButton: boolean }>`\r\n  display: none;\r\n  position: absolute;\r\n  background-color: ${COLORS.white};\r\n  width: 100%;\r\n  z-index: ${Z_INDEXES.dropdown};\r\n  margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\r\n\r\n  &.show {\r\n    display: block;\r\n  }\r\n\r\n  &.up {\r\n    top: auto;\r\n    bottom: 100%;\r\n  }\r\n\r\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\r\n\r\n  border: 1px solid ${COLORS.neutral_100};\r\n  box-sizing: border-box;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n  border-radius: 4px;\r\n  padding: 4px 0;\r\n\r\n  max-height: 240px;\r\n  overflow-y: auto;\r\n\r\n  /* width */\r\n  ::-webkit-scrollbar {\r\n    width: 4px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  /* Track */\r\n  ::-webkit-scrollbar-track {\r\n    background: ${COLORS.white};\r\n  }\r\n\r\n  /* Handle */\r\n  ::-webkit-scrollbar-thumb {\r\n    background: ${COLORS.neutral_200};\r\n    border-radius: 8px;\r\n  }\r\n\r\n  /* Handle on hover */\r\n  ::-webkit-scrollbar-thumb:hover {\r\n    background: ${COLORS.neutral_400};\r\n  }\r\n`;\r\n\r\nexport const DropdownButton = styled.button<{ size?: Size }>`\r\n  ${(props) => DropdownButtonCSS(props.size)}\r\n`;\r\n\r\nexport const DropdownButtonCSS = (size?: Size) => {\r\n  return css`\r\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n  ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n  position: relative;\r\n    text-decoration: none;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\r\n    background-color: ${COLORS.white};\r\n    border: none;\r\n    cursor: pointer;\r\n    background: transparent;\r\n    width: 100%;\r\n    text-align: left;\r\n\r\n    span {\r\n      margin: auto 0 auto 16px;\r\n      line-height: 48px;\r\n    }\r\n\r\n    div.item-content {\r\n      margin: auto 0 auto 16px;\r\n      display: flex;\r\n      align-items: center;\r\n\r\n      div.item-label {\r\n        flex: 1 0 calc(100% - 40px);\r\n      }\r\n\r\n      div.item-icon {\r\n        margin-right: 6px;\r\n      }\r\n      div.item-icon-old {\r\n        flex: 1 0 40px;\r\n        display: flex;\r\n        justify-content: flex-end;\r\n      }\r\n    }\r\n\r\n    ${CommonInteractionStyling};\r\n\r\n    &.active {\r\n      background: ${COLORS.neutral_20};\r\n\r\n      &::after {\r\n        position: absolute;\r\n        content: ' ';\r\n        width: 4px;\r\n        top: 0;\r\n        bottom: 0;\r\n        left: 2px;\r\n        background-color: ${COLORS.primary_500};\r\n\r\n        border-radius: 2px;\r\n      }\r\n    }\r\n\r\n    &:disabled {\r\n      background-color: transparent;\r\n      cursor: not-allowed;\r\n      color: ${COLORS.neutral_200};\r\n    }\r\n\r\n    &.active:hover {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_600};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${COLORS.primary_500};\r\n      }\r\n    }\r\n\r\n    &.active:active {\r\n      background-color: ${COLORS.primary_100};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${COLORS.primary_500};\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\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\r\n  .button {\r\n    min-width: 64px;\r\n  }\r\n\r\n  .value {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    justify-content: center;\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n\r\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\r\n  ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\r\n  \r\n  &:hover .button,\r\n  & > .button:hover {\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:focus .button,\r\n  & > .button:focus {\r\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\r\n    outline: none;\r\n  }\r\n\r\n  &:active .button,\r\n  & > .button:active {\r\n    box-shadow: none;\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n  }\r\n\r\n}`;\r\n"],"file":"CommonStyling.js"}

package/dist/js/Dropdown/DropdownButton.d.ts

@@ -1,6 +0,0 @@
-/**
- * Import custom types.
- */
-import { DropdownButtonProps } from './DropdownButtonTypes';
-declare const DropdownButton: ({ items, icon, disabled, onClick, itemsType, action, actionLabel, actionVariant, actionIcon, actionLoading, width, size, alignLeft, multiSelect, scrollable, pinTopItem, maxHeight }: DropdownButtonProps) => JSX.Element;
-export default DropdownButton;

package/dist/js/Dropdown/DropdownButton.js

@@ -1,164 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _Button = require("../Button");
-
-var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n"])));
-
-var DropdownButton = function DropdownButton(_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,
-      width = _ref.width,
-      size = _ref.size,
-      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;
-
-  // 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),
-      selectedValues = _React$useState4[0],
-      setSelectedValues = _React$useState4[1];
-
-  var _React$useState5 = React.useState(null),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      focused = _React$useState6[0],
-      setFocused = _React$useState6[1];
-
-  var buttonRef = React.useRef(null);
-
-  var handleValueSelect = function handleValueSelect(values) {
-    // Do all required actions
-    onClick(values);
-  };
-
-  var handleKeyDown = function handleKeyDown(e) {
-    if (buttonRef !== null && buttonRef !== void 0 && buttonRef.current && buttonRef.current.contains(e.target)) {
-      if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {
-        if (!dropdownOpen) setFocused(0);
-
-        if (e.keyCode != 40) {
-          e.preventDefault();
-          buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current.click();
-        }
-      }
-    }
-  };
-
-  React.useEffect(function () {
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  });
-  /**
-   * Renders Icon Button dropdown menu.
-   * @returns HTML View for the Icon button dropdown menu.
-   */
-
-  var renderIconButton = function renderIconButton() {
-    return /*#__PURE__*/React.createElement(_Button.IconButton, {
-      ref: buttonRef,
-      variant: "secondary",
-      shape: "circular",
-      action: function action(event) {
-        if (!event) {
-          //if no event details passed, then this means that user pressed 'enter'
-          if (!dropdownOpen) setFocused(0);
-        }
-
-        setDropdownOpen(!dropdownOpen);
-      },
-      disabled: disabled
-    }, icon);
-  };
-
-  return /*#__PURE__*/React.createElement(Wrapper, null, renderIconButton(), /*#__PURE__*/React.createElement(_DropdownContent.default, {
-    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
-    },
-    focused: focused,
-    setFocused: setFocused,
-    size: size,
-    width: width,
-    alignLeft: alignLeft,
-    isOpen: dropdownOpen,
-    setIsOpen: setDropdownOpen,
-    hideOnClickOutside: true,
-    filter: "",
-    selectedValues: itemsType == 'normal' ? [] : selectedValues,
-    setSelectedValues: setSelectedValues,
-    messageOnNoResults: "No results",
-    isButton: true,
-    id: "dropdown-content"
-  }));
-};
-
-var _default = DropdownButton;
-exports.default = _default;
-//# sourceMappingURL=DropdownButton.js.map

package/dist/js/Dropdown/DropdownButton.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","React","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","buttonRef","useRef","handleValueSelect","values","handleKeyDown","e","current","contains","target","keyCode","preventDefault","click","useEffect","document","addEventListener","removeEventListener","renderIconButton","event","onValueUpdate"],"mappings":"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","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { IconButton } from '../Button';\r\nimport DropdownContent from './DropdownContent';\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport { DropdownButtonProps } from './DropdownButtonTypes';\r\n\r\nconst Wrapper = styled.div`\r\n  position: relative;\r\n  display: inline-block;\r\n`;\r\n\r\nconst DropdownButton = ({ \r\n  items, \r\n  icon, \r\n  disabled,\r\n  onClick,\r\n  itemsType = 'normal',\r\n  action,\r\n  actionLabel = '',\r\n  actionVariant,\r\n  actionIcon,\r\n  actionLoading,\r\n  width,\r\n  size,\r\n  alignLeft,\r\n  multiSelect = false,\r\n  scrollable = false,\r\n  pinTopItem = false,\r\n  maxHeight }: DropdownButtonProps) => {\r\n  // Globally used variables within the view.\r\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\r\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n  const [focused, setFocused] = React.useState<number | null>(null);\r\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n\r\n  const handleValueSelect = (values: string[]) => {\r\n    // Do all required actions\r\n    onClick(values);\r\n  };\r\n\r\n  \r\n  const handleKeyDown = (e: any) => {\r\n    if (buttonRef?.current && buttonRef.current.contains(e.target)) {\r\n      if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {\r\n        if(!dropdownOpen)\r\n          setFocused(0);\r\n          \r\n        if(e.keyCode != 40)\r\n        {\r\n          e.preventDefault();\r\n          buttonRef?.current.click();\r\n        }\r\n      }\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    document.addEventListener('keydown', handleKeyDown);\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyDown);      \r\n    };\r\n  });\r\n\r\n  /**\r\n   * Renders Icon Button dropdown menu.\r\n   * @returns HTML View for the Icon button dropdown menu.\r\n   */\r\n  const renderIconButton = () => {\r\n    return (\r\n      <IconButton ref={buttonRef}  variant=\"secondary\" shape=\"circular\" action={(event: any) => \r\n      {\r\n        if(!event) { //if no event details passed, then this means that user pressed 'enter'\r\n          if(!dropdownOpen)\r\n            setFocused(0);\r\n        }\r\n        setDropdownOpen(!dropdownOpen);\r\n      }} disabled={disabled}>\r\n        {icon}\r\n      </IconButton>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <Wrapper>\r\n      {renderIconButton()}\r\n      <DropdownContent\r\n        customizationProps={{\r\n          itemsType: itemsType,\r\n          action: action ?? (() => {}),\r\n          actionLabel: actionLabel,\r\n          actionVariant: actionVariant,\r\n          onValueUpdate: handleValueSelect,\r\n          multiSelect: multiSelect,\r\n          actionIcon: actionIcon,\r\n          actionLoading: actionLoading,\r\n          scrollable: scrollable,\r\n          pinTopItem: pinTopItem,\r\n          maxHeight: maxHeight,\r\n          items: items\r\n        }}\r\n        focused={focused}\r\n        setFocused={setFocused}\r\n        size={size}\r\n        width={width}\r\n        alignLeft={alignLeft}\r\n        isOpen={dropdownOpen}\r\n        setIsOpen={setDropdownOpen}\r\n        hideOnClickOutside={true}\r\n        filter=''\r\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\r\n        setSelectedValues={setSelectedValues}\r\n        messageOnNoResults='No results'\r\n        isButton={true}\r\n        id='dropdown-content'\r\n      />\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default DropdownButton;\r\n"],"file":"DropdownButton.js"}

package/dist/js/Dropdown/DropdownButtonTypes.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import { Size } from '../types';
-import { DropdownItem } from './DropdownContent';
-export interface DropdownButtonProps {
-    items: DropdownItem[];
-    onClick: (value: string[]) => void;
-    icon?: React.ReactNode;
-    width?: string;
-    disabled?: boolean;
-    size?: Size;
-    itemsType?: 'normal' | 'radio' | 'checkbox';
-    action?: () => void;
-    actionLabel?: string;
-    actionIcon?: React.ReactNode;
-    actionLoading?: boolean;
-    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
-    multiSelect?: boolean;
-    scrollable?: boolean;
-    pinTopItem?: boolean;
-    alignLeft?: boolean;
-    maxHeight?: string;
-}

package/dist/js/Dropdown/DropdownButtonTypes.js

@@ -1,6 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=DropdownButtonTypes.js.map

package/dist/js/Dropdown/DropdownButtonTypes.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"DropdownButtonTypes.js"}

package/dist/js/Dropdown/DropdownContent.d.ts

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Size } from '../types';
-export declare const DDContainer: import("styled-components").StyledComponent<"div", any, {
-    isButton: boolean;
-    width?: string;
-    alignLeft?: boolean;
-    size?: Size;
-    scrollable?: boolean;
-    maxHeight?: string;
-}, never>;
-export interface DropdownItem {
-    value: string;
-    displayLabel?: string;
-    noteLabel?: string;
-    suggestion?: boolean;
-    showDividerAbove?: boolean;
-    disabled?: boolean;
-    icon?: React.ReactNode;
-    customContent?: React.ReactNode;
-}
-export interface DropdownCustomizationProps {
-    itemsType?: 'radio' | 'checkbox' | 'normal';
-    menuContent?: React.ReactNode;
-    scrollable?: boolean;
-    multiSelect?: boolean;
-    maxHeight?: string;
-    actionLabel?: string;
-    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
-    actionIcon?: React.ReactNode;
-    actionLoading?: boolean;
-    actionDisabled?: boolean;
-    action: () => boolean | void | undefined;
-    pinTopItem?: boolean;
-    onValueUpdate: (values: string[]) => boolean | void | undefined;
-    items: DropdownItem[];
-}
-export interface DropdownProps {
-    isButton: boolean;
-    customizationProps: DropdownCustomizationProps;
-    alignLeft?: boolean;
-    isOpen: boolean;
-    setIsOpen: (open: boolean) => void;
-    size?: Size;
-    id: string;
-    filter: string;
-    width?: string;
-    hideOnClickOutside: boolean;
-    selectedValues: string[];
-    setSelectedValues: (val: string[]) => void;
-    messageOnNoResults: string;
-    focused: number | null;
-    setFocused: (focused: number | null) => void;
-}
-declare const DropdownContent: React.FunctionComponent<DropdownProps>;
-export default DropdownContent;