@telia/teddy 0.6.0 → 0.6.2

package/dist/components/card/card-carousel.cjs

@@ -8,6 +8,7 @@ const components_carousel_carouselRoot = require("../carousel/carousel-root.cjs"
 const components_colorDot_index = require("../color-dot/index.cjs");
 const utils_breakpointToNumber = require("../../utils/breakpointToNumber.cjs");
 const tokens_breakpoint_variables = require("../../tokens/breakpoint/variables.cjs");
+const components_text_text = require("../text/text.cjs");
 const ImageSlider = React.forwardRef(
   ({
     sliderRef,
@@ -18,13 +19,38 @@ const ImageSlider = React.forwardRef(
     onClick = () => void 0,
     onClickNext,
     onClickPrev,
-    onChangeVariant = () => void 0
+    onChangeVariant = () => void 0,
+    maxDotsToShow = void 0
   }, forwardRef) => {
     const [selectedSlide, setSelectedSlide] = React.useState((settings == null ? void 0 : settings.initialSlide) || 0);
     const rootCarouselClass = `${components_card_card.rootClassName}__carousel`;
     const classes = clsx([components_card_card.styles[rootCarouselClass]], className);
     const internalSliderRef = React.useRef(null);
     const innerSliderRef = sliderRef || internalSliderRef;
+    const appendDots = maxDotsToShow ? getAppendDotsMethod(maxDotsToShow, selectedSlide) : void 0;
+    const defaultDettings = {
+      beforeChange: (_currentSlide, nextSlide) => {
+        setSelectedSlide(nextSlide);
+        onChangeVariant(variants[nextSlide]);
+      },
+      customPaging: (index) => {
+        const variant = variants[index];
+        return /* @__PURE__ */ jsxRuntime.jsx(components_colorDot_index.ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
+      },
+      swipe: false,
+      responsive: [
+        {
+          breakpoint: utils_breakpointToNumber.breakpointToNumber(tokens_breakpoint_variables.teddyBreakpointMd),
+          settings: {
+            swipe: true
+          }
+        }
+      ],
+      ...settings
+    };
+    if (maxDotsToShow && appendDots) {
+      defaultDettings.appendDots = appendDots;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: forwardRef, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx(
       components_carousel_carouselRoot.Carousel,
       {
@@ -33,30 +59,40 @@ const ImageSlider = React.forwardRef(
         onClickNext,
         onClickPrev,
         onClick,
-        settings: {
-          beforeChange: (_currentSlide, nextSlide) => {
-            setSelectedSlide(nextSlide);
-            onChangeVariant(variants[nextSlide]);
-          },
-          customPaging: (index) => {
-            const variant = variants[index];
-            return /* @__PURE__ */ jsxRuntime.jsx(components_colorDot_index.ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
-          },
-          swipe: false,
-          responsive: [
-            {
-              breakpoint: utils_breakpointToNumber.breakpointToNumber(tokens_breakpoint_variables.teddyBreakpointMd),
-              settings: {
-                swipe: true
-              }
-            }
-          ],
-          ...settings
-        },
+        settings: defaultDettings,
         children
       }
     ) });
   }
 );
+const getAppendDotsMethod = (maxDotsToShow, selectedSlide) => {
+  return (dots) => {
+    const dotsArray = React.Children.toArray(dots);
+    const totalDots = dotsArray.length;
+    if (totalDots <= maxDotsToShow) {
+      return /* @__PURE__ */ jsxRuntime.jsx("ul", { children: dotsArray });
+    }
+    let startIndex = 0;
+    let endIndex = maxDotsToShow;
+    const halfMaxDots = Math.floor(maxDotsToShow / 2);
+    if (selectedSlide >= halfMaxDots) {
+      startIndex = selectedSlide - halfMaxDots;
+      endIndex = startIndex + maxDotsToShow;
+      if (endIndex > totalDots) {
+        endIndex = totalDots;
+        startIndex = totalDots - maxDotsToShow;
+      }
+    }
+    const visibleDots = dotsArray.slice(startIndex, endIndex);
+    return /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-100-medium", style: { visibility: startIndex > 0 ? "visible" : "hidden" }, children: "..." }) }),
+      visibleDots,
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(components_text_text.Text, { variant: "paragraph-100-medium", style: { visibility: endIndex < totalDots ? "visible" : "hidden" }, children: [
+        "+",
+        endIndex < totalDots ? totalDots - endIndex : 0
+      ] }) })
+    ] });
+  };
+};
 ImageSlider.displayName = "ImageSlider";
 exports.ImageSlider = ImageSlider;

package/dist/components/card/card-carousel.d.ts

@@ -15,5 +15,6 @@ export interface ImageSliderProps {
     onClickNext?: () => void;
     onClickPrev?: () => void;
     onChangeVariant?: (variant: ImageSliderVariant) => void;
+    maxDotsToShow?: number;
 }
 export declare const ImageSlider: React.ForwardRefExoticComponent<ImageSliderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card/card-carousel.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React__default, { useState, useRef } from "react";
 import clsx from "clsx";
 import { s as styles, rootClassName } from "./card.js";
@@ -6,6 +6,7 @@ import { Carousel } from "../carousel/carousel-root.js";
 import { ColorDot } from "../color-dot/index.js";
 import { breakpointToNumber } from "../../utils/breakpointToNumber.js";
 import { teddyBreakpointMd } from "../../tokens/breakpoint/variables.js";
+import { Text } from "../text/text.js";
 const ImageSlider = React__default.forwardRef(
   ({
     sliderRef,
@@ -16,13 +17,38 @@ const ImageSlider = React__default.forwardRef(
     onClick = () => void 0,
     onClickNext,
     onClickPrev,
-    onChangeVariant = () => void 0
+    onChangeVariant = () => void 0,
+    maxDotsToShow = void 0
   }, forwardRef) => {
     const [selectedSlide, setSelectedSlide] = useState((settings == null ? void 0 : settings.initialSlide) || 0);
     const rootCarouselClass = `${rootClassName}__carousel`;
     const classes = clsx([styles[rootCarouselClass]], className);
     const internalSliderRef = useRef(null);
     const innerSliderRef = sliderRef || internalSliderRef;
+    const appendDots = maxDotsToShow ? getAppendDotsMethod(maxDotsToShow, selectedSlide) : void 0;
+    const defaultDettings = {
+      beforeChange: (_currentSlide, nextSlide) => {
+        setSelectedSlide(nextSlide);
+        onChangeVariant(variants[nextSlide]);
+      },
+      customPaging: (index) => {
+        const variant = variants[index];
+        return /* @__PURE__ */ jsx(ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
+      },
+      swipe: false,
+      responsive: [
+        {
+          breakpoint: breakpointToNumber(teddyBreakpointMd),
+          settings: {
+            swipe: true
+          }
+        }
+      ],
+      ...settings
+    };
+    if (maxDotsToShow && appendDots) {
+      defaultDettings.appendDots = appendDots;
+    }
     return /* @__PURE__ */ jsx("div", { ref: forwardRef, className: classes, children: /* @__PURE__ */ jsx(
       Carousel,
       {
@@ -31,31 +57,41 @@ const ImageSlider = React__default.forwardRef(
         onClickNext,
         onClickPrev,
         onClick,
-        settings: {
-          beforeChange: (_currentSlide, nextSlide) => {
-            setSelectedSlide(nextSlide);
-            onChangeVariant(variants[nextSlide]);
-          },
-          customPaging: (index) => {
-            const variant = variants[index];
-            return /* @__PURE__ */ jsx(ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
-          },
-          swipe: false,
-          responsive: [
-            {
-              breakpoint: breakpointToNumber(teddyBreakpointMd),
-              settings: {
-                swipe: true
-              }
-            }
-          ],
-          ...settings
-        },
+        settings: defaultDettings,
         children
       }
     ) });
   }
 );
+const getAppendDotsMethod = (maxDotsToShow, selectedSlide) => {
+  return (dots) => {
+    const dotsArray = React__default.Children.toArray(dots);
+    const totalDots = dotsArray.length;
+    if (totalDots <= maxDotsToShow) {
+      return /* @__PURE__ */ jsx("ul", { children: dotsArray });
+    }
+    let startIndex = 0;
+    let endIndex = maxDotsToShow;
+    const halfMaxDots = Math.floor(maxDotsToShow / 2);
+    if (selectedSlide >= halfMaxDots) {
+      startIndex = selectedSlide - halfMaxDots;
+      endIndex = startIndex + maxDotsToShow;
+      if (endIndex > totalDots) {
+        endIndex = totalDots;
+        startIndex = totalDots - maxDotsToShow;
+      }
+    }
+    const visibleDots = dotsArray.slice(startIndex, endIndex);
+    return /* @__PURE__ */ jsxs("ul", { children: [
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Text, { variant: "paragraph-100-medium", style: { visibility: startIndex > 0 ? "visible" : "hidden" }, children: "..." }) }),
+      visibleDots,
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Text, { variant: "paragraph-100-medium", style: { visibility: endIndex < totalDots ? "visible" : "hidden" }, children: [
+        "+",
+        endIndex < totalDots ? totalDots - endIndex : 0
+      ] }) })
+    ] });
+  };
+};
 ImageSlider.displayName = "ImageSlider";
 export {
   ImageSlider

package/dist/components/carousel/carousel-root.cjs

@@ -7,10 +7,10 @@ const Slider = require("react-slick");
 require("../../assets/sprite.c3af21af-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");
 const styles = {
-  "teddy-carousel": "_teddy-carousel_8pf7z_2",
-  "teddy-carousel__arrow": "_teddy-carousel__arrow_8pf7z_9",
-  "teddy-carousel__item": "_teddy-carousel__item_8pf7z_21",
-  "teddy-carousel--sm": "_teddy-carousel--sm_8pf7z_99"
+  "teddy-carousel": "_teddy-carousel_xzfbe_2",
+  "teddy-carousel__arrow": "_teddy-carousel__arrow_xzfbe_9",
+  "teddy-carousel__item": "_teddy-carousel__item_xzfbe_21",
+  "teddy-carousel--sm": "_teddy-carousel--sm_xzfbe_102"
 };
 const rootClassName = "teddy-carousel";
 const CustomArrow = ({

package/dist/components/carousel/carousel-root.js

@@ -5,10 +5,10 @@ import Slider from "react-slick";
 import "../../assets/sprite.c3af21af-teddy.svg";
 import { Icon } from "../icon/icon.js";
 const styles = {
-  "teddy-carousel": "_teddy-carousel_8pf7z_2",
-  "teddy-carousel__arrow": "_teddy-carousel__arrow_8pf7z_9",
-  "teddy-carousel__item": "_teddy-carousel__item_8pf7z_21",
-  "teddy-carousel--sm": "_teddy-carousel--sm_8pf7z_99"
+  "teddy-carousel": "_teddy-carousel_xzfbe_2",
+  "teddy-carousel__arrow": "_teddy-carousel__arrow_xzfbe_9",
+  "teddy-carousel__item": "_teddy-carousel__item_xzfbe_21",
+  "teddy-carousel--sm": "_teddy-carousel--sm_xzfbe_102"
 };
 const rootClassName = "teddy-carousel";
 const CustomArrow = ({

package/dist/components/{subscription-card/subscription-card-avatar.cjs → dashboard-card/dashboard-card-avatar.cjs}

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const components_avatar_index = require("../avatar/index.cjs");
-const components_subscriptionCard_subscriptionCardRoot = require("./subscription-card-root.cjs");
+const components_dashboardCard_dashboardCardRoot = require("./dashboard-card-root.cjs");
 const getDefaultVariant = (variant) => {
   switch (variant) {
     case "white":
@@ -15,8 +15,8 @@ const getDefaultVariant = (variant) => {
 };
 const Avatar = React.forwardRef(
   ({ className, ...props }, forwardRef) => {
-    const classes = clsx([components_subscriptionCard_subscriptionCardRoot.styles[`${components_subscriptionCard_subscriptionCardRoot.rootClassName}__avatar`]], className);
-    const rootContext = React.useContext(components_subscriptionCard_subscriptionCardRoot.RootContext);
+    const classes = clsx([components_dashboardCard_dashboardCardRoot.styles[`${components_dashboardCard_dashboardCardRoot.rootClassName}__avatar`]], className);
+    const rootContext = React.useContext(components_dashboardCard_dashboardCardRoot.RootContext);
     const cardVariant = rootContext == null ? void 0 : rootContext.variant;
     const variant = props.variant ?? getDefaultVariant(cardVariant);
     return /* @__PURE__ */ jsxRuntime.jsx(components_avatar_index.Avatar, { ...props, variant, ref: forwardRef, className: classes });

package/dist/components/{subscription-card/subscription-card-avatar.js → dashboard-card/dashboard-card-avatar.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import { Avatar as Avatar$1 } from "../avatar/index.js";
-import { s as styles, rootClassName, RootContext } from "./subscription-card-root.js";
+import { s as styles, rootClassName, RootContext } from "./dashboard-card-root.js";
 const getDefaultVariant = (variant) => {
   switch (variant) {
     case "white":

package/dist/components/{subscription-card/subscription-card-content.cjs → dashboard-card/dashboard-card-content.cjs}

@@ -3,10 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
-const components_subscriptionCard_subscriptionCardRoot = require("./subscription-card-root.cjs");
+const components_dashboardCard_dashboardCardRoot = require("./dashboard-card-root.cjs");
 const Content = React.forwardRef(
   ({ className, ...props }, forwardRef) => {
-    const classes = clsx([components_subscriptionCard_subscriptionCardRoot.styles[`${components_subscriptionCard_subscriptionCardRoot.rootClassName}__content`]], className);
+    const classes = clsx([components_dashboardCard_dashboardCardRoot.styles[`${components_dashboardCard_dashboardCardRoot.rootClassName}__content`]], className);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, ref: forwardRef, className: classes });
   }
 );

package/dist/components/{subscription-card/subscription-card-content.js → dashboard-card/dashboard-card-content.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { s as styles, rootClassName } from "./subscription-card-root.js";
+import { s as styles, rootClassName } from "./dashboard-card-root.js";
 const Content = React__default.forwardRef(
   ({ className, ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}__content`]], className);

package/dist/components/{subscription-card/subscription-card-heading.cjs → dashboard-card/dashboard-card-heading.cjs}

@@ -4,10 +4,10 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const components_heading_heading = require("../heading/heading.cjs");
-const components_subscriptionCard_subscriptionCardRoot = require("./subscription-card-root.cjs");
+const components_dashboardCard_dashboardCardRoot = require("./dashboard-card-root.cjs");
 const Heading = React.forwardRef(
   ({ className, as = "h2", ...props }, forwardRef) => {
-    const classes = clsx([components_subscriptionCard_subscriptionCardRoot.styles[`${components_subscriptionCard_subscriptionCardRoot.rootClassName}__heading`]], className);
+    const classes = clsx([components_dashboardCard_dashboardCardRoot.styles[`${components_dashboardCard_dashboardCardRoot.rootClassName}__heading`]], className);
     const variant = props.variant ?? "subsection-100";
     return /* @__PURE__ */ jsxRuntime.jsx(
       components_heading_heading.Heading,

package/dist/components/{subscription-card/subscription-card-heading.js → dashboard-card/dashboard-card-heading.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import { Heading as Heading$1 } from "../heading/heading.js";
-import { s as styles, rootClassName } from "./subscription-card-root.js";
+import { s as styles, rootClassName } from "./dashboard-card-root.js";
 const Heading = React__default.forwardRef(
   ({ className, as = "h2", ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}__heading`]], className);

package/dist/components/dashboard-card/dashboard-card-illustration.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_dashboardCard_dashboardCardRoot = require("./dashboard-card-root.cjs");
+const Illustration = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([components_dashboardCard_dashboardCardRoot.styles[`${components_dashboardCard_dashboardCardRoot.rootClassName}__illustration`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, ref: forwardRef, className: classes });
+  }
+);
+Illustration.displayName = "Illustration";
+exports.Illustration = Illustration;

package/dist/components/dashboard-card/dashboard-card-illustration.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+export type IllustrationProps = React.ComponentPropsWithoutRef<'div'>;
+export declare const Illustration: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/dashboard-card/dashboard-card-illustration.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./dashboard-card-root.js";
+const Illustration = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__illustration`]], className);
+    return /* @__PURE__ */ jsx("div", { ...props, ref: forwardRef, className: classes });
+  }
+);
+Illustration.displayName = "Illustration";
+export {
+  Illustration
+};

package/dist/components/{subscription-card/subscription-card-root.cjs → dashboard-card/dashboard-card-root.cjs}

@@ -7,21 +7,22 @@ const reactSlot = require("@radix-ui/react-slot");
 require("../../assets/sprite.c3af21af-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");
 const styles = {
-  "teddy-subscription-card": "_teddy-subscription-card_77suf_3",
-  "teddy-subscription-card__content": "_teddy-subscription-card__content_77suf_18",
-  "teddy-subscription-card--white": "_teddy-subscription-card--white_77suf_21",
-  "teddy-subscription-card--disabled": "_teddy-subscription-card--disabled_77suf_25",
-  "teddy-subscription-card--border": "_teddy-subscription-card--border_77suf_34",
-  "teddy-subscription-card--grey": "_teddy-subscription-card--grey_77suf_46",
-  "teddy-subscription-card--purple-light": "_teddy-subscription-card--purple-light_77suf_59",
-  "teddy-subscription-card--beige-light": "_teddy-subscription-card--beige-light_77suf_72",
-  "teddy-subscription-card__layout": "_teddy-subscription-card__layout_77suf_85",
-  "teddy-subscription-card__avatar": "_teddy-subscription-card__avatar_77suf_94",
-  "teddy-subscription-card__heading": "_teddy-subscription-card__heading_77suf_97",
-  "teddy-subscription-card__subtitle": "_teddy-subscription-card__subtitle_77suf_100",
-  "teddy-subscription-card__chevron": "_teddy-subscription-card__chevron_77suf_103"
+  "teddy-dashboard-card": "_teddy-dashboard-card_hkvyi_3",
+  "teddy-dashboard-card__content": "_teddy-dashboard-card__content_hkvyi_18",
+  "teddy-dashboard-card--white": "_teddy-dashboard-card--white_hkvyi_21",
+  "teddy-dashboard-card--disabled": "_teddy-dashboard-card--disabled_hkvyi_25",
+  "teddy-dashboard-card--border": "_teddy-dashboard-card--border_hkvyi_34",
+  "teddy-dashboard-card--grey": "_teddy-dashboard-card--grey_hkvyi_46",
+  "teddy-dashboard-card--purple-light": "_teddy-dashboard-card--purple-light_hkvyi_59",
+  "teddy-dashboard-card--beige-light": "_teddy-dashboard-card--beige-light_hkvyi_72",
+  "teddy-dashboard-card__layout": "_teddy-dashboard-card__layout_hkvyi_85",
+  "teddy-dashboard-card__avatar": "_teddy-dashboard-card__avatar_hkvyi_95",
+  "teddy-dashboard-card__illustration": "_teddy-dashboard-card__illustration_hkvyi_98",
+  "teddy-dashboard-card__heading": "_teddy-dashboard-card__heading_hkvyi_101",
+  "teddy-dashboard-card__subtitle": "_teddy-dashboard-card__subtitle_hkvyi_105",
+  "teddy-dashboard-card__chevron": "_teddy-dashboard-card__chevron_hkvyi_109"
 };
-const rootClassName = "teddy-subscription-card";
+const rootClassName = "teddy-dashboard-card";
 const RootContext = React.createContext(void 0);
 const Root = React.forwardRef(
   ({ className, asChild, variant = "white", bordered = false, children, ...props }, forwardRef) => {

package/dist/components/{subscription-card/subscription-card-root.d.ts → dashboard-card/dashboard-card-root.d.ts}

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export declare const rootClassName = "teddy-subscription-card";
+export declare const rootClassName = "teddy-dashboard-card";
 type Variant = 'white' | 'grey' | 'purple-light' | 'beige-light';
 export declare const RootContext: React.Context<{
     variant?: Variant | undefined;

package/dist/components/{subscription-card/subscription-card-root.js → dashboard-card/dashboard-card-root.js}

@@ -5,21 +5,22 @@ import { Slottable, Slot } from "@radix-ui/react-slot";
 import "../../assets/sprite.c3af21af-teddy.svg";
 import { Icon } from "../icon/icon.js";
 const styles = {
-  "teddy-subscription-card": "_teddy-subscription-card_77suf_3",
-  "teddy-subscription-card__content": "_teddy-subscription-card__content_77suf_18",
-  "teddy-subscription-card--white": "_teddy-subscription-card--white_77suf_21",
-  "teddy-subscription-card--disabled": "_teddy-subscription-card--disabled_77suf_25",
-  "teddy-subscription-card--border": "_teddy-subscription-card--border_77suf_34",
-  "teddy-subscription-card--grey": "_teddy-subscription-card--grey_77suf_46",
-  "teddy-subscription-card--purple-light": "_teddy-subscription-card--purple-light_77suf_59",
-  "teddy-subscription-card--beige-light": "_teddy-subscription-card--beige-light_77suf_72",
-  "teddy-subscription-card__layout": "_teddy-subscription-card__layout_77suf_85",
-  "teddy-subscription-card__avatar": "_teddy-subscription-card__avatar_77suf_94",
-  "teddy-subscription-card__heading": "_teddy-subscription-card__heading_77suf_97",
-  "teddy-subscription-card__subtitle": "_teddy-subscription-card__subtitle_77suf_100",
-  "teddy-subscription-card__chevron": "_teddy-subscription-card__chevron_77suf_103"
+  "teddy-dashboard-card": "_teddy-dashboard-card_hkvyi_3",
+  "teddy-dashboard-card__content": "_teddy-dashboard-card__content_hkvyi_18",
+  "teddy-dashboard-card--white": "_teddy-dashboard-card--white_hkvyi_21",
+  "teddy-dashboard-card--disabled": "_teddy-dashboard-card--disabled_hkvyi_25",
+  "teddy-dashboard-card--border": "_teddy-dashboard-card--border_hkvyi_34",
+  "teddy-dashboard-card--grey": "_teddy-dashboard-card--grey_hkvyi_46",
+  "teddy-dashboard-card--purple-light": "_teddy-dashboard-card--purple-light_hkvyi_59",
+  "teddy-dashboard-card--beige-light": "_teddy-dashboard-card--beige-light_hkvyi_72",
+  "teddy-dashboard-card__layout": "_teddy-dashboard-card__layout_hkvyi_85",
+  "teddy-dashboard-card__avatar": "_teddy-dashboard-card__avatar_hkvyi_95",
+  "teddy-dashboard-card__illustration": "_teddy-dashboard-card__illustration_hkvyi_98",
+  "teddy-dashboard-card__heading": "_teddy-dashboard-card__heading_hkvyi_101",
+  "teddy-dashboard-card__subtitle": "_teddy-dashboard-card__subtitle_hkvyi_105",
+  "teddy-dashboard-card__chevron": "_teddy-dashboard-card__chevron_hkvyi_109"
 };
-const rootClassName = "teddy-subscription-card";
+const rootClassName = "teddy-dashboard-card";
 const RootContext = React__default.createContext(void 0);
 const Root = React__default.forwardRef(
   ({ className, asChild, variant = "white", bordered = false, children, ...props }, forwardRef) => {

package/dist/components/{subscription-card/subscription-card-subtitle.cjs → dashboard-card/dashboard-card-subtitle.cjs}

@@ -4,10 +4,10 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const components_text_text = require("../text/text.cjs");
-const components_subscriptionCard_subscriptionCardRoot = require("./subscription-card-root.cjs");
+const components_dashboardCard_dashboardCardRoot = require("./dashboard-card-root.cjs");
 const Subtitle = React.forwardRef(
   ({ className, ...props }, forwardRef) => {
-    const classes = clsx([components_subscriptionCard_subscriptionCardRoot.styles[`${components_subscriptionCard_subscriptionCardRoot.rootClassName}__subtitle`]], className);
+    const classes = clsx([components_dashboardCard_dashboardCardRoot.styles[`${components_dashboardCard_dashboardCardRoot.rootClassName}__subtitle`]], className);
     const variant = props.variant ?? "additional-100";
     return /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { faded: true, ...props, variant, ref: forwardRef, className: classes });
   }

package/dist/components/{subscription-card/subscription-card-subtitle.js → dashboard-card/dashboard-card-subtitle.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import { Text } from "../text/text.js";
-import { s as styles, rootClassName } from "./subscription-card-root.js";
+import { s as styles, rootClassName } from "./dashboard-card-root.js";
 const Subtitle = React__default.forwardRef(
   ({ className, ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}__subtitle`]], className);

package/dist/components/dashboard-card/index.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_dashboardCard_dashboardCardRoot = require("./dashboard-card-root.cjs");
+const components_dashboardCard_dashboardCardHeading = require("./dashboard-card-heading.cjs");
+const components_dashboardCard_dashboardCardSubtitle = require("./dashboard-card-subtitle.cjs");
+const components_dashboardCard_dashboardCardAvatar = require("./dashboard-card-avatar.cjs");
+const components_dashboardCard_dashboardCardContent = require("./dashboard-card-content.cjs");
+const components_dashboardCard_dashboardCardIllustration = require("./dashboard-card-illustration.cjs");
+const DashboardCard = components_dashboardCard_dashboardCardRoot.Root;
+DashboardCard.displayName = "DashboardCard";
+DashboardCard.Avatar = components_dashboardCard_dashboardCardAvatar.Avatar;
+DashboardCard.Avatar.displayName = "DashboardCard.Avatar";
+DashboardCard.Illustration = components_dashboardCard_dashboardCardIllustration.Illustration;
+DashboardCard.Illustration.displayName = "DashboardCard.Illustration";
+DashboardCard.Heading = components_dashboardCard_dashboardCardHeading.Heading;
+DashboardCard.Heading.displayName = "DashboardCard.Heading";
+DashboardCard.Subtitle = components_dashboardCard_dashboardCardSubtitle.Subtitle;
+DashboardCard.Subtitle.displayName = "DashboardCard.Subtitle";
+DashboardCard.Content = components_dashboardCard_dashboardCardContent.Content;
+DashboardCard.Content.displayName = "DashboardCard.Content";
+exports.DashboardCard = DashboardCard;

package/dist/components/dashboard-card/index.d.ts

@@ -0,0 +1,85 @@
+import { RootProps } from './dashboard-card-root';
+import { Heading, HeadingProps } from './dashboard-card-heading';
+import { Subtitle, SubtitleProps } from './dashboard-card-subtitle';
+import { Avatar, AvatarProps } from './dashboard-card-avatar';
+import { Content, ContentProps } from './dashboard-card-content';
+import { Illustration, IllustrationProps } from './dashboard-card-illustration';
+
+export type DashboardCardProps = {
+    Root: RootProps;
+    Avatar: AvatarProps;
+    Heading: HeadingProps;
+    Subtitle: SubtitleProps;
+    Content: ContentProps;
+    Illustration: IllustrationProps;
+};
+/**
+ * Dashboard card is used as a navigation anchor from MinSide homepage to other pages.
+ * The dashboard card by default is an anchor element, but it can be used as a button as well.
+ * Use the `asChild` prop to render it as a button. Button onClick event gives you an opportunity
+ * to handle your custom logic before the navigation happens. When you need just to navigate,
+ * prefer using default - anchor.
+ *
+ * @component
+ *
+ * @example
+ *  <DashboardCard>
+ *    <DashboardCard.Avatar/>
+ *    <DashboardCard.Heading/>
+ *    <DashboardCard.Subtitle/>
+ *    <DashboardCard.Content/>
+ *  </DashboardCard>
+ */
+declare const DashboardCard: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean | undefined;
+    variant?: ("grey" | "white" | "purple-light" | "beige-light") | undefined;
+    bordered?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & import('react').RefAttributes<HTMLAnchorElement>> & {
+    /**
+     * Avatar component for the DashboardCard.
+     *
+     * @component
+     *
+     * @example
+     * <DashboardCard.Avatar/>
+     */
+    Avatar: typeof Avatar;
+    /**
+     * Illustration component for the DashboardCard.
+     *
+     * @component
+     *
+     * @example
+     * <DashboardCard.Illustration/>
+     */
+    Illustration: typeof Illustration;
+    /**
+     * Heading component for the DashboardCard.
+     *
+     * @component
+     *
+     * @example
+     * <DashboardCard.Heading/>
+     */
+    Heading: typeof Heading;
+    /**
+     * Subtitle component for the DashboardCard.
+     *
+     * @component
+     *
+     * @example
+     * <DashboardCard.Subtitle/>
+     */
+    Subtitle: typeof Subtitle;
+    /**
+     * Content component for the DashboardCard.
+     *
+     * @component
+     *
+     * @example
+     * <DashboardCard.Content/>
+     */
+    Content: typeof Content;
+};
+export { DashboardCard };

package/dist/components/dashboard-card/index.js

@@ -0,0 +1,21 @@
+import { Root } from "./dashboard-card-root.js";
+import { Heading } from "./dashboard-card-heading.js";
+import { Subtitle } from "./dashboard-card-subtitle.js";
+import { Avatar } from "./dashboard-card-avatar.js";
+import { Content } from "./dashboard-card-content.js";
+import { Illustration } from "./dashboard-card-illustration.js";
+const DashboardCard = Root;
+DashboardCard.displayName = "DashboardCard";
+DashboardCard.Avatar = Avatar;
+DashboardCard.Avatar.displayName = "DashboardCard.Avatar";
+DashboardCard.Illustration = Illustration;
+DashboardCard.Illustration.displayName = "DashboardCard.Illustration";
+DashboardCard.Heading = Heading;
+DashboardCard.Heading.displayName = "DashboardCard.Heading";
+DashboardCard.Subtitle = Subtitle;
+DashboardCard.Subtitle.displayName = "DashboardCard.Subtitle";
+DashboardCard.Content = Content;
+DashboardCard.Content.displayName = "DashboardCard.Content";
+export {
+  DashboardCard
+};