@dnanpm/styleguide 3.7.2 → 3.8.2

package/build/cjs/components/Input/Input.js

@@ -12,30 +12,26 @@ var ButtonIcon = require('../Button/ButtonIcon.js');
 var Icon = require('../Icon/Icon.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 iconsMap = {
     success: icons.Check,
     error: icons.Error,
 };
-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 FieldWrapper = styled["default"].div `
+const FieldWrapper = styled.default.div `
     position: relative;
     display: flex;
-    border-radius: ${theme["default"].radius.s};
-    border: 1px solid ${theme["default"].color.line.L01};
-    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
-    padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
-    background-color: ${theme["default"].color.background.white.default};
+    border-radius: ${theme.default.radius.s};
+    border: 1px solid ${theme.default.color.line.L01};
+    height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
+    padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
+    background-color: ${theme.default.color.background.white.default};
 
     ${({ status }) => status === 'error' &&
     `
-        border-bottom: 4px solid ${theme["default"].color.notification.error};
+        border-bottom: 4px solid ${theme.default.color.notification.error};
     `}
 
     ${({ $type }) => $type === 'range' &&
@@ -51,38 +47,38 @@ const FieldWrapper = styled["default"].div `
 
     ${({ $disabled }) => $disabled &&
     `
-        background-color: ${theme["default"].color.background.sand.E01};
+        background-color: ${theme.default.color.background.sand.E01};
     `} 
 
     &:focus-within {
-        border: 2px solid ${theme["default"].color.focus.light};
-        box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
-        border-radius: ${theme["default"].radius.s};
+        border: 2px solid ${theme.default.color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
+        border-radius: ${theme.default.radius.s};
     }
 `;
-const IconWrapper = styled["default"].div `
-    margin-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+const IconWrapper = styled.default.div `
+    margin-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     display: flex;
     flex-wrap: nowrap;
-    border-radius: ${theme["default"].radius.s};
+    border-radius: ${theme.default.radius.s};
     align-items: center;
 
     & span.dnasg-icon {
-        margin-left: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 2)};
+        margin-left: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 2)};
 
         &:first-of-type {
             margin-left: 0;
         }
     }
 `;
-const StyledInput = styled["default"].input `
+const StyledInput = styled.default.input `
     position: relative;
     display: inline-block;
     appearance: none;
     vertical-align: middle;
-    font-family: ${theme["default"].fontFamily.default};
-    font-size: ${theme["default"].fontSize.default};
-    border-radius: ${theme["default"].radius.s};
+    font-family: ${theme.default.fontFamily.default};
+    font-size: ${theme.default.fontSize.default};
+    border-radius: ${theme.default.radius.s};
     width: 100%;
     border: 0 none;
     outline: 0;
@@ -103,19 +99,19 @@ const StyledInput = styled["default"].input `
     }
 
     &::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 Input = (_a) => {
     var { type = 'text', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
@@ -147,22 +143,22 @@ const Input = (_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(FieldWrapper, { status: props.status, "$type": type, "$disabled": props.disabled },
-            React__default["default"].createElement(StyledInput, { id: props.id, name: props.name, type: type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": props.id, ref: inputRef, tabIndex: props.tabIndex, "data-testid": dataTestId, readOnly: props.readonly }),
+    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(FieldWrapper, { status: props.status, "$type": type, "$disabled": props.disabled },
+            React.createElement(StyledInput, { id: props.id, name: props.name, type: type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": props.id, ref: inputRef, tabIndex: props.tabIndex, "data-testid": dataTestId, readOnly: props.readonly }),
             ((props.status && props.status !== 'comment') ||
                 props.showPasswordToggle ||
                 props.disabled ||
-                props.onClearableButtonClick) && (React__default["default"].createElement(IconWrapper, null,
-                props.showPasswordToggle && (React__default["default"].createElement(Icon["default"], { icon: showPassword ? icons.EyeOpen : icons.EyeClosed, onClick: togglePasswordVisibility })),
-                (props.status === 'success' || props.status === 'error') && (React__default["default"].createElement(Icon["default"], { icon: iconsMap[props.status], color: theme["default"].color.notification[props.status] })),
-                props.disabled && React__default["default"].createElement(Icon["default"], { icon: icons.Lock }),
+                props.onClearableButtonClick) && (React.createElement(IconWrapper, null,
+                props.showPasswordToggle && (React.createElement(Icon.default, { icon: showPassword ? icons.EyeOpen : icons.EyeClosed, onClick: togglePasswordVisibility })),
+                (props.status === 'success' || props.status === 'error') && (React.createElement(Icon.default, { icon: iconsMap[props.status], color: theme.default.color.notification[props.status] })),
+                props.disabled && React.createElement(Icon.default, { icon: icons.Lock }),
                 props.onClearableButtonClick &&
                     Boolean(props.value) &&
-                    !props.disabled && (React__default["default"].createElement(ButtonIcon["default"], { icon: icons.Close, onClick: props.onClearableButtonClick }))))),
-        props.status === 'error' && props.errorMessage && (React__default["default"].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
-        props.status === 'comment' && props.commentMessage && (React__default["default"].createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
+                    !props.disabled && (React.createElement(ButtonIcon.default, { icon: icons.Close, onClick: props.onClearableButtonClick }))))),
+        props.status === 'error' && props.errorMessage && (React.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
+        props.status === 'comment' && props.commentMessage && (React.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 };
 
-exports["default"] = Input;
+exports.default = Input;

package/build/cjs/components/Label/Label.js

@@ -8,32 +8,28 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const colorsMap = {
-    campaign: theme["default"].color.background.pink.E01,
-    new: theme["default"].color.background.lemon.default,
-    presale: theme["default"].color.background.orange.default,
-    other: theme["default"].color.background.sky.default,
+    campaign: theme.default.color.background.pink.E01,
+    new: theme.default.color.background.lemon.default,
+    presale: theme.default.color.background.orange.default,
+    other: theme.default.color.background.sky.default,
 };
-const StyledLabel = styled["default"].span `
+const StyledLabel = styled.default.span `
     display: inline-block;
-    color: ${theme["default"].color.text.black};
+    color: ${theme.default.color.text.black};
     background-color: ${({ type }) => colorsMap[type]};
-    font-size: ${theme["default"].fontSize.s};
-    font-weight: ${theme["default"].fontWeight.bold};
-    line-height: ${theme["default"].lineHeight.s};
-    padding: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 5)}
-        ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+    font-size: ${theme.default.fontSize.s};
+    font-weight: ${theme.default.fontWeight.bold};
+    line-height: ${theme.default.lineHeight.s};
+    padding: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 5)}
+        ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
     text-align: center;
     text-transform: uppercase;
-    border-radius: ${theme["default"].radius.pill};
+    border-radius: ${theme.default.radius.pill};
 `;
 const Label = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default["default"].createElement(StyledLabel, { type: props.type, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React.createElement(StyledLabel, { type: props.type, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
-exports["default"] = Label;
+exports.default = Label;

package/build/cjs/components/LabelText/LabelText.js

@@ -8,28 +8,24 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const Label = styled["default"].label `
+const Label = styled.default.label `
     display: block;
-    color: ${({ status }) => (status ? theme["default"].color.notification[status] : theme["default"].color.text.gray)};
-    font-weight: ${theme["default"].fontWeight.medium};
-    font-size: ${theme["default"].fontSize.default};
-    line-height: ${theme["default"].lineHeight.default};
-    margin-bottom: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 2)};
+    color: ${({ status }) => (status ? theme.default.color.notification[status] : theme.default.color.text.gray)};
+    font-weight: ${theme.default.fontWeight.medium};
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    margin-bottom: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 2)};
     ${({ htmlFor }) => htmlFor && `cursor: pointer`};
 `;
-const Mandatory = styled["default"].span `
-    color: ${theme["default"].color.text.pink};
+const Mandatory = styled.default.span `
+    color: ${theme.default.color.text.pink};
 `;
 /** @visibleName Label Text */
 const LabelText = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default["default"].createElement(Label, { id: props.id, htmlFor: props.htmlFor, className: props.className, "data-testid": dataTestId, status: props.status },
+    return (React.createElement(Label, { id: props.id, htmlFor: props.htmlFor, className: props.className, "data-testid": dataTestId, status: props.status },
         props.children,
-        props.isMandatory && React__default["default"].createElement(Mandatory, null, "*")));
+        props.isMandatory && React.createElement(Mandatory, null, "*")));
 };
 
-exports["default"] = LabelText;
+exports.default = LabelText;

package/build/cjs/components/MainHeaderNavigation/ChildComponents/BusinessMenu.js

@@ -7,56 +7,52 @@ var styled = require('../../../themes/styled.js');
 var theme = require('../../../themes/theme.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const BusinessMenuLink = styled["default"].a `
-    background-color: ${p => p.isActive ? theme["default"].color.background.white.default : theme["default"].color.background.plum.E02};
-    color: ${p => (p.isActive ? theme["default"].color.text.black : theme["default"].color.text.white)};
-    font-family: ${theme["default"].fontFamily.default};
-    font-weight: ${theme["default"].fontWeight.medium};
-    font-size: ${theme["default"].fontSize.xs};
-    line-height: ${theme["default"].lineHeight.s};
-    border-radius: ${theme["default"].radius.pill};
+const BusinessMenuLink = styled.default.a `
+    background-color: ${p => p.isActive ? theme.default.color.background.white.default : theme.default.color.background.plum.E02};
+    color: ${p => (p.isActive ? theme.default.color.text.black : theme.default.color.text.white)};
+    font-family: ${theme.default.fontFamily.default};
+    font-weight: ${theme.default.fontWeight.medium};
+    font-size: ${theme.default.fontSize.xs};
+    line-height: ${theme.default.lineHeight.s};
+    border-radius: ${theme.default.radius.pill};
     display: block;
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
     ${styledUtils.media.md `
-        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)} ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     `};
     ${styledUtils.media.xs `
-        font-size: ${theme["default"].fontSize.s};
+        font-size: ${theme.default.fontSize.s};
     `};
 
     &:hover,
     &:focus {
         text-decoration: none;
-        color: ${p => (p.isActive ? theme["default"].color.text.black : theme["default"].color.text.white)};
+        color: ${p => (p.isActive ? theme.default.color.text.black : theme.default.color.text.white)};
         background-color: ${p => p.isActive
-    ? theme["default"].color.background.white.default
-    : theme["default"].color.background.plum.default};
+    ? theme.default.color.background.white.default
+    : theme.default.color.background.plum.default};
         outline: none;
     }
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.light},
-            0px 0px 0px 4px ${theme["default"].color.focus.dark};
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+            0px 0px 0px 4px ${theme.default.color.focus.dark};
     }
 `;
-const BusinessMenuList = styled["default"].nav `
+const BusinessMenuList = styled.default.nav `
     display: flex;
-    gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)}
-        ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)}
+        ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     ${styledUtils.media.md `
-        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)} ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.5)};
+        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
     `};
 `;
 const BusinessMenu = ({ ariaLabel, currentBusinessId, items, lang }) => {
     if (!(items === null || items === void 0 ? void 0 : items.length)) {
         return null;
     }
-    return (React__default["default"].createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu", role: "navigation" }, items.map(item => (React__default["default"].createElement(BusinessMenuLink, { className: `menu-link ${item.businessId === currentBusinessId ? 'active-site' : ''}`, href: item.urls[lang], isActive: item.businessId === currentBusinessId, key: item.businessId }, item.titles[lang])))));
+    return (React.createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu", role: "navigation" }, items.map(item => (React.createElement(BusinessMenuLink, { className: `menu-link ${item.businessId === currentBusinessId ? 'active-site' : ''}`, href: item.urls[lang], isActive: item.businessId === currentBusinessId, key: item.businessId }, item.titles[lang])))));
 };
 
-exports["default"] = BusinessMenu;
+exports.default = BusinessMenu;

package/build/cjs/components/MainHeaderNavigation/ChildComponents/DesktopMenu.js

@@ -14,10 +14,6 @@ var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
 var LinkModifier = require('./LinkModifier.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const fadeIn = styled.keyframes `
     0% {
         opacity: 0;
@@ -34,56 +30,56 @@ const fadeInAnimation = styled.css `
 const noAnimation = styled.css `
     animation: none;
 `;
-const MegaMenuContent = styled["default"].ul `
+const MegaMenuContent = styled.default.ul `
     display: grid;
     grid-template-columns: 25% 25% 25% 25%;
     padding-left: 0;
 `;
-const CategoryTitle = styled["default"].span `
+const CategoryTitle = styled.default.span `
     display: flex;
-    font-size: ${theme["default"].fontSize.default};
-    line-height: ${theme["default"].lineHeight.default};
-    font-weight: ${theme["default"].fontWeight.bold};
-    padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)}
-        ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    font-weight: ${theme.default.fontWeight.bold};
+    padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)}
+        ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     ${styledUtils.media.xl `
-        font-size: ${theme["default"].fontSize.xl};
+        font-size: ${theme.default.fontSize.xl};
     `}
 `;
-const CategoryBlock = styled["default"].li `
+const CategoryBlock = styled.default.li `
     display: block;
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)} 0;
-    border-right: 1px solid ${theme["default"].color.line.L03};
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)} 0;
+    border-right: 1px solid ${theme.default.color.line.L03};
 
     a {
-        font-size: ${theme["default"].fontSize.s};
-        line-height: ${theme["default"].lineHeight.s};
-        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)}
-            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 3)};
+        font-size: ${theme.default.fontSize.s};
+        line-height: ${theme.default.lineHeight.s};
+        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)}
+            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)};
         &:hover,
         &:focus {
-            background-color: ${theme["default"].color.background.sand.E01};
+            background-color: ${theme.default.color.background.sand.E01};
         }
         ${styledUtils.media.xl `
-            font-size: ${theme["default"].fontSize.default};
-            line-height: ${theme["default"].lineHeight.default};
+            font-size: ${theme.default.fontSize.default};
+            line-height: ${theme.default.lineHeight.default};
         `}
     }
 `;
-const CategoryCollectionBlock = styled["default"](CategoryBlock) `
-    background-color: ${theme["default"].color.background.sand.E01};
+const CategoryCollectionBlock = styled.default(CategoryBlock) `
+    background-color: ${theme.default.color.background.sand.E01};
 `;
-const SubMenuItem = styled["default"].li `
+const SubMenuItem = styled.default.li `
     > a {
-        color: ${p => (p.isHighlighted ? theme["default"].color.text.pink : theme["default"].color.text.black)};
-        font-weight: ${p => (p.isHighlighted ? theme["default"].fontWeight.bold : theme["default"].fontWeight.book)};
+        color: ${p => (p.isHighlighted ? theme.default.color.text.pink : theme.default.color.text.black)};
+        font-weight: ${p => (p.isHighlighted ? theme.default.fontWeight.bold : theme.default.fontWeight.book)};
         }
     }
 `;
-const DesktopMenuList = styled["default"](globalNavStyles.MenuList) `
+const DesktopMenuList = styled.default(globalNavStyles.MenuList) `
     @media (min-width: ${p => p.collapseSize + 1}px) {
         flex-direction: row;
-        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.5)};
+        gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)};
     }
     ul {
         li {
@@ -101,16 +97,16 @@ const DesktopMenuList = styled["default"](globalNavStyles.MenuList) `
         }
     }
 `;
-const DesktopMenuItem = styled["default"](globalNavStyles.MenuItem) `
+const DesktopMenuItem = styled.default(globalNavStyles.MenuItem) `
     > a,
     > button {
         width: auto;
         display: flex;
-        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
+        gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
         align-items: center;
-        padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
+        padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
         height: 100%;
-        font-weight: ${theme["default"].fontWeight.medium};
+        font-weight: ${theme.default.fontWeight.medium};
 
         > span:first-child {
             position: relative;
@@ -121,13 +117,13 @@ const DesktopMenuItem = styled["default"](globalNavStyles.MenuItem) `
                 bottom: -22px;
                 left: 0;
                 border-bottom: 2px solid
-                    ${p => (p.isActive ? theme["default"].color.default.pink : 'transparent')};
+                    ${p => (p.isActive ? theme.default.color.default.pink : 'transparent')};
             }
         }
     }
 `;
 // MEGAMENU 1st level
-const SubMenuList = styled["default"].div `
+const SubMenuList = styled.default.div `
     position: absolute;
     top: ${navigation.navMaxHeight};
     left: 0;
@@ -137,9 +133,9 @@ const SubMenuList = styled["default"].div `
     ${({ menuStates }) => menuStates.level1 && menuStates.animate2 && !menuStates.level2
     ? fadeInAnimation
     : noAnimation};
-    background-color: ${theme["default"].color.background.white.default};
-    max-height: calc(100vh - ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 3)} - ${navigation.headerMaxHeight});
-    border-bottom: 1px solid ${theme["default"].color.line.L03};
+    background-color: ${theme.default.color.background.white.default};
+    max-height: calc(100vh - ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3)} - ${navigation.headerMaxHeight});
+    border-bottom: 1px solid ${theme.default.color.line.L03};
     overflow: auto;
     ul {
         padding: 0;
@@ -147,44 +143,44 @@ const SubMenuList = styled["default"].div `
     }
 `;
 const SubMenuLevel1 = ({ menuItem }) => {
-    const { categoryCollectionText, collapseSize, currentUrl, lang, menuLevel, navZIndex } = React.useContext(NavContext["default"]);
+    const { categoryCollectionText, collapseSize, currentUrl, lang, menuLevel, navZIndex } = React.useContext(NavContext.default);
     const level1HasElements = !!menuItem.pages.length;
     const pagesWithSubItems = menuItem.pages.filter(element => element.pages.length > 0);
     // Helper function to render a sub menu item
-    const renderSubMenuItem = (element, index, currUrl) => (React__default["default"].createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currUrl, element.urls[lang], true), "data-testid": `desktop-nav-item-level-2-${index + 1}` },
-        React__default["default"].createElement(LinkModifier["default"], { menuItem: element, tabIndex: false })));
+    const renderSubMenuItem = (element, index, currUrl) => (React.createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currUrl, element.urls[lang], true), "data-testid": `desktop-nav-item-level-2-${index + 1}` },
+        React.createElement(LinkModifier.default, { menuItem: element, tabIndex: false })));
     if (!level1HasElements) {
         return null;
     }
-    return (React__default["default"].createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, navZIndex: navZIndex },
-        React__default["default"].createElement(MegaMenuContent, null,
-            pagesWithSubItems.slice(0, 5).map(element => (React__default["default"].createElement(CategoryBlock, { key: element.id },
-                React__default["default"].createElement(CategoryTitle, null, element.titles[lang]),
-                React__default["default"].createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, element.pages.map((subElement, index) => renderSubMenuItem(subElement, index, currentUrl)))))),
-            pagesWithSubItems.length > 5 && (React__default["default"].createElement(CategoryCollectionBlock, null,
-                React__default["default"].createElement(CategoryTitle, null, categoryCollectionText),
-                React__default["default"].createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, pagesWithSubItems
+    return (React.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, navZIndex: navZIndex },
+        React.createElement(MegaMenuContent, null,
+            pagesWithSubItems.slice(0, 5).map(element => (React.createElement(CategoryBlock, { key: element.id },
+                React.createElement(CategoryTitle, null, element.titles[lang]),
+                React.createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, element.pages.map((subElement, index) => renderSubMenuItem(subElement, index, currentUrl)))))),
+            pagesWithSubItems.length > 5 && (React.createElement(CategoryCollectionBlock, null,
+                React.createElement(CategoryTitle, null, categoryCollectionText),
+                React.createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, pagesWithSubItems
                     .slice(5)
                     .map((element, index) => renderSubMenuItem(element, index, currentUrl))))),
-            React__default["default"].createElement(globalNavStyles.FeaturedBlock, { collapseSize: collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.map(element => element.pages.length ? null : (React__default["default"].createElement(LinkModifier["default"], { key: element.id, showIcon: true, menuItem: element, tabIndex: false })))))));
+            React.createElement(globalNavStyles.FeaturedBlock, { collapseSize: collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.map(element => element.pages.length ? null : (React.createElement(LinkModifier.default, { key: element.id, showIcon: true, menuItem: element, tabIndex: false })))))));
 };
 const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
-    const { lang, handleNavMenuClick, currentUrl, menuLevel } = React.useContext(NavContext["default"]);
+    const { lang, handleNavMenuClick, currentUrl, menuLevel } = React.useContext(NavContext.default);
     const menuClickMain = (element) => () => {
         handleNavMenuClick(element.id, 'level1');
     };
-    return (React__default["default"].createElement(DesktopMenuItem, { isActive: LinkModifier.isSelected(currentUrl, menuItem.urls[lang]), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}`, role: "presentation" },
-        React__default["default"].createElement(globalNavStyles.MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
-            React__default["default"].createElement("span", null, menuItem.titles[lang]),
-            React__default["default"].createElement(Icon["default"], { icon: icons.ChevronRight, size: "1rem" })),
-        React__default["default"].createElement(SubMenuLevel1, { menuItem: menuItem })));
+    return (React.createElement(DesktopMenuItem, { isActive: LinkModifier.isSelected(currentUrl, menuItem.urls[lang]), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}`, role: "presentation" },
+        React.createElement(globalNavStyles.MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
+            React.createElement("span", null, menuItem.titles[lang]),
+            React.createElement(Icon.default, { icon: icons.ChevronRight, size: "1rem" })),
+        React.createElement(SubMenuLevel1, { menuItem: menuItem })));
 };
 const DesktopMenu = () => {
     var _a;
-    const { items, lang, resetMenuEvents, menuLevel, currentUrl, collapseSize } = React.useContext(NavContext["default"]);
+    const { items, lang, resetMenuEvents, menuLevel, currentUrl, collapseSize } = React.useContext(NavContext.default);
     const mainNavigation = ((_a = items === null || items === void 0 ? void 0 : items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
     const ref = React.useRef(null);
-    useOutsideClick["default"](ref, () => {
+    useOutsideClick.default(ref, () => {
         if (menuLevel.level1 || menuLevel.level2) {
             resetMenuEvents();
         }
@@ -192,15 +188,15 @@ const DesktopMenu = () => {
     if (!mainNavigation.length) {
         return null;
     }
-    return (React__default["default"].createElement(DesktopMenuList, { role: "menu", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul", collapseSize: collapseSize }, mainNavigation.map((navElement, index) => {
+    return (React.createElement(DesktopMenuList, { role: "menu", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul", collapseSize: collapseSize }, mainNavigation.map((navElement, index) => {
         var _a;
         const displaySubMenu = !navElement.pageIsLinkInDesktopNavigation && !!((_a = navElement.pages) === null || _a === void 0 ? void 0 : _a.length);
         if (displaySubMenu) {
-            return (React__default["default"].createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
+            return (React.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
         }
-        return (React__default["default"].createElement(DesktopMenuItem, { key: navElement.id, role: "presentation", "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: LinkModifier.isSelected(currentUrl, navElement.urls[lang]) },
-            React__default["default"].createElement(LinkModifier["default"], { menuItem: navElement, tabIndex: false })));
+        return (React.createElement(DesktopMenuItem, { key: navElement.id, role: "presentation", "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: LinkModifier.isSelected(currentUrl, navElement.urls[lang]) },
+            React.createElement(LinkModifier.default, { menuItem: navElement, tabIndex: false })));
     })));
 };
 
-exports["default"] = DesktopMenu;
+exports.default = DesktopMenu;

package/build/cjs/components/MainHeaderNavigation/ChildComponents/LanguageSelector.js

@@ -13,27 +13,23 @@ var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const MenuItem = styled["default"](globalNavStyles.MenuLink) `
-    font-weight: ${theme["default"].fontWeight.medium};
-    margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)} auto;
+const MenuItem = styled.default(globalNavStyles.MenuLink) `
+    font-weight: ${theme.default.fontWeight.medium};
+    margin: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)} auto;
     text-align: center;
 `;
-const LangComponent = ({ currentLanguage, languagesObject }) => (React__default["default"].createElement(React__default["default"].Fragment, null, Object.entries(languagesObject)
+const LangComponent = ({ currentLanguage, languagesObject }) => (React.createElement(React.Fragment, null, Object.entries(languagesObject)
     .filter(([key]) => key.toLowerCase() !== currentLanguage.toLowerCase())
-    .map(([key, value]) => (React__default["default"].createElement(MenuItem, { key: `language-${key}`, href: value }, key.toUpperCase())))));
+    .map(([key, value]) => (React.createElement(MenuItem, { key: `language-${key}`, href: value }, key.toUpperCase())))));
 const LanguageSelector = ({ currentLanguage, languagesObject, languageSelectorLabel, }) => {
-    const { isMobileMenu, navZIndex } = React.useContext(NavContext["default"]);
-    const LngComponent = React.useCallback(() => (React__default["default"].createElement(LangComponent, { languageSelectorLabel: languageSelectorLabel, currentLanguage: currentLanguage, languagesObject: languagesObject })), [currentLanguage, languagesObject, languageSelectorLabel]);
+    const { isMobileMenu, navZIndex } = React.useContext(NavContext.default);
+    const LngComponent = React.useCallback(() => (React.createElement(LangComponent, { languageSelectorLabel: languageSelectorLabel, currentLanguage: currentLanguage, languagesObject: languagesObject })), [currentLanguage, languagesObject, languageSelectorLabel]);
     if (Object.keys(languagesObject).length < 2) {
         return null;
     }
-    return (React__default["default"].createElement(MainNavTooltipMenu["default"], { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', zIndex: navZIndex + 1 },
-        React__default["default"].createElement(Icon["default"], { icon: icons.Globe, size: navigation.navIconSize }),
-        React__default["default"].createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
+    return (React.createElement(MainNavTooltipMenu.default, { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', zIndex: navZIndex + 1 },
+        React.createElement(Icon.default, { icon: icons.Globe, size: navigation.navIconSize }),
+        React.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
 };
 
-exports["default"] = LanguageSelector;
+exports.default = LanguageSelector;