@dnanpm/styleguide 3.7.2 → 3.8.2

package/build/cjs/components/Tabs/Tabs.js

@@ -9,11 +9,7 @@ var theme = require('../../themes/theme.js');
 var Box = require('../Box/Box.js');
 var Tab = require('../Tab/Tab.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const Tablist = styled["default"].ul `
+const Tablist = styled.default.ul `
     display: flex;
     flex-flow: row wrap;
     padding: 0;
@@ -40,19 +36,19 @@ const Tablist = styled["default"].ul `
             
                 & > li:first-of-type {
                     border-right: 0 none;
-                    border-top-left-radius: ${theme["default"].radius.default};
+                    border-top-left-radius: ${theme.default.radius.default};
                 }
             
                 & > li:last-of-type {
-                    border-right: 1px solid ${theme["default"].color.line.L03};
-                    border-top-right-radius: ${theme["default"].radius.default};
+                    border-right: 1px solid ${theme.default.color.line.L03};
+                    border-top-right-radius: ${theme.default.radius.default};
                 }
             `;
     }
     if ($type === 'underlined') {
         return `
                 gap: ${isNarrowUnderlined ? '1.25rem' : '2.5rem'};
-                border-bottom: 1px solid ${theme["default"].color.line.L02};
+                border-bottom: 1px solid ${theme.default.color.line.L02};
             `;
     }
     if ($type === 'gray') {
@@ -63,7 +59,7 @@ const Tablist = styled["default"].ul `
     return '';
 }}
 `;
-const ContentContainer = styled["default"].div `
+const ContentContainer = styled.default.div `
     ${({ $type, isFullWidth }) => {
     if ($type === 'box' || $type === 'default') {
         return `
@@ -73,12 +69,12 @@ const ContentContainer = styled["default"].div `
     }
     if ($type === 'panel') {
         return `
-                border-top: 1px solid ${theme["default"].color.line.L03};
+                border-top: 1px solid ${theme.default.color.line.L03};
             `;
     }
     if ($type === 'underlined' || $type === 'gray') {
         return `
-                margin-top: ${theme["default"].grid.gutter};
+                margin-top: ${theme.default.grid.gutter};
             `;
     }
     return '';
@@ -88,7 +84,7 @@ const ContentContainer = styled["default"].div `
 const Tabs = (_a) => {
     var { type = 'box', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
     const [activeTab, setActiveTab] = React.useState(props.defaultTab);
-    const tabs = React.Children.map(props.children, child => React.isValidElement(child) && child.type === Tab["default"] ? child : null);
+    const tabs = React.Children.map(props.children, child => React.isValidElement(child) && child.type === Tab.default ? child : null);
     const onClickTabItem = (tab, e) => {
         setActiveTab(tab);
         if (tab !== activeTab) {
@@ -107,15 +103,15 @@ const Tabs = (_a) => {
     if (!activeTab) {
         setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
     }
-    return (React__default["default"].createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
-        React__default["default"].createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
-            tab.type === Tab["default"] && (React__default["default"].createElement(Tab["default"], { id: tab.props.id, key: tab.props.label, label: tab.props.label, type: props.tabStyle || type, isActive: tab.props.isActive
+    return (React.createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
+        React.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
+            tab.type === Tab.default && (React.createElement(Tab.default, { id: tab.props.id, key: tab.props.label, label: tab.props.label, type: props.tabStyle || type, isActive: tab.props.isActive
                 ? tab.props.isActive
                 : activeTab === tab.props.label, activeTab: tab.props.activeTab, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),
-        React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, as: (type === 'box' || type === 'default') && !props.tabStyle ? Box["default"] : undefined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
-            tab.type === Tab["default"] &&
+        React.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, as: (type === 'box' || type === 'default') && !props.tabStyle ? Box.default : undefined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
+            tab.type === Tab.default &&
             (tab.props.isActive || tab.props.label === activeTab) &&
             tab.props.children))));
 };
 
-exports["default"] = Tabs;
+exports.default = Tabs;

package/build/cjs/components/Textarea/Textarea.js

@@ -9,23 +9,19 @@ var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var LabelText = require('../LabelText/LabelText.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const FieldContainer = styled["default"].div `
-    color: ${theme["default"].color.text.black};
-    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+const FieldContainer = styled.default.div `
+    color: ${theme.default.color.text.black};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
 `;
-const StyledTextarea = styled["default"].textarea `
+const StyledTextarea = styled.default.textarea `
     display: block;
-    font-family: ${theme["default"].fontFamily.default};
-    font-size: ${theme["default"].fontSize.default};
-    line-height: ${theme["default"].lineHeight.default};
+    font-family: ${theme.default.fontFamily.default};
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
     width: 100%;
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
-    border-radius: ${theme["default"].radius.s};
-    border: 1px solid ${theme["default"].color.line.L01};
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
+    border-radius: ${theme.default.radius.s};
+    border: 1px solid ${theme.default.color.line.L01};
 
     &::-ms-clear,
     &::-ms-reveal {
@@ -34,12 +30,12 @@ const StyledTextarea = styled["default"].textarea `
 
     &:disabled,
     &[disabled] {
-        background-color: ${theme["default"].color.background.sand.E01};
+        background-color: ${theme.default.color.background.sand.E01};
     }
 
     &:focus {
-        border: 2px solid ${theme["default"].color.focus.light};
-        outline: 2px solid ${theme["default"].color.focus.dark};
+        border: 2px solid ${theme.default.color.focus.light};
+        outline: 2px solid ${theme.default.color.focus.dark};
     }
 
     &:invalid {
@@ -47,19 +43,19 @@ const StyledTextarea = styled["default"].textarea `
     }
 
     &::placeholder {
-        color: ${theme["default"].color.text.black}${theme["default"].color.transparency.T40};
+        color: ${theme.default.color.text.black}${theme.default.color.transparency.T40};
     }
 `;
-const Message = styled["default"].div `
-    font-size: ${theme["default"].fontSize.s};
-    font-weight: ${theme["default"].fontWeight.book};
-    line-height: ${theme["default"].lineHeight.s};
-    color: ${theme["default"].color.text.gray};
-    margin-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
+const Message = styled.default.div `
+    font-size: ${theme.default.fontSize.s};
+    font-weight: ${theme.default.fontWeight.book};
+    line-height: ${theme.default.lineHeight.s};
+    color: ${theme.default.color.text.gray};
+    margin-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
 `;
-const ErrorMessage = styled["default"](Message) `
-    font-weight: ${theme["default"].fontWeight.medium};
-    color: ${theme["default"].color.notification.error};
+const ErrorMessage = styled.default(Message) `
+    font-weight: ${theme.default.fontWeight.medium};
+    color: ${theme.default.color.notification.error};
 `;
 const Textarea = (_a) => {
     var { height = 3, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["height", 'data-testid']);
@@ -80,11 +76,11 @@ const Textarea = (_a) => {
             inputRef.current.focus();
         }
     };
-    return (React__default["default"].createElement(FieldContainer, { className: props.className },
-        props.label && (React__default["default"].createElement(LabelText["default"], { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
-        React__default["default"].createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-disabled": props.disabled, "aria-label": props.id, "data-testid": dataTestId }),
-        props.commentMessage && (React__default["default"].createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
-        props.status === 'error' && props.errorMessage && (React__default["default"].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+    return (React.createElement(FieldContainer, { className: props.className },
+        props.label && (React.createElement(LabelText.default, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
+        React.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-disabled": props.disabled, "aria-label": props.id, "data-testid": dataTestId }),
+        props.commentMessage && (React.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
+        props.status === 'error' && props.errorMessage && (React.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
-exports["default"] = Textarea;
+exports.default = Textarea;

package/build/cjs/components/Toaster/Toaster.js

@@ -12,44 +12,39 @@ var Box = require('../Box/Box.js');
 var ButtonClose = require('../Button/ButtonClose.js');
 var Icon = require('../Icon/Icon.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
 const iconsMap = {
     info: icons.Info,
     success: icons.Check,
     warning: icons.Warning,
     error: icons.Error,
 };
-const ToasterWrapper = styled__default["default"].div `
+const ToasterWrapper = styled.div `
     width: 300px;
 `;
-const StyledBox = styled__default["default"](Box["default"]) `
+const StyledBox = styled(Box.default) `
     position: relative;
-    font-size: ${theme["default"].fontSize.s};
-    font-weight: ${theme["default"].fontWeight.medium};
-    line-height: ${theme["default"].lineHeight.default};
-    border-left: 5px solid ${({ type }) => theme["default"].color.notification[type]};
+    font-size: ${theme.default.fontSize.s};
+    font-weight: ${theme.default.fontWeight.medium};
+    line-height: ${theme.default.lineHeight.default};
+    border-left: 5px solid ${({ type }) => theme.default.color.notification[type]};
     display: flex;
     align-items: center;
-    padding-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4.5)};
+    padding-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4.5)};
 `;
-const IconWrapper = styled__default["default"].div `
+const IconWrapper = styled.div `
     display: none;
     align-items: center;
-    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4)};
+    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
     overflow: hidden;
 
     ${styledUtils.media.xs `
         display: flex;
     `}
 `;
-const ContentWrapper = styled__default["default"].div `
+const ContentWrapper = styled.div `
     flex: 1;
 `;
-const ButtonCloseStyled = styled__default["default"](ButtonClose["default"]) `
+const ButtonCloseStyled = styled(ButtonClose.default) `
     display: flex;
     top: auto;
 `;
@@ -58,13 +53,13 @@ const Toaster = (_a) => {
     if (props.dismissed) {
         return null;
     }
-    return (React__default["default"].createElement(ToasterWrapper, { role: "alert", "aria-live": "assertive", "aria-atomic": "true", className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(StyledBox, { type: type, padding: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1), elevation: "extraHigh" },
-            React__default["default"].createElement(IconWrapper, null,
-                React__default["default"].createElement(Icon["default"], { icon: iconsMap[type], size: "2rem", color: theme["default"].color.notification[type] })),
-            React__default["default"].createElement(ContentWrapper, null, props.children),
-            React__default["default"].createElement(ButtonCloseStyled, { "aria-label": props.closeLabel, onClick: props.onClickCloseButton },
-                React__default["default"].createElement(Icon["default"], { icon: icons.Close, color: theme["default"].color.text.black })))));
+    return (React.createElement(ToasterWrapper, { role: "alert", "aria-live": "assertive", "aria-atomic": "true", className: props.className, "data-testid": dataTestId },
+        React.createElement(StyledBox, { type: type, padding: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1), elevation: "extraHigh" },
+            React.createElement(IconWrapper, null,
+                React.createElement(Icon.default, { icon: iconsMap[type], size: "2rem", color: theme.default.color.notification[type] })),
+            React.createElement(ContentWrapper, null, props.children),
+            React.createElement(ButtonCloseStyled, { "aria-label": props.closeLabel, onClick: props.onClickCloseButton },
+                React.createElement(Icon.default, { icon: icons.Close, color: theme.default.color.text.black })))));
 };
 
-exports["default"] = Toaster;
+exports.default = Toaster;

package/build/cjs/components/Tooltip/Tooltip.js

@@ -12,11 +12,7 @@ var common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const Helper = styled["default"].div `
+const Helper = styled.default.div `
     display: inline;
     vertical-align: middle;
     ${({ isClickable }) => isClickable && `cursor: pointer`};
@@ -32,44 +28,44 @@ const getArrowOverrides = () => {
         .map(([placement, value]) => `
         &.react-tooltip__place-${placement} {
             & .react-tooltip-arrow {
-                ${value[0]}: -${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.6)} !important;
+                ${value[0]}: -${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.6)} !important;
                 transform: rotate(${value[1]});
             }
         }
     `)
         .join('');
 };
-const StyledReactTooltip = styled["default"](reactTooltip.Tooltip) `
+const StyledReactTooltip = styled.default(reactTooltip.Tooltip) `
     --rt-opacity: 1;
 
-    border: 1px solid ${theme["default"].color.line.L02};
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.5)};
+    border: 1px solid ${theme.default.color.line.L02};
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
     text-align: center;
-    font-size: ${theme["default"].fontSize.default};
-    line-height: ${theme["default"].lineHeight.default};
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
     width: max-content;
-    max-width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 25)};
-    color: ${theme["default"].color.text.black};
-    background-color: ${theme["default"].color.background.white.default};
-    border-radius: ${theme["default"].radius.s};
+    max-width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 25)};
+    color: ${theme.default.color.text.black};
+    background-color: ${theme.default.color.background.white.default};
+    border-radius: ${theme.default.radius.s};
 
-    ${common["default"]({ elevation: 'low' })}
+    ${common.default({ elevation: 'low' })}
 
     & .react-tooltip-arrow {
-        width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.2)};
-        height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.2)};
-        border-bottom: 1px solid ${theme["default"].color.line.L02};
-        border-right: 1px solid ${theme["default"].color.line.L02};
+        width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2)};
+        height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.2)};
+        border-bottom: 1px solid ${theme.default.color.line.L02};
+        border-right: 1px solid ${theme.default.color.line.L02};
     }
 
     ${getArrowOverrides()}
 `;
 const Tooltip = (_a) => {
     var { 'data-testid': dataTestId, closeWithEsc = true } = _a, props = tslib.__rest(_a, ['data-testid', "closeWithEsc"]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        !props.hideTriggerElement && (React__default["default"].createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
-            React__default["default"].createElement(Icon["default"], { icon: icons.Info, size: "1rem", position: props.position }))),
-        React__default["default"].createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
+    return (React.createElement(React.Fragment, null,
+        !props.hideTriggerElement && (React.createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
+            React.createElement(Icon.default, { icon: icons.Info, size: "1rem", position: props.position }))),
+        React.createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
 };
 
-exports["default"] = Tooltip;
+exports.default = Tooltip;

package/build/cjs/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.js

@@ -1,11 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var styled = require('../../../themes/styled.js');
 
 // Tooltip corner tail
-const Tail = styled["default"].div `
+const Tail = styled.default.div `
     position: absolute;
     width: 0;
     height: 0;
@@ -18,7 +16,7 @@ const Tail = styled["default"].div `
     transform: rotate(90deg);
 `;
 // Box shadow of the tooltip tail
-const TailShadow = styled["default"].div `
+const TailShadow = styled.default.div `
     position: absolute;
     width: 0.25rem;
     height: 0.25rem;

package/build/cjs/components/TooltipMenu/TooltipMenu.js

@@ -10,15 +10,11 @@ var theme = require('../../themes/theme.js');
 var Icon = require('../Icon/Icon.js');
 var TooltipMenuExportedStyles = require('./ChildComponents/TooltipMenuExportedStyles.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const Selector = styled["default"].div `
+const Selector = styled.default.div `
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    color: ${p => p.color || theme["default"].color.text.white};
+    color: ${p => p.color || theme.default.color.text.white};
     cursor: pointer;
 
     span + span.dnasg-icon > svg {
@@ -26,11 +22,11 @@ const Selector = styled["default"].div `
         transition: transform 0.15s linear;
     }
 `;
-const Container = styled["default"].div `
+const Container = styled.default.div `
     position: relative;
 `;
-const Tooltip = styled["default"].div `
-    background-color: ${theme["default"].color.background.white.default};
+const Tooltip = styled.default.div `
+    background-color: ${theme.default.color.background.white.default};
     padding: 0.5rem;
     min-height: 3rem;
     min-width: 4rem;
@@ -40,34 +36,34 @@ const Tooltip = styled["default"].div `
     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.48);
     z-index: ${p => p.zIndex};
 `;
-const ChildrenWrapper = styled["default"].span `
+const ChildrenWrapper = styled.default.span `
     > * {
         white-space: nowrap;
     }
 `;
 /** @visibleName Tooltip Menu */
-const TooltipMenu = ({ selector, className, color = theme["default"].color.text.black, children, iconSize = '1.5rem', zIndex = '1', tooltipTop = '2rem', tooltipRight = '-1.25rem', activeColor = color, tooltipIconName, tooltipIcon, tooltipIconSize = '1.5rem', tooltipChevron = true, arrowPosition = '-0.25rem', }) => {
+const TooltipMenu = ({ selector, className, color = theme.default.color.text.black, children, iconSize = '1.5rem', zIndex = '1', tooltipTop = '2rem', tooltipRight = '-1.25rem', activeColor = color, tooltipIconName, tooltipIcon, tooltipIconSize = '1.5rem', tooltipChevron = true, arrowPosition = '-0.25rem', }) => {
     const [showDropdown, setShowDropdown] = React.useState(false);
     const ref = React.useRef(null);
     const toggleState = () => {
         setShowDropdown(!showDropdown);
     };
-    useOutsideClick["default"](ref, () => {
+    useOutsideClick.default(ref, () => {
         if (showDropdown) {
             setShowDropdown(false);
         }
     });
-    return (React__default["default"].createElement(Container, { className: className, ref: ref },
-        React__default["default"].createElement(Selector, { color: showDropdown ? activeColor : color, onClick: toggleState, showDropdown: showDropdown },
-            tooltipIcon && React__default["default"].createElement(Icon["default"], { icon: tooltipIcon, size: tooltipIconSize, position: "left" }),
-            tooltipIconName && (React__default["default"].createElement(Icon["default"], { name: tooltipIconName, size: tooltipIconSize, position: "left" })),
-            React__default["default"].createElement("span", null, selector),
-            tooltipChevron && React__default["default"].createElement(Icon["default"], { icon: icons.ChevronDown, size: iconSize, position: "right" })),
-        showDropdown && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(TooltipMenuExportedStyles.TailShadow, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }),
-            React__default["default"].createElement(TooltipMenuExportedStyles.Tail, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }))),
-        showDropdown && (React__default["default"].createElement(Tooltip, { zIndex: zIndex, tooltipTop: tooltipTop, tooltipRight: tooltipRight },
-            React__default["default"].createElement(ChildrenWrapper, null, children)))));
+    return (React.createElement(Container, { className: className, ref: ref },
+        React.createElement(Selector, { color: showDropdown ? activeColor : color, onClick: toggleState, showDropdown: showDropdown },
+            tooltipIcon && React.createElement(Icon.default, { icon: tooltipIcon, size: tooltipIconSize, position: "left" }),
+            tooltipIconName && (React.createElement(Icon.default, { name: tooltipIconName, size: tooltipIconSize, position: "left" })),
+            React.createElement("span", null, selector),
+            tooltipChevron && React.createElement(Icon.default, { icon: icons.ChevronDown, size: iconSize, position: "right" })),
+        showDropdown && (React.createElement(React.Fragment, null,
+            React.createElement(TooltipMenuExportedStyles.TailShadow, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }),
+            React.createElement(TooltipMenuExportedStyles.Tail, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }))),
+        showDropdown && (React.createElement(Tooltip, { zIndex: zIndex, tooltipTop: tooltipTop, tooltipRight: tooltipRight },
+            React.createElement(ChildrenWrapper, null, children)))));
 };
 
-exports["default"] = TooltipMenu;
+exports.default = TooltipMenu;

package/build/cjs/components/index.d.ts

@@ -31,6 +31,7 @@ export { default as MainNavigation } from './MainNavigation/MainNavigation';
 export { default as Modal } from './Modal/Modal';
 export { default as Notification } from './Notification/Notification';
 export { default as NotificationBadge } from './NotificationBadge/NotificationBadge';
+export { default as Overlay } from './Overlay/Overlay';
 export { default as Pill } from './Pill/Pill';
 export { default as PixelLoader } from './PixelLoader/PixelLoader';
 export { default as PriorityNavigation } from './PriorityNavigation/PriorityNavigation';

package/build/cjs/hooks/useCloseOutsideOrElementClicked.js

@@ -35,4 +35,4 @@ const useCloseOutsideOrElementClicked = ({ ref, closeWhenTagClicked }, callback)
     });
 };
 
-exports["default"] = useCloseOutsideOrElementClicked;
+exports.default = useCloseOutsideOrElementClicked;

package/build/cjs/hooks/useDebounce.js

@@ -20,4 +20,4 @@ callback, delay = DEFAULT_DELAY) => {
     }, [callback, delay]);
 };
 
-exports["default"] = useDebounce;
+exports.default = useDebounce;

package/build/cjs/hooks/useDocHeight.js

@@ -10,7 +10,7 @@ const useDocHeight = () => {
     const setDocHeight = React.useCallback(() => {
         document.documentElement.style.setProperty('--vh100', `${window.innerHeight}px`);
     }, []);
-    const debounceSetDocHeight = useDebounce["default"](setDocHeight, DEBOUNCE_DELAY);
+    const debounceSetDocHeight = useDebounce.default(setDocHeight, DEBOUNCE_DELAY);
     React.useEffect(() => {
         setDocHeight();
         window.addEventListener('resize', debounceSetDocHeight);
@@ -22,4 +22,4 @@ const useDocHeight = () => {
     }, [debounceSetDocHeight, setDocHeight]);
 };
 
-exports["default"] = useDocHeight;
+exports.default = useDocHeight;

package/build/cjs/hooks/useOutsideClick.js

@@ -24,4 +24,4 @@ const useOutsideClick = (ref, callback) => {
     });
 };
 
-exports["default"] = useOutsideClick;
+exports.default = useOutsideClick;

package/build/cjs/hooks/useResizeObserver.d.ts

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-declare const useResizeObserver: <T extends HTMLElement = HTMLElement>(ref?: RefObject<T> | undefined) => {
+declare const useResizeObserver: <T extends HTMLElement = HTMLElement>(ref?: RefObject<T>) => {
     ref: RefObject<T> | undefined;
     width: number;
     height: number;

package/build/cjs/hooks/useResizeObserver.js

@@ -34,4 +34,4 @@ const useResizeObserver = (ref) => {
     return { ref, width: size.width, height: size.height };
 };
 
-exports["default"] = useResizeObserver;
+exports.default = useResizeObserver;

package/build/cjs/hooks/useScrollPosition.d.ts

@@ -12,7 +12,9 @@ interface ScrollPositionProps {
     currPos: ScrollPosition;
 }
 declare const useScrollPosition: {
-    (effect: ({ prevPos, currPos }: ScrollPositionProps) => void, element: MutableRefObject<Element> | undefined, useWindow: boolean, wait: number): void;
+    (effect: {
+        ({ prevPos, currPos }: ScrollPositionProps): void;
+    }, element: MutableRefObject<Element> | undefined, useWindow: boolean, wait: number): void;
     defaultProps: {
         element: boolean;
         useWindow: boolean;

package/build/cjs/hooks/useScrollPosition.js

@@ -67,4 +67,4 @@ useScrollPosition.defaultProps = {
     wait: null,
 };
 
-exports["default"] = useScrollPosition;
+exports.default = useScrollPosition;

package/build/cjs/hooks/useWindowSize.js

@@ -27,4 +27,4 @@ const useWindowSize = (collapseSize) => {
     };
 };
 
-exports["default"] = useWindowSize;
+exports.default = useWindowSize;