@dnanpm/styleguide 3.12.1 → 3.12.2

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

@@ -0,0 +1,42 @@
+import type { ComponentType } from 'react';
+import React from 'react';
+export interface BreadcrumbItem {
+    /**
+     * Display text for the breadcrumb item
+     */
+    label: string;
+    /**
+     * URL/path for the breadcrumb item. If not provided, item will be rendered as text only
+     */
+    href?: string;
+}
+interface Props {
+    /**
+     * Array of breadcrumb items to display
+     */
+    items?: BreadcrumbItem[];
+    /**
+     * Custom link component to use instead of default anchor element
+     * Useful for router integration (e.g., Next.js Link, React Router Link)
+     */
+    linkComponent?: ComponentType<any>;
+    /**
+     * Props to pass to the link component
+     */
+    linkProps?: Record<string, unknown>;
+    /**
+     * Screen reader label describing the breadcrumb navigation
+     */
+    ariaLabel?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+declare const Breadcrumb: ({ "data-testid": dataTestId, ariaLabel, className, items, linkComponent: LinkComponent, linkProps, }: Props) => React.JSX.Element | null;
+/** @component */
+export default Breadcrumb;

package/build/cjs/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var icons = require('@dnanpm/icons');
+var styledComponents = require('styled-components');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const BreadcrumbNav = styledComponents.styled.nav `
+    font-size: ${theme.default.fontSize.s};
+    font-weight: ${theme.default.fontWeight.medium};
+`;
+const BreadcrumbList = styledComponents.styled.ol `
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    list-style: none;
+    margin: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)} 0;
+    padding: 0;
+    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
+    overflow: visible;
+    container: breadcrumb / inline-size;
+
+    /* Responsive behavior: show only last 2 items when container < 600px */
+    @container (max-width: 599px) {
+        li:not(:nth-last-child(-n + 2)) {
+            display: none;
+        }
+    }
+`;
+const BreadcrumbListItem = styledComponents.styled.li `
+    display: flex;
+    align-items: center;
+    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
+
+    &:last-child {
+        min-width: 0;
+    }
+
+    a {
+        &:focus-visible {
+            outline: none;
+            border-radius: ${theme.default.radius.s};
+            box-shadow:
+                0px 0px 0px 2px ${theme.default.color.focus.light},
+                0px 0px 0px 4px ${theme.default.color.focus.dark};
+        }
+    }
+
+    span {
+        flex: 1 1 0%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
+const Breadcrumb = ({ 'data-testid': dataTestId, ariaLabel, className, items, linkComponent: LinkComponent, linkProps = {}, }) => {
+    if (!items || items.length === 0) {
+        return null;
+    }
+    const renderItem = (item, index) => {
+        const isLastItem = index === items.length - 1;
+        if (isLastItem || !item.href) {
+            return React__default.default.createElement("span", { "aria-current": isLastItem ? 'page' : undefined }, item.label);
+        }
+        if (LinkComponent) {
+            return (React__default.default.createElement(LinkComponent, Object.assign({ href: item.href, itemProp: "item", itemScope: true, itemType: "https://schema.org/WebPage" }, linkProps),
+                React__default.default.createElement("span", { itemProp: "name" }, item.label)));
+        }
+        return (React__default.default.createElement("a", { href: item.href, itemProp: "item", itemScope: true, itemType: "https://schema.org/WebPage" },
+            React__default.default.createElement("span", { itemProp: "name" }, item.label)));
+    };
+    return (React__default.default.createElement(BreadcrumbNav, { "aria-label": ariaLabel, className: className, "data-testid": dataTestId },
+        React__default.default.createElement(BreadcrumbList, { itemScope: true, itemType: "https://schema.org/BreadcrumbList" }, items.map((item, index) => {
+            var _a;
+            const isLastItem = index === items.length - 1;
+            return (React__default.default.createElement(BreadcrumbListItem, { itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", key: `breadcrumb-${item.label}-${(_a = item.href) !== null && _a !== void 0 ? _a : 'nolink'}` },
+                renderItem(item, index),
+                React__default.default.createElement("meta", { itemProp: "position", content: (index + 1).toString() }),
+                !isLastItem && (React__default.default.createElement(icons.ChevronRight, { color: theme.default.color.background.pink.default, size: "0.9rem" }))));
+        }))));
+};
+
+exports.default = Breadcrumb;

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

@@ -1,11 +1,5 @@
 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
@@ -50,10 +44,12 @@ interface Props {
      */
     className?: string;
     /**
-     * Allows to define responsive configuration
-     * If not provided, visibleItems property will be used
+     * Allows for responsive behavior in the carousel.
+     * Shows as many items as possible; each item requires a defined width.
+     * This overrides the `visibleItems` prop.
+     * @default false
      */
-    responsive?: Partial<Responsive>;
+    responsive?: boolean;
     /**
      * Allows to pass a screen reader label for the pagination item next to the current slide number
      */
@@ -73,12 +69,13 @@ interface Props {
      */
     swipeStep?: number;
 }
-declare const SlideItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<{
-    $visibleItems?: Props["visibleItems"];
-}> & {
-    $itemWidthCorrection: number;
+declare const SlideItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isSwiping: boolean;
-}>> & string;
+    $responsive: boolean;
+    $gap: number;
+} & Partial<Required<{
+    $visibleItems: Props["visibleItems"];
+}>>>> & string;
 /** @visibleName Carousel */
 declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

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

@@ -41,7 +41,6 @@ const SlidesWrapper = styledComponents.styled.div `
     display: flex;
     width: 100%;
     height: 100%;
-    gap: ${({ $gap }) => $gap}rem;
     transition-property: transform;
     transform: translate3d(0px, 0, 0);
     transition-duration: 0ms;
@@ -52,9 +51,14 @@ const SlideItem = styledComponents.styled.div `
     display: block;
     position: relative;
     flex-shrink: 0;
-    flex-basis: calc(
-        ${({ $visibleItems, $itemWidthCorrection }) => `(100% / ${$visibleItems}) - ${$itemWidthCorrection}px`}
-    );
+    padding-right: ${({ $gap }) => $gap}rem;
+
+    ${({ $responsive, $visibleItems }) => !$responsive && $visibleItems
+    ? `flex-basis: calc(100% / ${$visibleItems});`
+    : `
+        flex-basis: auto;
+        width: max-content;
+    `}
 
     a {
         pointer-events: ${({ $isSwiping }) => ($isSwiping ? 'none' : 'auto')};
@@ -146,53 +150,51 @@ const Counter = styledComponents.styled.span `
 `;
 /** @visibleName Carousel */
 const Carousel = (_a) => {
-    var _b;
+    var _b, _c;
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
     const slidesWrapperRef = React.useRef(null);
     const scrollbarRef = React.useRef(null);
     const knobRef = React.useRef(null);
-    const { isMobile, width } = useWindowSize.default(theme.default.breakpoints.md);
+    const firstItemRef = React.useRef(null);
+    const { isMobile, width: windowWidth } = useWindowSize.default(theme.default.breakpoints.md);
     const [currentIndex, setCurrentIndex] = React.useState(0);
     const [isSwiping, setIsSwiping] = React.useState(false);
-    const [calculatedItems, setCalculatedItems] = React.useState(props.visibleItems || (isMobile ? 1.2 : 1));
+    const [autoVisibleItems, setAutoVisibleItems] = React.useState(null);
     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 (props.responsive) {
+            const container = slidesWrapperRef.current;
+            const firstItem = firstItemRef.current;
+            if (container && firstItem) {
+                Array.from(container.children).forEach(itemElement => {
+                    const item = itemElement;
+                    item.style.flexBasis = '';
+                    item.style.width = '';
+                });
+                const containerWidth = container.offsetWidth;
+                const itemWidth = firstItem.offsetWidth;
+                if (itemWidth > 0) {
+                    const realVisibleItems = containerWidth / itemWidth;
+                    setAutoVisibleItems(Math.max(1, realVisibleItems));
+                }
             }
-            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]);
+        }
+        else {
+            setAutoVisibleItems(null);
+        }
+    }, [props.responsive, windowWidth, props.children]);
     const getStep = (step, visibleItems) => {
         if (step > visibleItems) {
             return Math.floor(visibleItems);
         }
         return Math.floor(step);
     };
-    const visibleItems = props.visibleItems || calculatedItems;
+    const visibleItems = (_b = autoVisibleItems !== null && autoVisibleItems !== void 0 ? autoVisibleItems : props.visibleItems) !== null && _b !== void 0 ? _b : (isMobile ? 1.2 : 1);
     const slidesWrapperGapSizePx = 20;
     const slidesCount = React.Children.count(props.children);
     const slideScreensCount = Math.max(1, slidesCount - Math.floor(visibleItems) + 1);
-    const step = getStep((_b = props.swipeStep) !== null && _b !== void 0 ? _b : 1, visibleItems);
+    const step = getStep((_c = props.swipeStep) !== null && _c !== void 0 ? _c : 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;
-    const itemWidthCorrection = itemWidthCorrectionRatio * slidesWrapperGapSizePx;
     const data = React.useMemo(() => ({
         startX: 0,
         startTime: 0,
@@ -328,12 +330,10 @@ const Carousel = (_a) => {
     React.useEffect(() => {
         if (slidesWrapperRef.current && scrollbarRef.current) {
             const isRest = React.Children.count(props.children) - (currentIndex + visibleItems) < 0;
-            data.itemWidth =
-                slidesWrapperRef.current.offsetWidth / visibleItems - itemWidthCorrection;
+            data.itemWidth = slidesWrapperRef.current.offsetWidth / visibleItems;
             data.scrollWidth = slidesWrapperRef.current.scrollWidth;
             data.lastItemX =
-                (data.itemWidth + slidesWrapperGapSizePx) *
-                    (React.Children.count(props.children) - visibleItems) -
+                data.itemWidth * (React.Children.count(props.children) - visibleItems) -
                     (isRest ? slidesWrapperGapSizePx * (Math.ceil(visibleItems) - visibleItems) : 0);
             data.scrollbarToSlidesRatio =
                 data.lastItemX /
@@ -342,14 +342,26 @@ const Carousel = (_a) => {
             let slidesTransform = 0;
             if (React.Children.count(props.children) >= visibleItems) {
                 slidesTransform =
-                    data.itemWidth * currentIndex +
-                        slidesWrapperGapSizePx * currentIndex -
+                    data.itemWidth * currentIndex -
                         (isRest ? data.itemWidth * (visibleItems % 1) + slidesWrapperGapSizePx : 0);
             }
             setElementTransform(slidesWrapperRef, -slidesTransform);
             setElementTransform(knobRef, slidesTransform / data.scrollbarToSlidesRatio);
         }
-    }, [currentIndex, data, itemWidthCorrection, props.children, slideScreensCount, visibleItems]);
+    }, [currentIndex, data, props.children, slideScreensCount, visibleItems]);
+    React.useEffect(() => {
+        var _a;
+        if (props.responsive && autoVisibleItems) {
+            const items = (_a = slidesWrapperRef.current) === null || _a === void 0 ? void 0 : _a.children;
+            if (items) {
+                Array.from(items).forEach(itemElement => {
+                    const item = itemElement;
+                    item.style.flexBasis = `calc(100% / ${autoVisibleItems})`;
+                    item.style.width = '';
+                });
+            }
+        }
+    }, [autoVisibleItems, props.responsive]);
     return (React__default.default.createElement(CarouselWrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
         React__default.default.createElement(Header, { "data-testid": dataTestId && `${dataTestId}-header` },
             props.title && React__default.default.createElement(Title, null, props.title),
@@ -361,7 +373,7 @@ const Carousel = (_a) => {
                 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(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown }, React.Children.map(props.children, (child, index) => (React__default.default.createElement(SlideItem, { ref: index === 0 ? firstItemRef : undefined, "$visibleItems": visibleItems, "$isSwiping": isSwiping, onPointerDown: handlePointerDown, "$responsive": Boolean(props.responsive), "$gap": slidesWrapperGapSizePx / 16 }, child))))),
         React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
             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" })))),

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

@@ -34,12 +34,6 @@ interface HeroProps {
      * Background color when no image is provided
      */
     backgroundColor?: string;
-    /**
-     * Enable gradient overlay on background
-     *
-     * @default false
-     */
-    hasGradient?: boolean;
     /**
      * Logo image component for logo-style heroes
      */

package/build/cjs/components/Hero/Hero.js

@@ -35,9 +35,9 @@ const HeroImage = styledComponents.styled.div `
     height: ${HERO_CONSTANTS.mobileHeight}px;
     background-color: ${({ $backgroundColor }) => $backgroundColor || 'transparent'};
 
-    ${({ $hasGradient }) => $hasGradient &&
+    ${({ $backgroundColor }) => $backgroundColor &&
     `
-        linear-gradient(180deg, ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0} 0%, ${theme.default.color.background.plum.default}${theme.default.color.transparency.T30}  100%);
+        background-image: linear-gradient(180deg, ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0} 0%, ${theme.default.color.background.plum.default}${theme.default.color.transparency.T30} 100%);
         background-size: 100% 33.33%;
         background-repeat: no-repeat;
         background-position: bottom;
@@ -184,7 +184,7 @@ const Hero = (_a) => {
     var { variant = 'default', headingLevel = 'h1', Image = 'img', LogoImage = 'img', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["variant", "headingLevel", "Image", "LogoImage", 'data-testid']);
     const HeadingTag = headingLevel;
     return (React__default.default.createElement(HeroContainer, { "$variant": variant, className: props.className, "data-testid": dataTestId },
-        React__default.default.createElement(HeroImage, { "$hasGradient": props.hasGradient, "$backgroundColor": props.backgroundColor },
+        React__default.default.createElement(HeroImage, { "$backgroundColor": props.backgroundColor },
             props.logoImageProps && (React__default.default.createElement(LogoImageWrap, null,
                 React__default.default.createElement(LogoImageContainer, null, renderImage(LogoImage, props.logoImageProps)))),
             !props.logoImageProps && props.imageProps && renderImage(Image, props.imageProps)),

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

@@ -2,6 +2,7 @@ export { default as Accordion } from './Accordion/Accordion';
 export { default as AccordionItem } from './AccordionItem/AccordionItem';
 export { default as AmountSelector } from './AmountSelector/AmountSelector';
 export { default as Box } from './Box/Box';
+export { default as Breadcrumb } from './Breadcrumb/Breadcrumb';
 export { default as Button } from './Button/Button';
 export { default as ButtonArrow } from './ButtonArrow/ButtonArrow';
 export { default as ButtonCard } from './ButtonCard/ButtonCard';

package/build/cjs/index.js

@@ -4,6 +4,7 @@ var Accordion = require('./components/Accordion/Accordion.js');
 var AccordionItem = require('./components/AccordionItem/AccordionItem.js');
 var AmountSelector = require('./components/AmountSelector/AmountSelector.js');
 var Box = require('./components/Box/Box.js');
+var Breadcrumb = require('./components/Breadcrumb/Breadcrumb.js');
 var Button = require('./components/Button/Button.js');
 var ButtonArrow = require('./components/ButtonArrow/ButtonArrow.js');
 var ButtonCard = require('./components/ButtonCard/ButtonCard.js');
@@ -176,6 +177,7 @@ exports.Accordion = Accordion.default;
 exports.AccordionItem = AccordionItem.default;
 exports.AmountSelector = AmountSelector.default;
 exports.Box = Box.default;
+exports.Breadcrumb = Breadcrumb.default;
 exports.Button = Button.default;
 exports.ButtonArrow = ButtonArrow.default;
 exports.ButtonCard = ButtonCard.default;

package/build/cjs/themes/globalStyles.js

@@ -1,3 +1,4 @@
+import "../assets/fonts/fonts.css";
 'use strict';
 
 var styledUtils = require('../utils/styledUtils.js');

package/build/cjs/themes/theme.d.ts

@@ -9,7 +9,14 @@ declare const theme: {
             unit: string;
         };
     };
-    breakpoints: import("./themeComponents/breakpoints").ViewBreakpoints;
+    breakpoints: {
+        readonly xxl: 1440;
+        readonly xl: 1200;
+        readonly lg: 992;
+        readonly md: 768;
+        readonly sm: 576;
+        readonly xs: 480;
+    };
     color: {
         default: {
             pink: string;
@@ -155,7 +162,7 @@ declare const theme: {
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+    media: Record<"xxl" | "xl" | "lg" | "md" | "sm" | "xs", (l: TemplateStringsArray, ...p: (string | number)[]) => ReturnType<typeof import("styled-components").css>>;
     radius: {
         default: string;
         s: string;

package/build/cjs/themes/themeComponents/breakpoints.d.ts

@@ -1,5 +1,10 @@
-export interface ViewBreakpoints {
-    [key: string]: number;
-}
-declare const breakpoints: ViewBreakpoints;
+declare const breakpoints: {
+    readonly xxl: 1440;
+    readonly xl: 1200;
+    readonly lg: 992;
+    readonly md: 768;
+    readonly sm: 576;
+    readonly xs: 480;
+};
+export type ViewBreakpoints = typeof breakpoints;
 export default breakpoints;

package/build/cjs/utils/styledUtils.d.ts

@@ -1,3 +1,4 @@
+import { css } from '../themes/styled';
 export declare const getMultipliedSize: (base: {
     value: number;
     unit: string;
@@ -6,4 +7,24 @@ export declare const getDividedSize: (base: {
     value: number;
     unit: string;
 }, divide: number) => string;
-export declare const media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+/**
+ * Media query helpers for responsive design.
+ *
+ * @example
+ * ```ts
+ * const StyledDiv = styled.div`
+ *   font-size: 1rem;
+ *   ${media.md`font-size: 1.2rem;`}
+ *   ${media.lg`font-size: 1.5rem;`}
+ * `;
+ * ```
+ *
+ * Available breakpoints:
+ * - `xs`: 480px
+ * - `sm`: 576px
+ * - `md`: 768px
+ * - `lg`: 992px
+ * - `xl`: 1200px
+ * - `xxl`: 1440px
+ */
+export declare const media: Record<"xxl" | "xl" | "lg" | "md" | "sm" | "xs", (l: TemplateStringsArray, ...p: (string | number)[]) => ReturnType<typeof css>>;

package/build/cjs/utils/styledUtils.js

@@ -5,12 +5,32 @@ var breakpoints = require('../themes/themeComponents/breakpoints.js');
 
 const getMultipliedSize = (base, multiply) => `${multiply * base.value}${base.unit}`;
 const getDividedSize = (base, divide) => `${base.value / divide}${base.unit}`;
-const media = Object.keys(breakpoints.default).reduce((acc, label) => {
-    acc[label] = (literals, ...placeholders) => styledComponents.css `
-                @media (min-width: ${breakpoints.default[label]}px) {
-                    ${styledComponents.css(literals, ...placeholders)};
-                }
-            `.join('');
+/**
+ * Media query helpers for responsive design.
+ *
+ * @example
+ * ```ts
+ * const StyledDiv = styled.div`
+ *   font-size: 1rem;
+ *   ${media.md`font-size: 1.2rem;`}
+ *   ${media.lg`font-size: 1.5rem;`}
+ * `;
+ * ```
+ *
+ * Available breakpoints:
+ * - `xs`: 480px
+ * - `sm`: 576px
+ * - `md`: 768px
+ * - `lg`: 992px
+ * - `xl`: 1200px
+ * - `xxl`: 1440px
+ */
+const media = Object.keys(breakpoints.default).reduce((acc, key) => {
+    acc[key] = (literals, ...placeholders) => styledComponents.css `
+            @media (min-width: ${breakpoints.default[key]}px) {
+                ${styledComponents.css(literals, ...placeholders)}
+            }
+        `;
     return acc;
 }, {});
 

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

@@ -0,0 +1,42 @@
+import type { ComponentType } from 'react';
+import React from 'react';
+export interface BreadcrumbItem {
+    /**
+     * Display text for the breadcrumb item
+     */
+    label: string;
+    /**
+     * URL/path for the breadcrumb item. If not provided, item will be rendered as text only
+     */
+    href?: string;
+}
+interface Props {
+    /**
+     * Array of breadcrumb items to display
+     */
+    items?: BreadcrumbItem[];
+    /**
+     * Custom link component to use instead of default anchor element
+     * Useful for router integration (e.g., Next.js Link, React Router Link)
+     */
+    linkComponent?: ComponentType<any>;
+    /**
+     * Props to pass to the link component
+     */
+    linkProps?: Record<string, unknown>;
+    /**
+     * Screen reader label describing the breadcrumb navigation
+     */
+    ariaLabel?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+declare const Breadcrumb: ({ "data-testid": dataTestId, ariaLabel, className, items, linkComponent: LinkComponent, linkProps, }: Props) => React.JSX.Element | null;
+/** @component */
+export default Breadcrumb;

package/build/es/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,82 @@
+import React__default from 'react';
+import { ChevronRight } from '@dnanpm/icons';
+import { styled } from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+
+const BreadcrumbNav = styled.nav `
+    font-size: ${theme.fontSize.s};
+    font-weight: ${theme.fontWeight.medium};
+`;
+const BreadcrumbList = styled.ol `
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    list-style: none;
+    margin: ${getMultipliedSize(theme.base.baseHeight, 2)} 0;
+    padding: 0;
+    gap: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
+    overflow: visible;
+    container: breadcrumb / inline-size;
+
+    /* Responsive behavior: show only last 2 items when container < 600px */
+    @container (max-width: 599px) {
+        li:not(:nth-last-child(-n + 2)) {
+            display: none;
+        }
+    }
+`;
+const BreadcrumbListItem = styled.li `
+    display: flex;
+    align-items: center;
+    gap: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
+
+    &:last-child {
+        min-width: 0;
+    }
+
+    a {
+        &:focus-visible {
+            outline: none;
+            border-radius: ${theme.radius.s};
+            box-shadow:
+                0px 0px 0px 2px ${theme.color.focus.light},
+                0px 0px 0px 4px ${theme.color.focus.dark};
+        }
+    }
+
+    span {
+        flex: 1 1 0%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
+const Breadcrumb = ({ 'data-testid': dataTestId, ariaLabel, className, items, linkComponent: LinkComponent, linkProps = {}, }) => {
+    if (!items || items.length === 0) {
+        return null;
+    }
+    const renderItem = (item, index) => {
+        const isLastItem = index === items.length - 1;
+        if (isLastItem || !item.href) {
+            return React__default.createElement("span", { "aria-current": isLastItem ? 'page' : undefined }, item.label);
+        }
+        if (LinkComponent) {
+            return (React__default.createElement(LinkComponent, Object.assign({ href: item.href, itemProp: "item", itemScope: true, itemType: "https://schema.org/WebPage" }, linkProps),
+                React__default.createElement("span", { itemProp: "name" }, item.label)));
+        }
+        return (React__default.createElement("a", { href: item.href, itemProp: "item", itemScope: true, itemType: "https://schema.org/WebPage" },
+            React__default.createElement("span", { itemProp: "name" }, item.label)));
+    };
+    return (React__default.createElement(BreadcrumbNav, { "aria-label": ariaLabel, className: className, "data-testid": dataTestId },
+        React__default.createElement(BreadcrumbList, { itemScope: true, itemType: "https://schema.org/BreadcrumbList" }, items.map((item, index) => {
+            var _a;
+            const isLastItem = index === items.length - 1;
+            return (React__default.createElement(BreadcrumbListItem, { itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", key: `breadcrumb-${item.label}-${(_a = item.href) !== null && _a !== void 0 ? _a : 'nolink'}` },
+                renderItem(item, index),
+                React__default.createElement("meta", { itemProp: "position", content: (index + 1).toString() }),
+                !isLastItem && (React__default.createElement(ChevronRight, { color: theme.color.background.pink.default, size: "0.9rem" }))));
+        }))));
+};
+
+export { Breadcrumb as default };

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

@@ -1,11 +1,5 @@
 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
@@ -50,10 +44,12 @@ interface Props {
      */
     className?: string;
     /**
-     * Allows to define responsive configuration
-     * If not provided, visibleItems property will be used
+     * Allows for responsive behavior in the carousel.
+     * Shows as many items as possible; each item requires a defined width.
+     * This overrides the `visibleItems` prop.
+     * @default false
      */
-    responsive?: Partial<Responsive>;
+    responsive?: boolean;
     /**
      * Allows to pass a screen reader label for the pagination item next to the current slide number
      */
@@ -73,12 +69,13 @@ interface Props {
      */
     swipeStep?: number;
 }
-declare const SlideItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<{
-    $visibleItems?: Props["visibleItems"];
-}> & {
-    $itemWidthCorrection: number;
+declare const SlideItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isSwiping: boolean;
-}>> & string;
+    $responsive: boolean;
+    $gap: number;
+} & Partial<Required<{
+    $visibleItems: Props["visibleItems"];
+}>>>> & string;
 /** @visibleName Carousel */
 declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

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

@@ -33,7 +33,6 @@ const SlidesWrapper = styled.div `
     display: flex;
     width: 100%;
     height: 100%;
-    gap: ${({ $gap }) => $gap}rem;
     transition-property: transform;
     transform: translate3d(0px, 0, 0);
     transition-duration: 0ms;
@@ -44,9 +43,14 @@ const SlideItem = styled.div `
     display: block;
     position: relative;
     flex-shrink: 0;
-    flex-basis: calc(
-        ${({ $visibleItems, $itemWidthCorrection }) => `(100% / ${$visibleItems}) - ${$itemWidthCorrection}px`}
-    );
+    padding-right: ${({ $gap }) => $gap}rem;
+
+    ${({ $responsive, $visibleItems }) => !$responsive && $visibleItems
+    ? `flex-basis: calc(100% / ${$visibleItems});`
+    : `
+        flex-basis: auto;
+        width: max-content;
+    `}
 
     a {
         pointer-events: ${({ $isSwiping }) => ($isSwiping ? 'none' : 'auto')};
@@ -138,53 +142,51 @@ const Counter = styled.span `
 `;
 /** @visibleName Carousel */
 const Carousel = (_a) => {
-    var _b;
+    var _b, _c;
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
     const slidesWrapperRef = useRef(null);
     const scrollbarRef = useRef(null);
     const knobRef = useRef(null);
-    const { isMobile, width } = useWindowSize(theme.breakpoints.md);
+    const firstItemRef = useRef(null);
+    const { isMobile, width: windowWidth } = useWindowSize(theme.breakpoints.md);
     const [currentIndex, setCurrentIndex] = useState(0);
     const [isSwiping, setIsSwiping] = useState(false);
-    const [calculatedItems, setCalculatedItems] = useState(props.visibleItems || (isMobile ? 1.2 : 1));
+    const [autoVisibleItems, setAutoVisibleItems] = useState(null);
     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 (props.responsive) {
+            const container = slidesWrapperRef.current;
+            const firstItem = firstItemRef.current;
+            if (container && firstItem) {
+                Array.from(container.children).forEach(itemElement => {
+                    const item = itemElement;
+                    item.style.flexBasis = '';
+                    item.style.width = '';
+                });
+                const containerWidth = container.offsetWidth;
+                const itemWidth = firstItem.offsetWidth;
+                if (itemWidth > 0) {
+                    const realVisibleItems = containerWidth / itemWidth;
+                    setAutoVisibleItems(Math.max(1, realVisibleItems));
+                }
             }
-            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]);
+        }
+        else {
+            setAutoVisibleItems(null);
+        }
+    }, [props.responsive, windowWidth, props.children]);
     const getStep = (step, visibleItems) => {
         if (step > visibleItems) {
             return Math.floor(visibleItems);
         }
         return Math.floor(step);
     };
-    const visibleItems = props.visibleItems || calculatedItems;
+    const visibleItems = (_b = autoVisibleItems !== null && autoVisibleItems !== void 0 ? autoVisibleItems : props.visibleItems) !== null && _b !== void 0 ? _b : (isMobile ? 1.2 : 1);
     const slidesWrapperGapSizePx = 20;
     const slidesCount = Children.count(props.children);
     const slideScreensCount = Math.max(1, slidesCount - Math.floor(visibleItems) + 1);
-    const step = getStep((_b = props.swipeStep) !== null && _b !== void 0 ? _b : 1, visibleItems);
+    const step = getStep((_c = props.swipeStep) !== null && _c !== void 0 ? _c : 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;
-    const itemWidthCorrection = itemWidthCorrectionRatio * slidesWrapperGapSizePx;
     const data = useMemo(() => ({
         startX: 0,
         startTime: 0,
@@ -320,12 +322,10 @@ const Carousel = (_a) => {
     useEffect(() => {
         if (slidesWrapperRef.current && scrollbarRef.current) {
             const isRest = Children.count(props.children) - (currentIndex + visibleItems) < 0;
-            data.itemWidth =
-                slidesWrapperRef.current.offsetWidth / visibleItems - itemWidthCorrection;
+            data.itemWidth = slidesWrapperRef.current.offsetWidth / visibleItems;
             data.scrollWidth = slidesWrapperRef.current.scrollWidth;
             data.lastItemX =
-                (data.itemWidth + slidesWrapperGapSizePx) *
-                    (Children.count(props.children) - visibleItems) -
+                data.itemWidth * (Children.count(props.children) - visibleItems) -
                     (isRest ? slidesWrapperGapSizePx * (Math.ceil(visibleItems) - visibleItems) : 0);
             data.scrollbarToSlidesRatio =
                 data.lastItemX /
@@ -334,14 +334,26 @@ const Carousel = (_a) => {
             let slidesTransform = 0;
             if (Children.count(props.children) >= visibleItems) {
                 slidesTransform =
-                    data.itemWidth * currentIndex +
-                        slidesWrapperGapSizePx * currentIndex -
+                    data.itemWidth * currentIndex -
                         (isRest ? data.itemWidth * (visibleItems % 1) + slidesWrapperGapSizePx : 0);
             }
             setElementTransform(slidesWrapperRef, -slidesTransform);
             setElementTransform(knobRef, slidesTransform / data.scrollbarToSlidesRatio);
         }
-    }, [currentIndex, data, itemWidthCorrection, props.children, slideScreensCount, visibleItems]);
+    }, [currentIndex, data, props.children, slideScreensCount, visibleItems]);
+    useEffect(() => {
+        var _a;
+        if (props.responsive && autoVisibleItems) {
+            const items = (_a = slidesWrapperRef.current) === null || _a === void 0 ? void 0 : _a.children;
+            if (items) {
+                Array.from(items).forEach(itemElement => {
+                    const item = itemElement;
+                    item.style.flexBasis = `calc(100% / ${autoVisibleItems})`;
+                    item.style.width = '';
+                });
+            }
+        }
+    }, [autoVisibleItems, props.responsive]);
     return (React__default.createElement(CarouselWrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
         React__default.createElement(Header, { "data-testid": dataTestId && `${dataTestId}-header` },
             props.title && React__default.createElement(Title, null, props.title),
@@ -353,7 +365,7 @@ const Carousel = (_a) => {
                 React__default.createElement(ButtonArrow, { direction: "left", "aria-label": props.previousAriaLabel, onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0, type: "button" }),
                 React__default.createElement(ButtonArrow, { direction: "right", "aria-label": props.nextAriaLabel, onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= Children.count(props.children), type: "button" }))),
         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, "$isSwiping": isSwiping, onPointerDown: handlePointerDown }, child))))),
+            React__default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown }, Children.map(props.children, (child, index) => (React__default.createElement(SlideItem, { ref: index === 0 ? firstItemRef : undefined, "$visibleItems": visibleItems, "$isSwiping": isSwiping, onPointerDown: handlePointerDown, "$responsive": Boolean(props.responsive), "$gap": slidesWrapperGapSizePx / 16 }, child))))),
         React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
             React__default.createElement(Pagination, null, [...Array(totalSwipeSteps).keys()].map((value, index) => (React__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" })))),

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

@@ -34,12 +34,6 @@ interface HeroProps {
      * Background color when no image is provided
      */
     backgroundColor?: string;
-    /**
-     * Enable gradient overlay on background
-     *
-     * @default false
-     */
-    hasGradient?: boolean;
     /**
      * Logo image component for logo-style heroes
      */

package/build/es/components/Hero/Hero.js

@@ -27,9 +27,9 @@ const HeroImage = styled.div `
     height: ${HERO_CONSTANTS.mobileHeight}px;
     background-color: ${({ $backgroundColor }) => $backgroundColor || 'transparent'};
 
-    ${({ $hasGradient }) => $hasGradient &&
+    ${({ $backgroundColor }) => $backgroundColor &&
     `
-        linear-gradient(180deg, ${theme.color.background.plum.default}${theme.color.transparency.T0} 0%, ${theme.color.background.plum.default}${theme.color.transparency.T30}  100%);
+        background-image: linear-gradient(180deg, ${theme.color.background.plum.default}${theme.color.transparency.T0} 0%, ${theme.color.background.plum.default}${theme.color.transparency.T30} 100%);
         background-size: 100% 33.33%;
         background-repeat: no-repeat;
         background-position: bottom;
@@ -176,7 +176,7 @@ const Hero = (_a) => {
     var { variant = 'default', headingLevel = 'h1', Image = 'img', LogoImage = 'img', 'data-testid': dataTestId } = _a, props = __rest(_a, ["variant", "headingLevel", "Image", "LogoImage", 'data-testid']);
     const HeadingTag = headingLevel;
     return (React__default.createElement(HeroContainer, { "$variant": variant, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(HeroImage, { "$hasGradient": props.hasGradient, "$backgroundColor": props.backgroundColor },
+        React__default.createElement(HeroImage, { "$backgroundColor": props.backgroundColor },
             props.logoImageProps && (React__default.createElement(LogoImageWrap, null,
                 React__default.createElement(LogoImageContainer, null, renderImage(LogoImage, props.logoImageProps)))),
             !props.logoImageProps && props.imageProps && renderImage(Image, props.imageProps)),

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

@@ -2,6 +2,7 @@ export { default as Accordion } from './Accordion/Accordion';
 export { default as AccordionItem } from './AccordionItem/AccordionItem';
 export { default as AmountSelector } from './AmountSelector/AmountSelector';
 export { default as Box } from './Box/Box';
+export { default as Breadcrumb } from './Breadcrumb/Breadcrumb';
 export { default as Button } from './Button/Button';
 export { default as ButtonArrow } from './ButtonArrow/ButtonArrow';
 export { default as ButtonCard } from './ButtonCard/ButtonCard';

package/build/es/index.js

@@ -2,6 +2,7 @@ export { default as Accordion } from './components/Accordion/Accordion.js';
 export { default as AccordionItem } from './components/AccordionItem/AccordionItem.js';
 export { default as AmountSelector } from './components/AmountSelector/AmountSelector.js';
 export { default as Box } from './components/Box/Box.js';
+export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 export { default as Button } from './components/Button/Button.js';
 export { default as ButtonArrow } from './components/ButtonArrow/ButtonArrow.js';
 export { default as ButtonCard } from './components/ButtonCard/ButtonCard.js';

package/build/es/themes/globalStyles.js

@@ -1,3 +1,4 @@
+import "../assets/fonts/fonts.css";
 import { media } from '../utils/styledUtils.js';
 import { css, createGlobalStyle } from 'styled-components';
 import theme from './theme.js';

package/build/es/themes/theme.d.ts

@@ -9,7 +9,14 @@ declare const theme: {
             unit: string;
         };
     };
-    breakpoints: import("./themeComponents/breakpoints").ViewBreakpoints;
+    breakpoints: {
+        readonly xxl: 1440;
+        readonly xl: 1200;
+        readonly lg: 992;
+        readonly md: 768;
+        readonly sm: 576;
+        readonly xs: 480;
+    };
     color: {
         default: {
             pink: string;
@@ -155,7 +162,7 @@ declare const theme: {
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+    media: Record<"xxl" | "xl" | "lg" | "md" | "sm" | "xs", (l: TemplateStringsArray, ...p: (string | number)[]) => ReturnType<typeof import("styled-components").css>>;
     radius: {
         default: string;
         s: string;

package/build/es/themes/themeComponents/breakpoints.d.ts

@@ -1,5 +1,10 @@
-export interface ViewBreakpoints {
-    [key: string]: number;
-}
-declare const breakpoints: ViewBreakpoints;
+declare const breakpoints: {
+    readonly xxl: 1440;
+    readonly xl: 1200;
+    readonly lg: 992;
+    readonly md: 768;
+    readonly sm: 576;
+    readonly xs: 480;
+};
+export type ViewBreakpoints = typeof breakpoints;
 export default breakpoints;

package/build/es/utils/styledUtils.d.ts

@@ -1,3 +1,4 @@
+import { css } from '../themes/styled';
 export declare const getMultipliedSize: (base: {
     value: number;
     unit: string;
@@ -6,4 +7,24 @@ export declare const getDividedSize: (base: {
     value: number;
     unit: string;
 }, divide: number) => string;
-export declare const media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+/**
+ * Media query helpers for responsive design.
+ *
+ * @example
+ * ```ts
+ * const StyledDiv = styled.div`
+ *   font-size: 1rem;
+ *   ${media.md`font-size: 1.2rem;`}
+ *   ${media.lg`font-size: 1.5rem;`}
+ * `;
+ * ```
+ *
+ * Available breakpoints:
+ * - `xs`: 480px
+ * - `sm`: 576px
+ * - `md`: 768px
+ * - `lg`: 992px
+ * - `xl`: 1200px
+ * - `xxl`: 1440px
+ */
+export declare const media: Record<"xxl" | "xl" | "lg" | "md" | "sm" | "xs", (l: TemplateStringsArray, ...p: (string | number)[]) => ReturnType<typeof css>>;

package/build/es/utils/styledUtils.js

@@ -3,12 +3,32 @@ import breakpoints from '../themes/themeComponents/breakpoints.js';
 
 const getMultipliedSize = (base, multiply) => `${multiply * base.value}${base.unit}`;
 const getDividedSize = (base, divide) => `${base.value / divide}${base.unit}`;
-const media = Object.keys(breakpoints).reduce((acc, label) => {
-    acc[label] = (literals, ...placeholders) => css `
-                @media (min-width: ${breakpoints[label]}px) {
-                    ${css(literals, ...placeholders)};
-                }
-            `.join('');
+/**
+ * Media query helpers for responsive design.
+ *
+ * @example
+ * ```ts
+ * const StyledDiv = styled.div`
+ *   font-size: 1rem;
+ *   ${media.md`font-size: 1.2rem;`}
+ *   ${media.lg`font-size: 1.5rem;`}
+ * `;
+ * ```
+ *
+ * Available breakpoints:
+ * - `xs`: 480px
+ * - `sm`: 576px
+ * - `md`: 768px
+ * - `lg`: 992px
+ * - `xl`: 1200px
+ * - `xxl`: 1440px
+ */
+const media = Object.keys(breakpoints).reduce((acc, key) => {
+    acc[key] = (literals, ...placeholders) => css `
+            @media (min-width: ${breakpoints[key]}px) {
+                ${css(literals, ...placeholders)}
+            }
+        `;
     return acc;
 }, {});
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.12.1",
+    "version": "v3.12.2",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -18,7 +18,8 @@
     ],
     "repository": {
         "type": "git",
-        "url": "git@github.com:DNA-Online-Services/styleguide.git"
+        "url": "git@github.com:DNA-Online-Services/styleguide.git",
+        "directory": "packages/styleguide"
     },
     "scripts": {
         "build": "rm -rf build && rollup -c",
@@ -48,7 +49,7 @@
         "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.27.1",
         "@dnanpm/icons": "^2.0.9",
-        "@rollup/plugin-commonjs": "^28.0.3",
+        "@rollup/plugin-commonjs": "^29.0.0",
         "@rollup/plugin-node-resolve": "^16.0.3",
         "@rollup/plugin-typescript": "^12.1.2",
         "@testing-library/jest-dom": "^6.6.3",
@@ -88,14 +89,14 @@
         "react-dom": "^18.3.1",
         "react-styleguidist": "^13.1.4",
         "rollup": "^3.29.4",
-        "rollup-plugin-import-css": "^3.5.8",
+        "rollup-plugin-import-css": "^4.1.0",
         "style-loader": "^3.3.3",
         "styled-components": "^6.1.19",
         "ts-jest": "^29.3.2",
         "ts-node": "^10.9.2",
         "tslib": "^2.8.1",
         "typescript": "^5.1.6",
-        "webpack": "^5.99.8"
+        "webpack": "^5.102.1"
     },
     "dependencies": {
         "ramda": "^0.32.0",
@@ -110,5 +111,8 @@
         "react": ">=17.x <=19.x",
         "react-dom": ">=17.x <=19.x",
         "styled-components": "6.x"
+    },
+    "engines": {
+        "node": ">=20"
     }
 }