@dnanpm/styleguide 3.10.0 → 3.11.0

package/build/es/components/EnergyLabel/EnergyLabel.js

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import React__default, { useState } from 'react';
 import { Open } from '@dnanpm/icons';
 import Modal from '../Modal/Modal.js';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import { media, getMultipliedSize } from '../../utils/styledUtils.js';
 import Button from '../Button/Button.js';
 import theme from '../../themes/theme.js';
@@ -54,7 +54,7 @@ const ErrorContainer = styled.div `
     gap: ${getMultipliedSize(theme.base.baseHeight, 3)};
 `;
 const Image = styled.img `
-    width: ${p => p.imgWidth};
+    width: ${p => p.$imgWidth};
 `;
 /** @visibleName Energy Label */
 const EnergyLabel = (_a) => {
@@ -78,12 +78,12 @@ const EnergyLabel = (_a) => {
     }
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(ButtonElement, { onClick: handleOpen, "aria-label": props.ariaLabel, "data-testid": dataTestId, id: props.id, className: props.className },
-            React__default.createElement(Image, { src: props.badgeSrc, alt: "", "aria-hidden": true, imgWidth: "55px", onError: () => setImgError(true) })),
+            React__default.createElement(Image, { src: props.badgeSrc, alt: "", "aria-hidden": true, "$imgWidth": "55px", onError: () => setImgError(true) })),
         React__default.createElement(StyledModal, { appElement: modalAppElement, isOpen: isOpen, onRequestClose: handleClose, title: props.modalTitle, closeLabel: props.closeButtonLabel, footer: renderFooter() }, hasError || !props.modalImageSrc ? (React__default.createElement(ErrorContainer, null,
             React__default.createElement("h3", null, props.errorTitle),
-            React__default.createElement(Image, { src: ERROR_IMAGE, alt: "", imgWidth: "160px" }),
+            React__default.createElement(Image, { src: ERROR_IMAGE, alt: "", "$imgWidth": "160px" }),
             React__default.createElement("p", null, props.errorLabel))) : (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Image, { src: props.modalImageSrc, alt: "", imgWidth: "100%", onError: () => setHasError(true) }),
+            React__default.createElement(Image, { src: props.modalImageSrc, alt: "", "$imgWidth": "100%", onError: () => setHasError(true) }),
             React__default.createElement(ModalLabel, null, props.modalLabel))))));
 };
 

package/build/es/components/Expander/Expander.js

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import { ChevronUp, ChevronDown, Close } from '@dnanpm/icons';
 import React__default from 'react';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
 

package/build/es/components/Floater/Floater.js

@@ -1,22 +1,22 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import styled__default from 'styled-components';
+import { styled } from 'styled-components';
 
-const getInset = ({ position, offset }) => {
+const getInset = ({ position, offset, }) => {
     const insetConfig = {
         top: [offset, 'auto', 'auto'],
         bottom: ['auto', 'auto', offset],
     };
     return `inset: ${insetConfig[position].join(' ')};`;
 };
-const Element = styled__default.div `
+const Element = styled.div `
     position: sticky;
     ${({ zIndex }) => zIndex && `z-index: ${zIndex}`};
-    ${({ position, offset }) => getInset({ position, offset })}
+    ${({ $position, offset }) => getInset({ position: $position, offset })}
 `;
 const Floater = (_a) => {
     var { position = 'top', offset = '0', 'data-testid': dataTestId } = _a, props = __rest(_a, ["position", "offset", 'data-testid']);
-    return (React__default.createElement(Element, { id: props.id, position: position, offset: offset, zIndex: props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React__default.createElement(Element, { id: props.id, "$position": position, offset: offset, zIndex: props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 export { Floater as default };

package/build/es/components/Footer/Components/FooterComponents.d.ts

@@ -1,173 +1,8 @@
 import React from 'react';
 import type { ApplicationLinksProps, BottomSectionProps, CategoriesComponentProps, FooterNavigationProps, GeneralInformationComponentProps } from '../types/footerProps';
-export declare const LangLink: import("styled-components").StyledComponent<"a", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        default: {
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        accent: {
-            lemon: string;
-            sky: string;
-            orange: string;
-        };
-        active: {
-            pink: string;
-        };
-        hover: {
-            pink: string;
-        };
-        text: {
-            gray: string;
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        line: {
-            L01: string;
-            L02: string;
-            L03: string;
-            L04: string;
-        };
-        notification: {
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        background: {
-            sand: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            pink: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            plum: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            lemon: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            sky: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            orange: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            white: {
-                default: string;
-            };
-        };
-        focus: {
-            dark: string;
-            light: string;
-        };
-        transparency: {
-            T0: string;
-            T10: string;
-            T20: string;
-            T30: string;
-            T40: string;
-            T50: string;
-            T60: string;
-            T70: string;
-            T80: string;
-            T90: string;
-            T100: string;
-        };
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}, {
-    isActive?: boolean;
-}, never>;
+export declare const LangLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
+    $isActive?: boolean;
+}>> & string;
 export declare const TopSection: ({ topSection }: FooterNavigationProps) => React.JSX.Element;
 export declare const Categories: ({ categories }: CategoriesComponentProps) => React.JSX.Element;
 export declare const GeneralInformation: ({ generalInformation }: GeneralInformationComponentProps) => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import { User, Headset, Shop, ArrowRight, ChevronDown, Facebook, Instagram, Linkedin, Tiktok, Threads, X, Youtube } from '@dnanpm/icons';
 import React__default, { useContext, Fragment } from 'react';
-import styled, { css } from '../../../themes/styled.js';
+import { css, styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
 import ButtonIcon from '../../ButtonIcon/ButtonIcon.js';
@@ -36,15 +36,16 @@ const BaseContainer = styled.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: ${getMultipliedSize(theme.base.baseHeight, 4)};
     }
 `;
 const CategoryLinks = 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;
+    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: ${getMultipliedSize(theme.base.baseHeight, 1)};
 `;
@@ -79,11 +80,11 @@ const CategoryWrapper = styled.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(BaseContainer) `
-    @media (max-width: ${({ collapseSize }) => collapseSize}px) {
+    @media (max-width: ${({ $collapseSize }) => $collapseSize}px) {
         gap: 0;
         padding: 0;
         padding-top: ${getMultipliedSize(theme.base.baseHeight, 1)};
@@ -101,12 +102,12 @@ const LangLinksContainer = styled.div `
     justify-content: center;
 `;
 const LangLink = styled.a `
-    background: ${({ isActive }) => isActive ? theme.color.background.white.default : 'transparent'};
-    color: ${({ isActive }) => (isActive ? theme.color.text.plum : theme.color.text.white)};
+    background: ${({ $isActive }) => $isActive ? theme.color.background.white.default : 'transparent'};
+    color: ${({ $isActive }) => ($isActive ? theme.color.text.plum : theme.color.text.white)};
     &:hover,
     &:active,
     &:focus {
-          color: ${({ isActive }) => isActive
+          color: ${({ $isActive }) => $isActive
     ? theme.color.text.plum
     : theme.color.text.white + theme.color.transparency.T80};
         }
@@ -174,7 +175,7 @@ const BottomContainer = styled(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;
@@ -248,7 +249,7 @@ const mapCorporateSelector = (languagesObject) => Object.keys(languagesObject.ur
 }));
 const TopSection = ({ topSection }) => {
     const { collapseSize, language } = useContext(FooterContext);
-    return (React__default.createElement(TopContainer, { collapseSize: collapseSize }, topSection === null || topSection === void 0 ? void 0 : topSection.map((section, index) => (React__default.createElement("div", { key: `service-section-${index}`, "data-testid": `service-section-${index}` },
+    return (React__default.createElement(TopContainer, { "$collapseSize": collapseSize }, topSection === null || topSection === void 0 ? void 0 : topSection.map((section, index) => (React__default.createElement("div", { key: `service-section-${index}`, "data-testid": `service-section-${index}` },
         section.svgIconName[language] === 'user' && React__default.createElement(User, { size: "3rem" }),
         section.svgIconName[language] === 'headset' && React__default.createElement(Headset, { size: "3rem" }),
         section.svgIconName[language] === 'shop' && React__default.createElement(Shop, { size: "3rem" }),
@@ -264,11 +265,11 @@ const Categories = ({ categories }) => {
             setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), { [currentIndex]: !isCollapsed[currentIndex] }));
         }
     };
-    return (React__default.createElement(CategoryContainer, { collapseSize: collapseSize, "data-testid": "category-container" }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (React__default.createElement(CategoryWrapper, { active: isCollapsed[index], "data-testid": `category-${index}`, key: `category-${index}` },
+    return (React__default.createElement(CategoryContainer, { "$collapseSize": collapseSize, "data-testid": "category-container" }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (React__default.createElement(CategoryWrapper, { "$active": isCollapsed[index], "data-testid": `category-${index}`, key: `category-${index}` },
         React__default.createElement(CategoryHeader, { onClick: () => toggleCollapse(index), "aria-expanded": isMobileFooter ? isCollapsed[index] : true },
             React__default.createElement(CategoryName, null, category.description[language]),
             isMobileFooter && React__default.createElement(ChevronDown, null)),
-        React__default.createElement(CategoryLinks, { active: isMobileFooter ? isCollapsed[index] : true }, category.category.map((categoryLink, linkIndex) => (React__default.createElement(LinksListEl, { key: `category-${index}-link-${linkIndex}`, "data-testid": `category-${index}-link-${linkIndex}` },
+        React__default.createElement(CategoryLinks, { "$active": isMobileFooter ? isCollapsed[index] : true }, category.category.map((categoryLink, linkIndex) => (React__default.createElement(LinksListEl, { key: `category-${index}-link-${linkIndex}`, "data-testid": `category-${index}-link-${linkIndex}` },
             React__default.createElement("a", { href: categoryLink.urls[language] }, categoryLink.titles[language]))))))))));
 };
 const GeneralInformation = ({ generalInformation }) => {
@@ -344,7 +345,7 @@ const BottomSection = ({ items }) => {
     else {
         languages = customLinks || [];
     }
-    return (React__default.createElement(BottomContainer, { collapseSize: collapseSize, "data-testid": "bottom-section" },
+    return (React__default.createElement(BottomContainer, { "$collapseSize": collapseSize, "data-testid": "bottom-section" },
         languages.length > 0 && (React__default.createElement(LanguageLinks, { currentLanguage: language, languages: languages })),
         React__default.createElement(BottomCenter, null,
             socialMedia && React__default.createElement(SocialMediaLinks, { socialMedia: socialMedia }),

package/build/es/components/Footer/Footer.js

@@ -1,6 +1,6 @@
 import React__default, { useState, useEffect, useMemo } from 'react';
 import useWindowSize from '../../hooks/useWindowSize.js';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import breakpoints from '../../themes/themeComponents/breakpoints.js';
 import { LangLink, TopSection, Categories, BottomSection } from './Components/FooterComponents.js';
@@ -10,7 +10,7 @@ const TopContainer = styled.div `
     background-color: ${theme.color.background.plum.E01};
 `;
 const FooterContainer = styled.footer `
-    z-index: ${({ zIndex }) => zIndex};
+    z-index: ${({ $zIndex }) => $zIndex};
     color: ${theme.color.text.white};
     background: ${theme.color.default.plum};
     margin: 0;
@@ -82,7 +82,7 @@ const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language
         setIsCollapsed,
         isMobileFooter: isMobile,
     }), [collapseSize, isCollapsed, isMobile, language]);
-    return (React__default.createElement(FooterContainer, { zIndex: zIndex },
+    return (React__default.createElement(FooterContainer, { "$zIndex": zIndex },
         React__default.createElement(FooterContext.Provider, { value: footerContextData },
             Boolean(topSection.length) && (React__default.createElement(TopContainer, null,
                 React__default.createElement(TopSection, { topSection: topSection }))),

package/build/es/components/Icon/Icon.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import * as index from '../Icons/index.js';
@@ -11,12 +11,12 @@ const IconContainer = styled.span `
     width: ${({ size }) => size};
     height: ${({ size }) => size};
 
-    ${({ position }) => (position === 'right' || position === 'middle') &&
+    ${({ $position }) => ($position === 'right' || $position === 'middle') &&
     `
             margin-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
         `}
 
-    ${({ position }) => (position === 'left' || position === 'middle') &&
+    ${({ $position }) => ($position === 'left' || $position === 'middle') &&
     `
             margin-right: ${getMultipliedSize(theme.base.baseWidth, 1)};
         `}
@@ -31,9 +31,9 @@ const Icon = (_a) => {
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
     const RenderIcon = name && IconsList[name];
     return (React__default.createElement(React__default.Fragment, null,
-        RenderIcon && (React__default.createElement(IconContainer, { position: props.position, size: size, className: "dnasg-icon", "data-testid": dataTestId },
+        RenderIcon && (React__default.createElement(IconContainer, { "$position": props.position, size: size, className: "dnasg-icon", "data-testid": dataTestId },
             React__default.createElement(RenderIcon, Object.assign({}, props, { size: size, color: color })))),
-        IconParam && (React__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.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.createElement(IconParam, { size: size, color: color })))));
 };
 

package/build/es/components/InfoDialog/InfoDialog.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
@@ -40,7 +40,7 @@ const InfoDialogContainer = styled.div `
         border-top: 0;
         width: auto;
         border-bottom-color: ${theme.color.default.white};
-        ${({ position }) => positionMap[position]};
+        ${({ $position }) => positionMap[$position]};
         border-width: 0px ${getMultipliedSize(theme.base.baseWidth, 1.2)}
             ${getMultipliedSize(theme.base.baseWidth, 1.2)};
     }
@@ -54,7 +54,7 @@ const InfoDialogContainer = styled.div `
 /** @visibleName Info Dialog */
 const InfoDialog = (_a) => {
     var { position = 'middle', type = 'default', 'data-testid': dataTestId } = _a, props = __rest(_a, ["position", "type", 'data-testid']);
-    return (React__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.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, "$position": position, type: type, role: "region", "aria-label": props.ariaLabel }, props.children));
 };
 
 export { InfoDialog as default };

package/build/es/components/Input/Input.js

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import { EyeOpen, EyeClosed, Lock, Close, Check, Error } from '@dnanpm/icons';
 import React__default, { useRef, useState, useEffect } from 'react';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, getDividedSize } from '../../utils/styledUtils.js';
 import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
@@ -26,7 +26,7 @@ const FieldWrapper = styled.div `
     background-color: ${theme.color.background.white.default};
     align-items: center;
 
-    ${({ status }) => status === 'error' &&
+    ${({ $status }) => $status === 'error' &&
     `
         border-bottom: 4px solid ${theme.color.notification.error};
     `}
@@ -42,10 +42,10 @@ const FieldWrapper = styled.div `
         display: none;
     `} 
 
-    ${({ $disabled }) => $disabled &&
+    ${({ $disabled, $readonly }) => ($disabled || $readonly) &&
     `
         background-color: ${theme.color.background.sand.E01};
-    `} 
+    `}
 
     &:focus-within {
         border: 2px solid ${theme.color.focus.light};
@@ -82,6 +82,12 @@ const StyledInput = styled.input `
     padding: 0;
     background: transparent;
 
+    ${({ readOnly }) => readOnly &&
+    `
+        color: ${theme.color.default.black};
+        cursor: default;
+    `}
+
     &[type='range'] {
         appearance: auto;
     }
@@ -157,18 +163,20 @@ const Input = (_a) => {
     };
     return (React__default.createElement(FieldContainer, { className: props.className },
         props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
-        React__default.createElement(FieldWrapper, { status: props.status, "$type": type, "$disabled": props.disabled },
-            React__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.createElement(FieldWrapper, { "$status": props.status, "$type": type, "$disabled": props.disabled, "$readonly": props.readonly },
+            React__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.createElement(IconWrapper, null,
                 props.showPasswordToggle && (React__default.createElement(StyledButtonIcon, { icon: showPassword ? EyeOpen : EyeClosed, onClick: togglePasswordVisibility, ariaLabel: props.passwordToggleLabel })),
-                (props.status === 'success' || props.status === 'error') && (React__default.createElement(Icon, { icon: iconsMap[props.status], color: theme.color.notification[props.status] })),
-                props.disabled && React__default.createElement(Icon, { icon: Lock }),
+                (props.status === 'success' || props.status === 'error') && (React__default.createElement(Icon, { "aria-hidden": true, icon: iconsMap[props.status], color: theme.color.notification[props.status] })),
+                (props.disabled || props.readonly) && (React__default.createElement(Icon, { "aria-hidden": true, icon: Lock, className: props.className && `${props.className}-lock-icon` })),
                 props.onClearableButtonClick &&
                     Boolean(props.value) &&
-                    !props.disabled && (React__default.createElement(ButtonIcon, { icon: Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel }))))),
+                    !props.disabled &&
+                    !props.readonly && (React__default.createElement(ButtonIcon, { icon: Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel }))))),
         props.status === 'error' && props.errorMessage && (React__default.createElement(ErrorMessage, { id: `${props.id}-error`, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
         props.status === 'comment' && props.commentMessage && (React__default.createElement(Message, { id: `${props.id}-comment`, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 };

package/build/es/components/Label/Label.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getDividedSize, getMultipliedSize } from '../../utils/styledUtils.js';
 

package/build/es/components/LabelText/LabelText.js

@@ -1,12 +1,12 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getDividedSize } from '../../utils/styledUtils.js';
 
 const Label = styled.label `
     display: block;
-    color: ${({ status }) => status === 'error' ? theme.color.notification.error : theme.color.text.gray};
+    color: ${({ $status }) => $status === 'error' ? theme.color.notification.error : theme.color.text.gray};
     font-weight: ${theme.fontWeight.medium};
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
@@ -19,7 +19,7 @@ const Mandatory = styled.span `
 /** @visibleName Label Text */
 const LabelText = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React__default.createElement(Label, { id: props.id, htmlFor: props.htmlFor, className: props.className, "data-testid": dataTestId, status: props.status },
+    return (React__default.createElement(Label, { id: props.id, htmlFor: props.htmlFor, className: props.className, "data-testid": dataTestId, "$status": props.status },
         props.children,
         props.isMandatory && React__default.createElement(Mandatory, null, "*")));
 };

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

@@ -1,11 +1,11 @@
 import React__default from 'react';
-import styled from '../../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { getMultipliedSize, media } from '../../../utils/styledUtils.js';
 
 const BusinessMenuLink = styled.a `
-    background-color: ${p => p.isActive ? theme.color.background.white.default : theme.color.background.plum.E02};
-    color: ${p => (p.isActive ? theme.color.text.black : theme.color.text.white)};
+    background-color: ${p => p.$isActive ? theme.color.background.white.default : theme.color.background.plum.E02};
+    color: ${p => (p.$isActive ? theme.color.text.black : theme.color.text.white)};
     font-family: ${theme.fontFamily.default};
     font-weight: ${theme.fontWeight.medium};
     font-size: ${theme.fontSize.xs};
@@ -24,8 +24,8 @@ const BusinessMenuLink = styled.a `
     &:hover,
     &:focus {
         text-decoration: none;
-        color: ${p => (p.isActive ? theme.color.text.black : theme.color.text.white)};
-        background-color: ${p => p.isActive
+        color: ${p => (p.$isActive ? theme.color.text.black : theme.color.text.white)};
+        background-color: ${p => p.$isActive
     ? theme.color.background.white.default
     : theme.color.background.plum.default};
         outline: none;
@@ -48,7 +48,7 @@ const BusinessMenu = ({ ariaLabel, currentBusinessId, items, lang }) => {
     if (!(items === null || items === void 0 ? void 0 : items.length)) {
         return null;
     }
-    return (React__default.createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu" }, items.map(item => (React__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.createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu" }, items.map(item => (React__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])))));
 };
 
 export { BusinessMenu as default };

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

@@ -1,7 +1,7 @@
 import { ChevronRight } from '@dnanpm/icons';
 import React__default, { useContext, useRef } from 'react';
 import useOutsideClick from '../../../hooks/useOutsideClick.js';
-import styled, { keyframes, css } from '../../../themes/styled.js';
+import { keyframes, css, styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { navMaxHeight, headerMaxHeight } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize, media } from '../../../utils/styledUtils.js';

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

@@ -1,6 +1,6 @@
 import { Globe } from '@dnanpm/icons';
 import React__default, { useContext, useCallback } from 'react';
-import styled from '../../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { navIconSize } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';