@dnanpm/styleguide 3.9.4 → 3.9.6

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, AriaRole } from 'react';
 import React from 'react';
 import type { ElevationLevel } from '../../types/elevation';
 interface Props {
@@ -60,6 +60,15 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Screen reader label describing the purpose or topic of the box content,
+     * e.g., "important information" or "example."
+     */
+    ariaLabel?: string;
+    /**
+     * Allows to pass a role to the component
+     */
+    role?: AriaRole;
 }
 declare const Box: ({ elevation, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

package/build/cjs/components/Box/Box.js

@@ -26,7 +26,7 @@ const BoxWrapper = styled__default.default.div `
 `;
 const Box = (_a) => {
     var { elevation = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["elevation", 'data-testid']);
-    return (React__default.default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React__default.default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId, role: props.role, "aria-label": props.ariaLabel }, props.children));
 };
 
 exports.default = Box;

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

@@ -1,5 +1,11 @@
 import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
+interface Responsive {
+    minItems: number;
+    maxItems: number;
+    minWidth: number;
+    maxWidth: number;
+}
 interface Props {
     /**
      * Unique ID for the component
@@ -43,6 +49,11 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Allows to define responsive configuration
+     * If not provided, visibleItems property will be used
+     */
+    responsive?: Partial<Responsive>;
 }
 /** @visibleName Carousel */
 declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

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

@@ -55,6 +55,10 @@ const SlideItem = styled.default.div `
     flex-basis: calc(
         ${({ visibleItems, itemWidthCorrection }) => `(100% / ${visibleItems}) - ${itemWidthCorrection}px`}
     );
+
+    a {
+        pointer-events: ${({ isSwiping }) => (isSwiping ? 'none' : 'auto')};
+    }
 `;
 const Footer = styled.default.div `
     ${styledUtils.media.md `
@@ -146,9 +150,32 @@ const Carousel = (_a) => {
     const slidesWrapperRef = React.useRef(null);
     const scrollbarRef = React.useRef(null);
     const knobRef = React.useRef(null);
-    const { isMobile } = useWindowSize.default(theme.default.breakpoints.md);
+    const { isMobile, width } = useWindowSize.default(theme.default.breakpoints.md);
     const [currentIndex, setCurrentIndex] = React.useState(0);
-    const visibleItems = props.visibleItems || (isMobile ? 1.2 : 1);
+    const [isSwiping, setIsSwiping] = React.useState(false);
+    const [calculatedItems, setCalculatedItems] = React.useState(props.visibleItems || (isMobile ? 1.2 : 1));
+    React.useEffect(() => {
+        const calculateVisibleItems = () => {
+            const defaultValue = props.visibleItems || (isMobile ? 1.2 : 1);
+            const { minItems, maxItems, minWidth, maxWidth } = props.responsive || {};
+            if (!width || !minItems || !maxItems || !minWidth || !maxWidth) {
+                return defaultValue;
+            }
+            const calculatedMaxItems = React.Children.count(props.children) === 1 ? 1 : maxItems;
+            if (width < minWidth) {
+                return minItems;
+            }
+            if (width > maxWidth) {
+                return calculatedMaxItems;
+            }
+            return minItems + ((width - minWidth) / (maxWidth - minWidth)) * (maxItems - minItems);
+        };
+        const timeoutId = setTimeout(() => {
+            setCalculatedItems(calculateVisibleItems());
+        }, 100);
+        return () => clearTimeout(timeoutId);
+    }, [width, isMobile, props.responsive, props.visibleItems, props.children]);
+    const visibleItems = props.visibleItems || calculatedItems;
     const slidesWrapperGapSizePx = 20;
     const slideScreensCount = React.Children.count(props.children) - Math.floor(visibleItems) + 1;
     const itemWidthCorrectionRatio = (slidesWrapperGapSizePx * visibleItems) % Math.floor(visibleItems) === 0
@@ -238,6 +265,7 @@ const Carousel = (_a) => {
         }
         setElementTransform(slidesWrapperRef, data.currentTransform, 0);
         setElementTransform(knobRef, data.knobCurrentTransform, 0);
+        setIsSwiping(true);
     };
     const handlePointerUp = (e) => {
         const endTime = Date.now();
@@ -264,6 +292,7 @@ const Carousel = (_a) => {
         }
         document.removeEventListener('pointermove', handlePointerMove);
         document.removeEventListener('pointerup', handlePointerUp);
+        setIsSwiping(false);
     };
     const handleSlidesPointerDown = (e) => {
         if (slidesWrapperRef.current && scrollbarRef.current && knobRef.current) {
@@ -279,6 +308,9 @@ const Carousel = (_a) => {
     const handleScrollbarPointerDown = (e) => {
         handleSlidesPointerDown(e);
     };
+    const handlePointerDown = (e) => {
+        e.preventDefault();
+    };
     React.useEffect(() => {
         if (slidesWrapperRef.current && scrollbarRef.current) {
             const isRest = React.Children.count(props.children) - (currentIndex + visibleItems) < 0;
@@ -315,7 +347,7 @@ const Carousel = (_a) => {
                 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) }))),
         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 }, child))))),
+            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(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },

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

@@ -169,6 +169,7 @@ const socialMediaIcons = {
     instagram: icons.Instagram,
     linkedin: icons.Linkedin,
     tiktok: icons.Tiktok,
+    threads: icons.Threads,
     twitter: icons.X,
     youtube: icons.Youtube,
 };
@@ -220,14 +221,15 @@ const GeneralInformation = ({ generalInformation }) => {
 const SocialMediaLinks = ({ socialMedia }) => {
     const { language } = React.useContext(FooterContext.default);
     return (React__default.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.default.createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
                 React__default.default.createElement(Icon.default, { icon: socialMediaIcons[socialMediaKey.toLowerCase()] })));
         })));

package/build/cjs/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/cjs/components/Switch/Switch.js

@@ -71,11 +71,18 @@ const Checkbox = styled.default.input `
     }
     :disabled + label > div {
         cursor: not-allowed;
-        border-color: ${({ checked }) => checked && checked ? theme.default.color.default.pink : theme.default.color.line.L01}${theme.default.color.transparency.T40}};
+        border-color: ${({ checked }) => checked ? theme.default.color.default.pink : theme.default.color.line.L01}${theme.default.color.transparency
+    .T40};
     }
     :disabled + label div div {
         pointer-events: none;
-        background-color: ${({ checked }) => checked && checked ? theme.default.color.default.pink : theme.default.color.line.L01}${theme.default.color.transparency.T40};
+        background-color: ${({ checked }) => checked ? theme.default.color.default.pink : theme.default.color.line.L01}${theme.default.color.transparency
+    .T40};
+    }
+
+    :focus-visible + label > div {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
     }
 `;
 const LabelWrapper = styled.default(LabelText.default) `
@@ -100,14 +107,15 @@ const Rail = styled.default.div `
    `};
 `;
 const Switch = (_a) => {
-    var { onChange, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["onChange", 'data-testid']);
+    var { onChange, 'data-testid': dataTestId, ariaLabel } = _a, props = tslib.__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__namespace.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React__namespace.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__namespace.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__namespace.createElement(LabelWrapper, { htmlFor: props.id },
             React__namespace.createElement(Rail, { isChecked: props.isChecked },
                 React__namespace.createElement(Button, { isChecked: props.isChecked })),

package/build/cjs/components/Tab/Tab.js

@@ -27,6 +27,13 @@ const TabLabel = styled.default.li `
     border-bottom: 0 none;
     padding: 0.625rem 1.25rem;
     cursor: pointer;
+
+    &:focus {
+        border: 1px solid ${theme.default.color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
+        z-index: 1;
+        outline: none;
+    }
 `;
 const TabStyle = styled.default.li `
     display: inline-block;
@@ -85,13 +92,14 @@ const Tab = (_a) => {
             props.onClick(props.label, e);
         }
     };
+    const isActive = props.activeTab ? props.activeTab === props.label : props.isActive;
     return type === 'box' || type === 'default' || type === 'panel' ? (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+        React__default.default.createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": isActive, isActive: isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
         props.isStateless &&
             (props.children && (props.activeTab === props.label || props.isActive) ? (React__default.default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
                     ? Box.default
                     : undefined }, props.children)) : (React__default.default.createElement(Divider.default, { margin: "0" }))))) : (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+        React__default.default.createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": isActive, isActive: isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
         props.isStateless &&
             props.children &&
             (props.activeTab === props.label || props.isActive) && (React__default.default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));

package/build/cjs/components/Tabs/Tabs.js

@@ -100,6 +100,18 @@ const Tabs = (_a) => {
             }
         }
     };
+    const onKeyDown = (e) => {
+        const tabElements = Array.from(e.currentTarget.querySelectorAll('[role="tab"]'));
+        const currentIndex = tabElements.indexOf(document.activeElement);
+        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+            e.preventDefault();
+            const direction = e.key === 'ArrowRight' ? 1 : -1;
+            const nextIndex = (currentIndex + direction + tabElements.length) % tabElements.length;
+            const nextTab = tabElements[nextIndex];
+            nextTab.focus();
+            nextTab.click();
+        }
+    };
     if (!tabs) {
         return null;
     }
@@ -108,7 +120,7 @@ const Tabs = (_a) => {
         setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
     }
     return (React__default.default.createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
-        React__default.default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
+        React__default.default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined, onKeyDown: onKeyDown }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
             tab.type === Tab.default && (React__default.default.createElement(Tab.default, { id: tab.props.id, key: tab.props.label, label: tab.props.label, type: props.tabStyle || type, isActive: tab.props.isActive
                 ? tab.props.isActive
                 : activeTab === tab.props.label, activeTab: tab.props.activeTab, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),

package/build/cjs/themes/globalStyles.js

@@ -220,19 +220,20 @@ const CheckboxAndRadioInputCore = styled.default.input `
 
     &:disabled {
         cursor: not-allowed;
-        color: ${theme.default.color.line.L01}${theme.default.color.transparency.T30};
-        border-color: ${theme.default.color.line.L01}${theme.default.color.transparency.T30};
-        background-color: ${theme.default.color.background.white.default}${theme.default.color.transparency.T30};
+        color: ${theme.default.color.text.gray};
+        background-color: ${theme.default.color.line.L02};
+        border-color: ${theme.default.color.line.L01};
 
         & + label {
             cursor: not-allowed;
-            color: ${theme.default.color.text.black}${theme.default.color.transparency.T30};
+            color: ${theme.default.color.text.gray};
         }
     }
 
     &:disabled:checked {
         color: ${theme.default.color.default.pink}${theme.default.color.transparency.T30};
         border-color: ${theme.default.color.default.pink}${theme.default.color.transparency.T30};
+        background-color: ${theme.default.color.background.white.default};
     }
 `;
 styled.createGlobalStyle `

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, AriaRole } from 'react';
 import React from 'react';
 import type { ElevationLevel } from '../../types/elevation';
 interface Props {
@@ -60,6 +60,15 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Screen reader label describing the purpose or topic of the box content,
+     * e.g., "important information" or "example."
+     */
+    ariaLabel?: string;
+    /**
+     * Allows to pass a role to the component
+     */
+    role?: AriaRole;
 }
 declare const Box: ({ elevation, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

package/build/es/components/Box/Box.js

@@ -17,7 +17,7 @@ const BoxWrapper = styled__default.div `
 `;
 const Box = (_a) => {
     var { elevation = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["elevation", 'data-testid']);
-    return (React__default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React__default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId, role: props.role, "aria-label": props.ariaLabel }, props.children));
 };
 
 export { Box as default };

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

@@ -1,5 +1,11 @@
 import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
+interface Responsive {
+    minItems: number;
+    maxItems: number;
+    minWidth: number;
+    maxWidth: number;
+}
 interface Props {
     /**
      * Unique ID for the component
@@ -43,6 +49,11 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Allows to define responsive configuration
+     * If not provided, visibleItems property will be used
+     */
+    responsive?: Partial<Responsive>;
 }
 /** @visibleName Carousel */
 declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/es/components/Carousel/Carousel.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import { ArrowRight } from '@dnanpm/icons';
-import React__default, { useRef, useState, Children, useMemo, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect, Children, useMemo } from 'react';
 import useWindowSize from '../../hooks/useWindowSize.js';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
@@ -47,6 +47,10 @@ const SlideItem = styled.div `
     flex-basis: calc(
         ${({ visibleItems, itemWidthCorrection }) => `(100% / ${visibleItems}) - ${itemWidthCorrection}px`}
     );
+
+    a {
+        pointer-events: ${({ isSwiping }) => (isSwiping ? 'none' : 'auto')};
+    }
 `;
 const Footer = styled.div `
     ${media.md `
@@ -138,9 +142,32 @@ const Carousel = (_a) => {
     const slidesWrapperRef = useRef(null);
     const scrollbarRef = useRef(null);
     const knobRef = useRef(null);
-    const { isMobile } = useWindowSize(theme.breakpoints.md);
+    const { isMobile, width } = useWindowSize(theme.breakpoints.md);
     const [currentIndex, setCurrentIndex] = useState(0);
-    const visibleItems = props.visibleItems || (isMobile ? 1.2 : 1);
+    const [isSwiping, setIsSwiping] = useState(false);
+    const [calculatedItems, setCalculatedItems] = useState(props.visibleItems || (isMobile ? 1.2 : 1));
+    useEffect(() => {
+        const calculateVisibleItems = () => {
+            const defaultValue = props.visibleItems || (isMobile ? 1.2 : 1);
+            const { minItems, maxItems, minWidth, maxWidth } = props.responsive || {};
+            if (!width || !minItems || !maxItems || !minWidth || !maxWidth) {
+                return defaultValue;
+            }
+            const calculatedMaxItems = Children.count(props.children) === 1 ? 1 : maxItems;
+            if (width < minWidth) {
+                return minItems;
+            }
+            if (width > maxWidth) {
+                return calculatedMaxItems;
+            }
+            return minItems + ((width - minWidth) / (maxWidth - minWidth)) * (maxItems - minItems);
+        };
+        const timeoutId = setTimeout(() => {
+            setCalculatedItems(calculateVisibleItems());
+        }, 100);
+        return () => clearTimeout(timeoutId);
+    }, [width, isMobile, props.responsive, props.visibleItems, props.children]);
+    const visibleItems = props.visibleItems || calculatedItems;
     const slidesWrapperGapSizePx = 20;
     const slideScreensCount = Children.count(props.children) - Math.floor(visibleItems) + 1;
     const itemWidthCorrectionRatio = (slidesWrapperGapSizePx * visibleItems) % Math.floor(visibleItems) === 0
@@ -230,6 +257,7 @@ const Carousel = (_a) => {
         }
         setElementTransform(slidesWrapperRef, data.currentTransform, 0);
         setElementTransform(knobRef, data.knobCurrentTransform, 0);
+        setIsSwiping(true);
     };
     const handlePointerUp = (e) => {
         const endTime = Date.now();
@@ -256,6 +284,7 @@ const Carousel = (_a) => {
         }
         document.removeEventListener('pointermove', handlePointerMove);
         document.removeEventListener('pointerup', handlePointerUp);
+        setIsSwiping(false);
     };
     const handleSlidesPointerDown = (e) => {
         if (slidesWrapperRef.current && scrollbarRef.current && knobRef.current) {
@@ -271,6 +300,9 @@ const Carousel = (_a) => {
     const handleScrollbarPointerDown = (e) => {
         handleSlidesPointerDown(e);
     };
+    const handlePointerDown = (e) => {
+        e.preventDefault();
+    };
     useEffect(() => {
         if (slidesWrapperRef.current && scrollbarRef.current) {
             const isRest = Children.count(props.children) - (currentIndex + visibleItems) < 0;
@@ -307,7 +339,7 @@ const Carousel = (_a) => {
                 React__default.createElement(ButtonArrow, { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
                 React__default.createElement(ButtonArrow, { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= Children.count(props.children) }))),
         React__default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },
-            React__default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, Children.map(props.children, child => (React__default.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection }, child))))),
+            React__default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, Children.map(props.children, child => (React__default.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection, isSwiping: isSwiping, onPointerDown: handlePointerDown }, child))))),
         React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
             React__default.createElement(Pagination, null, [...Array(slideScreensCount).keys()].map((value, index) => (React__default.createElement(PaginationItem, { key: value, "aria-label": `Move to step ${index + 1}`, "aria-current": index === currentIndex, isActive: index === currentIndex, onClick: handlePaginationItemClick })))),
             React__default.createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },

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';
@@ -163,6 +163,7 @@ const socialMediaIcons = {
     instagram: Instagram,
     linkedin: Linkedin,
     tiktok: Tiktok,
+    threads: Threads,
     twitter: X,
     youtube: Youtube,
 };
@@ -214,14 +215,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/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 })),

package/build/es/components/Tab/Tab.js

@@ -19,6 +19,13 @@ const TabLabel = styled.li `
     border-bottom: 0 none;
     padding: 0.625rem 1.25rem;
     cursor: pointer;
+
+    &:focus {
+        border: 1px solid ${theme.color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
+        z-index: 1;
+        outline: none;
+    }
 `;
 const TabStyle = styled.li `
     display: inline-block;
@@ -77,13 +84,14 @@ const Tab = (_a) => {
             props.onClick(props.label, e);
         }
     };
+    const isActive = props.activeTab ? props.activeTab === props.label : props.isActive;
     return type === 'box' || type === 'default' || type === 'panel' ? (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+        React__default.createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": isActive, isActive: isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
         props.isStateless &&
             (props.children && (props.activeTab === props.label || props.isActive) ? (React__default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
                     ? Box
                     : undefined }, props.children)) : (React__default.createElement(Divider, { margin: "0" }))))) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+        React__default.createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": isActive, isActive: isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
         props.isStateless &&
             props.children &&
             (props.activeTab === props.label || props.isActive) && (React__default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));

package/build/es/components/Tabs/Tabs.js

@@ -92,6 +92,18 @@ const Tabs = (_a) => {
             }
         }
     };
+    const onKeyDown = (e) => {
+        const tabElements = Array.from(e.currentTarget.querySelectorAll('[role="tab"]'));
+        const currentIndex = tabElements.indexOf(document.activeElement);
+        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+            e.preventDefault();
+            const direction = e.key === 'ArrowRight' ? 1 : -1;
+            const nextIndex = (currentIndex + direction + tabElements.length) % tabElements.length;
+            const nextTab = tabElements[nextIndex];
+            nextTab.focus();
+            nextTab.click();
+        }
+    };
     if (!tabs) {
         return null;
     }
@@ -100,7 +112,7 @@ const Tabs = (_a) => {
         setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
     }
     return (React__default.createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
-        React__default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined }, Children.map(props.children, tab => isValidElement(tab) &&
+        React__default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined, onKeyDown: onKeyDown }, Children.map(props.children, tab => isValidElement(tab) &&
             tab.type === Tab && (React__default.createElement(Tab, { id: tab.props.id, key: tab.props.label, label: tab.props.label, type: props.tabStyle || type, isActive: tab.props.isActive
                 ? tab.props.isActive
                 : activeTab === tab.props.label, activeTab: tab.props.activeTab, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),

package/build/es/themes/globalStyles.js

@@ -218,19 +218,20 @@ const CheckboxAndRadioInputCore = styled.input `
 
     &:disabled {
         cursor: not-allowed;
-        color: ${theme.color.line.L01}${theme.color.transparency.T30};
-        border-color: ${theme.color.line.L01}${theme.color.transparency.T30};
-        background-color: ${theme.color.background.white.default}${theme.color.transparency.T30};
+        color: ${theme.color.text.gray};
+        background-color: ${theme.color.line.L02};
+        border-color: ${theme.color.line.L01};
 
         & + label {
             cursor: not-allowed;
-            color: ${theme.color.text.black}${theme.color.transparency.T30};
+            color: ${theme.color.text.gray};
         }
     }
 
     &:disabled:checked {
         color: ${theme.color.default.pink}${theme.color.transparency.T30};
         border-color: ${theme.color.default.pink}${theme.color.transparency.T30};
+        background-color: ${theme.color.background.white.default};
     }
 `;
 createGlobalStyle `

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.9.4",
+    "version": "v3.9.6",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -43,8 +43,8 @@
         "@babel/core": "^7.26.0",
         "@babel/preset-env": "^7.26.0",
         "@babel/preset-react": "^7.25.9",
-        "@babel/preset-typescript": "^7.25.7",
-        "@dnanpm/icons": "2.0.4",
+        "@babel/preset-typescript": "^7.26.0",
+        "@dnanpm/icons": "2.0.7",
         "@rollup/plugin-commonjs": "^28.0.1",
         "@rollup/plugin-node-resolve": "^15.3.0",
         "@rollup/plugin-typescript": "^12.1.1",
@@ -73,7 +73,7 @@
         "eslint-plugin-jsdoc": "^39.9.1",
         "eslint-plugin-jsx-a11y": "^6.10.1",
         "eslint-plugin-prefer-arrow": "^1.2.3",
-        "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react": "^7.37.4",
         "eslint-plugin-react-hooks": "^4.6.2",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
@@ -86,10 +86,10 @@
         "react-dom": "^18.3.1",
         "react-styleguidist": "^13.1.3",
         "rollup": "^3.29.4",
-        "rollup-plugin-import-css": "^3.5.6",
+        "rollup-plugin-import-css": "^3.5.8",
         "style-loader": "^3.3.3",
         "styled-components": "^5.3.11",
-        "ts-jest": "^29.2.5",
+        "ts-jest": "^29.2.6",
         "ts-node": "^10.9.2",
         "tslib": "^2.8.0",
         "typescript": "^5.1.6",