@telia/teddy 0.0.67 → 0.0.69

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

@@ -25,7 +25,7 @@ const AccordionPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(A
 const Content = React.forwardRef(
   ({ className, children, ...props }, forwardRef) => {
     const classes = clsx([components_accordion_accordionRoot.styles[`${components_accordion_accordionRoot.rootClassName}__content`]], className);
-    return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Content, { ...props, ref: forwardRef, className: classes, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Content, { ...props, ref: forwardRef, className: classes, forceMount: true, children });
   }
 );
 Content.displayName = "Content";

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

@@ -6,7 +6,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
 const Content = React__default.forwardRef(
   ({ className, children, ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}__content`]], className);
-    return /* @__PURE__ */ jsx(AccordionPrimitive.Content, { ...props, ref: forwardRef, className: classes, children });
+    return /* @__PURE__ */ jsx(AccordionPrimitive.Content, { ...props, ref: forwardRef, className: classes, forceMount: true, children });
   }
 );
 Content.displayName = "Content";

package/dist/components/accordion/accordion-root.cjs

@@ -22,22 +22,22 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const AccordionPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AccordionPrimitive);
-const slideDown = "_slideDown_1arsz_1";
-const slideUp = "_slideUp_1arsz_1";
+const slideDown = "_slideDown_nueyr_1";
+const slideUp = "_slideUp_nueyr_1";
 const styles = {
-  "teddy-accordion": "_teddy-accordion_1arsz_3",
-  "teddy-accordion--indented": "_teddy-accordion--indented_1arsz_11",
-  "teddy-accordion__header": "_teddy-accordion__header_1arsz_11",
-  "teddy-accordion__content": "_teddy-accordion__content_1arsz_14",
-  "teddy-accordion--negative": "_teddy-accordion--negative_1arsz_17",
-  "teddy-accordion__title": "_teddy-accordion__title_1arsz_21",
-  "teddy-accordion__trigger": "_teddy-accordion__trigger_1arsz_24",
-  "teddy-accordion__item": "_teddy-accordion__item_1arsz_32",
-  "teddy-accordion__indicator": "_teddy-accordion__indicator_1arsz_101",
-  "teddy-accordion__indicator--rotate": "_teddy-accordion__indicator--rotate_1arsz_112",
+  "teddy-accordion": "_teddy-accordion_nueyr_3",
+  "teddy-accordion--indented": "_teddy-accordion--indented_nueyr_11",
+  "teddy-accordion__header": "_teddy-accordion__header_nueyr_11",
+  "teddy-accordion__content": "_teddy-accordion__content_nueyr_14",
+  "teddy-accordion--negative": "_teddy-accordion--negative_nueyr_17",
+  "teddy-accordion__title": "_teddy-accordion__title_nueyr_21",
+  "teddy-accordion__trigger": "_teddy-accordion__trigger_nueyr_24",
+  "teddy-accordion__item": "_teddy-accordion__item_nueyr_32",
+  "teddy-accordion__indicator": "_teddy-accordion__indicator_nueyr_101",
+  "teddy-accordion__indicator--rotate": "_teddy-accordion__indicator--rotate_nueyr_112",
   slideDown,
   slideUp,
-  "teddy-accordion--info-area": "_teddy-accordion--info-area_1arsz_138"
+  "teddy-accordion--info-area": "_teddy-accordion--info-area_nueyr_142"
 };
 const rootClassName = "teddy-accordion";
 const RootContext = React.createContext({ value: void 0, variant: void 0 });

package/dist/components/accordion/accordion-root.js

@@ -3,22 +3,22 @@ import clsx from "clsx";
 import React__default from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-const slideDown = "_slideDown_1arsz_1";
-const slideUp = "_slideUp_1arsz_1";
+const slideDown = "_slideDown_nueyr_1";
+const slideUp = "_slideUp_nueyr_1";
 const styles = {
-  "teddy-accordion": "_teddy-accordion_1arsz_3",
-  "teddy-accordion--indented": "_teddy-accordion--indented_1arsz_11",
-  "teddy-accordion__header": "_teddy-accordion__header_1arsz_11",
-  "teddy-accordion__content": "_teddy-accordion__content_1arsz_14",
-  "teddy-accordion--negative": "_teddy-accordion--negative_1arsz_17",
-  "teddy-accordion__title": "_teddy-accordion__title_1arsz_21",
-  "teddy-accordion__trigger": "_teddy-accordion__trigger_1arsz_24",
-  "teddy-accordion__item": "_teddy-accordion__item_1arsz_32",
-  "teddy-accordion__indicator": "_teddy-accordion__indicator_1arsz_101",
-  "teddy-accordion__indicator--rotate": "_teddy-accordion__indicator--rotate_1arsz_112",
+  "teddy-accordion": "_teddy-accordion_nueyr_3",
+  "teddy-accordion--indented": "_teddy-accordion--indented_nueyr_11",
+  "teddy-accordion__header": "_teddy-accordion__header_nueyr_11",
+  "teddy-accordion__content": "_teddy-accordion__content_nueyr_14",
+  "teddy-accordion--negative": "_teddy-accordion--negative_nueyr_17",
+  "teddy-accordion__title": "_teddy-accordion__title_nueyr_21",
+  "teddy-accordion__trigger": "_teddy-accordion__trigger_nueyr_24",
+  "teddy-accordion__item": "_teddy-accordion__item_nueyr_32",
+  "teddy-accordion__indicator": "_teddy-accordion__indicator_nueyr_101",
+  "teddy-accordion__indicator--rotate": "_teddy-accordion__indicator--rotate_nueyr_112",
   slideDown,
   slideUp,
-  "teddy-accordion--info-area": "_teddy-accordion--info-area_1arsz_138"
+  "teddy-accordion--info-area": "_teddy-accordion--info-area_nueyr_142"
 };
 const rootClassName = "teddy-accordion";
 const RootContext = React__default.createContext({ value: void 0, variant: void 0 });

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_card_card = require("./card.cjs");
+const components_carousel_carouselRoot = require("../carousel/carousel-root.cjs");
+const components_colorDot_index = require("../color-dot/index.cjs");
+const ImageSlider = React.forwardRef(
+  ({ variants, className, children, onClickNext, onClickPrev, onChangeVariant = () => void 0 }, forwardRef) => {
+    const [selectedSlide, setSelectedSlide] = React.useState(0);
+    const rootCarouselClass = `${components_card_card.rootClassName}__carousel`;
+    const classes = clsx([components_card_card.styles[rootCarouselClass]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: forwardRef, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx(
+      components_carousel_carouselRoot.Carousel,
+      {
+        size: "sm",
+        onClickNext,
+        onClickPrev,
+        settings: {
+          beforeChange: (_currentSlide, nextSlide) => {
+            setSelectedSlide(nextSlide);
+            onChangeVariant(variants[nextSlide]);
+          },
+          customPaging: (index) => {
+            const variant = variants[index];
+            return /* @__PURE__ */ jsxRuntime.jsx(components_colorDot_index.ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
+          }
+        },
+        children
+      }
+    ) });
+  }
+);
+ImageSlider.displayName = "ImageSlider";
+exports.ImageSlider = ImageSlider;

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

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+export type ImageSliderVariant = {
+    color: string;
+    url: string;
+};
+export interface ImageSliderProps {
+    variants: ImageSliderVariant[];
+    children: React.ReactNode;
+    className?: string;
+    onClickNext?: () => void;
+    onClickPrev?: () => void;
+    onChangeVariant?: (variant: ImageSliderVariant) => void;
+}
+export declare const ImageSlider: React.ForwardRefExoticComponent<ImageSliderProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import React__default, { useState } from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./card.js";
+import { Carousel } from "../carousel/carousel-root.js";
+import { ColorDot } from "../color-dot/index.js";
+const ImageSlider = React__default.forwardRef(
+  ({ variants, className, children, onClickNext, onClickPrev, onChangeVariant = () => void 0 }, forwardRef) => {
+    const [selectedSlide, setSelectedSlide] = useState(0);
+    const rootCarouselClass = `${rootClassName}__carousel`;
+    const classes = clsx([styles[rootCarouselClass]], className);
+    return /* @__PURE__ */ jsx("div", { ref: forwardRef, className: classes, children: /* @__PURE__ */ jsx(
+      Carousel,
+      {
+        size: "sm",
+        onClickNext,
+        onClickPrev,
+        settings: {
+          beforeChange: (_currentSlide, nextSlide) => {
+            setSelectedSlide(nextSlide);
+            onChangeVariant(variants[nextSlide]);
+          },
+          customPaging: (index) => {
+            const variant = variants[index];
+            return /* @__PURE__ */ jsx(ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
+          }
+        },
+        children
+      }
+    ) });
+  }
+);
+ImageSlider.displayName = "ImageSlider";
+export {
+  ImageSlider
+};

package/dist/components/card/card.cjs

@@ -7,53 +7,54 @@ const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs
 const components_grid_grid = require("../grid/grid.cjs");
 const tokens_color_variables = require("../../tokens/color/variables.cjs");
 const styles = {
-  "teddy-card": "_teddy-card_18mto_3",
-  "teddy-card__slot": "_teddy-card__slot_18mto_13",
-  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_18mto_16",
-  "teddy-card__slot--center": "_teddy-card__slot--center_18mto_19",
-  "teddy-card--shadow": "_teddy-card--shadow_18mto_41",
-  "teddy-card__action": "_teddy-card__action_18mto_45",
-  "teddy-card__action--disabled": "_teddy-card__action--disabled_18mto_45",
-  "teddy-card--border": "_teddy-card--border_18mto_52",
-  "teddy-card--layout": "_teddy-card--layout_18mto_55",
-  "teddy-card__illustration": "_teddy-card__illustration_18mto_55",
-  "teddy-card__content": "_teddy-card__content_18mto_58",
-  "teddy-card__heading": "_teddy-card__heading_18mto_61",
-  "teddy-card__action-wrapper": "_teddy-card__action-wrapper_18mto_64",
-  "teddy-card__footer": "_teddy-card__footer_18mto_67",
-  "teddy-card__overline": "_teddy-card__overline_18mto_70",
-  "teddy-card__description": "_teddy-card__description_18mto_73",
-  "teddy-card__color-dots": "_teddy-card__color-dots_18mto_76",
-  "teddy-card__availability": "_teddy-card__availability_18mto_79",
-  "teddy-card__price": "_teddy-card__price_18mto_82",
-  "teddy-card--default": "_teddy-card--default_18mto_85",
-  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_18mto_90",
-  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_18mto_109",
-  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_18mto_121",
-  "teddy-card--rich-card": "_teddy-card--rich-card_18mto_133",
-  "teddy-card__line": "_teddy-card__line_18mto_151",
-  "teddy-card--purple-light": "_teddy-card--purple-light_18mto_155",
-  "teddy-card--purple-dark": "_teddy-card--purple-dark_18mto_169",
-  "teddy-card--white": "_teddy-card--white_18mto_188",
-  "teddy-card--gray": "_teddy-card--gray_18mto_202",
-  "teddy-card--beige": "_teddy-card--beige_18mto_216",
-  "teddy-card--product": "_teddy-card--product_18mto_230",
-  "teddy-card__price--big": "_teddy-card__price--big_18mto_281",
-  "teddy-card__image--as-background": "_teddy-card__image--as-background_18mto_284",
-  "teddy-card--background-image": "_teddy-card--background-image_18mto_290",
-  "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_18mto_295",
-  "teddy-card__inset": "_teddy-card__inset_18mto_299",
-  "teddy-card__inset--top": "_teddy-card__inset--top_18mto_302",
-  "teddy-card__inset--left": "_teddy-card__inset--left_18mto_305",
-  "teddy-card__inset--right": "_teddy-card__inset--right_18mto_308",
-  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_18mto_311",
-  "teddy-card__availability--badge": "_teddy-card__availability--badge_18mto_326",
-  "teddy-card__availability--success": "_teddy-card__availability--success_18mto_329",
-  "teddy-card__availability--warning": "_teddy-card__availability--warning_18mto_332",
-  "teddy-card__availability--error": "_teddy-card__availability--error_18mto_335",
-  "teddy-card__availability--special": "_teddy-card__availability--special_18mto_338",
-  "teddy-card__availability--neutral": "_teddy-card__availability--neutral_18mto_341",
-  "teddy-card__availability--information": "_teddy-card__availability--information_18mto_344"
+  "teddy-card": "_teddy-card_13qq5_3",
+  "teddy-card__slot": "_teddy-card__slot_13qq5_13",
+  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_13qq5_16",
+  "teddy-card__slot--center": "_teddy-card__slot--center_13qq5_19",
+  "teddy-card--shadow": "_teddy-card--shadow_13qq5_41",
+  "teddy-card__action": "_teddy-card__action_13qq5_45",
+  "teddy-card__action--disabled": "_teddy-card__action--disabled_13qq5_45",
+  "teddy-card--border": "_teddy-card--border_13qq5_52",
+  "teddy-card--layout": "_teddy-card--layout_13qq5_55",
+  "teddy-card__illustration": "_teddy-card__illustration_13qq5_55",
+  "teddy-card__carousel": "_teddy-card__carousel_13qq5_58",
+  "teddy-card__content": "_teddy-card__content_13qq5_61",
+  "teddy-card__heading": "_teddy-card__heading_13qq5_64",
+  "teddy-card__action-wrapper": "_teddy-card__action-wrapper_13qq5_67",
+  "teddy-card__footer": "_teddy-card__footer_13qq5_70",
+  "teddy-card__overline": "_teddy-card__overline_13qq5_73",
+  "teddy-card__description": "_teddy-card__description_13qq5_76",
+  "teddy-card__color-dots": "_teddy-card__color-dots_13qq5_79",
+  "teddy-card__availability": "_teddy-card__availability_13qq5_82",
+  "teddy-card__price": "_teddy-card__price_13qq5_85",
+  "teddy-card--default": "_teddy-card--default_13qq5_88",
+  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_13qq5_93",
+  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_13qq5_112",
+  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_13qq5_124",
+  "teddy-card--rich-card": "_teddy-card--rich-card_13qq5_136",
+  "teddy-card__line": "_teddy-card__line_13qq5_154",
+  "teddy-card--purple-light": "_teddy-card--purple-light_13qq5_158",
+  "teddy-card--purple-dark": "_teddy-card--purple-dark_13qq5_172",
+  "teddy-card--white": "_teddy-card--white_13qq5_191",
+  "teddy-card--gray": "_teddy-card--gray_13qq5_205",
+  "teddy-card--beige": "_teddy-card--beige_13qq5_219",
+  "teddy-card--product": "_teddy-card--product_13qq5_233",
+  "teddy-card__price--big": "_teddy-card__price--big_13qq5_293",
+  "teddy-card__image--as-background": "_teddy-card__image--as-background_13qq5_296",
+  "teddy-card--background-image": "_teddy-card--background-image_13qq5_302",
+  "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_13qq5_307",
+  "teddy-card__inset": "_teddy-card__inset_13qq5_311",
+  "teddy-card__inset--top": "_teddy-card__inset--top_13qq5_314",
+  "teddy-card__inset--left": "_teddy-card__inset--left_13qq5_317",
+  "teddy-card__inset--right": "_teddy-card__inset--right_13qq5_320",
+  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_13qq5_323",
+  "teddy-card__availability--badge": "_teddy-card__availability--badge_13qq5_338",
+  "teddy-card__availability--success": "_teddy-card__availability--success_13qq5_341",
+  "teddy-card__availability--warning": "_teddy-card__availability--warning_13qq5_344",
+  "teddy-card__availability--error": "_teddy-card__availability--error_13qq5_347",
+  "teddy-card__availability--special": "_teddy-card__availability--special_13qq5_350",
+  "teddy-card__availability--neutral": "_teddy-card__availability--neutral_13qq5_353",
+  "teddy-card__availability--information": "_teddy-card__availability--information_13qq5_356"
 };
 const rootClassName = "teddy-card";
 const actionElementIdentifier = `${rootClassName}__action`;

package/dist/components/card/card.js

@@ -5,53 +5,54 @@ import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
 import { Grid } from "../grid/grid.js";
 import { teddyColorTransparentWhite850, teddyColorTransparentWhite800, teddyColorTransparentWhite100, teddyColorTransparentBlack600, teddyColorTransparentBlack200 } from "../../tokens/color/variables.js";
 const styles = {
-  "teddy-card": "_teddy-card_18mto_3",
-  "teddy-card__slot": "_teddy-card__slot_18mto_13",
-  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_18mto_16",
-  "teddy-card__slot--center": "_teddy-card__slot--center_18mto_19",
-  "teddy-card--shadow": "_teddy-card--shadow_18mto_41",
-  "teddy-card__action": "_teddy-card__action_18mto_45",
-  "teddy-card__action--disabled": "_teddy-card__action--disabled_18mto_45",
-  "teddy-card--border": "_teddy-card--border_18mto_52",
-  "teddy-card--layout": "_teddy-card--layout_18mto_55",
-  "teddy-card__illustration": "_teddy-card__illustration_18mto_55",
-  "teddy-card__content": "_teddy-card__content_18mto_58",
-  "teddy-card__heading": "_teddy-card__heading_18mto_61",
-  "teddy-card__action-wrapper": "_teddy-card__action-wrapper_18mto_64",
-  "teddy-card__footer": "_teddy-card__footer_18mto_67",
-  "teddy-card__overline": "_teddy-card__overline_18mto_70",
-  "teddy-card__description": "_teddy-card__description_18mto_73",
-  "teddy-card__color-dots": "_teddy-card__color-dots_18mto_76",
-  "teddy-card__availability": "_teddy-card__availability_18mto_79",
-  "teddy-card__price": "_teddy-card__price_18mto_82",
-  "teddy-card--default": "_teddy-card--default_18mto_85",
-  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_18mto_90",
-  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_18mto_109",
-  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_18mto_121",
-  "teddy-card--rich-card": "_teddy-card--rich-card_18mto_133",
-  "teddy-card__line": "_teddy-card__line_18mto_151",
-  "teddy-card--purple-light": "_teddy-card--purple-light_18mto_155",
-  "teddy-card--purple-dark": "_teddy-card--purple-dark_18mto_169",
-  "teddy-card--white": "_teddy-card--white_18mto_188",
-  "teddy-card--gray": "_teddy-card--gray_18mto_202",
-  "teddy-card--beige": "_teddy-card--beige_18mto_216",
-  "teddy-card--product": "_teddy-card--product_18mto_230",
-  "teddy-card__price--big": "_teddy-card__price--big_18mto_281",
-  "teddy-card__image--as-background": "_teddy-card__image--as-background_18mto_284",
-  "teddy-card--background-image": "_teddy-card--background-image_18mto_290",
-  "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_18mto_295",
-  "teddy-card__inset": "_teddy-card__inset_18mto_299",
-  "teddy-card__inset--top": "_teddy-card__inset--top_18mto_302",
-  "teddy-card__inset--left": "_teddy-card__inset--left_18mto_305",
-  "teddy-card__inset--right": "_teddy-card__inset--right_18mto_308",
-  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_18mto_311",
-  "teddy-card__availability--badge": "_teddy-card__availability--badge_18mto_326",
-  "teddy-card__availability--success": "_teddy-card__availability--success_18mto_329",
-  "teddy-card__availability--warning": "_teddy-card__availability--warning_18mto_332",
-  "teddy-card__availability--error": "_teddy-card__availability--error_18mto_335",
-  "teddy-card__availability--special": "_teddy-card__availability--special_18mto_338",
-  "teddy-card__availability--neutral": "_teddy-card__availability--neutral_18mto_341",
-  "teddy-card__availability--information": "_teddy-card__availability--information_18mto_344"
+  "teddy-card": "_teddy-card_13qq5_3",
+  "teddy-card__slot": "_teddy-card__slot_13qq5_13",
+  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_13qq5_16",
+  "teddy-card__slot--center": "_teddy-card__slot--center_13qq5_19",
+  "teddy-card--shadow": "_teddy-card--shadow_13qq5_41",
+  "teddy-card__action": "_teddy-card__action_13qq5_45",
+  "teddy-card__action--disabled": "_teddy-card__action--disabled_13qq5_45",
+  "teddy-card--border": "_teddy-card--border_13qq5_52",
+  "teddy-card--layout": "_teddy-card--layout_13qq5_55",
+  "teddy-card__illustration": "_teddy-card__illustration_13qq5_55",
+  "teddy-card__carousel": "_teddy-card__carousel_13qq5_58",
+  "teddy-card__content": "_teddy-card__content_13qq5_61",
+  "teddy-card__heading": "_teddy-card__heading_13qq5_64",
+  "teddy-card__action-wrapper": "_teddy-card__action-wrapper_13qq5_67",
+  "teddy-card__footer": "_teddy-card__footer_13qq5_70",
+  "teddy-card__overline": "_teddy-card__overline_13qq5_73",
+  "teddy-card__description": "_teddy-card__description_13qq5_76",
+  "teddy-card__color-dots": "_teddy-card__color-dots_13qq5_79",
+  "teddy-card__availability": "_teddy-card__availability_13qq5_82",
+  "teddy-card__price": "_teddy-card__price_13qq5_85",
+  "teddy-card--default": "_teddy-card--default_13qq5_88",
+  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_13qq5_93",
+  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_13qq5_112",
+  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_13qq5_124",
+  "teddy-card--rich-card": "_teddy-card--rich-card_13qq5_136",
+  "teddy-card__line": "_teddy-card__line_13qq5_154",
+  "teddy-card--purple-light": "_teddy-card--purple-light_13qq5_158",
+  "teddy-card--purple-dark": "_teddy-card--purple-dark_13qq5_172",
+  "teddy-card--white": "_teddy-card--white_13qq5_191",
+  "teddy-card--gray": "_teddy-card--gray_13qq5_205",
+  "teddy-card--beige": "_teddy-card--beige_13qq5_219",
+  "teddy-card--product": "_teddy-card--product_13qq5_233",
+  "teddy-card__price--big": "_teddy-card__price--big_13qq5_293",
+  "teddy-card__image--as-background": "_teddy-card__image--as-background_13qq5_296",
+  "teddy-card--background-image": "_teddy-card--background-image_13qq5_302",
+  "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_13qq5_307",
+  "teddy-card__inset": "_teddy-card__inset_13qq5_311",
+  "teddy-card__inset--top": "_teddy-card__inset--top_13qq5_314",
+  "teddy-card__inset--left": "_teddy-card__inset--left_13qq5_317",
+  "teddy-card__inset--right": "_teddy-card__inset--right_13qq5_320",
+  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_13qq5_323",
+  "teddy-card__availability--badge": "_teddy-card__availability--badge_13qq5_338",
+  "teddy-card__availability--success": "_teddy-card__availability--success_13qq5_341",
+  "teddy-card__availability--warning": "_teddy-card__availability--warning_13qq5_344",
+  "teddy-card__availability--error": "_teddy-card__availability--error_13qq5_347",
+  "teddy-card__availability--special": "_teddy-card__availability--special_13qq5_350",
+  "teddy-card__availability--neutral": "_teddy-card__availability--neutral_13qq5_353",
+  "teddy-card__availability--information": "_teddy-card__availability--information_13qq5_356"
 };
 const rootClassName = "teddy-card";
 const actionElementIdentifier = `${rootClassName}__action`;

package/dist/components/card/index.cjs

@@ -14,6 +14,7 @@ const components_card_cardDescription = require("./card-description.cjs");
 const components_card_cardAvailability = require("./card-availability.cjs");
 const components_card_cardColorDots = require("./card-color-dots.cjs");
 const components_card_cardPrice = require("./card-price.cjs");
+const components_card_cardCarousel = require("./card-carousel.cjs");
 components_card_card.Root.displayName = "Card";
 components_card_cardButton.Button.displayName = "Card.Button";
 components_card_cardContent.Content.displayName = "Card.Content";
@@ -28,6 +29,7 @@ components_card_cardDescription.Description.displayName = "Card.Description";
 components_card_cardAvailability.Availability.displayName = "Card.Availability";
 components_card_cardColorDots.ColorDots.displayName = "Card.ColorDots";
 components_card_cardPrice.Price.displayName = "Card.Price";
+components_card_cardCarousel.ImageSlider.displayName = "Card.ImageSlider";
 const Card = Object.assign(components_card_card.Root, {
   Heading: components_card_cardHeading.Heading,
   Button: components_card_cardButton.Button,
@@ -41,6 +43,7 @@ const Card = Object.assign(components_card_card.Root, {
   Description: components_card_cardDescription.Description,
   Availability: components_card_cardAvailability.Availability,
   ColorDots: components_card_cardColorDots.ColorDots,
-  Price: components_card_cardPrice.Price
+  Price: components_card_cardPrice.Price,
+  ImageSlider: components_card_cardCarousel.ImageSlider
 });
 exports.Card = Card;

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

@@ -12,6 +12,7 @@ import { DescriptionProps } from './card-description';
 import { AvailabilityProps } from './card-availability';
 import { ColorDotsProps } from './card-color-dots';
 import { PriceProps } from './card-price';
+import { ImageSliderProps } from './card-carousel';
 
 export declare const Card: import('react').ForwardRefExoticComponent<RootProps & import('react').RefAttributes<HTMLDivElement>> & {
     Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
@@ -38,6 +39,7 @@ export declare const Card: import('react').ForwardRefExoticComponent<RootProps &
     } & import('react').RefAttributes<HTMLDivElement>>;
     ColorDots: import('react').ForwardRefExoticComponent<ColorDotsProps & import('react').RefAttributes<HTMLDivElement>>;
     Price: import('react').ForwardRefExoticComponent<PriceProps & import('react').RefAttributes<HTMLDivElement>>;
+    ImageSlider: import('react').ForwardRefExoticComponent<ImageSliderProps & import('react').RefAttributes<HTMLDivElement>>;
 };
 export type CardProps = {
     Root: RootProps;
@@ -54,4 +56,5 @@ export type CardProps = {
     Availability: AvailabilityProps;
     ColorDots: ColorDotsProps;
     Price: PriceProps;
+    ImageSlider: ImageSliderProps;
 };

package/dist/components/card/index.js

@@ -12,6 +12,7 @@ import { Description } from "./card-description.js";
 import { Availability } from "./card-availability.js";
 import { ColorDots } from "./card-color-dots.js";
 import { Price } from "./card-price.js";
+import { ImageSlider } from "./card-carousel.js";
 Root.displayName = "Card";
 Button.displayName = "Card.Button";
 Content.displayName = "Card.Content";
@@ -26,6 +27,7 @@ Description.displayName = "Card.Description";
 Availability.displayName = "Card.Availability";
 ColorDots.displayName = "Card.ColorDots";
 Price.displayName = "Card.Price";
+ImageSlider.displayName = "Card.ImageSlider";
 const Card = Object.assign(Root, {
   Heading,
   Button,
@@ -39,7 +41,8 @@ const Card = Object.assign(Root, {
   Description,
   Availability,
   ColorDots,
-  Price
+  Price,
+  ImageSlider
 });
 export {
   Card

package/dist/components/carousel/carousel-root.cjs

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const Slider = require("react-slick");
+require("../../assets/sprite.269ba410-teddy.svg");
+const components_icon_icon = require("../icon/icon.cjs");
+const tokens_color_variables = require("../../tokens/color/variables.cjs");
+const styles = {
+  "teddy-carousel": "_teddy-carousel_8mouq_2",
+  "teddy-carousel__arrow": "_teddy-carousel__arrow_8mouq_8",
+  "teddy-carousel__item": "_teddy-carousel__item_8mouq_17",
+  "teddy-carousel--sm": "_teddy-carousel--sm_8mouq_81"
+};
+const rootClassName = "teddy-carousel";
+const CustomArrow = ({
+  className,
+  icon,
+  onClick = () => void 0,
+  handleClick = () => void 0,
+  ariaLabel
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    "aria-label": ariaLabel,
+    className: clsx([styles[`${rootClassName}__arrow`], className]),
+    onClick: (event) => {
+      event.stopPropagation();
+      onClick();
+      handleClick();
+    },
+    children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: icon, color: tokens_color_variables.teddyColorTextInteractivePrimary, size: "md" })
+  }
+);
+const Carousel = ({
+  children,
+  className = "",
+  onClickNext,
+  onClickPrev,
+  navigationIcon,
+  settings,
+  size = "lg"
+}) => {
+  const computedSettings = {
+    responsive: [],
+    centerMode: false,
+    slidesPerRow: 1,
+    nextArrow: /* @__PURE__ */ jsxRuntime.jsx(CustomArrow, { icon: navigationIcon ?? "arrow-right", handleClick: onClickNext, ariaLabel: "Neste" }),
+    prevArrow: /* @__PURE__ */ jsxRuntime.jsx(CustomArrow, { icon: navigationIcon ?? "arrow-left", handleClick: onClickPrev, ariaLabel: "Forrige" }),
+    slidesToScroll: 1,
+    speed: 500,
+    dots: true,
+    lazyLoad: "ondemand",
+    ...settings
+  };
+  const [swiped, setSwiped] = React.useState(false);
+  const handleSwiped = React.useCallback(() => {
+    setSwiped(true);
+  }, [setSwiped]);
+  const handleOnItemClick = React.useCallback(
+    (e) => {
+      if (swiped) {
+        e.stopPropagation();
+        e.preventDefault();
+        setSwiped(false);
+      }
+    },
+    [swiped]
+  );
+  const filteredChildren = React.Children.toArray(children).filter((child) => !!child);
+  const SliderComponent = Slider.default ? Slider.default : Slider;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: clsx(styles[`${rootClassName}`], {
+        [styles[`${rootClassName}--${size}`]]: size,
+        [className]: className
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(SliderComponent, { ...computedSettings, onSwipe: handleSwiped, children: React.Children.map(filteredChildren, (child) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+            },
+            onClickCapture: handleOnItemClick,
+            className: clsx(styles[`${rootClassName}__item`]),
+            children: child
+          }
+        );
+      }) })
+    }
+  );
+};
+Carousel.displayName = "Carousel";
+exports.Carousel = Carousel;

package/dist/components/carousel/carousel-root.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { Settings } from 'react-slick';
+import { IconName } from '../icon';
+
+export type CarouselProps = {
+    children: React.ReactNode;
+    className?: string;
+    navigationIcon?: IconName;
+    settings?: Settings;
+    size?: 'sm' | 'lg';
+    onClickNext?: () => void;
+    onClickPrev?: () => void;
+};
+/** Carousel to show images in. Can be fully customized by utlizing underlying 'settings' props mapped with react-slick */
+export declare const Carousel: React.FC<CarouselProps>;