@dnanpm/styleguide 3.10.0 → 3.11.0

package/build/cjs/components/Footer/Components/FooterComponents.js

@@ -2,7 +2,7 @@
 
 var icons = require('@dnanpm/icons');
 var React = require('react');
-var styled = require('../../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../../themes/theme.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var ButtonIcon = require('../../ButtonIcon/ButtonIcon.js');
@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 /* eslint-disable react/no-array-index-key */
-const linkHoverStyles = styled.css `
+const linkHoverStyles = styledComponents.css `
     &:hover,
     &:focus,
     &:active {
@@ -22,7 +22,7 @@ const linkHoverStyles = styled.css `
         text-decoration-thickness: from-font;
     }
 `;
-const LinksListEl = styled.default.li `
+const LinksListEl = styledComponents.styled.li `
     a {
         ${linkHoverStyles}
     }
@@ -33,7 +33,7 @@ const LinksListEl = styled.default.li `
         ${linkHoverStyles}
     }
 `;
-const BaseContainer = styled.default.div `
+const BaseContainer = styledComponents.styled.div `
     display: grid;
     padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3)};
@@ -42,19 +42,20 @@ const BaseContainer = styled.default.div `
     margin-left: auto;
     margin-right: auto;
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         grid-template-columns: repeat(3, minmax(0, 1fr));
         padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
     }
 `;
-const CategoryLinks = styled.default.ul `
-    display: ${({ active }) => (active ? 'flex' : 'none')};
-    transition: all 0.3s ease-in-out, padding 0s linear ${({ active }) => (active ? '0s' : '0.3s')};
-    max-height: ${({ active }) => (active ? '500' : '0')}px;
+const CategoryLinks = styledComponents.styled.ul `
+    display: ${({ $active }) => ($active ? 'flex' : 'none')};
+    transition: all 0.3s ease-in-out,
+        padding 0s linear ${({ $active }) => ($active ? '0s' : '0.3s')};
+    max-height: ${({ $active }) => ($active ? '500' : '0')}px;
     flex-direction: column;
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
 `;
-const CategoryHeader = styled.default.button `
+const CategoryHeader = styledComponents.styled.button `
     display: flex;
     text-align: left;
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
@@ -72,12 +73,12 @@ const CategoryHeader = styled.default.button `
         ${theme.default.radius.s};
     }
 `;
-const CategoryName = styled.default.h2 `
+const CategoryName = styledComponents.styled.h2 `
     font-size: ${theme.default.fontSize.h4};
     line-height: ${theme.default.lineHeight.h4};
     margin: 0;
 `;
-const CategoryWrapper = styled.default.div `
+const CategoryWrapper = styledComponents.styled.div `
     ${CategoryLinks} {
         margin-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
         margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
@@ -85,11 +86,11 @@ const CategoryWrapper = styled.default.div `
 
     svg {
         transition: transform 0.2s ease-in;
-        transform: ${({ active }) => (active && 'rotate(180deg)') || 'rotate(0deg)'};
+        transform: ${({ $active }) => ($active && 'rotate(180deg)') || 'rotate(0deg)'};
     }
 `;
-const CategoryContainer = styled.default(BaseContainer) `
-    @media (max-width: ${({ collapseSize }) => collapseSize}px) {
+const CategoryContainer = styledComponents.styled(BaseContainer) `
+    @media (max-width: ${({ $collapseSize }) => $collapseSize}px) {
         gap: 0;
         padding: 0;
         padding-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
@@ -101,24 +102,24 @@ const CategoryContainer = styled.default(BaseContainer) `
         }
     }
 `;
-const LangLinksContainer = styled.default.div `
+const LangLinksContainer = styledComponents.styled.div `
     display: flex;
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.4)};
     justify-content: center;
 `;
-const LangLink = styled.default.a `
-    background: ${({ isActive }) => isActive ? theme.default.color.background.white.default : 'transparent'};
-    color: ${({ isActive }) => (isActive ? theme.default.color.text.plum : theme.default.color.text.white)};
+const LangLink = styledComponents.styled.a `
+    background: ${({ $isActive }) => $isActive ? theme.default.color.background.white.default : 'transparent'};
+    color: ${({ $isActive }) => ($isActive ? theme.default.color.text.plum : theme.default.color.text.white)};
     &:hover,
     &:active,
     &:focus {
-          color: ${({ isActive }) => isActive
+          color: ${({ $isActive }) => $isActive
     ? theme.default.color.text.plum
     : theme.default.color.text.white + theme.default.color.transparency.T80};
         }
     }
 `;
-const TopContainer = styled.default(BaseContainer) `
+const TopContainer = styledComponents.styled(BaseContainer) `
     h2 {
         margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)};
     }
@@ -138,14 +139,14 @@ const TopContainer = styled.default(BaseContainer) `
         margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
     }
 `;
-const AppSection = styled.default.div `
+const AppSection = styledComponents.styled.div `
     text-align: center;
 
     img {
         max-width: 100%;
     }
 `;
-const AppList = styled.default.div `
+const AppList = styledComponents.styled.div `
     display: flex;
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     justify-content: center;
@@ -154,7 +155,7 @@ const AppList = styled.default.div `
         width: 142px;
     }
 `;
-const BottomContainer = styled.default(BaseContainer) `
+const BottomContainer = styledComponents.styled(BaseContainer) `
     display: flex;
     flex-direction: column;
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3)};
@@ -180,7 +181,7 @@ const BottomContainer = styled.default(BaseContainer) `
         }
     }
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         flex-direction: row;
         align-items: flex-start;
         justify-content: space-between;
@@ -211,7 +212,7 @@ const BottomContainer = styled.default(BaseContainer) `
         }
     }
 `;
-const BottomCenter = styled.default.div `
+const BottomCenter = styledComponents.styled.div `
     display: flex;
     flex-direction: column;
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3)};
@@ -220,7 +221,7 @@ const BottomCenter = styled.default.div `
     margin: 0 auto;
     font-size: ${theme.default.fontSize.s};
 `;
-const SocialMediaLinksContainer = styled.default.div `
+const SocialMediaLinksContainer = styledComponents.styled.div `
     white-space: nowrap;
     text-align: center;
     a {
@@ -228,7 +229,7 @@ const SocialMediaLinksContainer = styled.default.div `
         margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     }
 `;
-const GeneralInformationContainer = styled.default.div `
+const GeneralInformationContainer = styledComponents.styled.div `
     text-align: center;
     display: flex;
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)};
@@ -254,7 +255,7 @@ const mapCorporateSelector = (languagesObject) => Object.keys(languagesObject.ur
 }));
 const TopSection = ({ topSection }) => {
     const { collapseSize, language } = React.useContext(FooterContext.default);
-    return (React__default.default.createElement(TopContainer, { collapseSize: collapseSize }, topSection === null || topSection === void 0 ? void 0 : topSection.map((section, index) => (React__default.default.createElement("div", { key: `service-section-${index}`, "data-testid": `service-section-${index}` },
+    return (React__default.default.createElement(TopContainer, { "$collapseSize": collapseSize }, topSection === null || topSection === void 0 ? void 0 : topSection.map((section, index) => (React__default.default.createElement("div", { key: `service-section-${index}`, "data-testid": `service-section-${index}` },
         section.svgIconName[language] === 'user' && React__default.default.createElement(icons.User, { size: "3rem" }),
         section.svgIconName[language] === 'headset' && React__default.default.createElement(icons.Headset, { size: "3rem" }),
         section.svgIconName[language] === 'shop' && React__default.default.createElement(icons.Shop, { size: "3rem" }),
@@ -270,11 +271,11 @@ const Categories = ({ categories }) => {
             setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), { [currentIndex]: !isCollapsed[currentIndex] }));
         }
     };
-    return (React__default.default.createElement(CategoryContainer, { collapseSize: collapseSize, "data-testid": "category-container" }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (React__default.default.createElement(CategoryWrapper, { active: isCollapsed[index], "data-testid": `category-${index}`, key: `category-${index}` },
+    return (React__default.default.createElement(CategoryContainer, { "$collapseSize": collapseSize, "data-testid": "category-container" }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (React__default.default.createElement(CategoryWrapper, { "$active": isCollapsed[index], "data-testid": `category-${index}`, key: `category-${index}` },
         React__default.default.createElement(CategoryHeader, { onClick: () => toggleCollapse(index), "aria-expanded": isMobileFooter ? isCollapsed[index] : true },
             React__default.default.createElement(CategoryName, null, category.description[language]),
             isMobileFooter && React__default.default.createElement(icons.ChevronDown, null)),
-        React__default.default.createElement(CategoryLinks, { active: isMobileFooter ? isCollapsed[index] : true }, category.category.map((categoryLink, linkIndex) => (React__default.default.createElement(LinksListEl, { key: `category-${index}-link-${linkIndex}`, "data-testid": `category-${index}-link-${linkIndex}` },
+        React__default.default.createElement(CategoryLinks, { "$active": isMobileFooter ? isCollapsed[index] : true }, category.category.map((categoryLink, linkIndex) => (React__default.default.createElement(LinksListEl, { key: `category-${index}-link-${linkIndex}`, "data-testid": `category-${index}-link-${linkIndex}` },
             React__default.default.createElement("a", { href: categoryLink.urls[language] }, categoryLink.titles[language]))))))))));
 };
 const GeneralInformation = ({ generalInformation }) => {
@@ -350,7 +351,7 @@ const BottomSection = ({ items }) => {
     else {
         languages = customLinks || [];
     }
-    return (React__default.default.createElement(BottomContainer, { collapseSize: collapseSize, "data-testid": "bottom-section" },
+    return (React__default.default.createElement(BottomContainer, { "$collapseSize": collapseSize, "data-testid": "bottom-section" },
         languages.length > 0 && (React__default.default.createElement(LanguageLinks, { currentLanguage: language, languages: languages })),
         React__default.default.createElement(BottomCenter, null,
             socialMedia && React__default.default.createElement(SocialMediaLinks, { socialMedia: socialMedia }),

package/build/cjs/components/Footer/Footer.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var useWindowSize = require('../../hooks/useWindowSize.js');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var breakpoints = require('../../themes/themeComponents/breakpoints.js');
 var FooterComponents = require('./Components/FooterComponents.js');
@@ -14,11 +14,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const TopContainer = styled.default.div `
+const TopContainer = styledComponents.styled.div `
     background-color: ${theme.default.color.background.plum.E01};
 `;
-const FooterContainer = styled.default.footer `
-    z-index: ${({ zIndex }) => zIndex};
+const FooterContainer = styledComponents.styled.footer `
+    z-index: ${({ $zIndex }) => $zIndex};
     color: ${theme.default.color.text.white};
     background: ${theme.default.color.default.plum};
     margin: 0;
@@ -90,7 +90,7 @@ const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language
         setIsCollapsed,
         isMobileFooter: isMobile,
     }), [collapseSize, isCollapsed, isMobile, language]);
-    return (React__default.default.createElement(FooterContainer, { zIndex: zIndex },
+    return (React__default.default.createElement(FooterContainer, { "$zIndex": zIndex },
         React__default.default.createElement(FooterContext.default.Provider, { value: footerContextData },
             Boolean(topSection.length) && (React__default.default.createElement(TopContainer, null,
                 React__default.default.createElement(FooterComponents.TopSection, { topSection: topSection }))),

package/build/cjs/components/Icon/Icon.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var index = require('../Icons/index.js');
@@ -14,17 +14,17 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const IconsList = index;
-const IconContainer = styled.default.span `
+const IconContainer = styledComponents.styled.span `
     display: inline-flex;
     width: ${({ size }) => size};
     height: ${({ size }) => size};
 
-    ${({ position }) => (position === 'right' || position === 'middle') &&
+    ${({ $position }) => ($position === 'right' || $position === 'middle') &&
     `
             margin-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
         `}
 
-    ${({ position }) => (position === 'left' || position === 'middle') &&
+    ${({ $position }) => ($position === 'left' || $position === 'middle') &&
     `
             margin-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
         `}
@@ -39,9 +39,9 @@ const Icon = (_a) => {
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
     const RenderIcon = name && IconsList[name];
     return (React__default.default.createElement(React__default.default.Fragment, null,
-        RenderIcon && (React__default.default.createElement(IconContainer, { position: props.position, size: size, className: "dnasg-icon", "data-testid": dataTestId },
+        RenderIcon && (React__default.default.createElement(IconContainer, { "$position": props.position, size: size, className: "dnasg-icon", "data-testid": dataTestId },
             React__default.default.createElement(RenderIcon, Object.assign({}, props, { size: size, color: color })))),
-        IconParam && (React__default.default.createElement(IconContainer, { onClick: props.onClick, position: props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, role: !ariaHidden ? 'img' : undefined },
+        IconParam && (React__default.default.createElement(IconContainer, { onClick: props.onClick, "$position": props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, role: !ariaHidden ? 'img' : undefined },
             React__default.default.createElement(IconParam, { size: size, color: color })))));
 };
 

package/build/cjs/components/InfoDialog/InfoDialog.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
@@ -21,7 +21,7 @@ const colorMap = {
     default: theme.default.color.default.pink,
     sale: theme.default.color.accent.orange,
 };
-const InfoDialogContainer = styled.default.div `
+const InfoDialogContainer = styledComponents.styled.div `
     position: relative;
     font-size: ${theme.default.fontSize.s};
     line-height: ${theme.default.lineHeight.s};
@@ -48,7 +48,7 @@ const InfoDialogContainer = styled.default.div `
         border-top: 0;
         width: auto;
         border-bottom-color: ${theme.default.color.default.white};
-        ${({ position }) => positionMap[position]};
+        ${({ $position }) => positionMap[$position]};
         border-width: 0px ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2)}
             ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2)};
     }
@@ -62,7 +62,7 @@ const InfoDialogContainer = styled.default.div `
 /** @visibleName Info Dialog */
 const InfoDialog = (_a) => {
     var { position = 'middle', type = 'default', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["position", "type", 'data-testid']);
-    return (React__default.default.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, position: position, type: type, role: "region", "aria-label": props.ariaLabel }, props.children));
+    return (React__default.default.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, "$position": position, type: type, role: "region", "aria-label": props.ariaLabel }, props.children));
 };
 
 exports.default = InfoDialog;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
@@ -20,11 +20,11 @@ const iconsMap = {
     success: icons.Check,
     error: icons.Error,
 };
-const FieldContainer = styled.default.div `
+const FieldContainer = styledComponents.styled.div `
     color: ${theme.default.color.text.black};
     margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
 `;
-const FieldWrapper = styled.default.div `
+const FieldWrapper = styledComponents.styled.div `
     position: relative;
     display: flex;
     border-radius: ${theme.default.radius.s};
@@ -34,7 +34,7 @@ const FieldWrapper = styled.default.div `
     background-color: ${theme.default.color.background.white.default};
     align-items: center;
 
-    ${({ status }) => status === 'error' &&
+    ${({ $status }) => $status === 'error' &&
     `
         border-bottom: 4px solid ${theme.default.color.notification.error};
     `}
@@ -50,10 +50,10 @@ const FieldWrapper = styled.default.div `
         display: none;
     `} 
 
-    ${({ $disabled }) => $disabled &&
+    ${({ $disabled, $readonly }) => ($disabled || $readonly) &&
     `
         background-color: ${theme.default.color.background.sand.E01};
-    `} 
+    `}
 
     &:focus-within {
         border: 2px solid ${theme.default.color.focus.light};
@@ -61,7 +61,7 @@ const FieldWrapper = styled.default.div `
         border-radius: ${theme.default.radius.s};
     }
 `;
-const IconWrapper = styled.default.div `
+const IconWrapper = styledComponents.styled.div `
     margin-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     display: flex;
     flex-wrap: nowrap;
@@ -76,7 +76,7 @@ const IconWrapper = styled.default.div `
         }
     }
 `;
-const StyledInput = styled.default.input `
+const StyledInput = styledComponents.styled.input `
     position: relative;
     display: inline-block;
     appearance: none;
@@ -90,6 +90,12 @@ const StyledInput = styled.default.input `
     padding: 0;
     background: transparent;
 
+    ${({ readOnly }) => readOnly &&
+    `
+        color: ${theme.default.color.default.black};
+        cursor: default;
+    `}
+
     &[type='range'] {
         appearance: auto;
     }
@@ -107,19 +113,19 @@ const StyledInput = styled.default.input `
         color: ${theme.default.color.text.black}${theme.default.color.transparency.T40};
     }
 `;
-const StyledButtonIcon = styled.default(ButtonIcon.default) `
+const StyledButtonIcon = styledComponents.styled(ButtonIcon.default) `
     .dnasg-icon svg {
         fill: ${theme.default.color.text.black};
     }
 `;
-const Message = styled.default.div `
+const Message = styledComponents.styled.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) `
+const ErrorMessage = styledComponents.styled(Message) `
     font-weight: ${theme.default.fontWeight.medium};
     color: ${theme.default.color.notification.error};
 `;
@@ -165,18 +171,20 @@ const Input = (_a) => {
     };
     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.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: inputRef, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
+        React__default.default.createElement(FieldWrapper, { "$status": props.status, "$type": type, "$disabled": props.disabled, "$readonly": props.readonly },
+            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-readonly": props.readonly || undefined, "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: inputRef, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
             ((props.status && props.status !== 'comment') ||
                 props.showPasswordToggle ||
                 props.disabled ||
+                props.readonly ||
                 props.onClearableButtonClick) && (React__default.default.createElement(IconWrapper, null,
                 props.showPasswordToggle && (React__default.default.createElement(StyledButtonIcon, { icon: showPassword ? icons.EyeOpen : icons.EyeClosed, onClick: togglePasswordVisibility, ariaLabel: props.passwordToggleLabel })),
-                (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.status === 'success' || props.status === 'error') && (React__default.default.createElement(Icon.default, { "aria-hidden": true, icon: iconsMap[props.status], color: theme.default.color.notification[props.status] })),
+                (props.disabled || props.readonly) && (React__default.default.createElement(Icon.default, { "aria-hidden": true, icon: icons.Lock, className: props.className && `${props.className}-lock-icon` })),
                 props.onClearableButtonClick &&
                     Boolean(props.value) &&
-                    !props.disabled && (React__default.default.createElement(ButtonIcon.default, { icon: icons.Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel }))))),
+                    !props.disabled &&
+                    !props.readonly && (React__default.default.createElement(ButtonIcon.default, { icon: icons.Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel }))))),
         props.status === 'error' && props.errorMessage && (React__default.default.createElement(ErrorMessage, { id: `${props.id}-error`, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
         props.status === 'comment' && props.commentMessage && (React__default.default.createElement(Message, { id: `${props.id}-comment`, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 };

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
@@ -18,7 +18,7 @@ const colorsMap = {
     presale: theme.default.color.background.orange.default,
     other: theme.default.color.background.sky.default,
 };
-const StyledLabel = styled.default.span `
+const StyledLabel = styledComponents.styled.span `
     display: inline-block;
     color: ${theme.default.color.text.black};
     background-color: ${({ type }) => colorsMap[type]};

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
@@ -12,22 +12,22 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Label = styled.default.label `
+const Label = styledComponents.styled.label `
     display: block;
-    color: ${({ status }) => status === 'error' ? theme.default.color.notification.error : theme.default.color.text.gray};
+    color: ${({ $status }) => $status === 'error' ? theme.default.color.notification.error : 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 `
+const Mandatory = styledComponents.styled.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__default.default.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, "*")));
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styled = require('../../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../../themes/theme.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 
@@ -11,9 +11,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(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)};
+const BusinessMenuLink = styledComponents.styled.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};
@@ -32,8 +32,8 @@ const BusinessMenuLink = styled.default.a `
     &:hover,
     &:focus {
         text-decoration: none;
-        color: ${p => (p.isActive ? theme.default.color.text.black : theme.default.color.text.white)};
-        background-color: ${p => p.isActive
+        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};
         outline: none;
@@ -44,7 +44,7 @@ const BusinessMenuLink = styled.default.a `
             0px 0px 0px 4px ${theme.default.color.focus.dark};
     }
 `;
-const BusinessMenuList = styled.default.nav `
+const BusinessMenuList = styledComponents.styled.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)};
@@ -56,7 +56,7 @@ 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" }, 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__default.default.createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu" }, 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])))));
 };
 
 exports.default = BusinessMenu;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var useOutsideClick = require('../../../hooks/useOutsideClick.js');
-var styled = require('../../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
@@ -17,7 +17,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const fadeIn = styled.keyframes `
+const fadeIn = styledComponents.keyframes `
     0% {
         opacity: 0;
         transform: translateY(-5px);
@@ -27,17 +27,17 @@ const fadeIn = styled.keyframes `
         transform: translateY(0px);
     }
 `;
-const fadeInAnimation = styled.css `
+const fadeInAnimation = styledComponents.css `
     animation: ${fadeIn} 0.3s ease-in-out;
 `;
-const noAnimation = styled.css `
+const noAnimation = styledComponents.css `
     animation: none;
 `;
-const MegaMenuContent = styled.default.ul `
+const MegaMenuContent = styledComponents.styled.ul `
     display: grid;
     grid-template-columns: 25% 25% 25% 25%;
 `;
-const CategoryTitle = styled.default.h2 `
+const CategoryTitle = styledComponents.styled.h2 `
     display: flex;
     font-size: ${theme.default.fontSize.default};
     line-height: ${theme.default.lineHeight.default};
@@ -48,7 +48,7 @@ const CategoryTitle = styled.default.h2 `
         font-size: ${theme.default.fontSize.xl};
     `}
 `;
-const CategoryBlock = styled.default.li `
+const CategoryBlock = styledComponents.styled.li `
     display: block;
     padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)} 0;
     border-right: 1px solid ${theme.default.color.line.L03};
@@ -68,16 +68,16 @@ const CategoryBlock = styled.default.li `
         `}
     }
 `;
-const CategoryCollectionBlock = styled.default(CategoryBlock) `
+const CategoryCollectionBlock = styledComponents.styled(CategoryBlock) `
     background-color: ${theme.default.color.background.sand.E01};
 `;
-const SubMenuItem = styled.default.li `
+const SubMenuItem = styledComponents.styled.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)};
     }
 `;
-const DesktopMenuItem = styled.default(globalNavStyles.MenuItem) `
+const DesktopMenuItem = styledComponents.styled(globalNavStyles.MenuItem) `
     > a,
     > button {
         width: auto;
@@ -103,7 +103,7 @@ const DesktopMenuItem = styled.default(globalNavStyles.MenuItem) `
     }
 `;
 // MEGAMENU 1st level
-const SubMenuList = styled.default.div `
+const SubMenuList = styledComponents.styled.div `
     position: absolute;
     top: ${navigation.navMaxHeight};
     left: 0;