@telia/teddy 0.0.15 → 0.0.16

package/dist/components/card/card.js

@@ -1,27 +1,204 @@
-import "react/jsx-runtime";
-import "react";
-import "../../clsx-DB4S2d7J.js";
-import { C as y } from "../../badge-Cnug5TzH.js";
-import "../../radio-group-B--zT3OL.js";
-import "../box/box.js";
-import "../flex/flex.js";
-import "../grid/grid.js";
-import "../../navigation-menu-DKuyW8zE.js";
-import "../link/link.js";
-import "../button/button.js";
-import "../field-error-text/field-error-text.js";
-import "../helper-text/helper-text.js";
-import "../../assets/4bbd022cee9b0f06.svg";
-import "../input/input.js";
-import "../label/label.js";
-import "../spinner/spinner.js";
-import "../text/text.js";
-import "../text-field/text-field.js";
-import "../heading/heading.js";
-import "../visually-hidden/visually-hidden.js";
-import "../text-spacing/text-spacing.js";
-import "../../utils/composeRefs.js";
-import "../../utils/composeEventHandlers.js";
+import { jsx, Fragment } 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 { Flex } from "../flex/flex.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 { TextSpacing } from "../text-spacing/text-spacing.js";
+const styles = {
+  "teddy-card": "_teddy-card_16ne3_3",
+  "teddy-card__slot": "_teddy-card__slot_16ne3_13",
+  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_16ne3_16",
+  "teddy-card__slot--center": "_teddy-card__slot--center_16ne3_19",
+  "teddy-card__action": "_teddy-card__action_16ne3_40",
+  "teddy-card__action--disabled": "_teddy-card__action--disabled_16ne3_40",
+  "teddy-card--border": "_teddy-card--border_16ne3_46",
+  "teddy-card--purple-light": "_teddy-card--purple-light_16ne3_49",
+  "teddy-card--purple-dark": "_teddy-card--purple-dark_16ne3_63",
+  "teddy-card--white": "_teddy-card--white_16ne3_82",
+  "teddy-card--gray": "_teddy-card--gray_16ne3_96",
+  "teddy-card--beige": "_teddy-card--beige_16ne3_110",
+  "teddy-card__image--as-background": "_teddy-card__image--as-background_16ne3_124",
+  "teddy-card__heading": "_teddy-card__heading_16ne3_127",
+  "teddy-card--background-image": "_teddy-card--background-image_16ne3_130",
+  "teddy-card__image": "_teddy-card__image_16ne3_124",
+  "teddy-card__image--inset-top": "_teddy-card__image--inset-top_16ne3_145",
+  "teddy-card__image--inset-bottom": "_teddy-card__image--inset-bottom_16ne3_148",
+  "teddy-card__image--inset-left": "_teddy-card__image--inset-left_16ne3_151",
+  "teddy-card__image--inset-right": "_teddy-card__image--inset-right_16ne3_154"
+};
+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, backgroundImageSrc, variant, bordered, ...props }, forwardRef) => {
+    const buttonRef = React__default.useRef(null);
+    const linkRef = React__default.useRef(null);
+    const classes = clsx(
+      [styles[`${rootClassName}`]],
+      {
+        [styles[`${rootClassName}--${variant}`]]: variant,
+        [styles[`${rootClassName}--border`]]: bordered,
+        [styles[`${rootClassName}--background-image`]]: backgroundImageSrc
+      },
+      className
+    );
+    return /* @__PURE__ */ jsx(RootContext.Provider, { value: { buttonRef, linkRef, variant }, children: /* @__PURE__ */ jsx(TextSpacing, { asChild: true, children: /* @__PURE__ */ jsx(
+      Flex,
+      {
+        direction: "column",
+        ...props,
+        className: classes,
+        style: backgroundImageSrc ? { background: `url(${backgroundImageSrc})`, ...props.style } : props.style,
+        onClick: composeEventHandlers(props.onClick, (e) => {
+          var _a;
+          if (e.isDefaultPrevented())
+            return;
+          if (linkRef.current)
+            return linkRef.current.click();
+          (_a = buttonRef.current) == null ? void 0 : _a.click();
+        }),
+        ref: forwardRef,
+        children
+      }
+    ) }) });
+  }
+);
+Root.displayName = "Card";
+const Heading = React__default.forwardRef(
+  ({ className, variant = "title-200", as = "h2", ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__heading`]], className);
+    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("div", { ...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 Image = React__default.forwardRef(({ className, ...props }, forwardRef) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const classes = clsx(
+    [styles[`${rootClassName}__image`]],
+    {
+      [styles[`${rootClassName}__image--inset-top`]]: ((_a = props.inset) == null ? void 0 : _a.includes("top")) || ((_b = props.inset) == null ? void 0 : _b.includes("all")),
+      [styles[`${rootClassName}__image--inset-bottom`]]: ((_c = props.inset) == null ? void 0 : _c.includes("bottom")) || ((_d = props.inset) == null ? void 0 : _d.includes("all")),
+      [styles[`${rootClassName}__image--inset-left`]]: ((_e = props.inset) == null ? void 0 : _e.includes("left")) || ((_f = props.inset) == null ? void 0 : _f.includes("all")),
+      [styles[`${rootClassName}__image--inset-right`]]: ((_g = props.inset) == null ? void 0 : _g.includes("right")) || ((_h = props.inset) == null ? void 0 : _h.includes("all"))
+    },
+    className
+  );
+  return /* @__PURE__ */ jsx("img", { ...props, ref: forwardRef, className: classes });
+});
+Image.displayName = "Card.Image";
+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 Card = Object.assign(Root, {
+  Root,
+  Heading,
+  Content,
+  Image,
+  Button,
+  Link,
+  Slot,
+  variantOptions,
+  insetOptions
+});
 export {
-  y as Card
+  Card
 };

package/dist/components/card/index.js

@@ -1,4 +1,4 @@
-import { C as o } from "../../badge-Cnug5TzH.js";
+import { Card } from "./card.js";
 export {
-  o as Card
+  Card
 };

package/dist/components/field-error-text/field-error-text.js

@@ -1,28 +1,30 @@
-import '../../assets/field-error-text.css';
-import { jsx as s } from "react/jsx-runtime";
-import { c as i } from "../../clsx-DB4S2d7J.js";
-import a from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import React__default from "react";
 import "../../assets/4bbd022cee9b0f06.svg";
-import { Icon as n } from "../icon/icon.js";
-import { Text as m } from "../text/text.js";
-const c = {
+import { Icon } from "../icon/icon.js";
+import { Text } from "../text/text.js";
+const styles = {
   "teddy-field-error-text": "_teddy-field-error-text_1735t_1",
   "teddy-field-error-text__indicator": "_teddy-field-error-text__indicator_1735t_12"
-}, l = "teddy-field-error-text", _ = a.forwardRef(
-  ({ className: r, name: t = "error-filled", ...e }, o) => {
-    const d = i([c[`${l}__indicator`]], r);
-    return /* @__PURE__ */ s(n, { ...e, name: t, ref: o, className: d });
+};
+const rootClassName = "teddy-field-error-text";
+const FieldErrorTextIndicator = React__default.forwardRef(
+  ({ className, name = "error-filled", ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__indicator`]], className);
+    return /* @__PURE__ */ jsx(Icon, { ...props, name, ref: forwardRef, className: classes });
   }
-), f = a.forwardRef(
-  ({ className: r, children: t, ...e }, o) => {
-    const d = i([c[l]], r);
-    return /* @__PURE__ */ s(m, { ...e, ref: o, className: d, children: t });
+);
+const FieldErrorTextRoot = React__default.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    const classes = clsx([styles[rootClassName]], className);
+    return /* @__PURE__ */ jsx(Text, { ...props, ref: forwardRef, className: classes, children });
   }
 );
-f.displayName = "FieldErrorText";
-const N = Object.assign(f, {
-  Indicator: _
+FieldErrorTextRoot.displayName = "FieldErrorText";
+const FieldErrorText = Object.assign(FieldErrorTextRoot, {
+  Indicator: FieldErrorTextIndicator
 });
 export {
-  N as FieldErrorText
+  FieldErrorText
 };

package/dist/components/field-error-text/index.js

@@ -1,4 +1,4 @@
-import { FieldErrorText as o } from "./field-error-text.js";
+import { FieldErrorText } from "./field-error-text.js";
 export {
-  o as FieldErrorText
+  FieldErrorText
 };

package/dist/components/flex/flex.js

@@ -1,16 +1,19 @@
-import '../../assets/flex.css';
-import { jsx as a } from "react/jsx-runtime";
-import m from "react";
-import { c as l } from "../../clsx-DB4S2d7J.js";
-import { $ as f } from "../../index-DpfSJps6.js";
-import { extractProps as d } from "../../utils/layout/index.js";
-const p = {
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { Slot } from "@radix-ui/react-slot";
+import { extractProps } from "../../utils/layout/index.js";
+const styles = {
   "teddy-flex": "_teddy-flex_19teo_2"
-}, x = "teddy-flex", i = m.forwardRef((e, o) => {
-  const { className: s, asChild: t, ...r } = d(e), c = l([p[`${x}`]], s);
-  return /* @__PURE__ */ a(t ? f : "div", { ...r, ref: o, className: c });
+};
+const rootClassName = "teddy-flex";
+const Flex = React__default.forwardRef((props, forwardRef) => {
+  const { className, asChild, ...rest } = extractProps(props);
+  const classes = clsx([styles[`${rootClassName}`]], className);
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(Comp, { ...rest, ref: forwardRef, className: classes });
 });
-i.displayName = "Flex";
+Flex.displayName = "Flex";
 export {
-  i as Flex
+  Flex
 };

package/dist/components/flex/index.js

@@ -1,4 +1,4 @@
-import { Flex as r } from "./flex.js";
+import { Flex } from "./flex.js";
 export {
-  r as Flex
+  Flex
 };

package/dist/components/grid/grid.js

@@ -1,16 +1,19 @@
-import '../../assets/grid.css';
-import { jsx as m } from "react/jsx-runtime";
-import i from "react";
-import { c as p } from "../../clsx-DB4S2d7J.js";
-import { $ as f } from "../../index-DpfSJps6.js";
-import { extractProps as l } from "../../utils/layout/index.js";
-const n = {
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { Slot } from "@radix-ui/react-slot";
+import { extractProps } from "../../utils/layout/index.js";
+const styles = {
   "teddy-grid": "_teddy-grid_1dv1t_2"
-}, x = "teddy-grid", y = i.forwardRef((r, s) => {
-  const { className: o, as: t = "div", asChild: e, ...a } = l(r), c = e ? f : t, d = p([n[`${x}`]], o);
-  return /* @__PURE__ */ m(c, { ...a, ref: s, className: d });
+};
+const rootClassName = "teddy-grid";
+const Grid = React__default.forwardRef((args, forwardRef) => {
+  const { className, as: Tag = "div", asChild, ...props } = extractProps(args);
+  const Comp = asChild ? Slot : Tag;
+  const classes = clsx([styles[`${rootClassName}`]], className);
+  return /* @__PURE__ */ jsx(Comp, { ...props, ref: forwardRef, className: classes });
 });
-y.displayName = "Grid";
+Grid.displayName = "Grid";
 export {
-  y as Grid
+  Grid
 };

package/dist/components/grid/index.js

@@ -1,4 +1,4 @@
-import { Grid as d } from "./grid.js";
+import { Grid } from "./grid.js";
 export {
-  d as Grid
+  Grid
 };

package/dist/components/heading/heading.js

@@ -1,10 +1,9 @@
-import '../../assets/heading.css';
-import { jsx as s } from "react/jsx-runtime";
-import { $ as c } from "../../index-DpfSJps6.js";
-import { c as p } from "../../clsx-DB4S2d7J.js";
-import m from "react";
-import { extractProps as f } from "../../utils/layout/index.js";
-const e = {
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import clsx from "clsx";
+import React__default from "react";
+import { extractProps } from "../../utils/layout/index.js";
+const styles = {
   "teddy-heading": "_teddy-heading_r8os0_2",
   "teddy-heading--hyphens": "_teddy-heading--hyphens_r8os0_9",
   "teddy-heading--subsection-100": "_teddy-heading--subsection-100_r8os0_12",
@@ -19,7 +18,9 @@ const e = {
   "teddy-heading--display-50": "_teddy-heading--display-50_r8os0_66",
   "teddy-heading--display-100": "_teddy-heading--display-100_r8os0_72",
   "teddy-heading--display-200": "_teddy-heading--display-200_r8os0_78"
-}, d = "teddy-heading", $ = [
+};
+const rootClassName = "teddy-heading";
+const headingVariants = [
   "title-100",
   "title-200",
   "title-300",
@@ -32,21 +33,23 @@ const e = {
   "display-50",
   "display-100",
   "display-200"
-], n = m.forwardRef((l, y) => {
-  const { className: _, children: t, variant: i, asChild: o, enableHyphenation: h, as: a, ...r } = f(l), g = p(
-    e[`${d}`],
+];
+const Root = React__default.forwardRef((props, forwardRef) => {
+  const { className, children, variant, asChild, enableHyphenation, as: Tag, ...rest } = extractProps(props);
+  const classes = clsx(
+    styles[`${rootClassName}`],
     {
-      [e[`${d}--${i}`]]: i,
-      [e[`${d}--hyphens`]]: h
+      [styles[`${rootClassName}--${variant}`]]: variant,
+      [styles[`${rootClassName}--hyphens`]]: enableHyphenation
     },
-    _
+    className
   );
-  return /* @__PURE__ */ s(c, { ...r, ref: y, className: g, children: o ? t : a ? /* @__PURE__ */ s(a, { children: t }) : null });
+  return /* @__PURE__ */ jsx(Slot, { ...rest, ref: forwardRef, className: classes, children: asChild ? children : Tag ? /* @__PURE__ */ jsx(Tag, { children }) : null });
 });
-n.displayName = "Heading";
-const R = Object.assign(n, {
-  headingVariants: $
+Root.displayName = "Heading";
+const Heading = Object.assign(Root, {
+  headingVariants
 });
 export {
-  R as Heading
+  Heading
 };

package/dist/components/heading/index.js

@@ -1,4 +1,4 @@
-import { Heading as r } from "./heading.js";
+import { Heading } from "./heading.js";
 export {
-  r as Heading
+  Heading
 };

package/dist/components/helper-text/helper-text.js

@@ -1,20 +1,21 @@
-import '../../assets/helper-text.css';
-import { jsx as l } from "react/jsx-runtime";
-import { c as a } from "../../clsx-DB4S2d7J.js";
-import o from "react";
-const p = {
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import React__default from "react";
+const styles = {
   "teddy-helper-text": "_teddy-helper-text_6xdzb_1",
   "teddy-helper-text--disabled": "_teddy-helper-text--disabled_6xdzb_9"
-}, x = "teddy-helper-text", c = o.forwardRef(
-  ({ className: e, children: t, ...r }, s) => {
-    const d = a(
-      [p[x]],
-      e
+};
+const rootClassName = "teddy-helper-text";
+const HelperText = React__default.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    const classes = clsx(
+      [styles[rootClassName]],
+      className
     );
-    return /* @__PURE__ */ l("span", { ...r, ref: s, className: d, children: t });
+    return /* @__PURE__ */ jsx("span", { ...props, ref: forwardRef, className: classes, children });
   }
 );
-c.displayName = "HelperText";
+HelperText.displayName = "HelperText";
 export {
-  c as HelperText
+  HelperText
 };

package/dist/components/helper-text/index.js

@@ -1,4 +1,4 @@
-import { HelperText as o } from "./helper-text.js";
+import { HelperText } from "./helper-text.js";
 export {
-  o as HelperText
+  HelperText
 };

package/dist/components/icon/icon.js

@@ -1,8 +1,7 @@
-import '../../assets/icon.css';
-import { jsxs as y, jsx as d } from "react/jsx-runtime";
-import f from "../../assets/4bbd022cee9b0f06.svg";
-import { c as s } from "../../clsx-DB4S2d7J.js";
-const t = {
+import { jsxs, jsx } from "react/jsx-runtime";
+import iconsHref from "../../assets/4bbd022cee9b0f06.svg";
+import clsx from "clsx";
+const styles = {
   "teddy-icon": "_teddy-icon_1rwgf_2",
   "teddy-icon--font": "_teddy-icon--font_1rwgf_7",
   "teddy-icon--xxs": "_teddy-icon--xxs_1rwgf_11",
@@ -12,16 +11,19 @@ const t = {
   "teddy-icon--lg": "_teddy-icon--lg_1rwgf_27",
   "teddy-icon--xl": "_teddy-icon--xl_1rwgf_31",
   "teddy-icon-with-children": "_teddy-icon-with-children_1rwgf_35"
-}, o = "teddy-icon", l = `${o}-with-children`;
-function g({ name: n, size: c = "font", className: e, children: i, ...r }) {
-  if (i)
-    return /* @__PURE__ */ y("span", { className: s([t[l]]), children: [
-      /* @__PURE__ */ d(g, { name: n, size: c, className: e, ...r }),
-      i
+};
+const rootClassName = "teddy-icon";
+const rootClassNameWithChildren = `${rootClassName}-with-children`;
+function Icon({ name, size = "font", className, children, ...props }) {
+  if (children) {
+    return /* @__PURE__ */ jsxs("span", { className: clsx([styles[rootClassNameWithChildren]]), children: [
+      /* @__PURE__ */ jsx(Icon, { name, size, className, ...props }),
+      children
     ] });
-  const _ = s([t[o], t[`${o}--${c}`]], e);
-  return /* @__PURE__ */ d("svg", { ...r, className: _, children: /* @__PURE__ */ d("use", { href: `${f}#${n}` }) });
+  }
+  const classes = clsx([styles[rootClassName], styles[`${rootClassName}--${size}`]], className);
+  return /* @__PURE__ */ jsx("svg", { ...props, className: classes, children: /* @__PURE__ */ jsx("use", { href: `${iconsHref}#${name}` }) });
 }
 export {
-  g as Icon
+  Icon
 };

package/dist/components/icon/index.js

@@ -1,6 +1,6 @@
-import { default as e } from "../../assets/4bbd022cee9b0f06.svg";
-import { Icon as t } from "./icon.js";
+import { default as default2 } from "../../assets/4bbd022cee9b0f06.svg";
+import { Icon } from "./icon.js";
 export {
-  t as Icon,
-  e as iconsHref
+  Icon,
+  default2 as iconsHref
 };