@telia/teddy 0.0.19 → 0.0.20

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

@@ -7,6 +7,7 @@ import { Grid } from '../grid';
 
 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';
 /** -------------------------------------------------------------------------------------------------
  * Root
  * -----------------------------------------------------------------------------------------------*/
@@ -16,6 +17,7 @@ type RootProps = React.ComponentPropsWithoutRef<typeof Grid> & {
     bordered?: boolean;
     shadow?: boolean;
     backgroundImageSrc?: string;
+    layout?: Layout;
 };
 /** -------------------------------------------------------------------------------------------------
  * Heading
@@ -24,7 +26,7 @@ type HeadingProps = Partial<React.ComponentPropsWithoutRef<typeof PrimitiveHeadi
 /** -------------------------------------------------------------------------------------------------
  * Content
  * -----------------------------------------------------------------------------------------------*/
-type ContentProps = React.ComponentPropsWithoutRef<'div'>;
+type ContentProps = React.ComponentPropsWithoutRef<typeof Box>;
 /** -------------------------------------------------------------------------------------------------
  * Slot
  * -----------------------------------------------------------------------------------------------*/
@@ -32,10 +34,10 @@ type SlotProps = React.ComponentPropsWithoutRef<typeof Box> & {
     align?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 };
 /** -------------------------------------------------------------------------------------------------
- * Image
+ * 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 ImageProps = React.ComponentPropsWithoutRef<'img'> & {
+type IllustrationProps = React.ComponentPropsWithoutRef<'div'> & {
     /** The inset allows make the image bleed out to the edges */
     inset?: (typeof insetOptions)[number];
 };
@@ -53,11 +55,11 @@ type LineProps = Omit<React.ComponentPropsWithoutRef<typeof Box>, 'asChild' | 'a
 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<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Image: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    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<HTMLImageElement>>;
+    } & 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 & {
         asChild?: boolean | undefined;
         loading?: boolean | undefined;
@@ -96,7 +98,7 @@ type CardProps = {
     Heading: HeadingProps;
     Content: ContentProps;
     Button: ButtonProps;
-    Image: ImageProps;
+    Illustration: IllustrationProps;
     Slot: SlotProps;
     Link: LinkProps;
     Line: LineProps;

package/dist/components/card/card.js

@@ -10,36 +10,42 @@ import { Link as Link$1 } from "../link/link.js";
 import { teddySpacing50 } from "../../tokens/spacing/variables.js";
 import { Grid } from "../grid/grid.js";
 const styles = {
-  "teddy-card": "_teddy-card_1occu_3",
-  "teddy-card__slot": "_teddy-card__slot_1occu_13",
-  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_1occu_16",
-  "teddy-card__slot--center": "_teddy-card__slot--center_1occu_19",
-  "teddy-card--shadow": "_teddy-card--shadow_1occu_41",
-  "teddy-card__action": "_teddy-card__action_1occu_45",
-  "teddy-card__action--disabled": "_teddy-card__action--disabled_1occu_45",
-  "teddy-card--border": "_teddy-card--border_1occu_52",
-  "teddy-card__line": "_teddy-card__line_1occu_55",
-  "teddy-card--purple-light": "_teddy-card--purple-light_1occu_59",
-  "teddy-card--purple-dark": "_teddy-card--purple-dark_1occu_73",
-  "teddy-card--white": "_teddy-card--white_1occu_92",
-  "teddy-card--gray": "_teddy-card--gray_1occu_106",
-  "teddy-card--beige": "_teddy-card--beige_1occu_120",
-  "teddy-card__image--as-background": "_teddy-card__image--as-background_1occu_134",
-  "teddy-card__heading": "_teddy-card__heading_1occu_137",
-  "teddy-card--background-image": "_teddy-card--background-image_1occu_140",
-  "teddy-card__image": "_teddy-card__image_1occu_134",
-  "teddy-card__inset": "_teddy-card__inset_1occu_157",
-  "teddy-card__inset--top": "_teddy-card__inset--top_1occu_161",
-  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_1occu_164",
-  "teddy-card__inset--left": "_teddy-card__inset--left_1occu_167",
-  "teddy-card__inset--right": "_teddy-card__inset--right_1occu_170"
+  "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"
 };
 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, variant, bordered, ...props }, forwardRef) => {
+  ({ className, children, shadow, backgroundImageSrc, layout, variant, bordered, ...props }, forwardRef) => {
     const buttonRef = React__default.useRef(null);
     const linkRef = React__default.useRef(null);
     const classes = clsx(
@@ -48,11 +54,13 @@ const Root = React__default.forwardRef(
         [styles[`${rootClassName}--${variant}`]]: variant,
         [styles[`${rootClassName}--border`]]: bordered,
         [styles[`${rootClassName}--shadow`]]: shadow,
-        [styles[`${rootClassName}--background-image`]]: backgroundImageSrc
+        [styles[`${rootClassName}--background-image`]]: backgroundImageSrc,
+        [styles[`${rootClassName}--layout`]]: layout,
+        [styles[`${rootClassName}--${layout}`]]: layout
       },
       className
     );
-    return /* @__PURE__ */ jsx(RootContext.Provider, { value: { buttonRef, linkRef, variant }, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(RootContext.Provider, { value: { buttonRef, linkRef, variant, layout }, children: /* @__PURE__ */ jsx(
       Grid,
       {
         ...props,
@@ -74,8 +82,9 @@ const Root = React__default.forwardRef(
 );
 Root.displayName = "Card";
 const Heading = React__default.forwardRef(
-  ({ className, variant = "title-200", as = "h2", ...props }, forwardRef) => {
+  ({ className, as = "h2", ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}__heading`]], className);
+    const variant = props.variant ?? "title-200";
     return /* @__PURE__ */ jsx(
       Heading$1,
       {
@@ -91,7 +100,7 @@ const Heading = React__default.forwardRef(
 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 });
+  return /* @__PURE__ */ jsx(Box, { ...props, ref: forwardRef, className: classes });
 });
 Content.displayName = "Card.Content";
 const Slot = React__default.forwardRef(({ className, align, ...props }, forwardRef) => {
@@ -134,18 +143,19 @@ const insetOptions = [
   "top-bottom",
   "left-right"
 ];
-const Image = React__default.forwardRef(({ className, ...props }, forwardRef) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const classesImage = clsx([styles[`${rootClassName}__image`]], className);
-  const classesContainer = clsx([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", { className: classesContainer, children: /* @__PURE__ */ jsx("img", { ...props, ref: forwardRef, className: classesImage }) });
-});
-Image.displayName = "Card.Image";
+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":
@@ -196,7 +206,7 @@ const Card = Object.assign(Root, {
   Root,
   Heading,
   Content,
-  Image,
+  Illustration,
   Button,
   Link,
   Slot,

package/dist/components/chip/chip-indicator.d.ts

@@ -3,7 +3,7 @@ import { Icon } from '../icon';
 
 export type IndicatorProps = Partial<React.ComponentPropsWithoutRef<typeof Icon>>;
 export declare const Indicator: React.ForwardRefExoticComponent<Partial<Omit<React.SVGProps<SVGSVGElement> & {
-    name: "key" | "search" | "split" | "link" | "add" | "reverse" | "infinite" | "radio" | "visible" | "copy" | "help" | "zoom-out" | "filter" | "x" | "zoom" | "menu" | "map" | "summary" | "time" | "video" | "image" | "stop" | "download" | "alert" | "email" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "sync" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
+    name: "key" | "search" | "split" | "link" | "add" | "reverse" | "infinite" | "radio" | "visible" | "copy" | "help" | "zoom-out" | "filter" | "x" | "zoom" | "menu" | "map" | "summary" | "time" | "video" | "image" | "stop" | "download" | "alert" | "email" | "sync" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
     size?: ("sm" | "md" | "lg" | "xl" | "font" | "xxs" | "xs") | undefined;
     children?: React.ReactNode;
 }, "ref">> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/chip/index.d.ts

@@ -5,7 +5,7 @@ import { ItemProps } from './chip-item';
 export declare const Chip: import('react').ForwardRefExoticComponent<RootProps & import('react').RefAttributes<HTMLDivElement>> & {
     Item: import('react').ForwardRefExoticComponent<ItemProps & import('react').RefAttributes<HTMLButtonElement>>;
     Indicator: import('react').ForwardRefExoticComponent<Partial<Omit<import('react').SVGProps<SVGSVGElement> & {
-        name: "key" | "search" | "split" | "link" | "add" | "reverse" | "infinite" | "radio" | "visible" | "copy" | "help" | "zoom-out" | "filter" | "x" | "zoom" | "menu" | "map" | "summary" | "time" | "video" | "image" | "stop" | "download" | "alert" | "email" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "sync" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
+        name: "key" | "search" | "split" | "link" | "add" | "reverse" | "infinite" | "radio" | "visible" | "copy" | "help" | "zoom-out" | "filter" | "x" | "zoom" | "menu" | "map" | "summary" | "time" | "video" | "image" | "stop" | "download" | "alert" | "email" | "sync" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
         size?: ("sm" | "md" | "lg" | "xl" | "font" | "xxs" | "xs") | undefined;
         children?: import('react').ReactNode;
     }, "ref">> & import('react').RefAttributes<SVGSVGElement>>;

package/dist/components/image/image.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ImageStylingProps } from '../../utils/generate-styling';
+
+/** -------------------------------------------------------------------------------------------------
+ * Image
+ * -----------------------------------------------------------------------------------------------*/
+type ImageProps = React.ComponentPropsWithoutRef<'img'> & ImageStylingProps;
+/** */
+declare const Image: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & 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 & import('../../utils/generate-styling/object-fit').ObjectFitProps & React.RefAttributes<HTMLImageElement>>;
+export { Image };
+export type { ImageProps };

package/dist/components/image/image.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { extractProps } from "../../utils/generate-styling/index.js";
+const styles = {
+  "teddy-image": "_teddy-image_oyxp8_1"
+};
+const rootClassName = "teddy-image";
+const Image = React__default.forwardRef((props, forwardRef) => {
+  const { className, ...rest } = extractProps(props);
+  const classes = clsx([styles[`${rootClassName}`]], className);
+  return /* @__PURE__ */ jsx("img", { ...rest, ref: forwardRef, className: classes });
+});
+Image.displayName = "Image";
+export {
+  Image
+};

package/dist/components/image/index.d.ts

@@ -0,0 +1,2 @@
+export { Image } from './image';
+export type { ImageProps } from './image';

package/dist/components/image/index.js

@@ -0,0 +1,4 @@
+import { Image } from "./image.js";
+export {
+  Image
+};

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './image';
 export * from './chip';
 export * from './modal';
 export * from './notification';

package/dist/components/index.js

@@ -1,3 +1,4 @@
+import { Image } from "./image/image.js";
 import { Chip } from "./chip/index.js";
 import { Modal } from "./modal/modal.js";
 import { Notification } from "./notification/notification.js";
@@ -37,6 +38,7 @@ export {
   Heading,
   HelperText,
   Icon,
+  Image,
   Input,
   InputGroup,
   Label,

package/dist/components/modal/modal.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default, { useEffect } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import "../image/image.js";
 import "../chip/index.js";
 import "../notification/notification.js";
 import "../radio-group/radio-group.js";

package/dist/components/notification/notification.d.ts

@@ -43,6 +43,7 @@ declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<
     bordered?: boolean | undefined;
     shadow?: boolean | undefined;
     backgroundImageSrc?: string | undefined;
+    layout?: ("navigation-vertical" | "navigation-horizontal-small" | "navigation-horizontal-large" | "rich-card") | undefined;
 } & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & 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 & import('../../utils/generate-styling/gap').GapProps & {
     align?: import('../../utils/generate-styling/align').Align | undefined;
     justify?: import('../../utils/generate-styling/justify').Justify | undefined;
@@ -55,6 +56,7 @@ declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<
     bordered?: boolean | undefined;
     shadow?: boolean | undefined;
     backgroundImageSrc?: string | undefined;
+    layout?: ("navigation-vertical" | "navigation-horizontal-small" | "navigation-horizontal-large" | "rich-card") | undefined;
 } & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & 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 & import('../../utils/generate-styling/gap').GapProps & {
     align?: import('../../utils/generate-styling/align').Align | undefined;
     justify?: import('../../utils/generate-styling/justify').Justify | undefined;
@@ -67,6 +69,7 @@ declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<
     bordered?: boolean | undefined;
     shadow?: boolean | undefined;
     backgroundImageSrc?: string | undefined;
+    layout?: ("navigation-vertical" | "navigation-horizontal-small" | "navigation-horizontal-large" | "rich-card") | undefined;
 } & React.RefAttributes<HTMLDivElement>, "ref">, "as" | "variant"> & {
     variant?: "error" | "warning" | "success" | "information" | undefined;
     open?: boolean | undefined;
@@ -77,7 +80,7 @@ declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<
     Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
     Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
     Icon: React.ForwardRefExoticComponent<Partial<Omit<React.SVGProps<SVGSVGElement> & {
-        name: "key" | "search" | "split" | "link" | "add" | "reverse" | "infinite" | "radio" | "visible" | "copy" | "help" | "zoom-out" | "filter" | "x" | "zoom" | "menu" | "map" | "summary" | "time" | "video" | "image" | "stop" | "download" | "alert" | "email" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "sync" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
+        name: "key" | "search" | "split" | "link" | "add" | "reverse" | "infinite" | "radio" | "visible" | "copy" | "help" | "zoom-out" | "filter" | "x" | "zoom" | "menu" | "map" | "summary" | "time" | "video" | "image" | "stop" | "download" | "alert" | "email" | "sync" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
         size?: ("sm" | "md" | "lg" | "xl" | "font" | "xxs" | "xs") | undefined;
         children?: React.ReactNode;
     }, "ref">> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/toggle/toggle.d.ts

@@ -29,7 +29,7 @@ declare const Toggle: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHT
     Input: React.ForwardRefExoticComponent<ToggleInputProps & React.RefAttributes<HTMLButtonElement>>;
     Thumb: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchThumbProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
     Indicator: React.ForwardRefExoticComponent<Partial<Omit<React.SVGProps<SVGSVGElement> & {
-        name: "key" | "search" | "split" | "link" | "add" | "reverse" | "infinite" | "radio" | "visible" | "copy" | "help" | "zoom-out" | "filter" | "x" | "zoom" | "menu" | "map" | "summary" | "time" | "video" | "image" | "stop" | "download" | "alert" | "email" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "sync" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
+        name: "key" | "search" | "split" | "link" | "add" | "reverse" | "infinite" | "radio" | "visible" | "copy" | "help" | "zoom-out" | "filter" | "x" | "zoom" | "menu" | "map" | "summary" | "time" | "video" | "image" | "stop" | "download" | "alert" | "email" | "sync" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
         size?: ("sm" | "md" | "lg" | "xl" | "font" | "xxs" | "xs") | undefined;
         children?: React.ReactNode;
     }, "ref">> & React.RefAttributes<SVGSVGElement>>;

package/dist/main.js

@@ -1,3 +1,4 @@
+import { Image } from "./components/image/image.js";
 import { Chip } from "./components/chip/index.js";
 import { Modal } from "./components/modal/modal.js";
 import { Notification } from "./components/notification/notification.js";
@@ -44,6 +45,7 @@ export {
   Heading,
   HelperText,
   Icon,
+  Image,
   Input,
   InputGroup,
   Label,

package/dist/style.css

@@ -1,4 +1,11 @@
-@layer flex {
+._teddy-image_oyxp8_1 {
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  display: block;
+  font-style: italic;
+  background-repeat: no-repeat;
+}@layer flex {
   ._teddy-flex_19teo_2 {
     box-sizing: border-box;
     display: flex;
@@ -700,31 +707,31 @@
     justify-content: start;
     grid-template-rows: none;
   }
-}@layer heading, button, card;
+}@layer heading, flex, grid, button, card;
 @layer card {
-  ._teddy-card_1occu_3 {
+  ._teddy-card_aok47_3 {
     border-radius: var(--teddy-border-radius-md);
     padding: var(--teddy-spacing-250);
     position: relative;
   }
   @media (prefers-reduced-motion: no-preference) {
-    ._teddy-card_1occu_3 {
+    ._teddy-card_aok47_3 {
       transition: background-color var(--teddy-motion-duration-300) ease;
     }
   }
-  ._teddy-card__slot_1occu_13 {
+  ._teddy-card__slot_aok47_13 {
     transform: translateY(-50%);
   }
-  ._teddy-card__slot--bottom_1occu_16 {
+  ._teddy-card__slot--bottom_aok47_16 {
     transform: translateY(50%);
   }
-  ._teddy-card__slot--center_1occu_19 {
+  ._teddy-card__slot--center_aok47_19 {
     transform: translate(-50%, -50%);
   }
-  ._teddy-card__slot--bottom_1occu_16._teddy-card__slot--center_1occu_19 {
+  ._teddy-card__slot--bottom_aok47_16._teddy-card__slot--center_aok47_19 {
     transform: translate(-50%, 50%);
   }
-  ._teddy-card_1occu_3::before {
+  ._teddy-card_aok47_3::before {
     content: "";
     display: block;
     position: absolute;
@@ -735,141 +742,213 @@
     box-shadow: var(--teddy-shadow-md);
   }
   @media (prefers-reduced-motion: no-preference) {
-    ._teddy-card_1occu_3::before {
+    ._teddy-card_aok47_3::before {
       transition: var(--teddy-motion-duration-300) ease;
       transition-property: opacity, box-shadow;
     }
   }
-  ._teddy-card--shadow_1occu_41::before {
+  ._teddy-card--shadow_aok47_41::before {
     opacity: 1;
     box-shadow: var(--teddy-shadow-sm-2);
   }
-  ._teddy-card_1occu_3:has(._teddy-card__action_1occu_45:not(._teddy-card__action--disabled_1occu_45)) {
+  ._teddy-card_aok47_3:has(._teddy-card__action_aok47_45:not(._teddy-card__action--disabled_aok47_45)) {
     cursor: pointer;
   }
-  ._teddy-card_1occu_3:has(._teddy-card__action_1occu_45:not(._teddy-card__action--disabled_1occu_45)):hover:not(:has(button:hover), :has(a:hover)):has(._teddy-card__action_1occu_45:not(._teddy-card__action--disabled_1occu_45))::before {
+  ._teddy-card_aok47_3:has(._teddy-card__action_aok47_45:not(._teddy-card__action--disabled_aok47_45)):hover:not(:has(button:hover), :has(a:hover)):has(._teddy-card__action_aok47_45:not(._teddy-card__action--disabled_aok47_45))::before {
     opacity: 1;
     box-shadow: var(--teddy-shadow-md);
   }
-  ._teddy-card--border_1occu_52 {
+  ._teddy-card--border_aok47_52 {
     border: var(--teddy-border-width-xs) solid transparent;
   }
-  ._teddy-card__line_1occu_55 {
+  ._teddy-card--layout_aok47_55 ._teddy-card__illustration_aok47_55 {
+    grid-area: illustration;
+  }
+  ._teddy-card--layout_aok47_55 ._teddy-card__content_aok47_58 {
+    grid-area: content;
+  }
+  ._teddy-card--layout_aok47_55 ._teddy-card__heading_aok47_61 {
+    grid-area: heading;
+  }
+  ._teddy-card--layout_aok47_55 ._teddy-card__action_aok47_45 {
+    grid-area: action;
+  }
+  ._teddy-card--navigation-vertical_aok47_67 {
+    grid-template-rows: auto auto 1fr auto;
+    justify-items: start;
+    align-items: baseline;
+    grid-template-areas: "illustration" "heading" "content" "action";
+  }
+  ._teddy-card--navigation-vertical_aok47_67 ._teddy-card__illustration_aok47_55 {
+    margin-bottom: var(--teddy-spacing-200);
+  }
+  ._teddy-card--navigation-vertical_aok47_67 ._teddy-card__content_aok47_58 {
+    margin-bottom: var(--teddy-spacing-200);
+  }
+  ._teddy-card--navigation-vertical_aok47_67 ._teddy-card__heading_aok47_61 {
+    margin-bottom: var(--teddy-spacing-100);
+  }
+  ._teddy-card--navigation-vertical_aok47_67 ._teddy-card__action_aok47_45 {
+    margin-top: auto;
+    place-self: end;
+  }
+  ._teddy-card--navigation-horizontal-small_aok47_86 {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "illustration heading action" "illustration content action";
+    column-gap: var(--teddy-spacing-200);
+  }
+  ._teddy-card--navigation-horizontal-small_aok47_86 ._teddy-card__heading_aok47_61 {
+    margin-bottom: var(--teddy-spacing-100);
+  }
+  ._teddy-card--navigation-horizontal-small_aok47_86 ._teddy-card__action_aok47_45 {
+    margin-top: auto;
+  }
+  ._teddy-card--navigation-horizontal-large_aok47_98 {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto 1fr;
+    grid-template-areas: "illustration action" "heading action" "content action";
+    column-gap: var(--teddy-spacing-200);
+  }
+  ._teddy-card--navigation-horizontal-large_aok47_98 ._teddy-card__heading_aok47_61 {
+    margin-bottom: var(--teddy-spacing-100);
+  }
+  ._teddy-card--navigation-horizontal-large_aok47_98 ._teddy-card__action_aok47_45 {
+    margin-top: auto;
+  }
+  ._teddy-card--rich-card_aok47_110 {
+    justify-items: start;
+    align-items: baseline;
+    grid-template-rows: auto auto 1fr auto;
+    grid-template-areas: "illustration" "heading" "content" "action";
+  }
+  ._teddy-card--rich-card_aok47_110 ._teddy-card__illustration_aok47_55 {
+    margin-bottom: var(--teddy-spacing-200);
+  }
+  ._teddy-card--rich-card_aok47_110 ._teddy-card__content_aok47_58 {
+    margin-bottom: var(--teddy-spacing-200);
+  }
+  ._teddy-card--rich-card_aok47_110 ._teddy-card__heading_aok47_61 {
+    margin-bottom: var(--teddy-spacing-100);
+  }
+  ._teddy-card--rich-card_aok47_110 ._teddy-card__action_aok47_45 {
+    margin-top: auto;
+  }
+  ._teddy-card__line_aok47_128 {
     border: 0;
     border-top: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
   }
-  ._teddy-card--purple-light_1occu_59 {
+  ._teddy-card--purple-light_aok47_132 {
     background-color: var(--teddy-color-background-interactive-primary-negative);
     color: var(--teddy-color-text-default);
     border-color: var(--teddy-color-background-interactive-primary-negative);
   }
-  ._teddy-card--purple-light_1occu_59:hover:has(._teddy-card__action_1occu_45:not(._teddy-card__action--disabled_1occu_45)) {
+  ._teddy-card--purple-light_aok47_132:hover:has(._teddy-card__action_aok47_45:not(._teddy-card__action--disabled_aok47_45)) {
     background-color: var(--teddy-color-background-interactive-primary-negative-hover);
   }
-  ._teddy-card--purple-light_1occu_59:active:has(._teddy-card__action_1occu_45:not(._teddy-card__action--disabled_1occu_45)) {
+  ._teddy-card--purple-light_aok47_132:active:has(._teddy-card__action_aok47_45:not(._teddy-card__action--disabled_aok47_45)) {
     background-color: var(--teddy-color-background-interactive-primary-negative-active);
   }
-  ._teddy-card--purple-light_1occu_59:has(._teddy-card__action--disabled_1occu_45) {
+  ._teddy-card--purple-light_aok47_132:has(._teddy-card__action--disabled_aok47_45) {
     background-color: var(--teddy-color-background-interactive-disabled);
   }
-  ._teddy-card--purple-dark_1occu_73 {
+  ._teddy-card--purple-dark_aok47_146 {
     background-color: var(--teddy-color-brand-deep-purple);
     color: var(--teddy-color-text-default-negative);
     border-color: var(--teddy-color-brand-deep-purple);
   }
-  ._teddy-card--purple-dark_1occu_73:hover:has(._teddy-card__action_1occu_45:not(._teddy-card__action--disabled_1occu_45)) {
+  ._teddy-card--purple-dark_aok47_146:hover:has(._teddy-card__action_aok47_45:not(._teddy-card__action--disabled_aok47_45)) {
     background-color: var(--teddy-color-background-interactive-transparent-negative-hover);
   }
-  ._teddy-card--purple-dark_1occu_73:active:has(._teddy-card__action_1occu_45:not(._teddy-card__action--disabled_1occu_45)) {
+  ._teddy-card--purple-dark_aok47_146:active:has(._teddy-card__action_aok47_45:not(._teddy-card__action--disabled_aok47_45)) {
     background-color: var(--teddy-color-background-interactive-transparent-negative-active);
   }
-  ._teddy-card--purple-dark_1occu_73:has(._teddy-card__action--disabled_1occu_45) {
+  ._teddy-card--purple-dark_aok47_146:has(._teddy-card__action--disabled_aok47_45) {
     color: var(--teddy-color-text-default);
     background-color: var(--teddy-color-background-interactive-disabled);
   }
-  ._teddy-card--purple-dark_1occu_73:has(._teddy-card__action--disabled_1occu_45) ._teddy-card__action_1occu_45 {
+  ._teddy-card--purple-dark_aok47_146:has(._teddy-card__action--disabled_aok47_45) ._teddy-card__action_aok47_45 {
     color: var(--teddy-color-text-weak);
     background-color: var(--teddy-color-background-interactive-disabled);
   }
-  ._teddy-card--white_1occu_92 {
+  ._teddy-card--white_aok47_165 {
     background-color: var(--teddy-color-brand-white);
     color: var(--teddy-color-text-default);
     border-color: var(--teddy-color-border-interactive-subtle);
   }
-  ._teddy-card--white_1occu_92:hover:has(._teddy-card__action_1occu_45:not(._teddy-card__action--disabled_1occu_45)) {
+  ._teddy-card--white_aok47_165:hover:has(._teddy-card__action_aok47_45:not(._teddy-card__action--disabled_aok47_45)) {
     background-color: var(--teddy-color-background-interactive-transparent-hover);
   }
-  ._teddy-card--white_1occu_92:active:has(._teddy-card__action_1occu_45:not(._teddy-card__action--disabled_1occu_45)) {
+  ._teddy-card--white_aok47_165:active:has(._teddy-card__action_aok47_45:not(._teddy-card__action--disabled_aok47_45)) {
     background-color: var(--teddy-color-background-interactive-transparent-active);
   }
-  ._teddy-card--white_1occu_92:has(._teddy-card__action--disabled_1occu_45) {
+  ._teddy-card--white_aok47_165:has(._teddy-card__action--disabled_aok47_45) {
     background-color: var(--teddy-color-background-interactive-disabled);
   }
-  ._teddy-card--gray_1occu_106 {
+  ._teddy-card--gray_aok47_179 {
     background-color: var(--teddy-color-background-secondary);
     color: var(--teddy-color-text-default);
     border-color: var(--teddy-color-border-interactive-subtle);
   }
-  ._teddy-card--gray_1occu_106:hover:has(._teddy-card__action_1occu_45:not(._teddy-card__action--disabled_1occu_45)) {
+  ._teddy-card--gray_aok47_179:hover:has(._teddy-card__action_aok47_45:not(._teddy-card__action--disabled_aok47_45)) {
     background-color: var(--teddy-color-gray-100);
   }
-  ._teddy-card--gray_1occu_106:active:has(._teddy-card__action_1occu_45:not(._teddy-card__action--disabled_1occu_45)) {
+  ._teddy-card--gray_aok47_179:active:has(._teddy-card__action_aok47_45:not(._teddy-card__action--disabled_aok47_45)) {
     background-color: var(--teddy-color-gray-200);
   }
-  ._teddy-card--gray_1occu_106:has(._teddy-card__action--disabled_1occu_45) {
+  ._teddy-card--gray_aok47_179:has(._teddy-card__action--disabled_aok47_45) {
     background-color: var(--teddy-color-background-interactive-disabled);
   }
-  ._teddy-card--beige_1occu_120 {
+  ._teddy-card--beige_aok47_193 {
     background-color: var(--teddy-color-beige-100);
     color: var(--teddy-color-text-default);
     border-color: var(--teddy-color-beige-300);
   }
-  ._teddy-card--beige_1occu_120:hover:has(._teddy-card__action_1occu_45:not(._teddy-card__action--disabled_1occu_45)) {
+  ._teddy-card--beige_aok47_193:hover:has(._teddy-card__action_aok47_45:not(._teddy-card__action--disabled_aok47_45)) {
     background-color: var(--teddy-color-beige-200);
   }
-  ._teddy-card--beige_1occu_120:active:has(._teddy-card__action_1occu_45:not(._teddy-card__action--disabled_1occu_45)) {
+  ._teddy-card--beige_aok47_193:active:has(._teddy-card__action_aok47_45:not(._teddy-card__action--disabled_aok47_45)) {
     background-color: var(--teddy-color-beige-300);
   }
-  ._teddy-card--beige_1occu_120:has(._teddy-card__action--disabled_1occu_45) {
+  ._teddy-card--beige_aok47_193:has(._teddy-card__action--disabled_aok47_45) {
     background-color: var(--teddy-color-background-interactive-disabled);
   }
-  ._teddy-card_1occu_3:has(._teddy-card__image--as-background_1occu_134) {
+  ._teddy-card_aok47_3:has(._teddy-card__image--as-background_aok47_207) {
     background-color: transparent;
   }
-  ._teddy-card__heading_1occu_137 {
+  ._teddy-card__heading_aok47_61 {
     color: inherit;
   }
-  ._teddy-card--background-image_1occu_140 {
+  ._teddy-card--background-image_aok47_213 {
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
   }
-  ._teddy-card__image_1occu_134 {
-    height: auto;
-    vertical-align: middle;
-    font-style: italic;
-    background-repeat: no-repeat;
-    background-size: cover;
-    shape-margin: 0.75rem;
-    border-radius: inherit;
+  ._teddy-card__inset_aok47_218 {
     overflow: hidden;
-    padding-bottom: var(--teddy-spacing-200);
-    width: 100%;
   }
-  ._teddy-card__inset_1occu_157 {
-    border-radius: inherit;
-    overflow: hidden;
-  }
-  ._teddy-card__inset--top_1occu_161 {
+  ._teddy-card__inset--top_aok47_221 {
     margin-top: calc(var(--teddy-spacing-250) * -1);
   }
-  ._teddy-card__inset--bottom_1occu_164 {
+  ._teddy-card__inset--top_aok47_221._teddy-card__inset--left_aok47_224 {
+    border-top-left-radius: inherit;
+  }
+  ._teddy-card__inset--top_aok47_221._teddy-card__inset--right_aok47_227 {
+    border-top-right-radius: inherit;
+  }
+  ._teddy-card__inset--bottom_aok47_230 {
     margin-bottom: calc(var(--teddy-spacing-250) * -1);
   }
-  ._teddy-card__inset--left_1occu_167 {
+  ._teddy-card__inset--bottom_aok47_230._teddy-card__inset--left_aok47_224 {
+    border-bottom-left-radius: inherit;
+  }
+  ._teddy-card__inset--bottom_aok47_230._teddy-card__inset--right_aok47_227 {
+    border-bottom-right-radius: inherit;
+  }
+  ._teddy-card__inset--left_aok47_224 {
     margin-left: calc(var(--teddy-spacing-250) * -1);
   }
-  ._teddy-card__inset--right_1occu_170 {
+  ._teddy-card__inset--right_aok47_227 {
     margin-right: calc(var(--teddy-spacing-250) * -1);
   }
 }@layer heading, button, card, notification;
@@ -3192,6 +3271,29 @@
     color: var(--teddy-color-xl);
   }
 }
+.teddy-object-fit {
+  object-fit: var(--teddy-object-fit);
+}
+@media (min-width: 0px) {
+  .sm\:teddy-object-fit {
+    object-fit: var(--teddy-object-fit-sm);
+  }
+}
+@media (min-width: 600px) {
+  .md\:teddy-object-fit {
+    object-fit: var(--teddy-object-fit-md);
+  }
+}
+@media (min-width: 1024px) {
+  .lg\:teddy-object-fit {
+    object-fit: var(--teddy-object-fit-lg);
+  }
+}
+@media (min-width: 1440px) {
+  .xl\:teddy-object-fit {
+    object-fit: var(--teddy-object-fit-xl);
+  }
+}
 .teddy-gtr {
   grid-template-rows: var(--teddy-gtr);
 }

package/dist/utils/generate-styling/index.d.ts

@@ -12,6 +12,7 @@ import { PaddingProps } from './padding';
 import { PositionProps } from './position';
 import { InsetProps } from './inset';
 import { ColorProps } from './color';
+import { ObjectFitProps } from './object-fit';
 
 export declare const displayValues: readonly [{
     readonly key: "none";
@@ -56,7 +57,7 @@ export declare const displayLayout: readonly [{
     }];
 }];
 export type DisplayLayout = Responsive<(typeof displayValues)[number]['key']>;
-export declare const layout: readonly [{
+export declare const stylings: readonly [{
     readonly key: "position";
     readonly className: "teddy-position";
     readonly values: readonly [{
@@ -84,6 +85,25 @@ export declare const layout: readonly [{
         readonly key: "unset";
         readonly value: "unset";
     }];
+}, {
+    readonly key: "objectFit";
+    readonly className: "teddy-object-fit";
+    readonly values: readonly [{
+        readonly key: "fill";
+        readonly value: "fill";
+    }, {
+        readonly key: "contain";
+        readonly value: "contain";
+    }, {
+        readonly key: "cover";
+        readonly value: "cover";
+    }, {
+        readonly key: "none";
+        readonly value: "none";
+    }, {
+        readonly key: "scale-down";
+        readonly value: "scale-down";
+    }];
 }, {
     readonly key: "inset";
     readonly className: "teddy-inset";
@@ -1595,6 +1615,9 @@ export declare const layout: readonly [{
     }, {
         readonly key: "between";
         readonly value: "space-between";
+    }, {
+        readonly key: "stretch";
+        readonly value: "stretch";
     }];
 }, {
     readonly key: "display";
@@ -1924,6 +1947,7 @@ export declare const layout: readonly [{
     }];
 }];
 export type CommonChildrenLayoutProps = PositionProps & InsetProps & MarginProps & PaddingProps & WidthProps & HeightProps & ColorProps;
+export type ImageStylingProps = CommonChildrenLayoutProps & ObjectFitProps;
 export type ChildrenLayoutProps = FlexChildren & GridChildren & CommonChildrenLayoutProps;
 export type CommonFlexGridLayoutProps = ChildrenLayoutProps & GapProps & {
     align?: Align;
@@ -1931,7 +1955,7 @@ export type CommonFlexGridLayoutProps = ChildrenLayoutProps & GapProps & {
 };
 export type LayoutFlexProps = CommonFlexGridLayoutProps & FlexLayout;
 export type LayoutGridProps = CommonFlexGridLayoutProps & GridLayout;
-export type LayoutProps = Omit<LayoutGridProps, 'display'> & Omit<LayoutFlexProps, 'display'> & {
+export type LayoutProps = Omit<LayoutGridProps, 'display'> & Omit<ImageStylingProps, 'display'> & Omit<LayoutFlexProps, 'display'> & {
     display?: DisplayLayout;
 };
 type InlineStyle = React.CSSProperties | Record<string, string | number | null | undefined> | undefined;

package/dist/utils/generate-styling/index.js

@@ -11,6 +11,7 @@ import { paddings } from "./padding.js";
 import { position } from "./position.js";
 import { inset } from "./inset.js";
 import { color } from "./color.js";
+import { objectFit } from "./object-fit.js";
 const breakpoint = {
   sm: "0px",
   md: "600px",
@@ -26,8 +27,9 @@ const displayLayout = [
     values: displayValues
   }
 ];
-const layout = [
+const stylings = [
   ...position,
+  ...objectFit,
   ...inset,
   ...margins,
   ...paddings,
@@ -60,8 +62,8 @@ function extractProps(props) {
   const extractedProps = { ...props };
   let style = extractedProps.style;
   let className = extractedProps.className;
-  for (const key in layout) {
-    const currentLayout = layout[key];
+  for (const key in stylings) {
+    const currentLayout = stylings[key];
     const currentLayoutKey = currentLayout.key;
     const layoutProp = extractedProps[currentLayoutKey];
     if (layoutProp) {
@@ -90,6 +92,6 @@ export {
   displayLayout,
   displayValues,
   extractProps,
-  layout,
-  mergeStyles
+  mergeStyles,
+  stylings
 };

package/dist/utils/generate-styling/justify.d.ts

@@ -12,6 +12,9 @@ export declare const justifyValues: readonly [{
 }, {
     readonly key: "between";
     readonly value: "space-between";
+}, {
+    readonly key: "stretch";
+    readonly value: "stretch";
 }];
 export declare const justify: readonly [{
     readonly key: "justify";
@@ -28,6 +31,9 @@ export declare const justify: readonly [{
     }, {
         readonly key: "between";
         readonly value: "space-between";
+    }, {
+        readonly key: "stretch";
+        readonly value: "stretch";
     }];
 }];
 /**

package/dist/utils/generate-styling/justify.js

@@ -2,7 +2,8 @@ const justifyValues = [
   { key: "start", value: "flex-start" },
   { key: "center", value: "center" },
   { key: "end", value: "flex-end" },
-  { key: "between", value: "space-between" }
+  { key: "between", value: "space-between" },
+  { key: "stretch", value: "stretch" }
 ];
 const justify = [
   {

package/dist/utils/generate-styling/object-fit.d.ts

@@ -0,0 +1,45 @@
+import { Responsive } from './util';
+
+export declare const objectFitValues: readonly [{
+    readonly key: "fill";
+    readonly value: "fill";
+}, {
+    readonly key: "contain";
+    readonly value: "contain";
+}, {
+    readonly key: "cover";
+    readonly value: "cover";
+}, {
+    readonly key: "none";
+    readonly value: "none";
+}, {
+    readonly key: "scale-down";
+    readonly value: "scale-down";
+}];
+export declare const objectFit: readonly [{
+    readonly key: "objectFit";
+    readonly className: "teddy-object-fit";
+    readonly values: readonly [{
+        readonly key: "fill";
+        readonly value: "fill";
+    }, {
+        readonly key: "contain";
+        readonly value: "contain";
+    }, {
+        readonly key: "cover";
+        readonly value: "cover";
+    }, {
+        readonly key: "none";
+        readonly value: "none";
+    }, {
+        readonly key: "scale-down";
+        readonly value: "scale-down";
+    }];
+}];
+/**
+ * ObjectFit. It can be  or a responsive value.
+ * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+ */
+export type ObjectFitProps = {
+    objectFit?: Responsive<(typeof objectFitValues)[number]['key']>;
+};

package/dist/utils/generate-styling/object-fit.js

@@ -0,0 +1,18 @@
+const objectFitValues = [
+  { key: "fill", value: "fill" },
+  { key: "contain", value: "contain" },
+  { key: "cover", value: "cover" },
+  { key: "none", value: "none" },
+  { key: "scale-down", value: "scale-down" }
+];
+const objectFit = [
+  {
+    key: "objectFit",
+    className: "teddy-object-fit",
+    values: objectFitValues
+  }
+];
+export {
+  objectFit,
+  objectFitValues
+};

package/package.json

@@ -18,7 +18,7 @@
     "pnpm": ">=8"
   },
   "private": false,
-  "version": "0.0.19",
+  "version": "0.0.20",
   "sideEffects": [
     "**/*.css"
   ],