@dnanpm/styleguide 3.11.0 → 3.11.2

package/build/cjs/utils/styledUtils.js

@@ -7,10 +7,10 @@ const getMultipliedSize = (base, multiply) => `${multiply * base.value}${base.un
 const getDividedSize = (base, divide) => `${base.value / divide}${base.unit}`;
 const media = Object.keys(breakpoints.default).reduce((acc, label) => {
     acc[label] = (literals, ...placeholders) => styledComponents.css `
-            @media (min-width: ${breakpoints.default[label]}px) {
-                ${styledComponents.css(literals, ...placeholders)};
-            }
-        `.join('');
+                @media (min-width: ${breakpoints.default[label]}px) {
+                    ${styledComponents.css(literals, ...placeholders)};
+                }
+            `.join('');
     return acc;
 }, {});
 

package/build/es/components/Checkbox/Checkbox.js

@@ -86,7 +86,8 @@ const Input = styled.input `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
     }
 `;

package/build/es/components/Chip/Chip.js

@@ -42,7 +42,8 @@ const Element = styled.div `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
     }
 `;

package/build/es/components/DateTimePicker/DateTimePicker.d.ts

@@ -1,6 +1,6 @@
 import type { ChangeEvent } from 'react';
 import React from 'react';
-import type { ReactDatePickerProps } from 'react-datepicker';
+import type { DatePickerProps } from 'react-datepicker';
 import type { LocaleCode } from '../../types/locale.d';
 interface Props {
     /**
@@ -15,7 +15,7 @@ interface Props {
      * Allows to enable range picker functionality.
      * By passing `null` as value, range picker functionality will be enabled but no value will be provided as default
      */
-    endDate?: ReactDatePickerProps['endDate'];
+    endDate?: DatePickerProps['endDate'];
     /**
      * Input label content
      */
@@ -36,7 +36,7 @@ interface Props {
     /**
      * On datetime picker change callback
      */
-    onChange: ReactDatePickerProps['onChange'];
+    onChange: DatePickerProps['onChange'];
     /**
      * On input change callback
      */
@@ -44,17 +44,17 @@ interface Props {
     /**
      * Minimum selectable date
      */
-    minDate?: ReactDatePickerProps['minDate'];
+    minDate?: DatePickerProps['minDate'];
     /**
      * Maximum selectable date
      */
-    maxDate?: ReactDatePickerProps['maxDate'];
+    maxDate?: DatePickerProps['maxDate'];
     /**
      * Allows to define time intervals in time picker
      *
      * @default 30
      */
-    timeInterval?: ReactDatePickerProps['timeIntervals'];
+    timeInterval?: DatePickerProps['timeIntervals'];
     /**
      * Text of the error message when input element is in error state
      */
@@ -107,6 +107,22 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Descriptive label for screen readers for the input element.
+     */
+    ariaLabelInput?: string;
+    /**
+     * Accessible label for "Previous month" button
+     */
+    ariaLabelPreviousMonth?: string;
+    /**
+     * Accessible label for "Next month" button
+     */
+    ariaLabelNextMonth?: string;
+    /**
+     * Accessible text for announcing date changes (e.g., for screen readers)
+     */
+    ariaLiveAnnouncement?: string;
 }
 /** @visibleName DateTime Picker */
 declare const DateTimePicker: ({ date: startDate, locale, isDatePicker, isTimePicker, timeInterval, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/es/components/DateTimePicker/DateTimePicker.js

@@ -77,7 +77,6 @@ const Wrapper = styled.div `
         padding: ${getMultipliedSize(theme.base.baseWidth, 1)}
             ${getMultipliedSize(theme.base.baseWidth, 1)}
             ${getMultipliedSize(theme.base.baseWidth, 0.5)};
-        border-bottom: 1px solid ${theme.color.line.L03};
         background-color: ${theme.color.background.sand.E01};
 
         .react-datepicker-time__header {
@@ -91,6 +90,7 @@ const Wrapper = styled.div `
     & .react-datepicker__month,
     .react-datepicker__time-list {
         display: grid;
+        border-top: 1px solid ${theme.color.line.L03};
         gap: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
         color: ${theme.color.text.gray};
         padding: ${getMultipliedSize(theme.base.baseWidth, 0.5)}
@@ -225,30 +225,26 @@ const CurrentMonth = styled.div `
     line-height: ${theme.lineHeight.default};
     font-weight: ${theme.fontWeight.bold};
 `;
-const StyledInput = styled(Input) `
-    ${({ disabled }) => !disabled &&
-    `
-        div {
-            background-color: ${theme.color.background.white.default};
-        }
-
-        .react-datepicker-ignore-onclickoutside-lock-icon {
-            display: none;
-        }
-    `}
+const VisuallyHiddenStatus = styled.div `
+    position: absolute;
+    left: -9999px;
 `;
-const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default.createElement(MonthSelector, null,
-    React__default.createElement(ButtonIcon, { icon: ChevronLeft, onClick: decreaseMonth }),
+const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, ariaLabelPreviousMonth, ariaLabelNextMonth, }) => (React__default.createElement(MonthSelector, null,
+    React__default.createElement(ButtonIcon, { icon: ChevronLeft, onClick: decreaseMonth, ariaLabel: ariaLabelPreviousMonth }),
     React__default.createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
         month: 'long',
         year: 'numeric',
     }))),
-    React__default.createElement(ButtonIcon, { icon: ChevronRight, onClick: increaseMonth })));
+    React__default.createElement(ButtonIcon, { icon: ChevronRight, onClick: increaseMonth, ariaLabel: ariaLabelNextMonth })));
 /** @visibleName DateTime Picker */
 const DateTimePicker = (_a) => {
-    var _b;
+    var _b, _c, _d;
     var { date: startDate, locale = 'fi-FI', isDatePicker = true, isTimePicker = false, timeInterval = 30, 'data-testid': dataTestId } = _a, props = __rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
     const [showReactDatePicker, setShowReactDatePicker] = useState(false);
+    const isRange = props.endDate !== undefined;
+    const callOnChange = (date, event) => {
+        props.onChange(date, event);
+    };
     const handleOnInputFocus = () => {
         setShowReactDatePicker(true);
     };
@@ -258,17 +254,41 @@ const DateTimePicker = (_a) => {
         }
     };
     const handleOnKeyDown = (e) => {
-        if (!props.isEditable &&
-            (e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Clear')) {
-            props.onChange(null, e);
+        const isNavigationKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key);
+        if (isNavigationKey && showReactDatePicker) {
+            return;
+        }
+        if (e.key === 'Escape') {
+            setShowReactDatePicker(false);
+        }
+        if (e.key === 'Enter' && showReactDatePicker) {
+            setShowReactDatePicker(false);
+        }
+        if (!props.isEditable && ['Backspace', 'Delete', 'Clear'].includes(e.key)) {
+            callOnChange(null, e);
         }
     };
     const handleClearable = (e) => {
-        props.onChange(null, e);
+        callOnChange(null, e);
     };
-    const handleOnReactDatePickerChange = (date, e) => {
-        setShowReactDatePicker(false);
-        props.onChange(date, e);
+    const handleOnReactDatePickerChange = (date, event) => {
+        var _a, _b;
+        let shouldKeepOpen = false;
+        if (isRange) {
+            const [start, end] = Array.isArray(date) && date.length === 2 ? date : [null, null];
+            shouldKeepOpen = !(start && end);
+        }
+        else if (isDatePicker &&
+            isTimePicker &&
+            date instanceof Date &&
+            ((_a = date.getHours) === null || _a === void 0 ? void 0 : _a.call(date)) === 0 &&
+            ((_b = date.getMinutes) === null || _b === void 0 ? void 0 : _b.call(date)) === 0) {
+            shouldKeepOpen = true;
+        }
+        if (!shouldKeepOpen) {
+            setShowReactDatePicker(false);
+        }
+        callOnChange(date, event);
     };
     const handleOnReactDatePickerClickOutside = () => {
         setShowReactDatePicker(false);
@@ -282,13 +302,25 @@ const DateTimePicker = (_a) => {
         timeStyle: 'short',
     }))))
         .join(' - ');
-    const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale }));
+    const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale, ariaLabelPreviousMonth: props.ariaLabelPreviousMonth, ariaLabelNextMonth: props.ariaLabelNextMonth }));
     return (React__default.createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(StyledInput, { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage }),
-        showReactDatePicker && (React__default.createElement(ReactDatePicker, { inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_b = localeData[locale]) === null || _b === void 0 ? void 0 : _b.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
-            // Used to format the date/time in internal ReactDatePicker input
-            // Currently ignored as date/time is shown in Styleguide Input instead, and formatted by using Intl.DateTimeFormat
-            dateFormat: [isDatePicker && 'P', isTimePicker && 'p'].filter(Boolean).join(''), renderCustomHeader: getDateTimePickerCustomHeader }))));
+        React__default.createElement(Input, { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonlyUnstyled: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage, ariaLabel: props.ariaLabelInput, onBlur: (_val, e) => {
+                if (props.isEditable && e.target.value) {
+                    const parsedDate = new Date(e.target.value);
+                    if (!Number.isNaN(parsedDate.getTime())) {
+                        callOnChange(parsedDate, e);
+                    }
+                }
+            } }),
+        React__default.createElement(VisuallyHiddenStatus, { role: "status", "aria-live": "polite" }, startDate instanceof Date && !Number.isNaN(startDate.getTime())
+            ? (_b = props.ariaLiveAnnouncement) === null || _b === void 0 ? void 0 : _b.replace('{{date}}', startDate.toLocaleDateString(locale))
+            : ''),
+        showReactDatePicker &&
+            (isRange ? (React__default.createElement(ReactDatePicker, { selectsRange: true, endDate: props.endDate, inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, onChange: handleOnReactDatePickerChange, timeCaption: (_c = localeData[locale]) === null || _c === void 0 ? void 0 : _c.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], dateFormat: [isDatePicker && 'P', isTimePicker && 'p']
+                    .filter(Boolean)
+                    .join(''), renderCustomHeader: getDateTimePickerCustomHeader })) : (React__default.createElement(ReactDatePicker, { showTimeSelect: isTimePicker, showTimeSelectOnly: !isDatePicker && isTimePicker, inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, onChange: handleOnReactDatePickerChange, timeCaption: (_d = localeData[locale]) === null || _d === void 0 ? void 0 : _d.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], dateFormat: [isDatePicker && 'P', isTimePicker && 'p']
+                    .filter(Boolean)
+                    .join(''), renderCustomHeader: getDateTimePickerCustomHeader })))));
 };
 
 export { DateTimePicker as default };

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

@@ -43,7 +43,8 @@ const BaseContainer = styled.div `
 `;
 const CategoryLinks = styled.ul `
     display: ${({ $active }) => ($active ? 'flex' : 'none')};
-    transition: all 0.3s ease-in-out,
+    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;
@@ -62,7 +63,8 @@ const CategoryHeader = styled.button `
     justify-content: space-between;
     &:focus-visible {
         outline: 1px solid transparent;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
         ${theme.radius.s};
     }
@@ -308,30 +310,16 @@ const SocialMediaLinks = ({ socialMedia }) => {
             return (React__default.createElement("a", { href: url, key: `social-media-link-${socialMediaKey}`, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : socialMediaName }, SocialIcon && React__default.createElement(SocialIcon, null)));
         })));
 };
-const isNewApplicationLinks = (links) => 'appStore' in links && typeof links.appStore === 'object';
 const ApplicationLinks = ({ applicationLinks, language, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (isNewApplicationLinks(applicationLinks)) {
-        const { appStore, googlePlay, title } = applicationLinks;
-        return (React__default.createElement(AppSection, null,
-            React__default.createElement("p", null, title[language]),
-            React__default.createElement(AppList, null,
-                ((_a = appStore.urls) === null || _a === void 0 ? void 0 : _a[language]) && (React__default.createElement("a", { "aria-label": (_b = appStore.ariaLabels) === null || _b === void 0 ? void 0 : _b[language], href: appStore.urls[language], target: "_blank", rel: "noopener noreferrer" },
-                    React__default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/App_Store_Badge.png", alt: (_c = appStore.alts) === null || _c === void 0 ? void 0 : _c[language] }))),
-                ((_d = googlePlay.urls) === null || _d === void 0 ? void 0 : _d[language]) && (React__default.createElement("a", { "aria-label": (_e = googlePlay.ariaLabels) === null || _e === void 0 ? void 0 : _e[language], href: googlePlay.urls[language], target: "_blank", rel: "noopener noreferrer" },
-                    React__default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/Google_Play_Badge.png", alt: (_f = googlePlay.alts) === null || _f === void 0 ? void 0 : _f[language] }))))));
-    }
+    var _a, _b, _c, _d, _e, _f;
+    const { appStore, googlePlay, title } = applicationLinks;
     return (React__default.createElement(AppSection, null,
-        React__default.createElement("p", null, applicationLinks.title[language]),
+        React__default.createElement("p", null, title[language]),
         React__default.createElement(AppList, null,
-            ((_g = applicationLinks.appStoreURL) === null || _g === void 0 ? void 0 : _g[language]) && (React__default.createElement("a", { "aria-label": language === 'fi'
-                    ? 'Lataa sovellus App Storesta'
-                    : 'Download from App Store', href: applicationLinks.appStoreURL[language], target: "_blank", rel: "noopener noreferrer" },
-                React__default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/App_Store_Badge.png", alt: "" }))),
-            ((_h = applicationLinks.googlePlayURL) === null || _h === void 0 ? void 0 : _h[language]) && (React__default.createElement("a", { "aria-label": language === 'fi'
-                    ? 'Lataa sovellus Google Playstä'
-                    : 'Download from Google Play', href: applicationLinks.googlePlayURL[language], target: "_blank", rel: "noopener noreferrer" },
-                React__default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/Google_Play_Badge.png", alt: "" }))))));
+            ((_a = appStore.urls) === null || _a === void 0 ? void 0 : _a[language]) && (React__default.createElement("a", { "aria-label": (_b = appStore.ariaLabels) === null || _b === void 0 ? void 0 : _b[language], href: appStore.urls[language], target: "_blank", rel: "noopener noreferrer" },
+                React__default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/App_Store_Badge.png", alt: (_c = appStore.alts) === null || _c === void 0 ? void 0 : _c[language] }))),
+            ((_d = googlePlay.urls) === null || _d === void 0 ? void 0 : _d[language]) && (React__default.createElement("a", { "aria-label": (_e = googlePlay.ariaLabels) === null || _e === void 0 ? void 0 : _e[language], href: googlePlay.urls[language], target: "_blank", rel: "noopener noreferrer" },
+                React__default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/Google_Play_Badge.png", alt: (_f = googlePlay.alts) === null || _f === void 0 ? void 0 : _f[language] }))))));
 };
 const BottomSection = ({ items }) => {
     const { applicationLinks, businessSelector, customLinks, generalInformation, languageSelector, socialMedia, } = items.footerNavigation;

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

@@ -21,7 +21,8 @@ const FooterContainer = styled.footer `
         &:focus-visible {
             text-decoration: none;
             outline: 1px solid transparent;
-            box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+            box-shadow:
+                0px 0px 0px 2px ${theme.color.focus.light},
                 0px 0px 0px 4px ${theme.color.focus.dark};
             &:not(.menu-link):not(${LangLink}) {
                 ${theme.radius.s};

package/build/es/components/Input/Input.d.ts

@@ -102,6 +102,12 @@ interface Props {
      * @default false
      */
     readonly?: boolean;
+    /**
+     * Allows to set input as readonly without any styles applied
+     *
+     * @default false
+     */
+    readonlyUnstyled?: boolean;
     /**
      * Allows to set input as mandatory
      *
@@ -148,6 +154,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Input: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Input: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 /** @component */
 export default Input;

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

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import { EyeOpen, EyeClosed, Lock, Close, Check, Error } from '@dnanpm/icons';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useState } from 'react';
 import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, getDividedSize } from '../../utils/styledUtils.js';
@@ -121,16 +121,10 @@ const ErrorMessage = styled(Message) `
     font-weight: ${theme.fontWeight.medium};
     color: ${theme.color.notification.error};
 `;
-const Input = (_a) => {
+const Input = forwardRef((_a, ref) => {
     var _b;
     var { type = 'text', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    const inputRef = useRef(null);
     const [showPassword, setShowPassword] = useState(false);
-    useEffect(() => {
-        if (props.showPasswordToggle && inputRef && inputRef.current) {
-            inputRef.current.type = showPassword ? 'text' : 'password';
-        }
-    }, [showPassword, props.showPasswordToggle]);
     const togglePasswordVisibility = () => {
         if (props.showPasswordToggle && !props.disabled) {
             setShowPassword(!showPassword);
@@ -148,9 +142,7 @@ const Input = (_a) => {
     };
     const onClick = (e) => {
         e.preventDefault();
-        if (inputRef && inputRef.current) {
-            inputRef.current.focus();
-        }
+        e.currentTarget.focus();
     };
     const getDescribedBy = () => {
         if (props.status === 'error' && props.errorMessage) {
@@ -161,24 +153,32 @@ const Input = (_a) => {
         }
         return undefined;
     };
-    return (React__default.createElement(FieldContainer, { className: props.className },
+    const getInputType = () => {
+        if (props.showPasswordToggle) {
+            return showPassword ? 'text' : 'password';
+        }
+        return type;
+    };
+    const inputType = getInputType();
+    return (React__default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId && `${dataTestId}-container` },
         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, "$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 }),
+        React__default.createElement(FieldWrapper, { "$status": props.status, "$type": inputType, "$disabled": props.disabled, "$readonly": props.readonly && !props.readonlyUnstyled },
+            React__default.createElement(StyledInput, { id: props.id, name: props.name, type: inputType, 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 || props.readonlyUnstyled || undefined, "aria-label": !props.label ? ((_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id) : undefined, ref: ref, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly || props.readonlyUnstyled }),
             ((props.status && props.status !== 'comment') ||
                 props.showPasswordToggle ||
                 props.disabled ||
                 props.readonly ||
+                props.readonlyUnstyled ||
                 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, { "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.disabled || (props.readonly && !props.readonlyUnstyled)) && (React__default.createElement(Icon, { "aria-hidden": true, icon: Lock, className: props.className && `${props.className}-lock-icon` })),
                 props.onClearableButtonClick &&
                     Boolean(props.value) &&
                     !props.disabled &&
-                    !props.readonly && (React__default.createElement(ButtonIcon, { icon: Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel }))))),
+                    (!props.readonly || props.readonlyUnstyled) && (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))));
-};
+});
 
 export { Input as default };

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

@@ -32,7 +32,8 @@ const BusinessMenuLink = styled.a `
     }
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
     }
 `;

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

@@ -65,8 +65,8 @@ const CategoryCollectionBlock = styled(CategoryBlock) `
 `;
 const SubMenuItem = styled.li `
     > a {
-        color: ${p => (p.isHighlighted ? theme.color.text.pink : theme.color.text.black)};
-        font-weight: ${p => (p.isHighlighted ? theme.fontWeight.bold : theme.fontWeight.book)};
+        color: ${p => (p.$isHighlighted ? theme.color.text.pink : theme.color.text.black)};
+        font-weight: ${p => (p.$isHighlighted ? theme.fontWeight.bold : theme.fontWeight.book)};
     }
 `;
 const DesktopMenuItem = styled(MenuItem) `
@@ -89,7 +89,7 @@ const DesktopMenuItem = styled(MenuItem) `
                 bottom: -22px;
                 left: 0;
                 border-bottom: 2px solid
-                    ${p => (p.isActive ? theme.color.default.pink : 'transparent')};
+                    ${p => (p.$isActive ? theme.color.default.pink : 'transparent')};
             }
         }
     }
@@ -100,9 +100,9 @@ const SubMenuList = styled.div `
     top: ${navMaxHeight};
     left: 0;
     right: 0;
-    display: ${({ menuStates, navItemId }) => (menuStates === null || menuStates === void 0 ? void 0 : menuStates.level1) === navItemId ? 'block' : 'none'};
-    z-index: ${({ navZIndex }) => navZIndex + 1};
-    ${({ menuStates }) => menuStates.level1 && menuStates.animate2 && !menuStates.level2
+    display: ${({ $menuStates, $navItemId }) => ($menuStates === null || $menuStates === void 0 ? void 0 : $menuStates.level1) === $navItemId ? 'block' : 'none'};
+    z-index: ${({ $navZIndex }) => $navZIndex + 1};
+    ${({ $menuStates }) => $menuStates.level1 && $menuStates.animate2 && !$menuStates.level2
     ? fadeInAnimation
     : noAnimation};
     background-color: ${theme.color.background.white.default};
@@ -115,16 +115,16 @@ const SubMenuList = styled.div `
     }
 `;
 const SubMenuLevel1 = ({ menuItem }) => {
-    const { categoryCollectionText, collapseSize, currentUrl, lang, menuLevel, navZIndex } = useContext(NavContext);
+    const { categoryCollectionText, collapseSize, currentUrl, featuredItemsAriaLabel, lang, menuLevel, navZIndex, } = useContext(NavContext);
     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.createElement(SubMenuItem, { key: element.id, isHighlighted: isSelected(currUrl, element.urls[lang], true), "data-testid": `desktop-nav-item-level-2-${index + 1}` },
+    const renderSubMenuItem = (element, index, currUrl) => (React__default.createElement(SubMenuItem, { key: element.id, "$isHighlighted": isSelected(currUrl, element.urls[lang], true), "data-testid": `desktop-nav-item-level-2-${index + 1}` },
         React__default.createElement(LinkModifier, { menuItem: element, disabledTabIndex: false })));
     if (!level1HasElements) {
         return null;
     }
-    return (React__default.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, navZIndex: navZIndex },
+    return (React__default.createElement(SubMenuList, { "aria-hidden": false, "$menuStates": menuLevel, "$navItemId": menuItem.id, "$navZIndex": navZIndex },
         React__default.createElement(MegaMenuContent, { "aria-labelledby": `menu-id-${menuItem.id}` },
             pagesWithSubItems.slice(0, 5).map(element => (React__default.createElement(CategoryBlock, { key: element.id },
                 React__default.createElement(CategoryTitle, { id: `menu-id-${element.id}` }, element.titles[lang]),
@@ -134,7 +134,7 @@ const SubMenuLevel1 = ({ menuItem }) => {
                 React__default.createElement("ul", { "aria-labelledby": "misc-categories", "data-testid": "desktop-nav-menu-ul-level-2" }, pagesWithSubItems
                     .slice(5)
                     .map((element, index) => renderSubMenuItem(element, index, currentUrl))))),
-            React__default.createElement(FeaturedBlock, { collapseSize: collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.map(element => element.pages.length ? null : (React__default.createElement(LinkModifier, { key: element.id, showIcon: true, menuItem: element, disabledTabIndex: false })))))));
+            React__default.createElement(FeaturedBlock, { "$collapseSize": collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.some(element => !element.pages.length) && (React__default.createElement("section", { "aria-label": featuredItemsAriaLabel }, menuItem.pages.map(element => element.pages.length ? null : (React__default.createElement(LinkModifier, { key: element.id, showIcon: true, menuItem: element, disabledTabIndex: false })))))))));
 };
 const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
     const { lang, handleNavMenuClick, currentUrl, menuLevel } = useContext(NavContext);
@@ -143,8 +143,8 @@ const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
         e.preventDefault();
         handleNavMenuClick(element.id, 'level1');
     };
-    return (React__default.createElement(DesktopMenuItem, { isActive: isSelected(currentUrl, linkUrl), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}` },
-        React__default.createElement(MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), "data-testid": "menu-button-with-children", "aria-current": isSelected(currentUrl, linkUrl) ? 'true' : undefined, "aria-expanded": menuLevel.level1 === menuItem.id, href: linkUrl },
+    return (React__default.createElement(DesktopMenuItem, { "$isActive": isSelected(currentUrl, linkUrl), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}` },
+        React__default.createElement(MenuLinkWithChildren, { "$isOpen": menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), "data-testid": "menu-button-with-children", "aria-current": isSelected(currentUrl, linkUrl) ? 'true' : undefined, "aria-expanded": menuLevel.level1 === menuItem.id, href: linkUrl },
             React__default.createElement("span", { id: `menu-id-${menuItem.id}` }, menuItem.titles[lang]),
             React__default.createElement(ChevronRight, { size: "1rem" })),
         React__default.createElement(SubMenuLevel1, { menuItem: menuItem })));
@@ -167,7 +167,7 @@ const DesktopMenu = () => {
         if (displaySubMenu) {
             return (React__default.createElement(MenuItemWithChildren, { currentLevel: index, key: navElement.id, menuItem: navElement }));
         }
-        return (React__default.createElement(DesktopMenuItem, { "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: isSelected(currentUrl, navElement.urls[lang]), key: navElement.id },
+        return (React__default.createElement(DesktopMenuItem, { "data-testid": `desktop-nav-item-level-1-${index + 1}`, "$isActive": isSelected(currentUrl, navElement.urls[lang]), key: navElement.id },
             React__default.createElement(LinkModifier, { menuItem: navElement, disabledTabIndex: false })));
     })));
 };

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts

@@ -24,8 +24,8 @@ interface MainNavTooltipMenuProps<ContentProps extends object = object> extends
     fullWidthBreakpoint?: number;
 }
 export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    isActive?: boolean;
-    collapseSize: number;
+    $isActive?: boolean;
+    $collapseSize: number;
 }>> & string;
 declare const MainNavTooltipMenu: <ContentProps extends object = object>({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, ...props }: MainNavTooltipMenuProps<ContentProps>) => React.JSX.Element;
 export default MainNavTooltipMenu;

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

@@ -27,10 +27,10 @@ const IconContainer = styled.div `
     }
     > svg,
     + span {
-        color: ${p => (p.isActive ? theme.color.text.pink : 'inherit')};
+        color: ${p => (p.$isActive ? theme.color.text.pink : 'inherit')};
     }
 
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${p => p.$collapseSize + 1}px) {
         min-width: ${getMultipliedSize(theme.base.baseWidth, 6)};
         + span {
             display: block;
@@ -45,13 +45,13 @@ const Tooltip = styled.div `
     position: absolute;
     right: 0;
     top: ${navMaxHeight};
-    z-index: ${p => p.zIndex};
+    z-index: ${p => p.$zIndex};
     display: flex;
     flex-direction: row;
 
-    @media (min-width: ${p => p.fullWidthBreakpoint}px) {
-        width: ${p => p.contentWidth};
-        right: ${p => (p.fullWidthDesktop ? 0 : p.tooltipRight)};
+    @media (min-width: ${p => p.$fullWidthBreakpoint}px) {
+        width: ${p => p.$contentWidth};
+        right: ${p => (p.$fullWidthDesktop ? 0 : p.$tooltipRight)};
     }
 `;
 const TooltipBox = styled(Box) `
@@ -62,7 +62,7 @@ const TooltipBox = styled(Box) `
 `;
 const Caret = styled.div `
     position: absolute;
-    z-index: ${p => p.zIndex + 1};
+    z-index: ${p => p.$zIndex + 1};
     top: ${navMaxHeight};
     transform: translate3d(50%, -50%, 0) rotate(-45deg);
     width: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
@@ -72,7 +72,7 @@ const Caret = styled.div `
     border-width: 1px 1px 0 0;
     margin-left: -${getMultipliedSize(theme.base.baseWidth, 1)};
 
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${p => p.$collapseSize + 1}px) {
         max-height: calc(var(--vh100, 100vh) - ${navMaxHeight});
     }
 `;
@@ -102,11 +102,11 @@ const MainNavTooltipMenu = (_a) => {
             setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
         }
     });
-    return (React__default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, collapseSize: collapseSize, ref: ref },
-        globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, "aria-expanded": tooltipItems[globalStateKey], isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
+    return (React__default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, "$collapseSize": collapseSize, ref: ref },
+        globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, "aria-expanded": tooltipItems[globalStateKey], "$isLoggedIn": isLoginItemAndLoggedIn, "$collapseSize": collapseSize, "$isHighlighted": tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
         tooltipItems[globalStateKey] && ContentComponent && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
-            React__default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
+            React__default.createElement(Caret, { "$zIndex": zIndex, "$collapseSize": collapseSize }),
+            React__default.createElement(Tooltip, { "$zIndex": zIndex, "$tooltipRight": tooltipRight, "$contentWidth": contentWidth, "$collapseSize": collapseSize, "$fullWidthDesktop": fullWidthDesktop, "$fullWidthBreakpoint": fullWidthBreakpoint },
                 React__default.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
                     React__default.createElement(ContentComponent, { mobileView: isMobileMenu })))))));
 };

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts

@@ -1,7 +1,7 @@
 declare const TooltipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    collapseSize: number;
-    isHighlighted?: boolean;
-    isLoggedIn?: boolean;
+    $collapseSize: number;
+    $isHighlighted?: boolean;
+    $isLoggedIn?: boolean;
 }>> & string;
 export default TooltipWrapper;
 export { TooltipWrapper };