@telia/teddy 0.6.1 → 0.6.3

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.d.ts → dashboard-card/dashboard-card-content.d.ts}

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

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/dashboard-card/dashboard-card-footer.cjs

@@ -0,0 +1,11 @@
+"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 Footer = React.forwardRef(({ className, ...props }, forwardRef) => {
+  const classes = clsx([components_dashboardCard_dashboardCardRoot.styles[`${components_dashboardCard_dashboardCardRoot.rootClassName}__footer`]], className);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, ref: forwardRef, className: classes });
+});
+exports.Footer = Footer;

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

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

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

@@ -0,0 +1,11 @@
+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 Footer = React__default.forwardRef(({ className, ...props }, forwardRef) => {
+  const classes = clsx([styles[`${rootClassName}__footer`]], className);
+  return /* @__PURE__ */ jsx("div", { ...props, ref: forwardRef, className: classes });
+});
+export {
+  Footer
+};

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,23 @@ 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_hpo7d_3",
+  "teddy-dashboard-card__content": "_teddy-dashboard-card__content_hpo7d_18",
+  "teddy-dashboard-card__footer": "_teddy-dashboard-card__footer_hpo7d_19",
+  "teddy-dashboard-card--white": "_teddy-dashboard-card--white_hpo7d_22",
+  "teddy-dashboard-card--disabled": "_teddy-dashboard-card--disabled_hpo7d_26",
+  "teddy-dashboard-card--border": "_teddy-dashboard-card--border_hpo7d_35",
+  "teddy-dashboard-card--grey": "_teddy-dashboard-card--grey_hpo7d_47",
+  "teddy-dashboard-card--purple-light": "_teddy-dashboard-card--purple-light_hpo7d_60",
+  "teddy-dashboard-card--beige-light": "_teddy-dashboard-card--beige-light_hpo7d_73",
+  "teddy-dashboard-card__layout": "_teddy-dashboard-card__layout_hpo7d_86",
+  "teddy-dashboard-card__avatar": "_teddy-dashboard-card__avatar_hpo7d_96",
+  "teddy-dashboard-card__illustration": "_teddy-dashboard-card__illustration_hpo7d_99",
+  "teddy-dashboard-card__heading": "_teddy-dashboard-card__heading_hpo7d_102",
+  "teddy-dashboard-card__subtitle": "_teddy-dashboard-card__subtitle_hpo7d_106",
+  "teddy-dashboard-card__chevron": "_teddy-dashboard-card__chevron_hpo7d_110"
 };
-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,23 @@ 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_hpo7d_3",
+  "teddy-dashboard-card__content": "_teddy-dashboard-card__content_hpo7d_18",
+  "teddy-dashboard-card__footer": "_teddy-dashboard-card__footer_hpo7d_19",
+  "teddy-dashboard-card--white": "_teddy-dashboard-card--white_hpo7d_22",
+  "teddy-dashboard-card--disabled": "_teddy-dashboard-card--disabled_hpo7d_26",
+  "teddy-dashboard-card--border": "_teddy-dashboard-card--border_hpo7d_35",
+  "teddy-dashboard-card--grey": "_teddy-dashboard-card--grey_hpo7d_47",
+  "teddy-dashboard-card--purple-light": "_teddy-dashboard-card--purple-light_hpo7d_60",
+  "teddy-dashboard-card--beige-light": "_teddy-dashboard-card--beige-light_hpo7d_73",
+  "teddy-dashboard-card__layout": "_teddy-dashboard-card__layout_hpo7d_86",
+  "teddy-dashboard-card__avatar": "_teddy-dashboard-card__avatar_hpo7d_96",
+  "teddy-dashboard-card__illustration": "_teddy-dashboard-card__illustration_hpo7d_99",
+  "teddy-dashboard-card__heading": "_teddy-dashboard-card__heading_hpo7d_102",
+  "teddy-dashboard-card__subtitle": "_teddy-dashboard-card__subtitle_hpo7d_106",
+  "teddy-dashboard-card__chevron": "_teddy-dashboard-card__chevron_hpo7d_110"
 };
-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,24 @@
+"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 components_dashboardCard_dashboardCardFooter = require("./dashboard-card-footer.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";
+DashboardCard.Footer = components_dashboardCard_dashboardCardFooter.Footer;
+DashboardCard.Footer.displayName = "DashboardCard.Footer";
+exports.DashboardCard = DashboardCard;

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

@@ -0,0 +1,96 @@
+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';
+import { Footer, FooterProps } from './dashboard-card-footer';
+
+export type DashboardCardProps = {
+    Root: RootProps;
+    Avatar: AvatarProps;
+    Illustration: IllustrationProps;
+    Heading: HeadingProps;
+    Subtitle: SubtitleProps;
+    Content: ContentProps;
+    Footer: FooterProps;
+};
+/**
+ * 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;
+    /**
+     * Footer component for the DashboardCard.
+     *
+     * @component
+     *
+     * @example
+     * <DashboardCard.Footer/>
+     */
+    Footer: typeof Footer;
+};
+export { DashboardCard };

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

@@ -0,0 +1,24 @@
+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";
+import { Footer } from "./dashboard-card-footer.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";
+DashboardCard.Footer = Footer;
+DashboardCard.Footer.displayName = "DashboardCard.Footer";
+export {
+  DashboardCard
+};

package/dist/components/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const components_avatar_index = require("./avatar/index.cjs");
-const components_subscriptionCard_index = require("./subscription-card/index.cjs");
+const components_dashboardCard_index = require("./dashboard-card/index.cjs");
 const components_table_index = require("./table/index.cjs");
 const components_flipCard_index = require("./flip-card/index.cjs");
 const components_channelButton_index = require("./channel-button/index.cjs");
@@ -60,7 +60,7 @@ const components_slider_slider = require("./slider/slider.cjs");
 const sonner = require("sonner");
 const components_input_inputGroup = require("./input/input-group.cjs");
 exports.Avatar = components_avatar_index.Avatar;
-exports.SubscriptionCard = components_subscriptionCard_index.SubscriptionCard;
+exports.DashboardCard = components_dashboardCard_index.DashboardCard;
 exports.Table = components_table_index.Table;
 exports.FlipCard = components_flipCard_index.FlipCard;
 exports.ChannelButton = components_channelButton_index.ChannelButton;

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
 export * from './avatar';
-export * from './subscription-card';
+export * from './dashboard-card';
 export * from './table';
 export * from './flip-card';
 export * from './channel-button';

package/dist/components/index.js

@@ -1,5 +1,5 @@
 import { Avatar } from "./avatar/index.js";
-import { SubscriptionCard } from "./subscription-card/index.js";
+import { DashboardCard } from "./dashboard-card/index.js";
 import { Table } from "./table/index.js";
 import { FlipCard } from "./flip-card/index.js";
 import { ChannelButton } from "./channel-button/index.js";
@@ -76,6 +76,7 @@ export {
   ColorDot,
   Container,
   CounterBadge,
+  DashboardCard,
   DatePicker,
   Drawer,
   ExpandableCard,
@@ -107,7 +108,6 @@ export {
   Skeleton,
   Slider,
   Spinner,
-  SubscriptionCard,
   Table,
   Tabs,
   Text,

package/dist/components/modal/modal-close.cjs

@@ -4,7 +4,7 @@ require("react/jsx-runtime");
 require("react");
 require("@radix-ui/react-dialog");
 require("../avatar/index.cjs");
-require("../subscription-card/index.cjs");
+require("../dashboard-card/index.cjs");
 require("../table/index.cjs");
 require("../flip-card/index.cjs");
 require("../channel-button/index.cjs");

package/dist/components/modal/modal-close.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "@radix-ui/react-dialog";
 import "../avatar/index.js";
-import "../subscription-card/index.js";
+import "../dashboard-card/index.js";
 import "../table/index.js";
 import "../flip-card/index.js";
 import "../channel-button/index.js";

package/dist/components/navigation-menu/navigation-menu.cjs

@@ -13,7 +13,7 @@ require("@radix-ui/react-use-controllable-state");
 require("../../utils/generate-styling/index.cjs");
 require("../../tokens/motion/variables.cjs");
 require("../avatar/index.cjs");
-require("../subscription-card/index.cjs");
+require("../dashboard-card/index.cjs");
 require("../table/index.cjs");
 require("../flip-card/index.cjs");
 require("../channel-button/index.cjs");

package/dist/components/navigation-menu/navigation-menu.js

@@ -11,7 +11,7 @@ import "@radix-ui/react-use-controllable-state";
 import "../../utils/generate-styling/index.js";
 import "../../tokens/motion/variables.js";
 import "../avatar/index.js";
-import "../subscription-card/index.js";
+import "../dashboard-card/index.js";
 import "../table/index.js";
 import "../flip-card/index.js";
 import "../channel-button/index.js";

package/dist/components/radio-card-group/radio-card-group-content.cjs

@@ -5,7 +5,7 @@ require("clsx");
 require("react");
 require("./radio-card-group-root.cjs");
 require("../avatar/index.cjs");
-require("../subscription-card/index.cjs");
+require("../dashboard-card/index.cjs");
 require("../table/index.cjs");
 require("../flip-card/index.cjs");
 require("../channel-button/index.cjs");

package/dist/components/radio-card-group/radio-card-group-content.js

@@ -3,7 +3,7 @@ import "clsx";
 import "react";
 import "./radio-card-group-root.js";
 import "../avatar/index.js";
-import "../subscription-card/index.js";
+import "../dashboard-card/index.js";
 import "../table/index.js";
 import "../flip-card/index.js";
 import "../channel-button/index.js";

package/dist/components/radio-card-group/radio-card-group-item-title.cjs

@@ -13,7 +13,7 @@ const reactUseControllableState = require("@radix-ui/react-use-controllable-stat
 const utils_generateStyling_index = require("../../utils/generate-styling/index.cjs");
 const tokens_motion_variables = require("../../tokens/motion/variables.cjs");
 require("../avatar/index.cjs");
-require("../subscription-card/index.cjs");
+require("../dashboard-card/index.cjs");
 require("../table/index.cjs");
 require("../flip-card/index.cjs");
 require("../channel-button/index.cjs");

package/dist/components/radio-card-group/radio-card-group-item-title.js

@@ -11,7 +11,7 @@ import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { mergeStyles } from "../../utils/generate-styling/index.js";
 import { teddyMotionDuration300 } from "../../tokens/motion/variables.js";
 import "../avatar/index.js";
-import "../subscription-card/index.js";
+import "../dashboard-card/index.js";
 import "../table/index.js";
 import "../flip-card/index.js";
 import "../channel-button/index.js";

package/dist/components/radio-card-group/radio-card-group-item.cjs

@@ -6,7 +6,7 @@ require("react");
 require("./radio-card-group-root.cjs");
 require("@radix-ui/react-radio-group");
 require("../avatar/index.cjs");
-require("../subscription-card/index.cjs");
+require("../dashboard-card/index.cjs");
 require("../table/index.cjs");
 require("../flip-card/index.cjs");
 require("../channel-button/index.cjs");

package/dist/components/radio-card-group/radio-card-group-item.js

@@ -4,7 +4,7 @@ import "react";
 import "./radio-card-group-root.js";
 import "@radix-ui/react-radio-group";
 import "../avatar/index.js";
-import "../subscription-card/index.js";
+import "../dashboard-card/index.js";
 import "../table/index.js";
 import "../flip-card/index.js";
 import "../channel-button/index.js";

package/dist/main.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const components_avatar_index = require("./components/avatar/index.cjs");
-const components_subscriptionCard_index = require("./components/subscription-card/index.cjs");
+const components_dashboardCard_index = require("./components/dashboard-card/index.cjs");
 const components_table_index = require("./components/table/index.cjs");
 const components_flipCard_index = require("./components/flip-card/index.cjs");
 const components_channelButton_index = require("./components/channel-button/index.cjs");
@@ -67,7 +67,7 @@ const tokens_typography_variables = require("./tokens/typography/variables.cjs")
 const sonner = require("sonner");
 const components_input_inputGroup = require("./components/input/input-group.cjs");
 exports.Avatar = components_avatar_index.Avatar;
-exports.SubscriptionCard = components_subscriptionCard_index.SubscriptionCard;
+exports.DashboardCard = components_dashboardCard_index.DashboardCard;
 exports.Table = components_table_index.Table;
 exports.FlipCard = components_flipCard_index.FlipCard;
 exports.ChannelButton = components_channelButton_index.ChannelButton;

package/dist/main.js

@@ -1,5 +1,5 @@
 import { Avatar } from "./components/avatar/index.js";
-import { SubscriptionCard } from "./components/subscription-card/index.js";
+import { DashboardCard } from "./components/dashboard-card/index.js";
 import { Table } from "./components/table/index.js";
 import { FlipCard } from "./components/flip-card/index.js";
 import { ChannelButton } from "./components/channel-button/index.js";
@@ -83,6 +83,7 @@ export {
   ColorDot,
   Container,
   CounterBadge,
+  DashboardCard,
   DatePicker,
   Drawer,
   ExpandableCard,
@@ -114,7 +115,6 @@ export {
   Skeleton,
   Slider,
   Spinner,
-  SubscriptionCard,
   Table,
   Tabs,
   Text,

package/dist/style.css

@@ -148,9 +148,9 @@
 }
 ._teddy-avatar--green_e3370_30 {
   background-color: var(--teddy-color-green-50);
-}@layer heading, badge, flex, grid, subscription-card;
-@layer subscription-card {
-  ._teddy-subscription-card_77suf_3 {
+}@layer heading, badge, flex, grid, dashboard-card;
+@layer dashboard-card {
+  ._teddy-dashboard-card_hpo7d_3 {
     outline: none;
     background: none;
     border: none;
@@ -165,102 +165,126 @@
     border: var(--teddy-border-width-xs) solid transparent;
     border-radius: var(--teddy-border-radius-md);
   }
-  ._teddy-subscription-card_77suf_3 ._teddy-subscription-card__content_77suf_18 {
+  ._teddy-dashboard-card_hpo7d_3 ._teddy-dashboard-card__content_hpo7d_18,
+  ._teddy-dashboard-card_hpo7d_3 ._teddy-dashboard-card__footer_hpo7d_19 {
     margin-top: var(--teddy-spacing-150);
   }
-  ._teddy-subscription-card--white_77suf_21 {
+  ._teddy-dashboard-card--white_hpo7d_22 {
     background-color: var(--teddy-color-brand-white);
     color: var(--teddy-color-text-default);
   }
-  ._teddy-subscription-card--white_77suf_21._teddy-subscription-card--disabled_77suf_25 {
+  ._teddy-dashboard-card--white_hpo7d_22._teddy-dashboard-card--disabled_hpo7d_26 {
     background-color: var(--teddy-color-background-interactive-disabled);
   }
-  ._teddy-subscription-card--white_77suf_21:hover:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
+  ._teddy-dashboard-card--white_hpo7d_22:hover:not(:has(._teddy-dashboard-card--disabled_hpo7d_26)) {
     background-color: var(--teddy-color-purple-50);
   }
-  ._teddy-subscription-card--white_77suf_21:active:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
+  ._teddy-dashboard-card--white_hpo7d_22:active:not(:has(._teddy-dashboard-card--disabled_hpo7d_26)) {
     background-color: var(--teddy-color-purple-100);
   }
-  ._teddy-subscription-card--white_77suf_21._teddy-subscription-card--border_77suf_34 {
+  ._teddy-dashboard-card--white_hpo7d_22._teddy-dashboard-card--border_hpo7d_35 {
     border-color: var(--teddy-color-transparent-black-300);
   }
-  ._teddy-subscription-card--white_77suf_21._teddy-subscription-card--border_77suf_34._teddy-subscription-card--disabled_77suf_25 {
+  ._teddy-dashboard-card--white_hpo7d_22._teddy-dashboard-card--border_hpo7d_35._teddy-dashboard-card--disabled_hpo7d_26 {
     border-color: var(--teddy-color-transparent-black-300);
   }
-  ._teddy-subscription-card--white_77suf_21._teddy-subscription-card--border_77suf_34:hover:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
+  ._teddy-dashboard-card--white_hpo7d_22._teddy-dashboard-card--border_hpo7d_35:hover:not(:has(._teddy-dashboard-card--disabled_hpo7d_26)) {
     border-color: var(--teddy-color-transparent-black-300);
   }
-  ._teddy-subscription-card--white_77suf_21._teddy-subscription-card--border_77suf_34:active:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
+  ._teddy-dashboard-card--white_hpo7d_22._teddy-dashboard-card--border_hpo7d_35:active:not(:has(._teddy-dashboard-card--disabled_hpo7d_26)) {
     border-color: var(--teddy-color-transparent-black-300);
   }
-  ._teddy-subscription-card--grey_77suf_46 {
+  ._teddy-dashboard-card--grey_hpo7d_47 {
     background-color: #f5f5fa;
     color: var(--teddy-color-text-default);
   }
-  ._teddy-subscription-card--grey_77suf_46._teddy-subscription-card--disabled_77suf_25 {
+  ._teddy-dashboard-card--grey_hpo7d_47._teddy-dashboard-card--disabled_hpo7d_26 {
     background-color: var(--teddy-color-background-interactive-disabled);
   }
-  ._teddy-subscription-card--grey_77suf_46:hover:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
+  ._teddy-dashboard-card--grey_hpo7d_47:hover:not(:has(._teddy-dashboard-card--disabled_hpo7d_26)) {
     background-color: var(--teddy-color-gray-100);
   }
-  ._teddy-subscription-card--grey_77suf_46:active:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
+  ._teddy-dashboard-card--grey_hpo7d_47:active:not(:has(._teddy-dashboard-card--disabled_hpo7d_26)) {
     background-color: var(--teddy-color-gray-200);
   }
-  ._teddy-subscription-card--purple-light_77suf_59 {
+  ._teddy-dashboard-card--purple-light_hpo7d_60 {
     background-color: var(--teddy-color-purple-50);
     color: var(--teddy-color-text-default);
   }
-  ._teddy-subscription-card--purple-light_77suf_59._teddy-subscription-card--disabled_77suf_25 {
+  ._teddy-dashboard-card--purple-light_hpo7d_60._teddy-dashboard-card--disabled_hpo7d_26 {
     background-color: var(--teddy-color-background-interactive-disabled);
   }
-  ._teddy-subscription-card--purple-light_77suf_59:hover:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
+  ._teddy-dashboard-card--purple-light_hpo7d_60:hover:not(:has(._teddy-dashboard-card--disabled_hpo7d_26)) {
     background-color: var(--teddy-color-purple-100);
   }
-  ._teddy-subscription-card--purple-light_77suf_59:active:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
+  ._teddy-dashboard-card--purple-light_hpo7d_60:active:not(:has(._teddy-dashboard-card--disabled_hpo7d_26)) {
     background-color: var(--teddy-color-purple-200);
   }
-  ._teddy-subscription-card--beige-light_77suf_72 {
+  ._teddy-dashboard-card--beige-light_hpo7d_73 {
     background-color: var(--teddy-color-beige-50);
     color: var(--teddy-color-text-default);
   }
-  ._teddy-subscription-card--beige-light_77suf_72._teddy-subscription-card--disabled_77suf_25 {
+  ._teddy-dashboard-card--beige-light_hpo7d_73._teddy-dashboard-card--disabled_hpo7d_26 {
     background-color: var(--teddy-color-background-interactive-disabled);
   }
-  ._teddy-subscription-card--beige-light_77suf_72:hover:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
+  ._teddy-dashboard-card--beige-light_hpo7d_73:hover:not(:has(._teddy-dashboard-card--disabled_hpo7d_26)) {
     background-color: var(--teddy-color-beige-100);
   }
-  ._teddy-subscription-card--beige-light_77suf_72:active:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
+  ._teddy-dashboard-card--beige-light_hpo7d_73:active:not(:has(._teddy-dashboard-card--disabled_hpo7d_26)) {
     background-color: var(--teddy-color-beige-200);
   }
-  ._teddy-subscription-card__layout_77suf_85 {
+  ._teddy-dashboard-card__layout_hpo7d_86 {
     display: grid;
     gap: 0 var(--teddy-spacing-150);
     grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto 1fr auto;
     justify-items: start;
     justify-content: stretch;
     align-items: center;
-    grid-template-areas: "avatar heading chevron" "avatar subtitle chevron" "content content content";
+    grid-template-areas: "media heading chevron" "media subtitle chevron" "content content content" "footer footer footer";
+  }
+  ._teddy-dashboard-card__layout_hpo7d_86 ._teddy-dashboard-card__avatar_hpo7d_96 {
+    grid-area: media;
   }
-  ._teddy-subscription-card__layout_77suf_85 ._teddy-subscription-card__avatar_77suf_94 {
-    grid-area: avatar;
+  ._teddy-dashboard-card__layout_hpo7d_86 ._teddy-dashboard-card__illustration_hpo7d_99 {
+    grid-area: media;
   }
-  ._teddy-subscription-card__layout_77suf_85 ._teddy-subscription-card__heading_77suf_97 {
+  ._teddy-dashboard-card__layout_hpo7d_86 ._teddy-dashboard-card__heading_hpo7d_102 {
     grid-area: heading;
+    align-self: end;
   }
-  ._teddy-subscription-card__layout_77suf_85 ._teddy-subscription-card__subtitle_77suf_100 {
+  ._teddy-dashboard-card__layout_hpo7d_86 ._teddy-dashboard-card__subtitle_hpo7d_106 {
     grid-area: subtitle;
+    align-self: start;
   }
-  ._teddy-subscription-card__layout_77suf_85 ._teddy-subscription-card__chevron_77suf_103 {
+  ._teddy-dashboard-card__layout_hpo7d_86 ._teddy-dashboard-card__chevron_hpo7d_110 {
     grid-area: chevron;
   }
-  ._teddy-subscription-card__layout_77suf_85 ._teddy-subscription-card__content_77suf_18 {
+  ._teddy-dashboard-card__layout_hpo7d_86 ._teddy-dashboard-card__content_hpo7d_18 {
     grid-area: content;
+    align-self: start;
+  }
+  ._teddy-dashboard-card__layout_hpo7d_86 ._teddy-dashboard-card__footer_hpo7d_19 {
+    grid-area: footer;
+    align-self: end;
+  }
+  ._teddy-dashboard-card__layout_hpo7d_86:not(:has(._teddy-dashboard-card__subtitle_hpo7d_106)) {
+    grid-template-areas: "media heading chevron" "media heading chevron" "content content content" "footer footer footer";
+  }
+  ._teddy-dashboard-card__layout_hpo7d_86:not(:has(._teddy-dashboard-card__subtitle_hpo7d_106)) ._teddy-dashboard-card__heading_hpo7d_102 {
+    align-self: center;
+  }
+  ._teddy-dashboard-card__illustration_hpo7d_99 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
   }
-  ._teddy-subscription-card_77suf_3:focus-visible {
+  ._teddy-dashboard-card_hpo7d_3:focus-visible {
     outline: solid var(--teddy-border-width-sm) var(--teddy-color-border-interactive-focus);
     outline-offset: var(--teddy-spacing-25);
   }
-  ._teddy-subscription-card--disabled_77suf_25 {
+  ._teddy-dashboard-card--disabled_hpo7d_26 {
     pointer-events: none;
   }
 }@layer heading {

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=9"
   },
   "private": false,
-  "version": "0.6.1",
+  "version": "0.6.3",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"

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

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const components_subscriptionCard_subscriptionCardRoot = require("./subscription-card-root.cjs");
-const components_subscriptionCard_subscriptionCardHeading = require("./subscription-card-heading.cjs");
-const components_subscriptionCard_subscriptionCardSubtitle = require("./subscription-card-subtitle.cjs");
-const components_subscriptionCard_subscriptionCardAvatar = require("./subscription-card-avatar.cjs");
-const components_subscriptionCard_subscriptionCardContent = require("./subscription-card-content.cjs");
-const SubscriptionCard = components_subscriptionCard_subscriptionCardRoot.Root;
-SubscriptionCard.displayName = "SubscriptionCard";
-SubscriptionCard.Avatar = components_subscriptionCard_subscriptionCardAvatar.Avatar;
-SubscriptionCard.Avatar.displayName = "SubscriptionCard.Avatar";
-SubscriptionCard.Heading = components_subscriptionCard_subscriptionCardHeading.Heading;
-SubscriptionCard.Heading.displayName = "SubscriptionCard.Heading";
-SubscriptionCard.Subtitle = components_subscriptionCard_subscriptionCardSubtitle.Subtitle;
-SubscriptionCard.Subtitle.displayName = "SubscriptionCard.Subtitle";
-SubscriptionCard.Content = components_subscriptionCard_subscriptionCardContent.Content;
-SubscriptionCard.Content.displayName = "SubscriptionCard.Content";
-exports.SubscriptionCard = SubscriptionCard;

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

@@ -1,74 +0,0 @@
-import { RootProps } from './subscription-card-root';
-import { Heading, HeadingProps } from './subscription-card-heading';
-import { Subtitle, SubtitleProps } from './subscription-card-subtitle';
-import { Avatar, AvatarProps } from './subscription-card-avatar';
-import { Content, ContentProps } from './subscription-card-content';
-
-export type SubscriptionCardProps = {
-    Root: RootProps;
-    Avatar: AvatarProps;
-    Heading: HeadingProps;
-    Subtitle: SubtitleProps;
-    Content: ContentProps;
-};
-/**
- * Subscription card is used as a navigation anchor from MinSide homepage to other pages.
- * The subscription 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
- *  <SubscriptionCard>
- *    <SubscriptionCard.Avatar/>
- *    <SubscriptionCard.Heading/>
- *    <SubscriptionCard.Subtitle/>
- *    <SubscriptionCard.Content/>
- *  </SubscriptionCard>
- */
-declare const SubscriptionCard: 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 SubscriptionCard.
-     *
-     * @component
-     *
-     * @example
-     * <SubscriptionCard.Avatar/>
-     */
-    Avatar: typeof Avatar;
-    /**
-     * Heading component for the SubscriptionCard.
-     *
-     * @component
-     *
-     * @example
-     * <SubscriptionCard.Heading/>
-     */
-    Heading: typeof Heading;
-    /**
-     * Subtitle component for the SubscriptionCard.
-     *
-     * @component
-     *
-     * @example
-     * <SubscriptionCard.Subtitle/>
-     */
-    Subtitle: typeof Subtitle;
-    /**
-     * Content component for the SubscriptionCard.
-     *
-     * @component
-     *
-     * @example
-     * <SubscriptionCard.Content/>
-     */
-    Content: typeof Content;
-};
-export { SubscriptionCard };

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

@@ -1,18 +0,0 @@
-import { Root } from "./subscription-card-root.js";
-import { Heading } from "./subscription-card-heading.js";
-import { Subtitle } from "./subscription-card-subtitle.js";
-import { Avatar } from "./subscription-card-avatar.js";
-import { Content } from "./subscription-card-content.js";
-const SubscriptionCard = Root;
-SubscriptionCard.displayName = "SubscriptionCard";
-SubscriptionCard.Avatar = Avatar;
-SubscriptionCard.Avatar.displayName = "SubscriptionCard.Avatar";
-SubscriptionCard.Heading = Heading;
-SubscriptionCard.Heading.displayName = "SubscriptionCard.Heading";
-SubscriptionCard.Subtitle = Subtitle;
-SubscriptionCard.Subtitle.displayName = "SubscriptionCard.Subtitle";
-SubscriptionCard.Content = Content;
-SubscriptionCard.Content.displayName = "SubscriptionCard.Content";
-export {
-  SubscriptionCard
-};