@dnanpm/styleguide 3.7.2 → 3.8.2

package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.js

@@ -11,35 +11,31 @@ var theme = require('../../themes/theme.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 SecondaryNavigationWrapper = styled["default"].nav `
-    font-size: ${theme["default"].fontSize.default};
+const SecondaryNavigationWrapper = styled.default.nav `
+    font-size: ${theme.default.fontSize.default};
     padding: 0;
-    background-color: ${({ whiteBg }) => whiteBg ? theme["default"].color.background.white.default : 'transparent'};
+    background-color: ${({ whiteBg }) => whiteBg ? theme.default.color.background.white.default : 'transparent'};
 
     ${({ mobileOnly }) => styledUtils.media.sm `
         display: ${mobileOnly ? 'none' : 'inherit'};
     `};
 
     @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
-        border-bottom: 1px solid ${theme["default"].color.line.L03};
+        border-bottom: 1px solid ${theme.default.color.line.L03};
     }
 `;
-const MobileSelector = styled["default"].button `
+const MobileSelector = styled.default.button `
     display: flex;
     align-items: center;
     justify-content: space-between;
-    line-height: ${theme["default"].lineHeight.default};
-    color: ${theme["default"].color.text.pink};
-    padding: 1rem ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+    line-height: ${theme.default.lineHeight.default};
+    color: ${theme.default.color.text.pink};
+    padding: 1rem ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
     background: transparent;
     border: 0;
-    border-bottom: 1px solid ${theme["default"].color.default.pink};
+    border-bottom: 1px solid ${theme.default.color.default.pink};
     width: 100%;
-    font-size: ${theme["default"].fontSize.default};
+    font-size: ${theme.default.fontSize.default};
 
     &:hover {
         cursor: pointer;
@@ -49,10 +45,10 @@ const MobileSelector = styled["default"].button `
         display: none;
     }
 `;
-const MobileSelectorTitleWrapper = styled["default"].div `
+const MobileSelectorTitleWrapper = styled.default.div `
     display: flex;
 `;
-const MobileSelectorArrow = styled["default"].span `
+const MobileSelectorArrow = styled.default.span `
     display: flex;
 
     .dnasg-icon svg {
@@ -60,7 +56,7 @@ const MobileSelectorArrow = styled["default"].span `
         transform: rotate(${({ isOpen }) => (isOpen ? '180deg' : '0deg')});
     }
 `;
-const MobileSelectorCheck = styled["default"].span `
+const MobileSelectorCheck = styled.default.span `
     margin-left: auto;
 
     .dnasg-icon {
@@ -69,7 +65,7 @@ const MobileSelectorCheck = styled["default"].span `
         }
     }
 `;
-const SecondaryNavigationList = styled["default"].ul `
+const SecondaryNavigationList = styled.default.ul `
     padding: 0;
     list-style-type: none;
     margin: 0;
@@ -77,12 +73,12 @@ const SecondaryNavigationList = styled["default"].ul `
     display: flex;
     flex-direction: column;
     transition: max-height 0.2s ease-in-out, border-bottom 0.2s linear;
-    background-color: ${({ isOpen }) => isOpen ? theme["default"].color.background.white.default : 'transparent'};
+    background-color: ${({ isOpen }) => isOpen ? theme.default.color.background.white.default : 'transparent'};
     max-height: ${({ isOpen }) => (isOpen ? '500vh' : '0')};
-    border-bottom: ${({ isOpen }) => (isOpen ? `1px solid ${theme["default"].color.line.L03}` : 'none')};
+    border-bottom: ${({ isOpen }) => (isOpen ? `1px solid ${theme.default.color.line.L03}` : 'none')};
 
     @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
-        padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+        padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
         max-height: none;
         position: static;
         flex-direction: row;
@@ -92,56 +88,56 @@ const SecondaryNavigationList = styled["default"].ul `
         max-width: ${({ 'max-width': maxWidth }) => (maxWidth ? `${maxWidth}px` : 'none')};
     }
 `;
-const SecondaryNavigationListElement = styled["default"].li `
-    margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+const SecondaryNavigationListElement = styled.default.li `
+    margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
 
     a {
         padding: 1rem 0;
         justify-content: start;
-        color: ${({ isActive }) => (isActive ? theme["default"].color.text.pink : theme["default"].color.text.black)};
-        font-weight: ${({ isActive }) => isActive ? theme["default"].fontWeight.bold : theme["default"].fontWeight.book};
+        color: ${({ isActive }) => (isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
+        font-weight: ${({ isActive }) => isActive ? theme.default.fontWeight.bold : theme.default.fontWeight.book};
         display: flex;
         align-items: center;
 
         &:hover {
-            color: ${theme["default"].color.text.pink};
+            color: ${theme.default.color.text.pink};
             text-decoration: none;
             cursor: ${({ isActive }) => (isActive ? 'auto' : 'pointer')};
         }
 
         @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
-            padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.5)} 0;
-            font-weight: ${theme["default"].fontWeight.book};
+            padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)} 0;
+            font-weight: ${theme.default.fontWeight.book};
         }
     }
 
     @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
-        margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.5)};
+        margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
         white-space: nowrap;
         transition: border-bottom 0.2s linear;
-        border-bottom: ${({ isActive }) => isActive ? `1px solid ${theme["default"].color.default.pink}` : 'none'};
+        border-bottom: ${({ isActive }) => isActive ? `1px solid ${theme.default.color.default.pink}` : 'none'};
 
         &:first-of-type {
             margin-left: 0;
         }
     }
 `;
-const IconWrapper = styled["default"].span `
+const IconWrapper = styled.default.span `
     position: relative;
     display: flex;
-    margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+    margin-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
 
     &:after {
         display: ${({ showNotification }) => (showNotification ? 'inline' : 'none')};
         content: '';
         position: absolute;
-        border-radius: ${theme["default"].radius.circle};
-        width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
-        height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
-        right: -${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.2)};
-        top: -${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.2)};
-        border: 1px solid ${theme["default"].color.default.white};
-        background-color: ${theme["default"].color.default.pink};
+        border-radius: ${theme.default.radius.circle};
+        width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
+        height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
+        right: -${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.2)};
+        top: -${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.2)};
+        border: 1px solid ${theme.default.color.default.white};
+        background-color: ${theme.default.color.default.pink};
     }
 
     @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
@@ -165,7 +161,7 @@ const SecondaryNavigation = (_a) => {
         }
     };
     const ref = React.useRef(null);
-    useOutsideClick["default"](ref, () => {
+    useOutsideClick.default(ref, () => {
         if (isSecondaryNavOpen) {
             setIsSecondaryNavOpen(false);
         }
@@ -173,15 +169,15 @@ const SecondaryNavigation = (_a) => {
     const selectedElement = (_b = props.data.pages) === null || _b === void 0 ? void 0 : _b.find(listElement => currentUrl === listElement.urls[lang]);
     const shouldHighlightSelectedElement = (_c = (selectedElement && highlightIds.some(el => el === selectedElement.id))) !== null && _c !== void 0 ? _c : false;
     const checkIsMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
-    return (React__default["default"].createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: props.mobileOnly, whiteBg: props.whiteBg },
-        selectedElement && (React__default["default"].createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
-            React__default["default"].createElement(MobileSelectorTitleWrapper, null,
-                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default["default"].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
-                    React__default["default"].createElement(Icon["default"], { name: selectedElement.icon }))),
-                React__default["default"].createElement("span", null, selectedElement.titles[lang])),
-            React__default["default"].createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
-                React__default["default"].createElement(Icon["default"], { icon: icons.ChevronDown })))),
-        React__default["default"].createElement(SecondaryNavigationList, { id: props.data.name ||
+    return (React.createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: props.mobileOnly, whiteBg: props.whiteBg },
+        selectedElement && (React.createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
+            React.createElement(MobileSelectorTitleWrapper, null,
+                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React.createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
+                    React.createElement(Icon.default, { name: selectedElement.icon }))),
+                React.createElement("span", null, selectedElement.titles[lang])),
+            React.createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
+                React.createElement(Icon.default, { icon: icons.ChevronDown })))),
+        React.createElement(SecondaryNavigationList, { id: props.data.name ||
                 `secondary-navigation-category-${(_d = props.data.categoryId) !== null && _d !== void 0 ? _d : ''}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, "max-width": maxWidth, "data-testid": "secondary-nav-menu-ul" }, (_e = props.data.pages) === null || _e === void 0 ? void 0 : _e.map((listElement, index) => {
             const linkUrl = listElement.urls[lang];
             const linkTitle = listElement.titles[lang];
@@ -191,14 +187,14 @@ const SecondaryNavigation = (_a) => {
                 : currentUrl.indexOf(linkUrl) > -1;
             const showNotification = highlightIds.some(el => el === listElement.id);
             const isMenuItemLinkAbsolute = checkIsMenuItemLinkAbsolute(linkUrl);
-            return (React__default["default"].createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default["default"].createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                React__default["default"].createElement(Icon["default"], { icon: icons.Check }))))) : (React__default["default"].createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
-                iconName && (React__default["default"].createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
-                    React__default["default"].createElement(Icon["default"], { name: iconName }))),
-                React__default["default"].createElement("span", null, linkTitle),
-                isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                    React__default["default"].createElement(Icon["default"], { icon: icons.Check })))))));
+            return (React.createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                React.createElement(Icon.default, { icon: icons.Check }))))) : (React.createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
+                iconName && (React.createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
+                    React.createElement(Icon.default, { name: iconName }))),
+                React.createElement("span", null, linkTitle),
+                isActive && (React.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                    React.createElement(Icon.default, { icon: icons.Check })))))));
         }))));
 };
 
-exports["default"] = SecondaryNavigation;
+exports.default = SecondaryNavigation;

package/build/cjs/components/Selectbox/Selectbox.js

@@ -13,80 +13,75 @@ var Icon = require('../Icon/Icon.js');
 var LabelText = require('../LabelText/LabelText.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
-
-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 ErrorMessage = styled["default"].div `
-    font-size: ${theme["default"].fontSize.s};
-    font-weight: ${theme["default"].fontWeight.medium};
-    line-height: ${theme["default"].lineHeight.s};
-    color: ${theme["default"].color.notification.error};
-    margin-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
+const ErrorMessage = styled.default.div `
+    font-size: ${theme.default.fontSize.s};
+    font-weight: ${theme.default.fontWeight.medium};
+    line-height: ${theme.default.lineHeight.s};
+    color: ${theme.default.color.notification.error};
+    margin-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
 `;
-const customTheme = Object.assign(Object.assign({}, Select.defaultTheme), { borderRadius: 0, colors: Object.assign(Object.assign({}, Select.defaultTheme.colors), { primary50: theme["default"].color.background.sand.E02, primary25: theme["default"].color.background.sand.E01, primary: theme["default"].color.background.sand.E02 }) });
+const customTheme = Object.assign(Object.assign({}, Select.defaultTheme), { borderRadius: 0, colors: Object.assign(Object.assign({}, Select.defaultTheme.colors), { primary50: theme.default.color.background.sand.E02, primary25: theme.default.color.background.sand.E01, primary: theme.default.color.background.sand.E02 }) });
 const getStyles = () => ({
-    control: (_styles, state) => (Object.assign(Object.assign({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}`, width: '100%', minHeight: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4), backgroundColor: state.isDisabled
-            ? theme["default"].color.background.sand.E01
-            : theme["default"].color.background.white.default, borderRadius: theme["default"].radius.s, border: `1px solid ${theme["default"].color.line.L01}`, overflow: 'auto' }, (state.selectProps.errorState && {
-        borderBottom: `4px solid ${theme["default"].color.notification.error}`,
+    control: (_styles, state) => (Object.assign(Object.assign({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)}`, width: '100%', minHeight: styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4), backgroundColor: state.isDisabled
+            ? theme.default.color.background.sand.E01
+            : theme.default.color.background.white.default, borderRadius: theme.default.radius.s, border: `1px solid ${theme.default.color.line.L01}`, overflow: 'auto' }, (state.selectProps.errorState && {
+        borderBottom: `4px solid ${theme.default.color.notification.error}`,
     })), (!state.menuIsOpen && {
         ':focus-within': {
-            border: `2px solid ${theme["default"].color.focus.light}`,
-            boxShadow: `0px 0px 0px 2px ${theme["default"].color.focus.dark}`,
+            border: `2px solid ${theme.default.color.focus.light}`,
+            boxShadow: `0px 0px 0px 2px ${theme.default.color.focus.dark}`,
             outline: 'none',
         },
     }))),
     valueContainer: styles => (Object.assign(Object.assign({}, styles), { padding: 0 })),
-    multiValue: styles => (Object.assign(Object.assign({}, styles), { padding: `0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}`, backgroundColor: theme["default"].color.background.sand.E02, borderRadius: theme["default"].radius.pill, margin: '2px 6px 2px 0' })),
-    multiValueLabel: styles => (Object.assign(Object.assign({}, styles), { fontSize: theme["default"].fontSize.s, fontWeight: theme["default"].fontWeight.medium, lineHeight: theme["default"].lineHeight.default, alignItems: 'center', color: theme["default"].color.text.black, padding: 0, paddingLeft: 0 })),
-    multiValueRemove: styles => (Object.assign(Object.assign({}, styles), { marginLeft: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1), padding: 0, ':hover': {
+    multiValue: styles => (Object.assign(Object.assign({}, styles), { padding: `0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)}`, backgroundColor: theme.default.color.background.sand.E02, borderRadius: theme.default.radius.pill, margin: '2px 6px 2px 0' })),
+    multiValueLabel: styles => (Object.assign(Object.assign({}, styles), { fontSize: theme.default.fontSize.s, fontWeight: theme.default.fontWeight.medium, lineHeight: theme.default.lineHeight.default, alignItems: 'center', color: theme.default.color.text.black, padding: 0, paddingLeft: 0 })),
+    multiValueRemove: styles => (Object.assign(Object.assign({}, styles), { marginLeft: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1), padding: 0, ':hover': {
             cursor: 'pointer',
-            color: theme["default"].color.text.black,
-            backgroundColor: theme["default"].color.background.sand.E02,
+            color: theme.default.color.text.black,
+            backgroundColor: theme.default.color.background.sand.E02,
         } })),
-    placeholder: styles => (Object.assign(Object.assign({}, styles), { color: theme["default"].color.text.black + theme["default"].color.transparency.T40 })),
+    placeholder: styles => (Object.assign(Object.assign({}, styles), { color: theme.default.color.text.black + theme.default.color.transparency.T40 })),
     indicatorSeparator: styles => (Object.assign(Object.assign({}, styles), { width: 0, backgroundColor: 'transparent', border: 'none' })),
-    clearIndicator: styles => (Object.assign(Object.assign({}, styles), { cursor: 'pointer', color: theme["default"].color.text.black, padding: 0, marginLeft: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1), ':hover': {
-            color: theme["default"].color.text.black,
+    clearIndicator: styles => (Object.assign(Object.assign({}, styles), { cursor: 'pointer', color: theme.default.color.text.black, padding: 0, marginLeft: styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1), ':hover': {
+            color: theme.default.color.text.black,
         } })),
-    dropdownIndicator: (styles, { selectProps: { isSearchable } }) => (Object.assign(Object.assign({}, styles), { color: isSearchable ? theme["default"].color.text.pink : theme["default"].color.text.black, padding: 0, marginLeft: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1), pointerEvents: 'none', ':hover': {
-            color: theme["default"].color.text.black,
+    dropdownIndicator: (styles, { selectProps: { isSearchable } }) => (Object.assign(Object.assign({}, styles), { color: isSearchable ? theme.default.color.text.pink : theme.default.color.text.black, padding: 0, marginLeft: styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1), pointerEvents: 'none', ':hover': {
+            color: theme.default.color.text.black,
         } })),
-    menu: (styles, state) => (Object.assign(Object.assign(Object.assign(Object.assign({}, styles), { boxShadow: 'none', margin: '-3px 0 -3px 0', borderRadius: theme["default"].radius.s, border: `1px solid ${theme["default"].color.line.L01}` }), (state.placement === 'top' && {
+    menu: (styles, state) => (Object.assign(Object.assign(Object.assign(Object.assign({}, styles), { boxShadow: 'none', margin: '-3px 0 -3px 0', borderRadius: theme.default.radius.s, border: `1px solid ${theme.default.color.line.L01}` }), (state.placement === 'top' && {
         borderBottom: 0,
         borderBottomLeftRadius: 0,
         borderBottomRightRadius: 0,
     })), (state.placement === 'bottom' && Object.assign({ borderTop: 0, borderTopLeftRadius: 0, borderTopRightRadius: 0 }, (state.selectProps.errorState && {
         margin: '-2px 0 -3px 0',
     }))))),
-    option: (styles, { isDisabled, isSelected }) => (Object.assign(Object.assign(Object.assign({}, styles), { display: 'flex', justifyContent: 'space-between', color: theme["default"].color.text.black, fontWeight: isSelected ? theme["default"].fontWeight.medium : theme["default"].fontWeight.book, fontSize: theme["default"].fontSize.default, textOverflow: 'ellipsis', whiteSpace: 'pre-wrap', overflow: 'hidden' }), (isDisabled && {
+    option: (styles, { isDisabled, isSelected }) => (Object.assign(Object.assign(Object.assign({}, styles), { display: 'flex', justifyContent: 'space-between', color: theme.default.color.text.black, fontWeight: isSelected ? theme.default.fontWeight.medium : theme.default.fontWeight.book, fontSize: theme.default.fontSize.default, textOverflow: 'ellipsis', whiteSpace: 'pre-wrap', overflow: 'hidden' }), (isDisabled && {
         cursor: 'not-allowed',
-        color: theme["default"].color.text.black + theme["default"].color.transparency.T30,
-        backgroundColor: theme["default"].color.background.sand.E01 + theme["default"].color.transparency.T30,
+        color: theme.default.color.text.black + theme.default.color.transparency.T30,
+        backgroundColor: theme.default.color.background.sand.E01 + theme.default.color.transparency.T30,
     }))),
 });
 const MultiValueRemove = (_a) => {
     var multiValueRemoveProps = tslib.__rest(_a, []);
-    return Select.components.MultiValueRemove && (React__default["default"].createElement(Select.components.MultiValueRemove, { data: multiValueRemoveProps.data, innerProps: multiValueRemoveProps.innerProps, selectProps: multiValueRemoveProps.selectProps },
-        React__default["default"].createElement(Icon["default"], { icon: icons.Close, size: "1rem" })));
+    return Select.components.MultiValueRemove && (React.createElement(Select.components.MultiValueRemove, { data: multiValueRemoveProps.data, innerProps: multiValueRemoveProps.innerProps, selectProps: multiValueRemoveProps.selectProps },
+        React.createElement(Icon.default, { icon: icons.Close, size: "1rem" })));
 };
 const IndicatorsContainer = (_a) => {
     var { selectProps } = _a, indicatorsContainerProps = tslib.__rest(_a, ["selectProps"]);
-    return Select.components.IndicatorsContainer && (React__default["default"].createElement(Select.components.IndicatorsContainer, { clearValue: indicatorsContainerProps.clearValue, cx: indicatorsContainerProps.cx, getClassNames: indicatorsContainerProps.getClassNames, getStyles: indicatorsContainerProps.getStyles, getValue: indicatorsContainerProps.getValue, hasValue: indicatorsContainerProps.hasValue, isDisabled: selectProps.isDisabled, isMulti: indicatorsContainerProps.isMulti, isRtl: indicatorsContainerProps.isRtl, options: indicatorsContainerProps.options, selectOption: indicatorsContainerProps.selectOption, selectProps: selectProps, setValue: indicatorsContainerProps.setValue, theme: indicatorsContainerProps.theme },
-        selectProps.errorState && (React__default["default"].createElement(Icon["default"], { icon: icons.Error, color: theme["default"].color.notification.error, position: "right" })),
-        selectProps.isDisabled && React__default["default"].createElement(Icon["default"], { icon: icons.Lock, position: "right" }),
+    return Select.components.IndicatorsContainer && (React.createElement(Select.components.IndicatorsContainer, { clearValue: indicatorsContainerProps.clearValue, cx: indicatorsContainerProps.cx, getClassNames: indicatorsContainerProps.getClassNames, getStyles: indicatorsContainerProps.getStyles, getValue: indicatorsContainerProps.getValue, hasValue: indicatorsContainerProps.hasValue, isDisabled: selectProps.isDisabled, isMulti: indicatorsContainerProps.isMulti, isRtl: indicatorsContainerProps.isRtl, options: indicatorsContainerProps.options, selectOption: indicatorsContainerProps.selectOption, selectProps: selectProps, setValue: indicatorsContainerProps.setValue, theme: indicatorsContainerProps.theme },
+        selectProps.errorState && (React.createElement(Icon.default, { icon: icons.Error, color: theme.default.color.notification.error, position: "right" })),
+        selectProps.isDisabled && React.createElement(Icon.default, { icon: icons.Lock, position: "right" }),
         indicatorsContainerProps.children));
 };
 const ClearIndicator = (_a) => {
     var clearIndicatorProps = tslib.__rest(_a, []);
-    return Select.components.ClearIndicator && (React__default["default"].createElement(Select.components.ClearIndicator, { clearValue: clearIndicatorProps.clearValue, cx: clearIndicatorProps.cx, getClassNames: clearIndicatorProps.getClassNames, getStyles: clearIndicatorProps.getStyles, getValue: clearIndicatorProps.getValue, hasValue: clearIndicatorProps.hasValue, innerProps: clearIndicatorProps.innerProps, isFocused: clearIndicatorProps.isFocused, isMulti: clearIndicatorProps.isMulti, isRtl: clearIndicatorProps.isRtl, options: clearIndicatorProps.options, selectOption: clearIndicatorProps.selectOption, selectProps: clearIndicatorProps.selectProps, setValue: clearIndicatorProps.setValue, theme: clearIndicatorProps.theme },
-        React__default["default"].createElement(Icon["default"], { icon: icons.Close })));
+    return Select.components.ClearIndicator && (React.createElement(Select.components.ClearIndicator, { clearValue: clearIndicatorProps.clearValue, cx: clearIndicatorProps.cx, getClassNames: clearIndicatorProps.getClassNames, getStyles: clearIndicatorProps.getStyles, getValue: clearIndicatorProps.getValue, hasValue: clearIndicatorProps.hasValue, innerProps: clearIndicatorProps.innerProps, isFocused: clearIndicatorProps.isFocused, isMulti: clearIndicatorProps.isMulti, isRtl: clearIndicatorProps.isRtl, options: clearIndicatorProps.options, selectOption: clearIndicatorProps.selectOption, selectProps: clearIndicatorProps.selectProps, setValue: clearIndicatorProps.setValue, theme: clearIndicatorProps.theme },
+        React.createElement(Icon.default, { icon: icons.Close })));
 };
 const DropdownIndicator = (_a) => {
     var { selectProps } = _a, dropdownIndicatorProps = tslib.__rest(_a, ["selectProps"]);
@@ -96,21 +91,21 @@ const DropdownIndicator = (_a) => {
         }
         return selectProps.menuIsOpen ? icons.ChevronUp : icons.ChevronDown;
     };
-    return (Select.components.DropdownIndicator && (React__default["default"].createElement(Select.components.DropdownIndicator, { clearValue: dropdownIndicatorProps.clearValue, cx: dropdownIndicatorProps.cx, getClassNames: dropdownIndicatorProps.getClassNames, getStyles: dropdownIndicatorProps.getStyles, getValue: dropdownIndicatorProps.getValue, hasValue: dropdownIndicatorProps.hasValue, innerProps: dropdownIndicatorProps.innerProps, isDisabled: dropdownIndicatorProps.isDisabled, isFocused: dropdownIndicatorProps.isFocused, isMulti: dropdownIndicatorProps.isMulti, isRtl: dropdownIndicatorProps.isRtl, options: dropdownIndicatorProps.options, selectOption: dropdownIndicatorProps.selectOption, selectProps: selectProps, setValue: dropdownIndicatorProps.setValue, theme: dropdownIndicatorProps.theme },
-        React__default["default"].createElement(Icon["default"], { icon: getIcon() }))));
+    return (Select.components.DropdownIndicator && (React.createElement(Select.components.DropdownIndicator, { clearValue: dropdownIndicatorProps.clearValue, cx: dropdownIndicatorProps.cx, getClassNames: dropdownIndicatorProps.getClassNames, getStyles: dropdownIndicatorProps.getStyles, getValue: dropdownIndicatorProps.getValue, hasValue: dropdownIndicatorProps.hasValue, innerProps: dropdownIndicatorProps.innerProps, isDisabled: dropdownIndicatorProps.isDisabled, isFocused: dropdownIndicatorProps.isFocused, isMulti: dropdownIndicatorProps.isMulti, isRtl: dropdownIndicatorProps.isRtl, options: dropdownIndicatorProps.options, selectOption: dropdownIndicatorProps.selectOption, selectProps: selectProps, setValue: dropdownIndicatorProps.setValue, theme: dropdownIndicatorProps.theme },
+        React.createElement(Icon.default, { icon: getIcon() }))));
 };
 const SelectBox = (_a) => {
     var { noOptionsText = '', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["noOptionsText", 'data-testid']);
     const getNoOptionsText = () => noOptionsText;
-    return !props.isLoading ? (React__default["default"].createElement(FieldContainer, { className: props.className, "data-testid": dataTestId },
-        props.label && (React__default["default"].createElement(LabelText["default"], { htmlFor: props.inputId, status: (props.error && 'error') || undefined, isMandatory: props.isRequired }, props.label)),
-        React__default["default"].createElement(Select__default["default"], { inputId: props.inputId, styles: getStyles(), theme: customTheme, components: {
+    return !props.isLoading ? (React.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId },
+        props.label && (React.createElement(LabelText.default, { htmlFor: props.inputId, status: (props.error && 'error') || undefined, isMandatory: props.isRequired }, props.label)),
+        React.createElement(Select, { inputId: props.inputId, styles: getStyles(), theme: customTheme, components: {
                 MultiValueRemove,
                 IndicatorsContainer,
                 ClearIndicator,
                 DropdownIndicator,
             }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: Boolean(props.isSearchable), isClearable: Boolean(props.isClearable), isMulti: props.isMulti, isDisabled: Boolean(props.isDisabled), hideSelectedOptions: false, closeMenuOnSelect: !props.isMulti, errorState: props.error }),
-        props.error && props.errorMessage && React__default["default"].createElement(ErrorMessage, null, props.errorMessage))) : (React__default["default"].createElement(PixelLoader["default"], null));
+        props.error && props.errorMessage && React.createElement(ErrorMessage, null, props.errorMessage))) : (React.createElement(PixelLoader.default, null));
 };
 
-exports["default"] = SelectBox;
+exports.default = SelectBox;

package/build/cjs/components/Switch/Switch.js

@@ -9,8 +9,7 @@ var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var LabelText = require('../LabelText/LabelText.js');
 
-function _interopNamespace(e) {
-   if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
    var n = Object.create(null);
    if (e) {
       Object.keys(e).forEach(function (k) {
@@ -23,25 +22,25 @@ function _interopNamespace(e) {
          }
       });
    }
-   n["default"] = e;
+   n.default = e;
    return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const height = 1.625; // 26px
 const borderRadius = 1.875; // 30px
 const borderSize = 0.125; // 2px
 const railWidth = 3; // 48px
 const railHeight = height + borderSize * 2; // 30px
-const Container = styled["default"].div `
+const Container = styled.default.div `
     display: inline-flex;
     min-height: ${railHeight}rem;
     position: relative;
     cursor: pointer;
     user-select: none;
 `;
-const Button = styled["default"].div `
+const Button = styled.default.div `
     height: ${height}rem;
     transition: transform 0.3s;
     position: absolute;
@@ -50,13 +49,13 @@ const Button = styled["default"].div `
     border-radius: 50%;
     ${({ isChecked }) => `
         transform: translate3d(${isChecked ? railWidth - height : 0}rem, 0, 0);
-        background-color: ${isChecked ? theme["default"].color.default.pink : theme["default"].color.line.L01};
-        border: ${borderSize}rem solid ${theme["default"].color.default.white};
+        background-color: ${isChecked ? theme.default.color.default.pink : theme.default.color.line.L01};
+        border: ${borderSize}rem solid ${theme.default.color.default.white};
         z-index: 2;
         left: ${isChecked ? -borderSize * 2 : 0}rem;
     `};
 `;
-const Checkbox = styled["default"].input `
+const Checkbox = styled.default.input `
     opacity: 0;
     position: absolute;
     top: 0;
@@ -67,25 +66,25 @@ const Checkbox = styled["default"].input `
     }
     :disabled + label {
         cursor: not-allowed;
-        color: ${theme["default"].color.line.L01}${theme["default"].color.transparency.T40};
+        color: ${theme.default.color.line.L01}${theme.default.color.transparency.T40};
     }
     :disabled + label > div {
         cursor: not-allowed;
-        border-color: ${({ checked }) => checked && checked ? theme["default"].color.default.pink : theme["default"].color.line.L01}${theme["default"].color.transparency.T40}};
+        border-color: ${({ checked }) => checked && checked ? theme.default.color.default.pink : theme.default.color.line.L01}${theme.default.color.transparency.T40}};
     }
     :disabled + label div div {
         pointer-events: none;
-        background-color: ${({ checked }) => checked && checked ? theme["default"].color.default.pink : theme["default"].color.line.L01}${theme["default"].color.transparency.T40};
+        background-color: ${({ checked }) => checked && checked ? theme.default.color.default.pink : theme.default.color.line.L01}${theme.default.color.transparency.T40};
     }
 `;
-const LabelWrapper = styled["default"](LabelText["default"]) `
+const LabelWrapper = styled.default(LabelText.default) `
     position: relative;
     cursor: pointer;
-    padding-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.4)};
-    padding-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 6)};
+    padding-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.4)};
+    padding-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 6)};
     user-select: none;
 `;
-const Rail = styled["default"].div `
+const Rail = styled.default.div `
     width: ${railWidth}rem;
     position: absolute;
     top: 0;
@@ -94,8 +93,8 @@ const Rail = styled["default"].div `
     overflow: hidden;
     ${({ isChecked }) => `
         height: ${railHeight}rem;
-        border: ${borderSize}rem solid ${isChecked ? theme["default"].color.default.pink : theme["default"].color.line.L01};
-        background-color: ${theme["default"].color.background.white.default};
+        border: ${borderSize}rem solid ${isChecked ? theme.default.color.default.pink : theme.default.color.line.L01};
+        background-color: ${theme.default.color.background.white.default};
         z-index: 0;
    `};
 `;
@@ -114,4 +113,4 @@ const Switch = (_a) => {
             props.label && props.label)));
 };
 
-exports["default"] = Switch;
+exports.default = Switch;

package/build/cjs/components/Tab/Tab.js

@@ -10,54 +10,50 @@ var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var Divider = require('../Divider/Divider.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 // TODO: Change to button HTML element as a part of https://jira.dna.fi/browse/STYLE-622
-const TabLabel = styled["default"].li `
+const TabLabel = styled.default.li `
     display: inline-block;
     list-style: none;
-    font-size: ${theme["default"].fontSize.default};
-    line-height: ${theme["default"].lineHeight.default};
-    font-weight: ${({ isActive }) => (isActive ? theme["default"].fontWeight.bold : theme["default"].fontWeight.book)};
-    background-color: ${({ isActive }) => isActive ? theme["default"].color.background.white.default : theme["default"].color.background.sand.E01};
-    border-radius: ${theme["default"].radius.default} ${theme["default"].radius.default} 0 0;
-    border: 1px solid ${theme["default"].color.line.L03};
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    font-weight: ${({ isActive }) => (isActive ? theme.default.fontWeight.bold : theme.default.fontWeight.book)};
+    background-color: ${({ isActive }) => isActive ? theme.default.color.background.white.default : theme.default.color.background.sand.E01};
+    border-radius: ${theme.default.radius.default} ${theme.default.radius.default} 0 0;
+    border: 1px solid ${theme.default.color.line.L03};
     border-bottom: 0 none;
     padding: 0.625rem 1.25rem;
     cursor: pointer;
 `;
-const TabStyle = styled["default"].li `
+const TabStyle = styled.default.li `
     display: inline-block;
     list-style: none;
     cursor: pointer;
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.8)}
-        ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)};
-    color: ${theme["default"].color.text.black};
-    font-size: ${theme["default"].fontSize.default};
-    line-height: ${theme["default"].lineHeight.default};
-    font-weight: ${theme["default"].fontWeight.book};
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.8)}
+        ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)};
+    color: ${theme.default.color.text.black};
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    font-weight: ${theme.default.fontWeight.book};
 
     ${({ isActive }) => isActive &&
     `
-            color: ${theme["default"].color.text.pink};
-            background-color: ${theme["default"].color.background.sand.E01};
+            color: ${theme.default.color.text.pink};
+            background-color: ${theme.default.color.background.sand.E01};
         `}
 
     ${({ $type }) => $type === 'underlined' &&
     `
-            padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)} 0;
+            padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)} 0;
         `}
     
     ${({ isActive, $type }) => isActive &&
     $type === 'underlined' &&
     `
-            border-bottom: 2px solid ${theme["default"].color.default.pink};
+            border-bottom: 2px solid ${theme.default.color.default.pink};
             background-color: transparent;
         `}
 `;
-const ContentContainer = styled["default"].div `
+const ContentContainer = styled.default.div `
     ${({ $type }) => {
     if ($type === 'box' || $type === 'default') {
         return `
@@ -66,12 +62,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 '';
@@ -85,16 +81,16 @@ const Tab = (_a) => {
             props.onClick(props.label, e);
         }
     };
-    return type === 'box' || type === 'default' || type === 'panel' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+    return type === 'box' || type === 'default' || type === 'panel' ? (React.createElement(React.Fragment, null,
+        React.createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
         props.isStateless &&
-            (props.children && (props.activeTab === props.label || props.isActive) ? (React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
-                    ? Box["default"]
-                    : undefined }, props.children)) : (React__default["default"].createElement(Divider["default"], { margin: "0" }))))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+            (props.children && (props.activeTab === props.label || props.isActive) ? (React.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
+                    ? Box.default
+                    : undefined }, props.children)) : (React.createElement(Divider.default, { margin: "0" }))))) : (React.createElement(React.Fragment, null,
+        React.createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
         props.isStateless &&
             props.children &&
-            (props.activeTab === props.label || props.isActive) && (React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));
+            (props.activeTab === props.label || props.isActive) && (React.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));
 };
 
-exports["default"] = Tab;
+exports.default = Tab;