@dnanpm/styleguide 3.12.0 → 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/DateTimePicker/DateTimePicker.js

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

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

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

package/build/cjs/components/PriorityNavigation/PriorityNavigation.js

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

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

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styledComponents = require('styled-components');
+var theme = require('../../themes/theme.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const shimmer = styledComponents.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 = styledComponents.styled.div `
+    position: relative;
+    overflow: hidden;
+    background-color: ${({ $backgroundColor }) => $backgroundColor === 'sand'
+    ? theme.default.color.background.sand.E01
+    : theme.default.color.background.white.default};
+    opacity: ${({ $opacity }) => ($opacity ? $opacity / 100 : 1)};
+    width: ${({ $width }) => $width};
+    height: ${({ $height }) => $height};
+    border-radius: ${({ $borderRadius }) => theme.default.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 = tslib.__rest(_a, ["backgroundColor", "opacity", "width", "height", "borderRadius", 'data-testid']);
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        props.ariaLabel && (React__default.default.createElement("span", { id: props.id, "aria-label": props.ariaLabel, role: "status", "aria-atomic": "true", className: "visually-hidden" })),
+        React__default.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 })));
+};
+
+exports.default = Skeleton;

package/build/cjs/components/Tooltip/Tooltip.js

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

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';
@@ -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/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');
@@ -156,6 +157,7 @@ var ReadMore = require('./components/ReadMore/ReadMore.js');
 var Search = require('./components/Search/Search.js');
 var SecondaryNavigation = require('./components/SecondaryNavigation/SecondaryNavigation.js');
 var Selectbox = require('./components/Selectbox/Selectbox.js');
+var Skeleton = require('./components/Skeleton/Skeleton.js');
 var Switch = require('./components/Switch/Switch.js');
 var Tab = require('./components/Tab/Tab.js');
 var Tabs = require('./components/Tabs/Tabs.js');
@@ -175,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;
@@ -328,6 +331,7 @@ exports.ReadMore = ReadMore.default;
 exports.Search = Search.default;
 exports.SecondaryNavigation = SecondaryNavigation.default;
 exports.Selectbox = Selectbox.default;
+exports.Skeleton = Skeleton.default;
 exports.Switch = Switch.default;
 exports.Tab = Tab.default;
 exports.Tabs = Tabs.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;