@dnanpm/styleguide 3.9.7 → 3.9.9

package/build/cjs/components/Button/Button.d.ts

@@ -78,10 +78,22 @@ export interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass a screen reader label for the button
+     */
+    'aria-label'?: string;
     /**
      * Allows to pass any data-* attribute
      */
     dataAttributes?: Record<`data-${string}`, string>;
+    /**
+     * Allows to pass a screen reader label for the loading indicator
+     */
+    loadingLabel?: string;
+    /**
+     * Ref for the button element
+     */
+    ref?: React.Ref<HTMLButtonElement>;
 }
 export declare const shade: {
     pink: {
@@ -100,6 +112,6 @@ export declare const shade: {
     };
 };
 /** @visibleName Button */
-declare const Button: ({ type, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+declare const Button: ({ type, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Button;

package/build/cjs/components/Button/Button.js

@@ -52,7 +52,7 @@ const Element = styled__default.default.button `
         display: inline-flex;
     }
 
-    &:focus {
+    &:focus-visible {
         color: ${({ darkBg }) => (darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
         background-color: ${({ darkBg }) => darkBg ? theme.default.color.default.white : shade.plum.darker};
         border: 2px solid
@@ -66,7 +66,7 @@ const Element = styled__default.default.button `
         color: ${({ darkBg }) => (darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
         background-color: ${({ darkBg }) => darkBg ? theme.default.color.default.white : shade.plum.darker};
 
-        &:focus {
+        &:focus-visible {
             border: 2px solid
                 ${({ darkBg }) => (darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light)};
             box-shadow: 0px 0px 0px 2px
@@ -122,11 +122,11 @@ const Element = styled__default.default.button `
 `;
 /** @visibleName Button */
 const Button = (_a) => {
-    var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value']);
-    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.dataAttributes, (!props.href && {
+    var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value', 'aria-label']);
+    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
         name: props.name,
         disabled: props.disabled,
-    })), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.plum })) : (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
+    })), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.plum, label: props.loadingLabel })) : (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
 };
 
 exports.default = Button;

package/build/cjs/components/ButtonArrow/ButtonArrow.d.ts

@@ -24,7 +24,7 @@ type Props = ({
      */
     icon: ReactNode;
     direction?: never;
-}) & Omit<ButtonProps, 'children' | 'small' | 'fullWidth' | 'loading' | 'data-no-close'> & {
+}) & Omit<ButtonProps, 'children' | 'small' | 'fullWidth' | 'loading' | 'data-no-close' | 'href' | 'loadingLabel'> & {
     /**
      * Allows to change the styling of component
      *
@@ -34,8 +34,14 @@ type Props = ({
      * @default 'primary'
      */
     variant?: ButtonArrowVariant;
+    /**
+     * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
+     *
+     * @deprecated Use `Button` component for href support
+     */
+    href?: string;
 };
 /** @visibleName Button Arrow */
-declare const ButtonArrow: ({ variant, "data-testid": dataTestId, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+declare const ButtonArrow: ({ variant, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-label": ariaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default ButtonArrow;

package/build/cjs/components/ButtonArrow/ButtonArrow.js

@@ -71,9 +71,9 @@ const buttonsMap = {
 };
 /** @visibleName Button Arrow */
 const ButtonArrow = (_a) => {
-    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value']);
+    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value', 'aria-label']);
     const Element = buttonsMap[variant];
-    return (React__default.default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes }, props.direction ? (React__default.default.createElement(Icon.default, { icon: iconsMap[props.direction], size: "1rem" })) : (React.isValidElement(props.icon) && props.icon.type === Icon.default && props.icon)));
+    return (React__default.default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes, "aria-label": ariaLabel }, props.direction ? (React__default.default.createElement(Icon.default, { icon: iconsMap[props.direction], size: "1rem", "aria-hidden": true })) : (React.isValidElement(props.icon) && props.icon.type === Icon.default && props.icon)));
 };
 
 exports.default = ButtonArrow;

package/build/cjs/components/ButtonIcon/ButtonIcon.d.ts

@@ -26,8 +26,18 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
      * @default undefined
      */
     ariaExpanded?: boolean;
+    /**
+     * Allows to pass aria hidden to the icon element for screen readers
+     *
+     * @default undefined
+     */
+    ariaHidden?: boolean;
+    /**
+     * Screen reader label describing the purpose of the ButtonIcon,
+     */
+    ariaLabel?: string;
 }
 /** @visibleName Button Icon */
-declare const ButtonIcon: ({ icon, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+declare const ButtonIcon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** @component */
 export default ButtonIcon;

package/build/cjs/components/ButtonIcon/ButtonIcon.js

@@ -89,12 +89,12 @@ const ButtonElement = styled__default.default.button `
         `}
 `;
 /** @visibleName Button Icon */
-const ButtonIcon = (_a) => {
+const ButtonIcon = React.forwardRef((_a, ref) => {
     var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React__default.default.createElement(ButtonElement, Object.assign({ id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-expanded": props.ariaExpanded }, props.dataAttributes), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black })) : (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(Icon.default, { icon: icon, color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined }),
+    return (React__default.default.createElement(ButtonElement, Object.assign({ ref: ref, id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-expanded": props.ariaExpanded, "aria-label": props.ariaLabel }, props.dataAttributes), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black })) : (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(Icon.default, { icon: icon, color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": props.ariaHidden }),
         props.children && (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
-};
+});
 
 exports.default = ButtonIcon;

package/build/cjs/components/Carousel/Carousel.d.ts

@@ -54,8 +54,196 @@ interface Props {
      * If not provided, visibleItems property will be used
      */
     responsive?: Partial<Responsive>;
+    /**
+     * Allows to pass a screen reader label for the pagination item next to the current slide number
+     */
+    paginationAriaLabel?: string;
+    /**
+     * Allows to pass a screen reader label for the next arrow button
+     */
+    nextAriaLabel?: string;
+    /**
+     * Allows to pass a screen reader label for the previous arrow button
+     */
+    previousAriaLabel?: string;
+    /**
+     * Number of items to move when navigating the carousel
+     *
+     * @default 1
+     */
+    swipeStep?: number;
 }
+declare const SlideItem: import("styled-components").StyledComponent<"div", {
+    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;
+    };
+}, Required<Pick<Props, "visibleItems">> & {
+    itemWidthCorrection: number;
+    isSwiping: boolean;
+}, never>;
 /** @visibleName Carousel */
 declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Carousel;
+export { SlideItem };

package/build/cjs/components/Carousel/Carousel.js

@@ -146,6 +146,7 @@ const Counter = styled.default.span `
 `;
 /** @visibleName Carousel */
 const Carousel = (_a) => {
+    var _b;
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
     const slidesWrapperRef = React.useRef(null);
     const scrollbarRef = React.useRef(null);
@@ -175,9 +176,18 @@ const Carousel = (_a) => {
         }, 100);
         return () => clearTimeout(timeoutId);
     }, [width, isMobile, props.responsive, props.visibleItems, props.children]);
+    const getStep = (step, visibleItems) => {
+        if (step > visibleItems) {
+            return Math.floor(visibleItems);
+        }
+        return Math.floor(step);
+    };
     const visibleItems = props.visibleItems || calculatedItems;
     const slidesWrapperGapSizePx = 20;
     const slideScreensCount = React.Children.count(props.children) - Math.floor(visibleItems) + 1;
+    const step = getStep((_b = props.swipeStep) !== null && _b !== void 0 ? _b : 1, visibleItems);
+    const currentStepIndex = Math.ceil(currentIndex / step);
+    const totalSwipeSteps = Math.ceil(slideScreensCount / step + ((slideScreensCount - 1) % step !== 0 ? 1 : 0));
     const itemWidthCorrectionRatio = (slidesWrapperGapSizePx * visibleItems) % Math.floor(visibleItems) === 0
         ? (visibleItems - 1) / visibleItems
         : Math.floor(visibleItems) / visibleItems;
@@ -224,14 +234,15 @@ const Carousel = (_a) => {
         }
     };
     const handleNavigationButtonPreviousClick = () => {
-        handleSetCurrentIndex(currentIndex - 1);
+        handleSetCurrentIndex(currentIndex - step);
     };
     const handleNavigationButtonNextClick = () => {
-        handleSetCurrentIndex(currentIndex + 1);
+        handleSetCurrentIndex(currentIndex + step);
     };
     const handlePaginationItemClick = (e) => {
         if (e.currentTarget.parentElement) {
-            handleSetCurrentIndex([...e.currentTarget.parentElement.children].indexOf(e.currentTarget));
+            const index = [...e.currentTarget.parentElement.children].indexOf(e.currentTarget);
+            handleSetCurrentIndex(index * step);
         }
     };
     const handlePointerMove = (e) => {
@@ -272,14 +283,14 @@ const Carousel = (_a) => {
         if (endTime - data.startTime > 300) {
             const swipeRatio = Math.abs(data.currentTransform - data.startTransform) / data.itemWidth;
             if (swipeRatio >= 0.5) {
-                handleSetCurrentIndex(currentIndex + Math.round(data.direction > 0 ? swipeRatio : -swipeRatio));
+                handleSetCurrentIndex(currentIndex + Math.round(data.direction > 0 ? swipeRatio : -swipeRatio) * step);
             }
             else {
                 handleSetCurrentIndex(currentIndex);
             }
         }
         else {
-            handleSetCurrentIndex(currentIndex + data.direction);
+            handleSetCurrentIndex(currentIndex + data.direction * step);
         }
         if (data.scrollbarNavigation && data.direction === 0) {
             if (knobRef.current) {
@@ -341,19 +352,21 @@ const Carousel = (_a) => {
             props.title && React__default.default.createElement(Title, null, props.title),
             React__default.default.createElement(Navigation, null,
                 props.hasCounter && (React__default.default.createElement(Counter, null,
-                    slideScreensCount === 0 ? 0 : currentIndex + 1,
+                    slideScreensCount === 0 ? 0 : currentStepIndex + 1,
                     "/",
-                    slideScreensCount)),
-                React__default.default.createElement(ButtonArrow.default, { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
-                React__default.default.createElement(ButtonArrow.default, { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children) }))),
+                    totalSwipeSteps)),
+                React__default.default.createElement(ButtonArrow.default, { direction: "left", "aria-label": props.previousAriaLabel, onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0, type: "button" }),
+                React__default.default.createElement(ButtonArrow.default, { direction: "right", "aria-label": props.nextAriaLabel, onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children), type: "button" }))),
         React__default.default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },
             React__default.default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, React.Children.map(props.children, child => (React__default.default.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection, isSwiping: isSwiping, onPointerDown: handlePointerDown }, child))))),
         React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
-            React__default.default.createElement(Pagination, null, [...Array(slideScreensCount).keys()].map((value, index) => (React__default.default.createElement(PaginationItem, { key: value, "aria-label": `Move to step ${index + 1}`, "aria-current": index === currentIndex, isActive: index === currentIndex, onClick: handlePaginationItemClick })))),
+            React__default.default.createElement(Pagination, null, [...Array(totalSwipeSteps).keys()].map((value, index) => (React__default.default.createElement(PaginationItem, { key: value, "aria-label": props.paginationAriaLabel &&
+                    `${props.paginationAriaLabel} ${index + 1}`, "aria-current": Math.ceil(currentIndex / step) === index, isActive: Math.ceil(currentIndex / step) === index, onClick: handlePaginationItemClick, type: "button" })))),
             React__default.default.createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },
                 React__default.default.createElement(Knob, { ref: knobRef, knobSize: slideScreensCount })),
             props.footerButton && (React__default.default.createElement(FooterButton, null,
                 React__default.default.createElement(ButtonIcon.default, { icon: icons.ArrowRight, onClick: props.onFooterButtonClick }, props.footerButton))))));
 };
 
+exports.SlideItem = SlideItem;
 exports.default = Carousel;

package/build/cjs/components/Checkbox/Checkbox.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var globalStyles = require('../../themes/globalStyles.js');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
@@ -26,17 +25,78 @@ const Container = styled.default.div `
     line-height: ${theme.default.lineHeight.default};
     margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
 `;
-const Input = styled.default(globalStyles.CheckboxAndRadioInputCore) `
+const Input = styled.default.input `
+    display: inline-grid;
+    appearance: none;
+    place-content: center;
+    float: left;
+    margin: 0;
+    cursor: pointer;
+    font-family: ${theme.default.fontFamily.default};
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    min-width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+    height: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+    color: ${theme.default.color.line.L01};
+    border: 2px solid ${theme.default.color.line.L01};
+    background-color: ${theme.default.color.background.white.default};
     position: relative;
     top: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 5)};
+    border-radius: ${theme.default.radius.s};
+
+    & + label {
+        cursor: pointer;
+        color: ${theme.default.color.text.black};
+        font-weight: ${theme.default.fontWeight.medium};
+        padding-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
+    }
+
+    &::before {
+        content: '';
+        transform: scale(0);
+        background-color: currentColor;
+    }
 
     &:checked {
+        color: ${theme.default.color.default.pink};
+        border-color: ${theme.default.color.default.pink};
+
         &::before {
+            transform: scale(1);
             width: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)};
             height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)};
             background-image: url('${SVGIconData}');
         }
     }
+
+    &:disabled {
+        cursor: not-allowed;
+        color: ${theme.default.color.text.gray};
+        background-color: ${theme.default.color.line.L02 + theme.default.color.transparency.T40};
+        border-color: ${theme.default.color.line.L01 + theme.default.color.transparency.T40};
+
+        & + label {
+            cursor: not-allowed;
+            color: ${theme.default.color.text.gray};
+        }
+    }
+
+    &:disabled:checked {
+        color: ${theme.default.color.background.pink.E02};
+        border-color: ${theme.default.color.background.pink.E02};
+        background-color: ${theme.default.color.background.white.default};
+
+        &::before {
+            background-color: ${theme.default.color.background.pink.E02};
+        }
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+            0px 0px 0px 4px ${theme.default.color.focus.dark};
+    }
 `;
 const Mandatory = styled.default.span `
     color: ${theme.default.color.default.pink};
@@ -50,6 +110,7 @@ const ErrorMessage = styled.default.div `
 `;
 const Checkbox = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
+    const errorId = `${props.id}-error`;
     const handleChange = () => {
         if (props.onChange && !props.disabled) {
             props.onChange(!props.value);
@@ -57,11 +118,11 @@ const Checkbox = (_a) => {
     };
     return (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(Container, null,
-            React__default.default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), "aria-checked": Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
+            React__default.default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId, "aria-required": props.required, "aria-invalid": props.error ? 'true' : undefined, "aria-errormessage": props.error && props.errorMessage ? errorId : undefined }),
             React__default.default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
                 props.label,
                 props.required && React__default.default.createElement(Mandatory, null, "*"))),
-        props.error && props.errorMessage && (React__default.default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+        props.error && props.errorMessage && (React__default.default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error`, id: errorId, role: "alert" }, props.errorMessage))));
 };
 
 exports.default = Checkbox;

package/build/cjs/components/Divider/Divider.d.ts

@@ -29,6 +29,10 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * An aria-label to the focusable separator should be included if there is more than one focusable separator
+     */
+    ariaLabelFocusableSeparator?: string;
 }
 declare const Divider: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

package/build/cjs/components/Divider/Divider.js

@@ -26,7 +26,8 @@ const DividerWrapper = styled__default.default.div `
 `;
 const Divider = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default.default.createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+    const isFocusableSeparator = Boolean(props.children);
+    return (React__default.default.createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId, as: isFocusableSeparator ? 'div' : 'hr', role: isFocusableSeparator ? 'separator' : undefined, "aria-orientation": "horizontal", "aria-label": props.ariaLabelFocusableSeparator, "aria-hidden": !isFocusableSeparator, tabIndex: isFocusableSeparator ? 0 : -1 }, props.children));
 };
 
 exports.default = Divider;

package/build/cjs/components/InfoDialog/InfoDialog.d.ts

@@ -37,6 +37,10 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass a screen reader label to the component
+     */
+    ariaLabel?: string;
 }
 /** @visibleName Info Dialog */
 declare const InfoDialog: ({ position, type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

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

@@ -62,7 +62,7 @@ const InfoDialogContainer = styled.default.div `
 /** @visibleName Info Dialog */
 const InfoDialog = (_a) => {
     var { position = 'middle', type = 'default', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["position", "type", 'data-testid']);
-    return (React__default.default.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, position: position, type: type }, props.children));
+    return (React__default.default.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, position: position, type: type, role: "region", "aria-label": props.ariaLabel }, props.children));
 };
 
 exports.default = InfoDialog;

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

@@ -129,6 +129,20 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Screen reader label describing the purpose of the Input
+     *
+     * @default id
+     */
+    ariaLabel?: string;
+    /**
+     * Screen reader label describing the password toggle
+     */
+    passwordToggleLabel?: string;
+    /**
+     * Screen reader label describing the clear button
+     */
+    clearButtonLabel?: string;
     /**
      * Allows to pass testid string for testing purposes
      */