@dnanpm/styleguide 3.9.5 → 3.9.7

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

@@ -1,4 +1,4 @@
-import { User, Headset, Shop, ArrowRight, ChevronDown, Facebook, Instagram, Linkedin, Tiktok, X, Youtube } from '@dnanpm/icons';
+import { User, Headset, Shop, ArrowRight, ChevronDown, Facebook, Instagram, Linkedin, Tiktok, Threads, X, Youtube } from '@dnanpm/icons';
 import React__default, { useContext } from 'react';
 import styled from '../../../themes/styled.js';
 import theme from '../../../themes/theme.js';
@@ -12,6 +12,7 @@ const LinksListEl = styled.li `
     a {
         line-height: ${theme.lineHeight.default};
         color: ${theme.color.default.white};
+        text-decoration: none;
         &:hover,
         &:focus,
         &:active {
@@ -145,6 +146,7 @@ const GeneralInformationContainer = styled.div `
 `;
 const GeneralInformationLink = styled.a `
     &:after {
+        display: inline-block;
         content: '|';
         padding-left: ${getMultipliedSize(theme.base.baseHeight, 1.5)};
     }
@@ -163,6 +165,7 @@ const socialMediaIcons = {
     instagram: Instagram,
     linkedin: Linkedin,
     tiktok: Tiktok,
+    threads: Threads,
     twitter: X,
     youtube: Youtube,
 };
@@ -214,14 +217,15 @@ const GeneralInformation = ({ generalInformation }) => {
 const SocialMediaLinks = ({ socialMedia }) => {
     const { language } = useContext(FooterContext);
     return (React__default.createElement(SocialMediaLinksContainer, { "data-testid": "social-media-section" }, socialMedia &&
-        Object.keys(socialMedia || {}).map(socialMediaKey => {
-            if (socialMediaKey === '__typename') {
-                return null;
-            }
+        Object.keys(socialMedia).map(socialMediaKey => {
+            var _a;
             const socialMediaName = socialMediaKey.charAt(0).toUpperCase() +
                 socialMediaKey.toLowerCase().slice(1);
             const currentObject = socialMedia[socialMediaKey];
-            const currentMediaUrl = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls[language];
+            const currentMediaUrl = (_a = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls) === null || _a === void 0 ? void 0 : _a[language];
+            if (!currentMediaUrl) {
+                return null;
+            }
             return (React__default.createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
                 React__default.createElement(Icon, { icon: socialMediaIcons[socialMediaKey.toLowerCase()] })));
         })));

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

@@ -22,6 +22,7 @@ const TopContainer = styled.div `
             gap: ${getMultipliedSize(theme.base.baseHeight, 0.9)};
             font-weight: ${theme.fontWeight.bold};
             line-height: ${theme.lineHeight.default};
+            text-decoration: none;
 
             &:hover,
             &:focus,
@@ -60,6 +61,7 @@ const LangLinksContainer = styled.div `
 const LangLink = styled.a `
     background: ${({ isActive }) => isActive ? theme.color.background.white.default : 'transparent'};
     color: ${({ isActive }) => (isActive ? theme.color.text.plum : theme.color.text.white)};
+    text-decoration: none;
     &:hover,
     &:active,
     &:focus {
@@ -141,6 +143,7 @@ const FooterContainer = styled.footer `
 
     nav {
         a {
+            text-decoration: none;
             &:not(.active-site) {
                 background: transparent;
             }
@@ -161,6 +164,7 @@ const FooterContainer = styled.footer `
     }
 
     div > a {
+        text-decoration: none;
         &:not(${LangLink}) {
             color: ${theme.color.text.white};
             &:not(.service-button):hover,

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

@@ -52,7 +52,15 @@ export interface Props extends Partial<IconProps> {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass aria label for accessibility purposes
+     */
+    'aria-label'?: string;
+    /**
+     * Allows to pass aria hidden for accessibility purposes
+     */
+    'aria-hidden'?: boolean;
 }
-declare const Icon: ({ name, icon: IconParam, color, size, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Icon: ({ name, icon: IconParam, color, size, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Icon;

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

@@ -27,13 +27,13 @@ const IconContainer = styled.span `
     }
 `;
 const Icon = (_a) => {
-    var { name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId } = _a, props = __rest(_a, ["name", "icon", "color", "size", 'data-testid']);
+    var { name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = _a, props = __rest(_a, ["name", "icon", "color", "size", 'data-testid', 'aria-label', 'aria-hidden']);
     // 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 },
             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 },
+        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/MainHeaderNavigation/ChildComponents/BusinessMenu.js

@@ -11,6 +11,7 @@ const BusinessMenuLink = styled.a `
     font-size: ${theme.fontSize.xs};
     line-height: ${theme.lineHeight.s};
     border-radius: ${theme.radius.pill};
+    text-decoration: none;
     display: block;
     padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
     ${media.md `

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

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import React from 'react';
 import type { MainHeaderNavigationProps } from '../MainHeaderNavigation';
-interface MainNavTooltipMenuProps extends Pick<MainHeaderNavigationProps, 'onCartButtonClick'> {
+interface MainNavTooltipMenuProps<ContentProps extends object = object> extends Pick<MainHeaderNavigationProps, 'onCartButtonClick'> {
     /** Aria-label for screen readers in mobile */
     ariaLabel?: string;
     /** Tooltip menu content */
@@ -11,7 +11,7 @@ interface MainNavTooltipMenuProps extends Pick<MainHeaderNavigationProps, 'onCar
     /** Tooltip position from right. Default: 1.25rem */
     tooltipRight?: string;
     /** Mandatory Component provided as login content */
-    contentComponent?: ReactNode | boolean;
+    contentComponent?: ComponentType<ContentProps> | ReactNode | boolean;
     /** Array of tags (lowercase) that will close menu if they are inside the dropdown tooltip menu. default []. THIS CAN BE OVERRIDEN WITH data-no-close="true" in element */
     closeWhenTagClicked?: string[];
     /** Width of the opened menu content. default 20rem. */
@@ -47,6 +47,9 @@ export declare const IconContainer: import("styled-components").StyledComponent<
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -189,5 +192,5 @@ export declare const IconContainer: import("styled-components").StyledComponent<
     isActive?: boolean;
     collapseSize: number;
 }, never>;
-declare const MainNavTooltipMenu: ({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, ...props }: MainNavTooltipMenuProps) => React.JSX.Element;
+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/MainNavTooltipMenuExportedStyles.d.ts

@@ -22,6 +22,9 @@ declare const TooltipWrapper: import("styled-components").StyledComponent<"butto
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

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

@@ -1,4 +1,4 @@
-import type { MouseEvent, ReactNode } from 'react';
+import type { ComponentType, MouseEvent, ReactNode } from 'react';
 import React from 'react';
 import type { GlobalNavItems } from './types/globalNavProps';
 export interface MainHeaderNavigationProps {
@@ -11,7 +11,7 @@ export interface MainHeaderNavigationProps {
     zIndex?: number;
     search?: boolean;
     searchText?: string;
-    searchComponent?: ReactNode | boolean;
+    searchComponent?: ComponentType | ReactNode | boolean;
     mainMenuAriaLabel?: string;
     minicart?: boolean;
     minicartText?: string;
@@ -21,7 +21,7 @@ export interface MainHeaderNavigationProps {
      *
      * @deprecated Use `onCartButtonClick` property instead
      */
-    minicartComponent?: ReactNode | boolean;
+    minicartComponent?: ComponentType | ReactNode | boolean;
     showMinicart?: boolean;
     /**
      * On Cart button click callback
@@ -32,10 +32,10 @@ export interface MainHeaderNavigationProps {
     languageSelectorText?: string;
     login?: boolean;
     loginText?: string;
-    loginComponent?: ReactNode | boolean;
+    loginComponent?: ComponentType | ReactNode | boolean;
     isLoggedIn?: boolean;
     collapseSize?: number;
-    nextJSLinkComponent: ReactNode | boolean;
+    nextJSLinkComponent: ComponentType | ReactNode | boolean;
     currentUrl?: string;
     notificationText?: string;
 }

package/build/es/components/MainHeaderNavigation/context/NavContext.d.ts

@@ -1,4 +1,4 @@
-import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { ComponentType, Dispatch, ReactNode, SetStateAction } from 'react';
 import type { GlobalNavItems, MenuLevelItem, MenuStates, MenuTooltipItems, MobileMenuLevel } from '../types/globalNavProps';
 export interface NavContextProps {
     categoryCollectionText: string;
@@ -13,13 +13,13 @@ export interface NavContextProps {
     level1Items: MobileMenuLevel;
     level2Items: MobileMenuLevel;
     lang: string;
-    loginComponent?: ReactNode | boolean | undefined;
+    loginComponent?: ComponentType | ReactNode | boolean;
     menuLevel: MenuStates;
-    minicartComponent?: ReactNode | boolean | undefined;
+    minicartComponent?: ComponentType | ReactNode | boolean;
     navZIndex: number;
-    nextJSLinkComponent: ReactNode | boolean;
+    nextJSLinkComponent: ComponentType | ReactNode | boolean;
     resetMenuEvents: () => void;
-    searchComponent?: ReactNode | boolean | undefined;
+    searchComponent?: ComponentType | ReactNode | boolean;
     setTooltipItems: Dispatch<SetStateAction<MenuTooltipItems>>;
     showLoginTooltip: boolean;
     showMinicart: boolean;

package/build/es/components/MainHeaderNavigation/globalNavStyles.d.ts

@@ -22,6 +22,9 @@ export declare const LogoLink: import("styled-components").StyledComponent<"a",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -185,6 +188,9 @@ export declare const DesktopMenuContainer: import("styled-components").StyledCom
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -350,6 +356,9 @@ export declare const MobileMenuButton: import("styled-components").StyledCompone
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -513,6 +522,9 @@ export declare const HeaderIconContainer: import("styled-components").StyledComp
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -678,6 +690,9 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -844,6 +859,9 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -1009,6 +1027,9 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -1174,6 +1195,9 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -1339,6 +1363,9 @@ export declare const FeaturedBlock: import("styled-components").StyledComponent<
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

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

@@ -7,6 +7,7 @@ import NavContext from '../context/NavContext.js';
 const BusinessMenuLink = styled.a `
     color: ${p => (p.isActive ? theme.color.text.pink : theme.color.text.black)};
     display: block;
+    text-decoration: none;
     margin: ${p => !p.isMobileMenu
     ? `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`
     : `${getMultipliedSize(theme.base.baseWidth, 1.25)} ${getMultipliedSize(theme.base.baseWidth, 2)} `};

package/build/es/components/MainNavigation/ChildComponents/HeaderNavigationElements.d.ts

@@ -24,6 +24,9 @@ export declare const IconContainer: import("styled-components").StyledComponent<
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

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

@@ -22,6 +22,9 @@ declare const TooltipWrapper: import("styled-components").StyledComponent<"butto
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

package/build/es/components/MainNavigation/globalNavStyles.d.ts

@@ -22,6 +22,9 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -187,6 +190,9 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -352,6 +358,9 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -518,6 +527,9 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

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

@@ -14,6 +14,10 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass a label for screen readers
+     */
+    label?: string;
 }
 /** @visibleName Pixel Loader */
 declare const PixelLoader: ({ className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/es/components/PixelLoader/PixelLoader.js

@@ -33,6 +33,7 @@ const Pixel = styled.div `
 const PixelLoader = (_a) => {
     var { className, 'data-testid': dataTestId } = _a, props = __rest(_a, ["className", 'data-testid']);
     return (React__default.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
+        props.label && React__default.createElement("span", { className: "visually-hidden" }, props.label),
         React__default.createElement(Pixel, { color: props.color, delay: "-0.27" }),
         React__default.createElement(Pixel, { color: props.color, delay: "-0.18" }),
         React__default.createElement(Pixel, { color: props.color, delay: "-0.09" }),

package/build/es/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -36,6 +36,7 @@ const Element = styled.li `
     `}
 
     & > a {
+        text-decoration: none;
         &:focus-visible {
             border-radius: ${theme.radius.s};
             border: 2px solid ${theme.color.focus.light};

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

@@ -34,6 +34,14 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Screen reader label describing the purpose of the ProgressIndicator,
+     */
+    ariaLabel?: string;
+    /**
+     * Screen reader label describing the completed step,
+     */
+    completedStepLabel?: string;
 }
 /** @visibleName Progress Indicator */
 declare const ProgressIndicator: ({ activeStep, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/es/components/ProgressIndicator/ProgressIndicator.js

@@ -86,14 +86,19 @@ const ProgressIndicatorItemNumber = styled.div `
     ${({ isActive, isError }) => getBackgroundColor({ isActive, isError })}
 `;
 const ProgressIndicatorItemLabel = styled.div `
-    display: none;
     font-size: ${({ small }) => (small ? theme.fontSize.xs : theme.fontSize.s)};
     line-height: ${({ small }) => (small ? theme.lineHeight.xs : theme.lineHeight.s)};
     font-weight: ${theme.fontWeight.bold};
     color: ${({ isActive }) => (isActive ? theme.color.text.black : theme.color.text.gray)};
 
     ${media.sm `
-        display: initial;
+        &.visually-hidden {
+            width: auto;
+            height: auto;
+            overflow: visible;
+            clip: auto;
+            opacity: 1;
+        }
     `}
 `;
 /** @visibleName Progress Indicator */
@@ -115,10 +120,12 @@ const ProgressIndicator = (_a) => {
         };
         return (React__default.createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
             index > 0 && (React__default.createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
-            React__default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default.createElement(Icon, { icon: isError ? Warning : Check, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem" })) : (stepNumber)),
-            label && (React__default.createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive }, label))));
+            React__default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default.createElement(React__default.Fragment, null,
+                isCompleted && props.completedStepLabel && (React__default.createElement("span", { className: "visually-hidden" }, props.completedStepLabel)),
+                React__default.createElement(Icon, { icon: isError ? Warning : Check, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem" }))) : (stepNumber)),
+            label && (React__default.createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive, className: "visually-hidden" }, label))));
     });
-    return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId }, progressIndicatorItems));
+    return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "list" }, progressIndicatorItems));
 };
 
 export { ProgressIndicator as default };

package/build/es/components/SecondaryNavigation/SecondaryNavigation.js

@@ -88,6 +88,7 @@ const SecondaryNavigationListElement = styled.li `
     margin: 0 ${getMultipliedSize(theme.base.baseWidth, 2)};
 
     a {
+        text-decoration: none;
         padding: 1rem 0;
         justify-content: start;
         color: ${({ isActive }) => (isActive ? theme.color.text.pink : theme.color.text.black)};

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

@@ -1,5 +1,6 @@
+import type { ComponentType } from 'react';
 import React from 'react';
-import type { GroupBase, OptionsOrGroups, Props as ReactSelectProps } from 'react-select';
+import type { GroupBase, OptionProps, OptionsOrGroups, Props as ReactSelectProps } from 'react-select';
 interface SelectboxOption {
     label: string;
     value: string;
@@ -114,6 +115,22 @@ interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extend
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Screen reader label describing the purpose of the SelectBox,
+     */
+    ariaLabel?: string;
+    /**
+     * Allows to pass a screen reader label for the loading indicator
+     */
+    loadingLabel?: string;
+    /**
+     * Allows to pass custom styles
+     */
+    styles?: ReactSelectProps<Option, IsMulti, Group>['styles'];
+    /**
+     * Allows to pass custom option component
+     */
+    optionComponent?: ComponentType<OptionProps<Option, IsMulti, Group>>;
 }
 declare const SelectBox: <Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ noOptionsText, "data-testid": dataTestId, ...props }: Props<Option, IsMulti, Group>) => React.JSX.Element;
 export default SelectBox;

package/build/es/components/Selectbox/Selectbox.js

@@ -41,7 +41,7 @@ const getStyles = () => ({
             color: theme.color.text.black,
             backgroundColor: theme.color.background.sand.E02,
         } })),
-    placeholder: styles => (Object.assign(Object.assign({}, styles), { color: theme.color.text.black + theme.color.transparency.T40 })),
+    placeholder: styles => (Object.assign(Object.assign({}, styles), { color: theme.color.text.black + theme.color.transparency.T50 })),
     indicatorSeparator: styles => (Object.assign(Object.assign({}, styles), { width: 0, backgroundColor: 'transparent', border: 'none' })),
     clearIndicator: styles => (Object.assign(Object.assign({}, styles), { cursor: 'pointer', color: theme.color.text.black, padding: 0, marginLeft: getMultipliedSize(theme.base.baseHeight, 1), ':hover': {
             color: theme.color.text.black,
@@ -76,8 +76,15 @@ const IndicatorsContainer = (_a) => {
 };
 const ClearIndicator = (_a) => {
     var clearIndicatorProps = __rest(_a, []);
-    return components.ClearIndicator && (React__default.createElement(components.ClearIndicator, { clearValue: clearIndicatorProps.clearValue, cx: clearIndicatorProps.cx, getClassNames: clearIndicatorProps.getClassNames, getStyles: clearIndicatorProps.getStyles, getValue: clearIndicatorProps.getValue, hasValue: clearIndicatorProps.hasValue, innerProps: clearIndicatorProps.innerProps, isFocused: clearIndicatorProps.isFocused, isMulti: clearIndicatorProps.isMulti, isRtl: clearIndicatorProps.isRtl, options: clearIndicatorProps.options, selectOption: clearIndicatorProps.selectOption, selectProps: clearIndicatorProps.selectProps, setValue: clearIndicatorProps.setValue, theme: clearIndicatorProps.theme },
-        React__default.createElement(Icon, { icon: Close })));
+    const onHandleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.stopPropagation();
+            clearIndicatorProps.clearValue();
+        }
+    };
+    return (components.ClearIndicator && (React__default.createElement(components.ClearIndicator, { clearValue: clearIndicatorProps.clearValue, cx: clearIndicatorProps.cx, getClassNames: clearIndicatorProps.getClassNames, getStyles: clearIndicatorProps.getStyles, getValue: clearIndicatorProps.getValue, hasValue: clearIndicatorProps.hasValue, innerProps: Object.assign(Object.assign({}, clearIndicatorProps.innerProps), { tabIndex: 0, role: 'button', onKeyDown: e => onHandleKeyDown(e) }), isFocused: clearIndicatorProps.isFocused, isMulti: clearIndicatorProps.isMulti, isRtl: clearIndicatorProps.isRtl, options: clearIndicatorProps.options, selectOption: clearIndicatorProps.selectOption, selectProps: clearIndicatorProps.selectProps, setValue: clearIndicatorProps.setValue, theme: clearIndicatorProps.theme },
+        React__default.createElement(Icon, { icon: Close }))));
 };
 const DropdownIndicator = (_a) => {
     var { selectProps } = _a, dropdownIndicatorProps = __rest(_a, ["selectProps"]);
@@ -93,15 +100,15 @@ const DropdownIndicator = (_a) => {
 const SelectBox = (_a) => {
     var { noOptionsText = '', 'data-testid': dataTestId } = _a, props = __rest(_a, ["noOptionsText", 'data-testid']);
     const getNoOptionsText = () => noOptionsText;
-    return !props.isLoading ? (React__default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId },
+    const errorId = props.inputId ? `${props.inputId}-error` : undefined;
+    const allComponents = Object.assign({ MultiValueRemove,
+        IndicatorsContainer,
+        ClearIndicator,
+        DropdownIndicator }, (props.optionComponent ? { Option: props.optionComponent } : {}));
+    return !props.isLoading ? (React__default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel },
         props.label && (React__default.createElement(LabelText, { htmlFor: props.inputId, status: (props.error && 'error') || undefined, isMandatory: props.isRequired }, props.label)),
-        React__default.createElement(Select, { inputId: props.inputId, styles: getStyles(), theme: customTheme, components: {
-                MultiValueRemove,
-                IndicatorsContainer,
-                ClearIndicator,
-                DropdownIndicator,
-            }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: Boolean(props.isSearchable), isClearable: Boolean(props.isClearable), isMulti: props.isMulti, isDisabled: Boolean(props.isDisabled), hideSelectedOptions: false, closeMenuOnSelect: !props.isMulti, errorState: props.error }),
-        props.error && props.errorMessage && React__default.createElement(ErrorMessage, null, props.errorMessage))) : (React__default.createElement(PixelLoader, null));
+        React__default.createElement(Select, { inputId: props.inputId, styles: props.styles || getStyles(), theme: customTheme, components: allComponents, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: Boolean(props.isSearchable), isClearable: Boolean(props.isClearable), isMulti: props.isMulti, isDisabled: Boolean(props.isDisabled), hideSelectedOptions: false, closeMenuOnSelect: !props.isMulti, errorState: props.error, "aria-labelledby": props.error ? errorId : undefined }),
+        props.error && props.errorMessage && (React__default.createElement(ErrorMessage, { id: errorId }, props.errorMessage)))) : (React__default.createElement(PixelLoader, { label: props.loadingLabel }));
 };
 
 export { SelectBox as default };

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

@@ -36,7 +36,12 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Screen reader label describing the purpose of the switch,
+     * e.g., "toggle between accepting or rejecting the terms and conditions"
+     */
+    ariaLabel?: string;
 }
-declare const Switch: ({ onChange, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Switch: ({ onChange, "data-testid": dataTestId, ariaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Switch;

package/build/es/components/Switch/Switch.js

@@ -47,11 +47,18 @@ const Checkbox = styled.input `
     }
     :disabled + label > div {
         cursor: not-allowed;
-        border-color: ${({ checked }) => checked && checked ? theme.color.default.pink : theme.color.line.L01}${theme.color.transparency.T40}};
+        border-color: ${({ checked }) => checked ? theme.color.default.pink : theme.color.line.L01}${theme.color.transparency
+    .T40};
     }
     :disabled + label div div {
         pointer-events: none;
-        background-color: ${({ checked }) => checked && checked ? theme.color.default.pink : theme.color.line.L01}${theme.color.transparency.T40};
+        background-color: ${({ checked }) => checked ? theme.color.default.pink : theme.color.line.L01}${theme.color.transparency
+    .T40};
+    }
+
+    :focus-visible + label > div {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
     }
 `;
 const LabelWrapper = styled(LabelText) `
@@ -76,14 +83,15 @@ const Rail = styled.div `
    `};
 `;
 const Switch = (_a) => {
-    var { onChange, 'data-testid': dataTestId } = _a, props = __rest(_a, ["onChange", 'data-testid']);
+    var { onChange, 'data-testid': dataTestId, ariaLabel } = _a, props = __rest(_a, ["onChange", 'data-testid', "ariaLabel"]);
     const handleChange = () => {
         if (onChange && !props.disabled) {
             onChange(!props.isChecked);
         }
     };
+    const accessibleLabel = props.label ? undefined : ariaLabel || 'Toggle switch';
     return (React.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-checked": Boolean(props.isChecked), disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox" }),
+        React.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-label": accessibleLabel, disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox" }),
         React.createElement(LabelWrapper, { htmlFor: props.id },
             React.createElement(Rail, { isChecked: props.isChecked },
                 React.createElement(Button, { isChecked: props.isChecked })),