@telia/teddy 0.0.37 → 0.0.39

package/dist/components/card/card.cjs

@@ -3,49 +3,45 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
-const utils_composeRefs = require("../../utils/composeRefs.cjs");
 const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs");
-const components_box_box = require("../box/box.cjs");
-const components_heading_heading = require("../heading/heading.cjs");
-const components_button_button = require("../button/button.cjs");
-const components_link_link = require("../link/link.cjs");
-const tokens_spacing_variables = require("../../tokens/spacing/variables.cjs");
 const components_grid_grid = require("../grid/grid.cjs");
 const tokens_color_variables = require("../../tokens/color/variables.cjs");
 const styles = {
-  "teddy-card": "_teddy-card_aok47_3",
-  "teddy-card__slot": "_teddy-card__slot_aok47_13",
-  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_aok47_16",
-  "teddy-card__slot--center": "_teddy-card__slot--center_aok47_19",
-  "teddy-card--shadow": "_teddy-card--shadow_aok47_41",
-  "teddy-card__action": "_teddy-card__action_aok47_45",
-  "teddy-card__action--disabled": "_teddy-card__action--disabled_aok47_45",
-  "teddy-card--border": "_teddy-card--border_aok47_52",
-  "teddy-card--layout": "_teddy-card--layout_aok47_55",
-  "teddy-card__illustration": "_teddy-card__illustration_aok47_55",
-  "teddy-card__content": "_teddy-card__content_aok47_58",
-  "teddy-card__heading": "_teddy-card__heading_aok47_61",
-  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_aok47_67",
-  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_aok47_86",
-  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_aok47_98",
-  "teddy-card--rich-card": "_teddy-card--rich-card_aok47_110",
-  "teddy-card__line": "_teddy-card__line_aok47_128",
-  "teddy-card--purple-light": "_teddy-card--purple-light_aok47_132",
-  "teddy-card--purple-dark": "_teddy-card--purple-dark_aok47_146",
-  "teddy-card--white": "_teddy-card--white_aok47_165",
-  "teddy-card--gray": "_teddy-card--gray_aok47_179",
-  "teddy-card--beige": "_teddy-card--beige_aok47_193",
-  "teddy-card__image--as-background": "_teddy-card__image--as-background_aok47_207",
-  "teddy-card--background-image": "_teddy-card--background-image_aok47_213",
-  "teddy-card__inset": "_teddy-card__inset_aok47_218",
-  "teddy-card__inset--top": "_teddy-card__inset--top_aok47_221",
-  "teddy-card__inset--left": "_teddy-card__inset--left_aok47_224",
-  "teddy-card__inset--right": "_teddy-card__inset--right_aok47_227",
-  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_aok47_230"
+  "teddy-card": "_teddy-card_141ee_3",
+  "teddy-card__slot": "_teddy-card__slot_141ee_13",
+  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_141ee_16",
+  "teddy-card__slot--center": "_teddy-card__slot--center_141ee_19",
+  "teddy-card--shadow": "_teddy-card--shadow_141ee_41",
+  "teddy-card__action": "_teddy-card__action_141ee_45",
+  "teddy-card__action--disabled": "_teddy-card__action--disabled_141ee_45",
+  "teddy-card--border": "_teddy-card--border_141ee_52",
+  "teddy-card--layout": "_teddy-card--layout_141ee_55",
+  "teddy-card__illustration": "_teddy-card__illustration_141ee_55",
+  "teddy-card__content": "_teddy-card__content_141ee_58",
+  "teddy-card__heading": "_teddy-card__heading_141ee_61",
+  "teddy-card__footer": "_teddy-card__footer_141ee_67",
+  "teddy-card--default": "_teddy-card--default_141ee_70",
+  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_141ee_75",
+  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_141ee_94",
+  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_141ee_106",
+  "teddy-card--rich-card": "_teddy-card--rich-card_141ee_118",
+  "teddy-card__line": "_teddy-card__line_141ee_136",
+  "teddy-card--purple-light": "_teddy-card--purple-light_141ee_140",
+  "teddy-card--purple-dark": "_teddy-card--purple-dark_141ee_154",
+  "teddy-card--white": "_teddy-card--white_141ee_173",
+  "teddy-card--gray": "_teddy-card--gray_141ee_187",
+  "teddy-card--beige": "_teddy-card--beige_141ee_201",
+  "teddy-card__image--as-background": "_teddy-card__image--as-background_141ee_215",
+  "teddy-card--background-image": "_teddy-card--background-image_141ee_221",
+  "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_141ee_226",
+  "teddy-card__inset": "_teddy-card__inset_141ee_230",
+  "teddy-card__inset--top": "_teddy-card__inset--top_141ee_233",
+  "teddy-card__inset--left": "_teddy-card__inset--left_141ee_236",
+  "teddy-card__inset--right": "_teddy-card__inset--right_141ee_239",
+  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_141ee_242"
 };
 const rootClassName = "teddy-card";
 const actionElementIdentifier = `${rootClassName}__action`;
-const variantOptions = ["purple-light", "purple-dark", "gray", "white", "beige"];
 const RootContext = React.createContext(void 0);
 const Root = React.forwardRef(
   ({ className, children, shadow, backgroundImageSrc, imageGradient, layout, variant, bordered, ...props }, forwardRef) => {
@@ -98,138 +94,9 @@ const Root = React.forwardRef(
     ) });
   }
 );
-Root.displayName = "Card";
-const Heading = React.forwardRef(
-  ({ className, as = "h2", ...props }, forwardRef) => {
-    const classes = clsx([styles[`${rootClassName}__heading`]], className);
-    const variant = props.variant ?? "title-200";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      components_heading_heading.Heading,
-      {
-        ...props,
-        ...!props.asChild ? { as, asChild: false } : { as: void 0, asChild: true },
-        variant,
-        ref: forwardRef,
-        className: classes
-      }
-    );
-  }
-);
-Heading.displayName = "Card.Heading";
-const Content = React.forwardRef(({ className, ...props }, forwardRef) => {
-  const classes = clsx([styles[`${rootClassName}__content`]], className);
-  return /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ...props, ref: forwardRef, className: classes });
-});
-Content.displayName = "Card.Content";
-const Slot = React.forwardRef(({ className, align, ...props }, forwardRef) => {
-  const classes = clsx(
-    [
-      styles[`${rootClassName}__slot`],
-      {
-        [styles[`${rootClassName}__slot--center`]]: align === "top" || align === "bottom",
-        [styles[`${rootClassName}__slot--bottom`]]: align == null ? void 0 : align.includes("bottom")
-      }
-    ],
-    className
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    components_box_box.Box,
-    {
-      position: "absolute",
-      top: (align == null ? void 0 : align.includes("top")) ? "0" : void 0,
-      bottom: (align == null ? void 0 : align.includes("bottom")) ? "0" : void 0,
-      left: (align == null ? void 0 : align.includes("left")) ? "200" : (align == null ? void 0 : align.includes("right")) ? void 0 : "50%",
-      right: (align == null ? void 0 : align.includes("right")) ? "200" : void 0,
-      ...props,
-      ref: forwardRef,
-      className: classes
-    }
-  );
-});
-const insetOptions = [
-  "top",
-  "bottom",
-  "left",
-  "right",
-  "all",
-  "top-right-left",
-  "bottom-left-right",
-  "top-left",
-  "top-right",
-  "bottom-left",
-  "bottom-right",
-  "top-bottom",
-  "left-right"
-];
-const Illustration = React.forwardRef(
-  ({ className, children, ...props }, forwardRef) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const classes = clsx([styles[`${rootClassName}__illustration`]], className, [styles[`${rootClassName}__inset`]], {
-      [styles[`${rootClassName}__inset--top`]]: ((_a = props.inset) == null ? void 0 : _a.includes("top")) || ((_b = props.inset) == null ? void 0 : _b.includes("all")),
-      [styles[`${rootClassName}__inset--bottom`]]: ((_c = props.inset) == null ? void 0 : _c.includes("bottom")) || ((_d = props.inset) == null ? void 0 : _d.includes("all")),
-      [styles[`${rootClassName}__inset--left`]]: ((_e = props.inset) == null ? void 0 : _e.includes("left")) || ((_f = props.inset) == null ? void 0 : _f.includes("all")),
-      [styles[`${rootClassName}__inset--right`]]: ((_g = props.inset) == null ? void 0 : _g.includes("right")) || ((_h = props.inset) == null ? void 0 : _h.includes("all"))
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: classes, ref: forwardRef, children });
-  }
-);
-Illustration.displayName = "Card.Illustration";
-function getButtonVariant(variant) {
-  switch (variant) {
-    case "purple-dark":
-      return "primary-negative";
-    default:
-      return "primary";
-  }
-}
-const Button = React.forwardRef(
-  ({ className, iconOnly = false, ...props }, forwardRef) => {
-    const context = React.useContext(RootContext);
-    const classes = clsx(
-      [styles[`${rootClassName}__button`]],
-      styles[actionElementIdentifier],
-      {
-        [styles[`${actionElementIdentifier}--disabled`]]: props.disabled
-      },
-      className
-    );
-    const ref = utils_composeRefs.composeRefs(context == null ? void 0 : context.buttonRef, forwardRef);
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      components_button_button.Button,
-      {
-        ...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
-        ref,
-        variant: getButtonVariant(context == null ? void 0 : context.variant),
-        ...props,
-        className: classes
-      }
-    ) });
-  }
-);
-Button.displayName = "Card.Button";
-const Link = React.forwardRef(
-  ({ className, ...props }, forwardRef) => {
-    const context = React.useContext(RootContext);
-    const classes = clsx([styles[`${rootClassName}__link`]], styles[actionElementIdentifier], className);
-    const ref = utils_composeRefs.composeRefs(context == null ? void 0 : context.linkRef, forwardRef);
-    return /* @__PURE__ */ jsxRuntime.jsx(components_link_link.Link, { ...props, ref, className: classes });
-  }
-);
-Link.displayName = "Card.Link";
-const Line = React.forwardRef(({ className, ...props }, forwardRef) => {
-  const classes = clsx([styles[`${rootClassName}__line`]], className);
-  return /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { width: "100%", p: "0", m: `${tokens_spacing_variables.teddySpacing50} 0`, ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("hr", {}) });
-});
-const Card = Object.assign(Root, {
-  Root,
-  Heading,
-  Content,
-  Illustration,
-  Button,
-  Link,
-  Slot,
-  Line,
-  variantOptions,
-  insetOptions
-});
-exports.Card = Card;
+Root.displayName = "Root";
+exports.Root = Root;
+exports.RootContext = RootContext;
+exports.actionElementIdentifier = actionElementIdentifier;
+exports.rootClassName = rootClassName;
+exports.styles = styles;

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

@@ -1,18 +1,21 @@
 import { default as React } from 'react';
-import { Box } from '../box';
-import { Heading as PrimitiveHeading } from '../heading';
-import { Button as PrimitiveButton } from '../button';
-import { Link as PrimitiveLink } from '../link';
 import { Grid } from '../grid';
+import { Variant } from './utils';
 
-declare const variantOptions: readonly ["purple-light", "purple-dark", "gray", "white", "beige"];
-type Variant = (typeof variantOptions)[number];
-type Layout = 'navigation-vertical' | 'navigation-horizontal-small' | 'navigation-horizontal-large' | 'rich-card';
-type Gradient = 'light' | 'dark';
+export declare const rootClassName = "teddy-card";
+export declare const actionElementIdentifier = "teddy-card__action";
+export type Layout = 'navigation-vertical' | 'navigation-horizontal-small' | 'navigation-horizontal-large' | 'rich-card';
+type Gradient = 'light' | 'dark' | 'default';
+export declare const RootContext: React.Context<{
+    buttonRef: React.RefObject<HTMLButtonElement>;
+    linkRef: React.RefObject<HTMLAnchorElement>;
+    variant?: "beige" | "gray" | "white" | "purple-light" | "purple-dark" | undefined;
+    layout?: Layout | undefined;
+} | undefined>;
 /** -------------------------------------------------------------------------------------------------
  * Root
  * -----------------------------------------------------------------------------------------------*/
-type RootProps = React.ComponentPropsWithoutRef<typeof Grid> & {
+export type RootProps = React.ComponentPropsWithoutRef<typeof Grid> & {
     asChild?: boolean;
     variant?: Variant;
     bordered?: boolean;
@@ -21,93 +24,6 @@ type RootProps = React.ComponentPropsWithoutRef<typeof Grid> & {
     imageGradient?: Gradient;
     layout?: Layout;
 };
-/** -------------------------------------------------------------------------------------------------
- * Heading
- * -----------------------------------------------------------------------------------------------*/
-type HeadingProps = Partial<React.ComponentPropsWithoutRef<typeof PrimitiveHeading>>;
-/** -------------------------------------------------------------------------------------------------
- * Content
- * -----------------------------------------------------------------------------------------------*/
-type ContentProps = React.ComponentPropsWithoutRef<typeof Box>;
-/** -------------------------------------------------------------------------------------------------
- * Slot
- * -----------------------------------------------------------------------------------------------*/
-type SlotProps = React.ComponentPropsWithoutRef<typeof Box> & {
-    align?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-};
-/** -------------------------------------------------------------------------------------------------
- * Illustration
- * -----------------------------------------------------------------------------------------------*/
-declare const insetOptions: readonly ["top", "bottom", "left", "right", "all", "top-right-left", "bottom-left-right", "top-left", "top-right", "bottom-left", "bottom-right", "top-bottom", "left-right"];
-type IllustrationProps = React.ComponentPropsWithoutRef<'div'> & {
-    /** The inset allows make the image bleed out to the edges */
-    inset?: (typeof insetOptions)[number];
-};
-type ButtonProps = Omit<React.ComponentPropsWithoutRef<typeof PrimitiveButton>, 'variant'> & {
-    variant?: React.ComponentPropsWithoutRef<typeof PrimitiveButton>['variant'];
-};
-/** -------------------------------------------------------------------------------------------------
- * Link
- * -----------------------------------------------------------------------------------------------*/
-type LinkProps = React.ComponentPropsWithoutRef<typeof PrimitiveLink>;
-/** -------------------------------------------------------------------------------------------------
- * Line
- * -----------------------------------------------------------------------------------------------*/
-type LineProps = Omit<React.ComponentPropsWithoutRef<typeof Box>, 'asChild' | 'as' | 'children'>;
-declare const Card: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>> & {
-    Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
-    Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
-    Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
-    Illustration: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        /** The inset allows make the image bleed out to the edges */
-        inset?: "top" | "bottom" | "left" | "right" | "all" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
-        display?: import('../../utils/generate-styling').DisplayChildren | undefined;
-    } & {
-        asChild?: boolean | undefined;
-        loading?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
-        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
-    } & {
-        iconOnly: true;
-        "aria-label": string;
-    } & React.RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
-        display?: import('../../utils/generate-styling').DisplayChildren | undefined;
-    } & {
-        asChild?: boolean | undefined;
-        loading?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
-        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
-    } & {
-        iconOnly?: false | undefined;
-        "aria-label"?: string | undefined;
-    } & React.RefAttributes<HTMLButtonElement>, "ref">, "variant"> & {
-        variant?: React.ComponentPropsWithoutRef<typeof PrimitiveButton>['variant'];
-    } & React.RefAttributes<HTMLButtonElement>>;
-    Link: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-        asChild?: boolean | undefined;
-        disableVisited?: boolean | undefined;
-        ensureTargetArea?: boolean | undefined;
-        silent?: boolean | undefined;
-        variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
-    } & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-    Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLDivElement>>;
-    Line: React.ForwardRefExoticComponent<LineProps & React.RefAttributes<HTMLDivElement>>;
-    variantOptions: readonly ["purple-light", "purple-dark", "gray", "white", "beige"];
-    insetOptions: readonly ["top", "bottom", "left", "right", "all", "top-right-left", "bottom-left-right", "top-left", "top-right", "bottom-left", "bottom-right", "top-bottom", "left-right"];
-};
-type CardProps = {
-    Root: RootProps;
-    Heading: HeadingProps;
-    Content: ContentProps;
-    Button: ButtonProps;
-    Illustration: IllustrationProps;
-    Slot: SlotProps;
-    Link: LinkProps;
-    Line: LineProps;
-};
-export { Card };
-export type { CardProps };
+/** This component is used to render a card element. */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/card/card.js

@@ -1,49 +1,45 @@
-import { jsx, Fragment } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { composeRefs } from "../../utils/composeRefs.js";
 import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
-import { Box } from "../box/box.js";
-import { Heading as Heading$1 } from "../heading/heading.js";
-import { Button as Button$1 } from "../button/button.js";
-import { Link as Link$1 } from "../link/link.js";
-import { teddySpacing50 } from "../../tokens/spacing/variables.js";
 import { Grid } from "../grid/grid.js";
 import { teddyColorTransparentWhite850, teddyColorTransparentWhite800, teddyColorTransparentWhite100, teddyColorTransparentBlack600, teddyColorTransparentBlack200 } from "../../tokens/color/variables.js";
 const styles = {
-  "teddy-card": "_teddy-card_aok47_3",
-  "teddy-card__slot": "_teddy-card__slot_aok47_13",
-  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_aok47_16",
-  "teddy-card__slot--center": "_teddy-card__slot--center_aok47_19",
-  "teddy-card--shadow": "_teddy-card--shadow_aok47_41",
-  "teddy-card__action": "_teddy-card__action_aok47_45",
-  "teddy-card__action--disabled": "_teddy-card__action--disabled_aok47_45",
-  "teddy-card--border": "_teddy-card--border_aok47_52",
-  "teddy-card--layout": "_teddy-card--layout_aok47_55",
-  "teddy-card__illustration": "_teddy-card__illustration_aok47_55",
-  "teddy-card__content": "_teddy-card__content_aok47_58",
-  "teddy-card__heading": "_teddy-card__heading_aok47_61",
-  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_aok47_67",
-  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_aok47_86",
-  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_aok47_98",
-  "teddy-card--rich-card": "_teddy-card--rich-card_aok47_110",
-  "teddy-card__line": "_teddy-card__line_aok47_128",
-  "teddy-card--purple-light": "_teddy-card--purple-light_aok47_132",
-  "teddy-card--purple-dark": "_teddy-card--purple-dark_aok47_146",
-  "teddy-card--white": "_teddy-card--white_aok47_165",
-  "teddy-card--gray": "_teddy-card--gray_aok47_179",
-  "teddy-card--beige": "_teddy-card--beige_aok47_193",
-  "teddy-card__image--as-background": "_teddy-card__image--as-background_aok47_207",
-  "teddy-card--background-image": "_teddy-card--background-image_aok47_213",
-  "teddy-card__inset": "_teddy-card__inset_aok47_218",
-  "teddy-card__inset--top": "_teddy-card__inset--top_aok47_221",
-  "teddy-card__inset--left": "_teddy-card__inset--left_aok47_224",
-  "teddy-card__inset--right": "_teddy-card__inset--right_aok47_227",
-  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_aok47_230"
+  "teddy-card": "_teddy-card_141ee_3",
+  "teddy-card__slot": "_teddy-card__slot_141ee_13",
+  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_141ee_16",
+  "teddy-card__slot--center": "_teddy-card__slot--center_141ee_19",
+  "teddy-card--shadow": "_teddy-card--shadow_141ee_41",
+  "teddy-card__action": "_teddy-card__action_141ee_45",
+  "teddy-card__action--disabled": "_teddy-card__action--disabled_141ee_45",
+  "teddy-card--border": "_teddy-card--border_141ee_52",
+  "teddy-card--layout": "_teddy-card--layout_141ee_55",
+  "teddy-card__illustration": "_teddy-card__illustration_141ee_55",
+  "teddy-card__content": "_teddy-card__content_141ee_58",
+  "teddy-card__heading": "_teddy-card__heading_141ee_61",
+  "teddy-card__footer": "_teddy-card__footer_141ee_67",
+  "teddy-card--default": "_teddy-card--default_141ee_70",
+  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_141ee_75",
+  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_141ee_94",
+  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_141ee_106",
+  "teddy-card--rich-card": "_teddy-card--rich-card_141ee_118",
+  "teddy-card__line": "_teddy-card__line_141ee_136",
+  "teddy-card--purple-light": "_teddy-card--purple-light_141ee_140",
+  "teddy-card--purple-dark": "_teddy-card--purple-dark_141ee_154",
+  "teddy-card--white": "_teddy-card--white_141ee_173",
+  "teddy-card--gray": "_teddy-card--gray_141ee_187",
+  "teddy-card--beige": "_teddy-card--beige_141ee_201",
+  "teddy-card__image--as-background": "_teddy-card__image--as-background_141ee_215",
+  "teddy-card--background-image": "_teddy-card--background-image_141ee_221",
+  "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_141ee_226",
+  "teddy-card__inset": "_teddy-card__inset_141ee_230",
+  "teddy-card__inset--top": "_teddy-card__inset--top_141ee_233",
+  "teddy-card__inset--left": "_teddy-card__inset--left_141ee_236",
+  "teddy-card__inset--right": "_teddy-card__inset--right_141ee_239",
+  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_141ee_242"
 };
 const rootClassName = "teddy-card";
 const actionElementIdentifier = `${rootClassName}__action`;
-const variantOptions = ["purple-light", "purple-dark", "gray", "white", "beige"];
 const RootContext = React__default.createContext(void 0);
 const Root = React__default.forwardRef(
   ({ className, children, shadow, backgroundImageSrc, imageGradient, layout, variant, bordered, ...props }, forwardRef) => {
@@ -96,140 +92,11 @@ const Root = React__default.forwardRef(
     ) });
   }
 );
-Root.displayName = "Card";
-const Heading = React__default.forwardRef(
-  ({ className, as = "h2", ...props }, forwardRef) => {
-    const classes = clsx([styles[`${rootClassName}__heading`]], className);
-    const variant = props.variant ?? "title-200";
-    return /* @__PURE__ */ jsx(
-      Heading$1,
-      {
-        ...props,
-        ...!props.asChild ? { as, asChild: false } : { as: void 0, asChild: true },
-        variant,
-        ref: forwardRef,
-        className: classes
-      }
-    );
-  }
-);
-Heading.displayName = "Card.Heading";
-const Content = React__default.forwardRef(({ className, ...props }, forwardRef) => {
-  const classes = clsx([styles[`${rootClassName}__content`]], className);
-  return /* @__PURE__ */ jsx(Box, { ...props, ref: forwardRef, className: classes });
-});
-Content.displayName = "Card.Content";
-const Slot = React__default.forwardRef(({ className, align, ...props }, forwardRef) => {
-  const classes = clsx(
-    [
-      styles[`${rootClassName}__slot`],
-      {
-        [styles[`${rootClassName}__slot--center`]]: align === "top" || align === "bottom",
-        [styles[`${rootClassName}__slot--bottom`]]: align == null ? void 0 : align.includes("bottom")
-      }
-    ],
-    className
-  );
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      position: "absolute",
-      top: (align == null ? void 0 : align.includes("top")) ? "0" : void 0,
-      bottom: (align == null ? void 0 : align.includes("bottom")) ? "0" : void 0,
-      left: (align == null ? void 0 : align.includes("left")) ? "200" : (align == null ? void 0 : align.includes("right")) ? void 0 : "50%",
-      right: (align == null ? void 0 : align.includes("right")) ? "200" : void 0,
-      ...props,
-      ref: forwardRef,
-      className: classes
-    }
-  );
-});
-const insetOptions = [
-  "top",
-  "bottom",
-  "left",
-  "right",
-  "all",
-  "top-right-left",
-  "bottom-left-right",
-  "top-left",
-  "top-right",
-  "bottom-left",
-  "bottom-right",
-  "top-bottom",
-  "left-right"
-];
-const Illustration = React__default.forwardRef(
-  ({ className, children, ...props }, forwardRef) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const classes = clsx([styles[`${rootClassName}__illustration`]], className, [styles[`${rootClassName}__inset`]], {
-      [styles[`${rootClassName}__inset--top`]]: ((_a = props.inset) == null ? void 0 : _a.includes("top")) || ((_b = props.inset) == null ? void 0 : _b.includes("all")),
-      [styles[`${rootClassName}__inset--bottom`]]: ((_c = props.inset) == null ? void 0 : _c.includes("bottom")) || ((_d = props.inset) == null ? void 0 : _d.includes("all")),
-      [styles[`${rootClassName}__inset--left`]]: ((_e = props.inset) == null ? void 0 : _e.includes("left")) || ((_f = props.inset) == null ? void 0 : _f.includes("all")),
-      [styles[`${rootClassName}__inset--right`]]: ((_g = props.inset) == null ? void 0 : _g.includes("right")) || ((_h = props.inset) == null ? void 0 : _h.includes("all"))
-    });
-    return /* @__PURE__ */ jsx("div", { ...props, className: classes, ref: forwardRef, children });
-  }
-);
-Illustration.displayName = "Card.Illustration";
-function getButtonVariant(variant) {
-  switch (variant) {
-    case "purple-dark":
-      return "primary-negative";
-    default:
-      return "primary";
-  }
-}
-const Button = React__default.forwardRef(
-  ({ className, iconOnly = false, ...props }, forwardRef) => {
-    const context = React__default.useContext(RootContext);
-    const classes = clsx(
-      [styles[`${rootClassName}__button`]],
-      styles[actionElementIdentifier],
-      {
-        [styles[`${actionElementIdentifier}--disabled`]]: props.disabled
-      },
-      className
-    );
-    const ref = composeRefs(context == null ? void 0 : context.buttonRef, forwardRef);
-    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-      Button$1,
-      {
-        ...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
-        ref,
-        variant: getButtonVariant(context == null ? void 0 : context.variant),
-        ...props,
-        className: classes
-      }
-    ) });
-  }
-);
-Button.displayName = "Card.Button";
-const Link = React__default.forwardRef(
-  ({ className, ...props }, forwardRef) => {
-    const context = React__default.useContext(RootContext);
-    const classes = clsx([styles[`${rootClassName}__link`]], styles[actionElementIdentifier], className);
-    const ref = composeRefs(context == null ? void 0 : context.linkRef, forwardRef);
-    return /* @__PURE__ */ jsx(Link$1, { ...props, ref, className: classes });
-  }
-);
-Link.displayName = "Card.Link";
-const Line = React__default.forwardRef(({ className, ...props }, forwardRef) => {
-  const classes = clsx([styles[`${rootClassName}__line`]], className);
-  return /* @__PURE__ */ jsx(Box, { width: "100%", p: "0", m: `${teddySpacing50} 0`, ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsx("hr", {}) });
-});
-const Card = Object.assign(Root, {
-  Root,
-  Heading,
-  Content,
-  Illustration,
-  Button,
-  Link,
-  Slot,
-  Line,
-  variantOptions,
-  insetOptions
-});
+Root.displayName = "Root";
 export {
-  Card
+  Root,
+  RootContext,
+  actionElementIdentifier,
+  rootClassName,
+  styles as s
 };

package/dist/components/card/index.cjs

@@ -1,4 +1,31 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_card_cardHeading = require("./card-heading.cjs");
 const components_card_card = require("./card.cjs");
-exports.Card = components_card_card.Card;
+const components_card_cardButton = require("./card-button.cjs");
+const components_card_cardContent = require("./card-content.cjs");
+const components_card_cardIllustration = require("./card-illustration.cjs");
+const components_card_cardLine = require("./card-line.cjs");
+const components_card_cardLink = require("./card-link.cjs");
+const components_card_cardSlot = require("./card-slot.cjs");
+const components_card_cardFooter = require("./card-footer.cjs");
+components_card_card.Root.displayName = "Card";
+components_card_cardButton.Button.displayName = "Card.Button";
+components_card_cardContent.Content.displayName = "Card.Content";
+components_card_cardHeading.Heading.displayName = "Card.Heading";
+components_card_cardIllustration.Illustration.displayName = "Card.Illustration";
+components_card_cardLine.Line.displayName = "Card.Line";
+components_card_cardLink.Link.displayName = "Card.Link";
+components_card_cardSlot.Slot.displayName = "Card.Slot";
+components_card_cardFooter.Footer.displayName = "Card.Footer";
+const Card = Object.assign(components_card_card.Root, {
+  Heading: components_card_cardHeading.Heading,
+  Button: components_card_cardButton.Button,
+  Content: components_card_cardContent.Content,
+  Illustration: components_card_cardIllustration.Illustration,
+  Line: components_card_cardLine.Line,
+  Link: components_card_cardLink.Link,
+  Slot: components_card_cardSlot.Slot,
+  Footer: components_card_cardFooter.Footer
+});
+exports.Card = Card;