@telia/teddy 0.0.64 → 0.0.66

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

@@ -0,0 +1,34 @@
+"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_card_card = require("./card.cjs");
+require("../badge/badge.cjs");
+const components_badge_alertBadge = require("../badge/alert-badge.cjs");
+require("../badge/counter-badge.cjs");
+const components_text_text = require("../text/text.cjs");
+const components_flex_flex = require("../flex/flex.cjs");
+const components_card_cardLine = require("./card-line.cjs");
+const components_box_box = require("../box/box.cjs");
+const Availability = React.forwardRef(
+  ({ className, variant = "success", statusText, ...props }, forwardRef) => {
+    const rootAvailabilityClass = `${components_card_card.rootClassName}__availability`;
+    const classes = clsx(
+      [components_card_card.styles[rootAvailabilityClass]],
+      {
+        [components_card_card.styles[`${rootAvailabilityClass}--${variant}`]]: true
+      },
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(components_box_box.Box, { className: classes, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components_card_cardLine.Line, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { ref: forwardRef, direction: "row", justify: "center", align: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: components_card_card.styles[`${rootAvailabilityClass}--badge`], children: /* @__PURE__ */ jsxRuntime.jsx(components_badge_alertBadge.AlertBadge, { variant, ...props }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { children: statusText })
+      ] })
+    ] });
+  }
+);
+Availability.displayName = "Availability";
+exports.Availability = Availability;

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { AlertBadge as PrimitiveAlertBadge } from '../badge';
+
+export type AvailabilityProps = Partial<React.ComponentPropsWithoutRef<typeof PrimitiveAlertBadge>> & {
+    statusText: string;
+};
+/** The stock status for the product */
+export declare const Availability: React.ForwardRefExoticComponent<Partial<Omit<import('../badge').AlertBadgeProps & React.RefAttributes<HTMLSpanElement>, "ref">> & {
+    statusText: string;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./card.js";
+import "../badge/badge.js";
+import { AlertBadge } from "../badge/alert-badge.js";
+import "../badge/counter-badge.js";
+import { Text } from "../text/text.js";
+import { Flex } from "../flex/flex.js";
+import { Line } from "./card-line.js";
+import { Box } from "../box/box.js";
+const Availability = React__default.forwardRef(
+  ({ className, variant = "success", statusText, ...props }, forwardRef) => {
+    const rootAvailabilityClass = `${rootClassName}__availability`;
+    const classes = clsx(
+      [styles[rootAvailabilityClass]],
+      {
+        [styles[`${rootAvailabilityClass}--${variant}`]]: true
+      },
+      className
+    );
+    return /* @__PURE__ */ jsxs(Box, { className: classes, children: [
+      /* @__PURE__ */ jsx(Line, {}),
+      /* @__PURE__ */ jsxs(Flex, { ref: forwardRef, direction: "row", justify: "center", align: "center", children: [
+        /* @__PURE__ */ jsx("div", { className: styles[`${rootAvailabilityClass}--badge`], children: /* @__PURE__ */ jsx(AlertBadge, { variant, ...props }) }),
+        /* @__PURE__ */ jsx(Text, { children: statusText })
+      ] })
+    ] });
+  }
+);
+Availability.displayName = "Availability";
+export {
+  Availability
+};

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

@@ -6,6 +6,8 @@ const clsx = require("clsx");
 const components_card_card = require("./card.cjs");
 const utils_composeRefs = require("../../utils/composeRefs.cjs");
 const components_button_button = require("../button/button.cjs");
+const components_flex_flex = require("../flex/flex.cjs");
+const components_text_text = require("../text/text.cjs");
 function getButtonVariant(variant) {
   switch (variant) {
     case "purple-dark":
@@ -15,8 +17,9 @@ function getButtonVariant(variant) {
   }
 }
 const Button = React.forwardRef(
-  ({ className, iconOnly, ...props }, forwardRef) => {
+  ({ className, iconOnly, disclaimer, ...props }, forwardRef) => {
     const context = React.useContext(components_card_card.RootContext);
+    const wrapperClasses = clsx([components_card_card.styles[`${components_card_card.actionElementIdentifier}-wrapper`]]);
     const classes = clsx(
       [components_card_card.styles[`${components_card_card.rootClassName}__button`]],
       components_card_card.styles[components_card_card.actionElementIdentifier],
@@ -26,16 +29,19 @@ const Button = React.forwardRef(
       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
-      }
-    ) });
+    return /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { mb: "200", className: wrapperClasses, children: [
+      disclaimer && /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { mr: "100", variant: "additional-100", children: disclaimer }),
+      /* @__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 = "Button";

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

@@ -1,9 +1,11 @@
 import { default as React } from 'react';
 import { ButtonProps as PrimitiveButtonProps } from '../button';
 
-export type ButtonProps = PrimitiveButtonProps;
+export type ButtonProps = PrimitiveButtonProps & {
+    disclaimer?: string;
+};
 /**
  * The button element is used when you want a trigger in the card
  * When this card button element is used, the entire card is clickable
  */
-export declare const Button: React.ForwardRefExoticComponent<PrimitiveButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,9 +1,11 @@
-import { jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { RootContext, s as styles, rootClassName, actionElementIdentifier } from "./card.js";
+import { RootContext, s as styles, actionElementIdentifier, rootClassName } from "./card.js";
 import { composeRefs } from "../../utils/composeRefs.js";
 import { Button as Button$1 } from "../button/button.js";
+import { Flex } from "../flex/flex.js";
+import { Text } from "../text/text.js";
 function getButtonVariant(variant) {
   switch (variant) {
     case "purple-dark":
@@ -13,8 +15,9 @@ function getButtonVariant(variant) {
   }
 }
 const Button = React__default.forwardRef(
-  ({ className, iconOnly, ...props }, forwardRef) => {
+  ({ className, iconOnly, disclaimer, ...props }, forwardRef) => {
     const context = React__default.useContext(RootContext);
+    const wrapperClasses = clsx([styles[`${actionElementIdentifier}-wrapper`]]);
     const classes = clsx(
       [styles[`${rootClassName}__button`]],
       styles[actionElementIdentifier],
@@ -24,16 +27,19 @@ const Button = React__default.forwardRef(
       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
-      }
-    ) });
+    return /* @__PURE__ */ jsxs(Flex, { mb: "200", className: wrapperClasses, children: [
+      disclaimer && /* @__PURE__ */ jsx(Text, { mr: "100", variant: "additional-100", children: disclaimer }),
+      /* @__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 = "Button";

package/dist/components/card/card-color-dots.cjs

@@ -0,0 +1,18 @@
+"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_card_card = require("./card.cjs");
+const components_flex_flex = require("../flex/flex.cjs");
+const components_colorDot_index = require("../color-dot/index.cjs");
+const components_box_box = require("../box/box.cjs");
+const ColorDots = React.forwardRef(
+  ({ className, colors, keyPrefix }, forwardRef) => {
+    const rootColorDotsClass = `${components_card_card.rootClassName}__color-dots`;
+    const classes = clsx([components_card_card.styles[rootColorDotsClass]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { mb: "200", ref: forwardRef, direction: "row", justify: "flex-start", align: "center", className: classes, children: colors.map((color) => /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { mr: "150", children: /* @__PURE__ */ jsxRuntime.jsx(components_colorDot_index.ColorDot, { color, size: "xs", bordered: true }) }, `teddy-card-color-dot-${keyPrefix}-${color}`)) });
+  }
+);
+ColorDots.displayName = "ColorDots";
+exports.ColorDots = ColorDots;

package/dist/components/card/card-color-dots.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+export type ColorDotsProps = {
+    colors: string[];
+    className?: string;
+    keyPrefix?: string;
+};
+/** The stock status for the product */
+export declare const ColorDots: React.ForwardRefExoticComponent<ColorDotsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card/card-color-dots.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./card.js";
+import { Flex } from "../flex/flex.js";
+import { ColorDot } from "../color-dot/index.js";
+import { Box } from "../box/box.js";
+const ColorDots = React__default.forwardRef(
+  ({ className, colors, keyPrefix }, forwardRef) => {
+    const rootColorDotsClass = `${rootClassName}__color-dots`;
+    const classes = clsx([styles[rootColorDotsClass]], className);
+    return /* @__PURE__ */ jsx(Flex, { mb: "200", ref: forwardRef, direction: "row", justify: "flex-start", align: "center", className: classes, children: colors.map((color) => /* @__PURE__ */ jsx(Box, { mr: "150", children: /* @__PURE__ */ jsx(ColorDot, { color, size: "xs", bordered: true }) }, `teddy-card-color-dot-${keyPrefix}-${color}`)) });
+  }
+);
+ColorDots.displayName = "ColorDots";
+export {
+  ColorDots
+};

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

@@ -8,7 +8,7 @@ const components_box_box = require("../box/box.cjs");
 const Content = React.forwardRef(
   ({ className, ...props }, forwardRef) => {
     const classes = clsx([components_card_card.styles[`${components_card_card.rootClassName}__content`]], className);
-    return /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ...props, ref: forwardRef, className: classes });
+    return /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { mb: "200", ...props, ref: forwardRef, className: classes });
   }
 );
 Content.displayName = "Content";

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

@@ -6,7 +6,7 @@ import { Box } from "../box/box.js";
 const Content = React__default.forwardRef(
   ({ className, ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}__content`]], className);
-    return /* @__PURE__ */ jsx(Box, { ...props, ref: forwardRef, className: classes });
+    return /* @__PURE__ */ jsx(Box, { mb: "200", ...props, ref: forwardRef, className: classes });
   }
 );
 Content.displayName = "Content";

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

@@ -0,0 +1,16 @@
+"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_card_card = require("./card.cjs");
+const components_text_text = require("../text/text.cjs");
+const Description = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([components_card_card.styles[`${components_card_card.rootClassName}__description`]], className);
+    const variant = props.variant ?? "paragraph-100";
+    return /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { ...props, variant, ref: forwardRef, className: classes });
+  }
+);
+Description.displayName = "Description";
+exports.Description = Description;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { Text as PrimitiveText } from '../text';
+
+export type DescriptionProps = Partial<React.ComponentPropsWithoutRef<typeof PrimitiveText>>;
+/** The Description for the card */
+export declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./card.js";
+import { Text } from "../text/text.js";
+const Description = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__description`]], className);
+    const variant = props.variant ?? "paragraph-100";
+    return /* @__PURE__ */ jsx(Text, { ...props, variant, ref: forwardRef, className: classes });
+  }
+);
+Description.displayName = "Description";
+export {
+  Description
+};

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

@@ -3,11 +3,21 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
-const components_card_card = require("./card.cjs");
 const components_box_box = require("../box/box.cjs");
-const tokens_spacing_variables = require("../../tokens/spacing/variables.cjs");
+const components_card_card = require("./card.cjs");
 const Line = React.forwardRef(({ className, ...props }, forwardRef) => {
-  const classes = clsx([components_card_card.styles[`${components_card_card.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 context = React.useContext(components_card_card.RootContext);
+  const layout = context == null ? void 0 : context.layout;
+  const classes = clsx(
+    [components_card_card.styles[`${components_card_card.rootClassName}__line`]],
+    {
+      [components_card_card.styles[`${components_card_card.rootClassName}__inset`]]: layout === "product",
+      [components_card_card.styles[`${components_card_card.rootClassName}__inset--left`]]: layout === "product",
+      [components_card_card.styles[`${components_card_card.rootClassName}__inset--right`]]: layout === "product"
+    },
+    className
+  );
+  const width = layout === "product" ? "calc(100% + 2*var(--teddy-spacing-250)" : "100%";
+  return /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { width, mt: "50", mb: "50", p: "0", ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("hr", {}) });
 });
 exports.Line = Line;

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

@@ -1,12 +1,22 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { s as styles, rootClassName } from "./card.js";
 import { Box } from "../box/box.js";
-import { teddySpacing50 } from "../../tokens/spacing/variables.js";
+import { RootContext, s as styles, rootClassName } from "./card.js";
 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 context = React__default.useContext(RootContext);
+  const layout = context == null ? void 0 : context.layout;
+  const classes = clsx(
+    [styles[`${rootClassName}__line`]],
+    {
+      [styles[`${rootClassName}__inset`]]: layout === "product",
+      [styles[`${rootClassName}__inset--left`]]: layout === "product",
+      [styles[`${rootClassName}__inset--right`]]: layout === "product"
+    },
+    className
+  );
+  const width = layout === "product" ? "calc(100% + 2*var(--teddy-spacing-250)" : "100%";
+  return /* @__PURE__ */ jsx(Box, { width, mt: "50", mb: "50", p: "0", ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsx("hr", {}) });
 });
 export {
   Line

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

@@ -10,8 +10,9 @@ const Link = React.forwardRef(
   ({ className, ...props }, forwardRef) => {
     const context = React.useContext(components_card_card.RootContext);
     const classes = clsx([components_card_card.styles[`${components_card_card.rootClassName}__link`]], components_card_card.styles[components_card_card.actionElementIdentifier], className);
+    const wrapperClasses = clsx([components_card_card.styles[`${components_card_card.actionElementIdentifier}-wrapper`]]);
     const ref = utils_composeRefs.composeRefs(context == null ? void 0 : context.linkRef, forwardRef);
-    return /* @__PURE__ */ jsxRuntime.jsx(components_link_link.Link, { ...props, ref, className: classes });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx(components_link_link.Link, { ...props, ref, className: classes }) });
   }
 );
 Link.displayName = "Link";

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

@@ -8,8 +8,9 @@ const Link = React__default.forwardRef(
   ({ className, ...props }, forwardRef) => {
     const context = React__default.useContext(RootContext);
     const classes = clsx([styles[`${rootClassName}__link`]], styles[actionElementIdentifier], className);
+    const wrapperClasses = clsx([styles[`${actionElementIdentifier}-wrapper`]]);
     const ref = composeRefs(context == null ? void 0 : context.linkRef, forwardRef);
-    return /* @__PURE__ */ jsx(Link$1, { ...props, ref, className: classes });
+    return /* @__PURE__ */ jsx("div", { className: wrapperClasses, children: /* @__PURE__ */ jsx(Link$1, { ...props, ref, className: classes }) });
   }
 );
 Link.displayName = "Link";

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

@@ -0,0 +1,16 @@
+"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_card_card = require("./card.cjs");
+const components_text_text = require("../text/text.cjs");
+const Overline = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([components_card_card.styles[`${components_card_card.rootClassName}__overline`]], className);
+    const variant = props.variant ?? "overline-100";
+    return /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { ...props, variant, ref: forwardRef, className: classes });
+  }
+);
+Overline.displayName = "Overline";
+exports.Overline = Overline;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { Text as PrimitiveText } from '../text';
+
+export type OverlineProps = Partial<React.ComponentPropsWithoutRef<typeof PrimitiveText>>;
+/** The Overline for the card */
+export declare const Overline: React.ForwardRefExoticComponent<OverlineProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./card.js";
+import { Text } from "../text/text.js";
+const Overline = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__overline`]], className);
+    const variant = props.variant ?? "overline-100";
+    return /* @__PURE__ */ jsx(Text, { ...props, variant, ref: forwardRef, className: classes });
+  }
+);
+Overline.displayName = "Overline";
+export {
+  Overline
+};

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

@@ -0,0 +1,34 @@
+"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_card_card = require("./card.cjs");
+const components_flex_flex = require("../flex/flex.cjs");
+const components_text_text = require("../text/text.cjs");
+const Price = React.forwardRef(
+  ({ className, pricePrefix, priceText }, forwardRef) => {
+    const rootColorDotsClass = `${components_card_card.rootClassName}__price`;
+    const classes = clsx([components_card_card.styles[rootColorDotsClass]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components_flex_flex.Flex,
+      {
+        flexGrow: "1",
+        mt: "auto",
+        mb: "100",
+        ref: forwardRef,
+        className: classes,
+        direction: "row",
+        align: "baseline",
+        asChild: true,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(components_text_text.Text, { variant: "paragraph-100", as: "p", children: [
+          pricePrefix,
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-100-bold", as: "span", ml: "50", children: priceText })
+        ] })
+      }
+    );
+  }
+);
+Price.displayName = "Price";
+exports.Price = Price;

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+export type PriceProps = {
+    pricePrefix: string;
+    priceText: string;
+    className?: string;
+};
+/** The stock status for the product */
+export declare const Price: React.ForwardRefExoticComponent<PriceProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./card.js";
+import { Flex } from "../flex/flex.js";
+import { Text } from "../text/text.js";
+const Price = React__default.forwardRef(
+  ({ className, pricePrefix, priceText }, forwardRef) => {
+    const rootColorDotsClass = `${rootClassName}__price`;
+    const classes = clsx([styles[rootColorDotsClass]], className);
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        flexGrow: "1",
+        mt: "auto",
+        mb: "100",
+        ref: forwardRef,
+        className: classes,
+        direction: "row",
+        align: "baseline",
+        asChild: true,
+        children: /* @__PURE__ */ jsxs(Text, { variant: "paragraph-100", as: "p", children: [
+          pricePrefix,
+          " ",
+          /* @__PURE__ */ jsx(Text, { variant: "paragraph-100-bold", as: "span", ml: "50", children: priceText })
+        ] })
+      }
+    );
+  }
+);
+Price.displayName = "Price";
+export {
+  Price
+};

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

@@ -5,8 +5,26 @@ const React = require("react");
 const clsx = require("clsx");
 const components_card_card = require("./card.cjs");
 const components_box_box = require("../box/box.cjs");
+const getOffsets = (layout, align) => {
+  switch (layout) {
+    case "product":
+      return {
+        top: "200",
+        right: "200"
+      };
+    default:
+      return {
+        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
+      };
+  }
+};
 const Slot = React.forwardRef(
-  ({ className, align, ...props }, forwardRef) => {
+  ({ className, align = "top-right", ...props }, forwardRef) => {
+    const context = React.useContext(components_card_card.RootContext);
+    const layout = context == null ? void 0 : context.layout;
     const classes = clsx(
       [
         components_card_card.styles[`${components_card_card.rootClassName}__slot`],
@@ -17,19 +35,7 @@ const Slot = React.forwardRef(
       ],
       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
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { position: "absolute", ...getOffsets(layout, align), ...props, ref: forwardRef, className: classes });
   }
 );
 Slot.displayName = "Slot";

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

@@ -1,8 +1,10 @@
 import { default as React } from 'react';
 import { Box } from '../box';
 
+type Align = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export type SlotProps = React.ComponentPropsWithoutRef<typeof Box> & {
-    align?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    align?: Align;
 };
 /** An element that has absolute position, used to place content on the edge of the card */
 export declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -1,10 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { s as styles, rootClassName } from "./card.js";
+import { RootContext, s as styles, rootClassName } from "./card.js";
 import { Box } from "../box/box.js";
+const getOffsets = (layout, align) => {
+  switch (layout) {
+    case "product":
+      return {
+        top: "200",
+        right: "200"
+      };
+    default:
+      return {
+        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
+      };
+  }
+};
 const Slot = React__default.forwardRef(
-  ({ className, align, ...props }, forwardRef) => {
+  ({ className, align = "top-right", ...props }, forwardRef) => {
+    const context = React__default.useContext(RootContext);
+    const layout = context == null ? void 0 : context.layout;
     const classes = clsx(
       [
         styles[`${rootClassName}__slot`],
@@ -15,19 +33,7 @@ const Slot = React__default.forwardRef(
       ],
       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
-      }
-    );
+    return /* @__PURE__ */ jsx(Box, { position: "absolute", ...getOffsets(layout, align), ...props, ref: forwardRef, className: classes });
   }
 );
 Slot.displayName = "Slot";