@dnanpm/styleguide 3.12.0 → 3.12.2

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/DateTimePicker/DateTimePicker.js

@@ -251,6 +251,10 @@ const CurrentMonth = styled.div `
     line-height: ${theme.lineHeight.default};
     font-weight: ${theme.fontWeight.bold};
 `;
+/**
+ * TODO: Replace the VisuallyHiddenStatus styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
 const VisuallyHiddenStatus = styled.div `
     position: absolute;
     left: -9999px;

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/NotificationBadge/NotificationBadge.js

@@ -18,6 +18,10 @@ const NotificationBadgeElement = styled.div `
     background-color: ${theme.color.notification.error};
     border-radius: ${theme.radius.circle};
 `;
+/**
+ * TODO: Replace the VisuallyHidden styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
 const VisuallyHidden = styled.span `
     position: absolute;
     width: 1px;

package/build/es/components/PriorityNavigation/PriorityNavigation.js

@@ -131,6 +131,10 @@ const DropdownList = styled(CoreULStyles) `
 
     ${getElevationShadow({ elevation: 'low' })}
 `;
+/**
+ * TODO: Replace the VisuallyHidden styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
 const VisuallyHidden = styled.span `
     position: absolute;
     width: 1px;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { type ThemeInterface } from '../../themes/theme';
+interface Props {
+    /**
+     * Unique ID for the skeleton
+     */
+    id?: string;
+    /**
+     * Background color of the skeleton
+     *
+     * @param {string} sand Uses theme.color.background.sand.E01
+     * @param {string} white Uses white background (#FFFFFF)
+     *
+     * @default 'sand'
+     */
+    backgroundColor?: 'sand' | 'white';
+    /**
+     * Opacity level of the skeleton
+     *
+     * @param {number} 100 100% opacity
+     * @param {number} 50 50% opacity
+     * @param {number} 25 25% opacity
+     *
+     * @default 100
+     */
+    opacity?: 100 | 50 | 25;
+    /**
+     * Allows to pass in custom radius value from theme
+     */
+    borderRadius?: keyof ThemeInterface['radius'];
+    /**
+     * Width of the skeleton
+     *
+     * @default '100%'
+     */
+    width?: string;
+    /**
+     * Height of the skeleton
+     *
+     * @default '6.25rem'
+     */
+    height?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * If used inside a carousel, pass the slide index (starting from 1)
+     */
+    carouselIndex?: number;
+    /**
+     * Screen reader label describing the use of the skeleton,
+     * e.g., "Loading content" or "Loading image."
+     */
+    ariaLabel?: string;
+}
+declare const Skeleton: ({ backgroundColor, opacity, width, height, borderRadius, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Skeleton;

package/build/es/components/Skeleton/Skeleton.js

@@ -0,0 +1,65 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import { keyframes, styled } from 'styled-components';
+import theme from '../../themes/theme.js';
+
+const shimmer = keyframes `
+    100% {
+        transform: translateX(100%);
+    }
+`;
+const sandRgba = '248, 244, 241';
+const whiteRgba = '255, 255, 255';
+const getAnimationDelay = (carouselIndex) => {
+    switch (carouselIndex) {
+        case 1:
+            return '0s';
+        case 2:
+            return '0.6s';
+        case 3:
+            return '1.2s';
+        case 4:
+            return '1.9s';
+        case 5:
+            return '2.5s';
+        default:
+            return '0s';
+    }
+};
+const getBackgroundColor = (backgroundColor) => `linear-gradient(90deg,rgba(${backgroundColor}, 0) 0%,rgba(${backgroundColor}, 0.8) 50%,rgba(${backgroundColor}, 0) 100%)`;
+const SkeletonWrapper = styled.div `
+    position: relative;
+    overflow: hidden;
+    background-color: ${({ $backgroundColor }) => $backgroundColor === 'sand'
+    ? theme.color.background.sand.E01
+    : theme.color.background.white.default};
+    opacity: ${({ $opacity }) => ($opacity ? $opacity / 100 : 1)};
+    width: ${({ $width }) => $width};
+    height: ${({ $height }) => $height};
+    border-radius: ${({ $borderRadius }) => theme.radius[$borderRadius || 's']};
+
+    &::after {
+        position: absolute;
+        inset: 0;
+        transform: translateX(-100%);
+        background: ${({ $backgroundColor }) => getBackgroundColor($backgroundColor === 'sand' ? whiteRgba : sandRgba)};
+
+        animation: ${shimmer} 1.5s infinite;
+        content: '';
+    }
+
+    @media (min-width: 600px) {
+        &::after {
+            animation: ${shimmer} 2.5s infinite;
+            animation-delay: ${({ $carouselIndex }) => getAnimationDelay($carouselIndex)};
+        }
+    }
+`;
+const Skeleton = (_a) => {
+    var { backgroundColor = 'sand', opacity = 100, width = '25rem', height = '6.25rem', borderRadius = 's', 'data-testid': dataTestId } = _a, props = __rest(_a, ["backgroundColor", "opacity", "width", "height", "borderRadius", 'data-testid']);
+    return (React__default.createElement(React__default.Fragment, null,
+        props.ariaLabel && (React__default.createElement("span", { id: props.id, "aria-label": props.ariaLabel, role: "status", "aria-atomic": "true", className: "visually-hidden" })),
+        React__default.createElement(SkeletonWrapper, { className: props.className, "data-testid": dataTestId, "aria-hidden": "true", tabIndex: -1, "$backgroundColor": backgroundColor, "$opacity": opacity, "$width": width, "$height": height, "$carouselIndex": props.carouselIndex, "$borderRadius": borderRadius })));
+};
+
+export { Skeleton as default };

package/build/es/components/Tooltip/Tooltip.js

@@ -56,7 +56,7 @@ const StyledReactTooltip = styled(Tooltip$1) `
 
     border: 1px solid ${theme.color.line.L02};
     padding: ${getMultipliedSize(theme.base.baseWidth, 1.5)};
-    text-align: center;
+    text-align: left;
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
     width: max-content;

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';
@@ -46,6 +47,7 @@ export { default as ReadMore } from './ReadMore/ReadMore';
 export { default as Search } from './Search/Search';
 export { default as SecondaryNavigation } from './SecondaryNavigation/SecondaryNavigation';
 export { default as Selectbox } from './Selectbox/Selectbox';
+export { default as Skeleton } from './Skeleton/Skeleton';
 export { default as Switch } from './Switch/Switch';
 export { default as Tab } from './Tab/Tab';
 export { default as Tabs } from './Tabs/Tabs';

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';
@@ -154,6 +155,7 @@ export { default as ReadMore } from './components/ReadMore/ReadMore.js';
 export { default as Search } from './components/Search/Search.js';
 export { default as SecondaryNavigation } from './components/SecondaryNavigation/SecondaryNavigation.js';
 export { default as Selectbox } from './components/Selectbox/Selectbox.js';
+export { default as Skeleton } from './components/Skeleton/Skeleton.js';
 export { default as Switch } from './components/Switch/Switch.js';
 export { default as Tab } from './components/Tab/Tab.js';
 export { default as Tabs } from './components/Tabs/Tabs.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';