@laerdal/life-react-components 5.0.5-dev.3 → 5.0.5-dev.4.full

package/dist/Dropdown/DropdownButtonTypes.d.ts

@@ -1,63 +1,64 @@
-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;
-    /** 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 & {
-    /** 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 & {
-    /** 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;
+/// <reference types="react" />
+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;
+    /** 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 & {
+    /** 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 & {
+    /** 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;

package/dist/Dropdown/DropdownButtonTypes.js.map

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

package/dist/Dropdown/DropdownContent.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DropdownContentListContainer = exports.DropdownContentItemsContainer = exports.DropdownContentContainer = void 0;
+exports["default"] = exports.DropdownContentListContainer = exports.DropdownContentItemsContainer = exports.DropdownContentContainer = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -21,13 +21,13 @@ var _zIndexes = require("../styles/z-indexes");
 var _MenuItem = _interopRequireDefault(require("../MenuItem/MenuItem"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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  inset: 0px auto auto 100%;\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\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) {
+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  inset: 0px auto auto 100%;\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\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';
@@ -45,9 +45,9 @@ var DropdownContentContainer = _styledComponents.default.div(_templateObject ||
   return !props.$scrollable ? 'auto' : props.$maxHeight ? props.$maxHeight : props.$size == _types.Size.Large ? '320px' : props.$size == _types.Size.Medium ? '280px' : '240px';
 });
 exports.DropdownContentContainer = DropdownContentContainer;
-var DropdownContentItemsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"])), _zIndexes.Z_INDEXES.hover, _zIndexes.Z_INDEXES.active, _zIndexes.Z_INDEXES.focus);
+var DropdownContentItemsContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"])), _zIndexes.Z_INDEXES.hover, _zIndexes.Z_INDEXES.active, _zIndexes.Z_INDEXES.focus);
 exports.DropdownContentItemsContainer = DropdownContentItemsContainer;
-var DropdownContentListContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", "\n  ", "\n  div.divider {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    word-break: break-word;\n  }\n\n  *:focus {\n    outline: none !important;\n  }\n\n  ", "\n"])), function (props) {
+var DropdownContentListContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  ", "\n  ", "\n  ", "\n  div.divider {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    word-break: break-word;\n  }\n\n  *:focus {\n    outline: none !important;\n  }\n\n  ", "\n"])), function (props) {
   return props.$scrollable ? 'overflow-y: scroll;' : '';
 }, function (props) {
   return props.$scrollable ? 'margin-right: 6px;' : '';
@@ -61,7 +61,7 @@ var DropdownContentListContainer = _styledComponents.default.div(_templateObject
   return props.$size == _types.Size.Large ? '8px' : props.$size == _types.Size.Medium ? '4px' : '0px';
 }, (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) {
+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.getColor('neutral_500', props.theme));
 }, function (props) {
   return props.$size == _types.Size.Medium && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme));
@@ -78,21 +78,21 @@ var DropdownContentMenuContentContainer = _styledComponents.default.div(_templat
 }, 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) {
+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"])), function (props) {
+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) {
+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.getColor('neutral_200', props.theme), ";") : '';
 }, function (props) {
   return props.$scrollable ? 'margin-top: 4px;' : '';
 }, function (props) {
   return props.$size === _types.Size.Small || !props.$size ? '4px 16px 0px' : props.$size === _types.Size.Medium ? '12px 16px 8px' : '16px 16px 12px';
 });
-var Overlay = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"])), _zIndexes.Z_INDEXES.modal);
-var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+var Overlay = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"])), _zIndexes.Z_INDEXES.modal);
+var DropdownContent = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _ref2, _customizationProps$a;
   var id = _ref.id,
     customizationProps = _ref.customizationProps,
@@ -113,26 +113,26 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     onActiveDescendantChanged = _ref.onActiveDescendantChanged,
     _ref$ariaRolesType = _ref.ariaRolesType,
     ariaRolesType = _ref$ariaRolesType === void 0 ? 'menu' : _ref$ariaRolesType;
-  var _React$useState = _react.default.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+  var _React$useState = _react["default"].useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     isUp = _React$useState2[0],
     setIsUp = _React$useState2[1];
-  var _React$useState3 = _react.default.useState(false),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+  var _React$useState3 = _react["default"].useState(false),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
     locationDefined = _React$useState4[0],
     setLocationDefined = _React$useState4[1];
-  var _React$useState5 = _react.default.useState({
+  var _React$useState5 = _react["default"].useState({
       top: '0',
       left: '0'
     }),
-    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
     offset = _React$useState6[0],
     setOffset = _React$useState6[1];
-  var dropdownContentRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : _react.default.useRef(null);
+  var dropdownContentRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : _react["default"].useRef(null);
   if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';
   if (!size) size = _types.Size.Small;
-  var itemsListRef = _react.default.useRef(null);
-  var actionButtonRef = _react.default.useRef(null);
+  var itemsListRef = _react["default"].useRef(null);
+  var actionButtonRef = _react["default"].useRef(null);
   var determineDropUp = function determineDropUp() {
     var options = customizationProps.items;
     var rect = containerRef.current.getBoundingClientRect();
@@ -209,35 +209,35 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       }
     }
   };
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     document.addEventListener('keydown', handleKeyDown);
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, []);
-  var scrollPosition = _react.default.useRef(0);
+  var scrollPosition = _react["default"].useRef(0);
   var handleScroll = function handleScroll() {
     var _itemsListRef$current;
     scrollPosition.current = (_itemsListRef$current = itemsListRef.current) === null || _itemsListRef$current === void 0 ? void 0 : _itemsListRef$current.scrollTop;
   };
-  _react.default.useLayoutEffect(function () {
+  _react["default"].useLayoutEffect(function () {
     var _scrollPosition$curre;
     if (itemsListRef.current) itemsListRef.current.scrollTop = (_scrollPosition$curre = scrollPosition.current) !== null && _scrollPosition$curre !== void 0 ? _scrollPosition$curre : 0;
   }, [selectedValues]);
   var getCorrectRef = function getCorrectRef(ref) {
     switch (customizationProps.itemsType) {
       case 'normal':
-        return ref || /*#__PURE__*/_react.default.createRef();
+        return ref || /*#__PURE__*/_react["default"].createRef();
       default:
-        return ref || /*#__PURE__*/_react.default.createRef();
+        return ref || /*#__PURE__*/_react["default"].createRef();
     }
   };
   var arrLength = getFilteredItems().length;
-  var _React$useState7 = _react.default.useState([]),
-    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+  var _React$useState7 = _react["default"].useState([]),
+    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
     elRefs = _React$useState8[0],
     setElRefs = _React$useState8[1];
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if ((elRefs === null || elRefs === void 0 ? void 0 : elRefs.length) !== arrLength) {
       setFocused(null);
     }
@@ -247,7 +247,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       });
     });
   }, [isOpen, arrLength]);
-  _react.default.useLayoutEffect(function () {
+  _react["default"].useLayoutEffect(function () {
     isOpen && !locationDefined && determineDropUp();
   }, [isOpen, locationDefined]);
   var haveTopItem = function haveTopItem() {
@@ -262,19 +262,19 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     });
   };
 
-  /**
-   * when dropdown opens set correct position of focused item
+  /**
+   * when dropdown opens set correct position of focused item
    * */
-  _react.default.useLayoutEffect(function () {
+  _react["default"].useLayoutEffect(function () {
     if (isOpen && (focused || focused === 0)) {
       setNewFocusedElement(focused === 0 && !haveTopItem() ? 1 : focused);
     }
   }, [isOpen, focused]);
 
-  /**
-   * Reset dropdown content state on close
+  /**
+   * Reset dropdown content state on close
    * */
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (!isOpen) {
       var _dropdownContentRef$c2, _dropdownContentRef$c3;
       setLocationDefined(false);
@@ -304,15 +304,15 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     }
   }, [isOpen, dropdownContentRef, focused, outline]);
 
-  /**
-   * Scroll item container to top when dropdown opens
+  /**
+   * Scroll item container to top when dropdown opens
    * */
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (isOpen && itemsListRef.current) {
       itemsListRef.current.scrollTop = 0;
     }
   }, [isOpen]);
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (isOpen) {
       var observer = new IntersectionObserver(function (entries) {
         if (!entries[0].isIntersecting) {
@@ -340,7 +340,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   var handleItemClick = function handleItemClick(selected, item) {
     var newValue = [];
     if (customizationProps.multiSelect) {
-      if (selected) newValue = [].concat((0, _toConsumableArray2.default)(selectedValues), [item.value]);else newValue = selectedValues.filter(function (x) {
+      if (selected) newValue = [].concat((0, _toConsumableArray2["default"])(selectedValues), [item.value]);else newValue = selectedValues.filter(function (x) {
         return x != item.value;
       });
     } else newValue = selected ? [item.value] : [];
@@ -408,7 +408,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         selected: !customizationProps.multiSelect || allSelected
       }), customizationProps.itemsType === 'normal' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: suggestions.map(function (x) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem["default"], {
             role: ariaRolesType == 'input' ? 'option' : 'menu',
             item: x,
             size: size,
@@ -434,7 +434,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   };
   var getElements = function getElements(messageOnNoResults, size) {
     if (getFilteredItems().length === 0) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem["default"], {
         item: {
           value: messageOnNoResults,
           disabled: true
@@ -451,7 +451,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         return x && (customizationProps.itemsType != 'normal' || !x.suggestion);
       }).map(function (item, index) {
         var _item$displayLabel, _item$displayLabel2;
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
           children: [item.customContent, !item.customContent && customizationProps.itemsType == 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.RadioButton, {
             role: "menuitemradio",
             select: function select(selected) {
@@ -486,7 +486,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
             id: "".concat(id, "_").concat(index + 1),
             label: (_item$displayLabel2 = item.displayLabel) !== null && _item$displayLabel2 !== void 0 ? _item$displayLabel2 : item.value,
             selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value)
-          }, "key_".concat(id, "_").concat(index + 1)), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+          }, "key_".concat(id, "_").concat(index + 1)), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem["default"], {
             role: ariaRolesType == 'input' ? 'option' : 'menu',
             id: "".concat(id, "_").concat(index + 1),
             item: item,
@@ -553,7 +553,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       }), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownContentActionButtonContainer, {
         $size: size,
         $scrollable: customizationProps.scrollable,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
           width: "100%",
           role: "menuitem",
           icon: customizationProps.actionIcon,
@@ -572,47 +572,47 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   });
 });
 DropdownContent.propTypes = {
-  isButton: _propTypes.default.bool.isRequired,
-  customizationProps: _propTypes.default.shape({
-    itemsType: _propTypes.default.oneOf(['radio', 'checkbox', 'normal']),
-    menuContent: _propTypes.default.node,
-    scrollable: _propTypes.default.bool,
-    multiSelect: _propTypes.default.bool,
-    maxHeight: _propTypes.default.string,
-    actionLabel: _propTypes.default.string,
-    actionIcon: _propTypes.default.node,
-    actionLoading: _propTypes.default.bool,
-    actionDisabled: _propTypes.default.bool,
-    action: _propTypes.default.func.isRequired,
-    pinTopItem: _propTypes.default.bool,
-    onValueUpdate: _propTypes.default.func.isRequired,
-    items: _propTypes.default.arrayOf(_propTypes.default.shape({
-      value: _propTypes.default.string.isRequired,
-      displayLabel: _propTypes.default.string,
-      noteLabel: _propTypes.default.string,
-      suggestion: _propTypes.default.bool,
-      showDividerAbove: _propTypes.default.bool,
-      disabled: _propTypes.default.bool,
-      locked: _propTypes.default.bool,
-      icon: _propTypes.default.node,
-      customContent: _propTypes.default.node
+  isButton: _propTypes["default"].bool.isRequired,
+  customizationProps: _propTypes["default"].shape({
+    itemsType: _propTypes["default"].oneOf(['radio', 'checkbox', 'normal']),
+    menuContent: _propTypes["default"].node,
+    scrollable: _propTypes["default"].bool,
+    multiSelect: _propTypes["default"].bool,
+    maxHeight: _propTypes["default"].string,
+    actionLabel: _propTypes["default"].string,
+    actionIcon: _propTypes["default"].node,
+    actionLoading: _propTypes["default"].bool,
+    actionDisabled: _propTypes["default"].bool,
+    action: _propTypes["default"].func.isRequired,
+    pinTopItem: _propTypes["default"].bool,
+    onValueUpdate: _propTypes["default"].func.isRequired,
+    items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      value: _propTypes["default"].string.isRequired,
+      displayLabel: _propTypes["default"].string,
+      noteLabel: _propTypes["default"].string,
+      suggestion: _propTypes["default"].bool,
+      showDividerAbove: _propTypes["default"].bool,
+      disabled: _propTypes["default"].bool,
+      locked: _propTypes["default"].bool,
+      icon: _propTypes["default"].node,
+      customContent: _propTypes["default"].node
     })).isRequired
   }).isRequired,
-  alignLeft: _propTypes.default.bool,
-  isOpen: _propTypes.default.bool.isRequired,
-  setIsOpen: _propTypes.default.func.isRequired,
-  id: _propTypes.default.string.isRequired,
-  filter: _propTypes.default.string.isRequired,
-  width: _propTypes.default.string,
-  onActiveDescendantChanged: _propTypes.default.func,
-  selectedValues: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-  setSelectedValues: _propTypes.default.func.isRequired,
-  messageOnNoResults: _propTypes.default.string.isRequired,
-  focused: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf([null])]),
-  setFocused: _propTypes.default.func.isRequired,
-  outline: _propTypes.default.bool,
-  ariaRolesType: _propTypes.default.oneOf(['input', 'menu'])
+  alignLeft: _propTypes["default"].bool,
+  isOpen: _propTypes["default"].bool.isRequired,
+  setIsOpen: _propTypes["default"].func.isRequired,
+  id: _propTypes["default"].string.isRequired,
+  filter: _propTypes["default"].string.isRequired,
+  width: _propTypes["default"].string,
+  onActiveDescendantChanged: _propTypes["default"].func,
+  selectedValues: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired,
+  setSelectedValues: _propTypes["default"].func.isRequired,
+  messageOnNoResults: _propTypes["default"].string.isRequired,
+  focused: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].oneOf([null])]),
+  setFocused: _propTypes["default"].func.isRequired,
+  outline: _propTypes["default"].bool,
+  ariaRolesType: _propTypes["default"].oneOf(['input', 'menu'])
 };
 var _default = DropdownContent;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=DropdownContent.cjs.map