@telia/teddy 0.0.68 → 0.0.70

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-slot.cjs

@@ -9,8 +9,8 @@ const getOffsets = (layout, align) => {
   switch (layout) {
     case "product":
       return {
-        top: "200",
-        right: "200"
+        top: "100",
+        right: "100"
       };
     default:
       return {
@@ -30,7 +30,8 @@ const Slot = React.forwardRef(
         components_card_card.styles[`${components_card_card.rootClassName}__slot`],
         {
           [components_card_card.styles[`${components_card_card.rootClassName}__slot--center`]]: align === "top" || align === "bottom",
-          [components_card_card.styles[`${components_card_card.rootClassName}__slot--bottom`]]: align == null ? void 0 : align.includes("bottom")
+          [components_card_card.styles[`${components_card_card.rootClassName}__slot--bottom`]]: align == null ? void 0 : align.includes("bottom"),
+          [components_card_card.styles[`${components_card_card.rootClassName}__slot--no-translate`]]: layout === "product"
         }
       ],
       className

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

@@ -7,8 +7,8 @@ const getOffsets = (layout, align) => {
   switch (layout) {
     case "product":
       return {
-        top: "200",
-        right: "200"
+        top: "100",
+        right: "100"
       };
     default:
       return {
@@ -28,7 +28,8 @@ const Slot = React__default.forwardRef(
         styles[`${rootClassName}__slot`],
         {
           [styles[`${rootClassName}__slot--center`]]: align === "top" || align === "bottom",
-          [styles[`${rootClassName}__slot--bottom`]]: align == null ? void 0 : align.includes("bottom")
+          [styles[`${rootClassName}__slot--bottom`]]: align == null ? void 0 : align.includes("bottom"),
+          [styles[`${rootClassName}__slot--no-translate`]]: layout === "product"
         }
       ],
       className

package/dist/components/card/card.cjs

@@ -7,53 +7,55 @@ 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_1vcct_3",
+  "teddy-card__slot": "_teddy-card__slot_1vcct_13",
+  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_1vcct_16",
+  "teddy-card__slot--center": "_teddy-card__slot--center_1vcct_19",
+  "teddy-card__slot--no-translate": "_teddy-card__slot--no-translate_1vcct_25",
+  "teddy-card--shadow": "_teddy-card--shadow_1vcct_44",
+  "teddy-card__action": "_teddy-card__action_1vcct_48",
+  "teddy-card__action--disabled": "_teddy-card__action--disabled_1vcct_48",
+  "teddy-card--border": "_teddy-card--border_1vcct_55",
+  "teddy-card--layout": "_teddy-card--layout_1vcct_58",
+  "teddy-card__illustration": "_teddy-card__illustration_1vcct_58",
+  "teddy-card__carousel": "_teddy-card__carousel_1vcct_61",
+  "teddy-card__content": "_teddy-card__content_1vcct_64",
+  "teddy-card__heading": "_teddy-card__heading_1vcct_67",
+  "teddy-card__action-wrapper": "_teddy-card__action-wrapper_1vcct_70",
+  "teddy-card__footer": "_teddy-card__footer_1vcct_73",
+  "teddy-card__overline": "_teddy-card__overline_1vcct_76",
+  "teddy-card__description": "_teddy-card__description_1vcct_79",
+  "teddy-card__color-dots": "_teddy-card__color-dots_1vcct_82",
+  "teddy-card__availability": "_teddy-card__availability_1vcct_85",
+  "teddy-card__price": "_teddy-card__price_1vcct_88",
+  "teddy-card--default": "_teddy-card--default_1vcct_91",
+  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_1vcct_96",
+  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_1vcct_115",
+  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_1vcct_127",
+  "teddy-card--rich-card": "_teddy-card--rich-card_1vcct_139",
+  "teddy-card__line": "_teddy-card__line_1vcct_157",
+  "teddy-card--purple-light": "_teddy-card--purple-light_1vcct_161",
+  "teddy-card--purple-dark": "_teddy-card--purple-dark_1vcct_175",
+  "teddy-card--white": "_teddy-card--white_1vcct_194",
+  "teddy-card--gray": "_teddy-card--gray_1vcct_208",
+  "teddy-card--beige": "_teddy-card--beige_1vcct_222",
+  "teddy-card--product": "_teddy-card--product_1vcct_236",
+  "teddy-card__price--big": "_teddy-card__price--big_1vcct_296",
+  "teddy-card__image--as-background": "_teddy-card__image--as-background_1vcct_299",
+  "teddy-card--background-image": "_teddy-card--background-image_1vcct_305",
+  "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_1vcct_310",
+  "teddy-card__inset": "_teddy-card__inset_1vcct_314",
+  "teddy-card__inset--top": "_teddy-card__inset--top_1vcct_317",
+  "teddy-card__inset--left": "_teddy-card__inset--left_1vcct_320",
+  "teddy-card__inset--right": "_teddy-card__inset--right_1vcct_323",
+  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_1vcct_326",
+  "teddy-card__availability--badge": "_teddy-card__availability--badge_1vcct_341",
+  "teddy-card__availability--success": "_teddy-card__availability--success_1vcct_344",
+  "teddy-card__availability--warning": "_teddy-card__availability--warning_1vcct_347",
+  "teddy-card__availability--error": "_teddy-card__availability--error_1vcct_350",
+  "teddy-card__availability--special": "_teddy-card__availability--special_1vcct_353",
+  "teddy-card__availability--neutral": "_teddy-card__availability--neutral_1vcct_356",
+  "teddy-card__availability--information": "_teddy-card__availability--information_1vcct_359"
 };
 const rootClassName = "teddy-card";
 const actionElementIdentifier = `${rootClassName}__action`;

package/dist/components/card/card.js

@@ -5,53 +5,55 @@ 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_1vcct_3",
+  "teddy-card__slot": "_teddy-card__slot_1vcct_13",
+  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_1vcct_16",
+  "teddy-card__slot--center": "_teddy-card__slot--center_1vcct_19",
+  "teddy-card__slot--no-translate": "_teddy-card__slot--no-translate_1vcct_25",
+  "teddy-card--shadow": "_teddy-card--shadow_1vcct_44",
+  "teddy-card__action": "_teddy-card__action_1vcct_48",
+  "teddy-card__action--disabled": "_teddy-card__action--disabled_1vcct_48",
+  "teddy-card--border": "_teddy-card--border_1vcct_55",
+  "teddy-card--layout": "_teddy-card--layout_1vcct_58",
+  "teddy-card__illustration": "_teddy-card__illustration_1vcct_58",
+  "teddy-card__carousel": "_teddy-card__carousel_1vcct_61",
+  "teddy-card__content": "_teddy-card__content_1vcct_64",
+  "teddy-card__heading": "_teddy-card__heading_1vcct_67",
+  "teddy-card__action-wrapper": "_teddy-card__action-wrapper_1vcct_70",
+  "teddy-card__footer": "_teddy-card__footer_1vcct_73",
+  "teddy-card__overline": "_teddy-card__overline_1vcct_76",
+  "teddy-card__description": "_teddy-card__description_1vcct_79",
+  "teddy-card__color-dots": "_teddy-card__color-dots_1vcct_82",
+  "teddy-card__availability": "_teddy-card__availability_1vcct_85",
+  "teddy-card__price": "_teddy-card__price_1vcct_88",
+  "teddy-card--default": "_teddy-card--default_1vcct_91",
+  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_1vcct_96",
+  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_1vcct_115",
+  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_1vcct_127",
+  "teddy-card--rich-card": "_teddy-card--rich-card_1vcct_139",
+  "teddy-card__line": "_teddy-card__line_1vcct_157",
+  "teddy-card--purple-light": "_teddy-card--purple-light_1vcct_161",
+  "teddy-card--purple-dark": "_teddy-card--purple-dark_1vcct_175",
+  "teddy-card--white": "_teddy-card--white_1vcct_194",
+  "teddy-card--gray": "_teddy-card--gray_1vcct_208",
+  "teddy-card--beige": "_teddy-card--beige_1vcct_222",
+  "teddy-card--product": "_teddy-card--product_1vcct_236",
+  "teddy-card__price--big": "_teddy-card__price--big_1vcct_296",
+  "teddy-card__image--as-background": "_teddy-card__image--as-background_1vcct_299",
+  "teddy-card--background-image": "_teddy-card--background-image_1vcct_305",
+  "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_1vcct_310",
+  "teddy-card__inset": "_teddy-card__inset_1vcct_314",
+  "teddy-card__inset--top": "_teddy-card__inset--top_1vcct_317",
+  "teddy-card__inset--left": "_teddy-card__inset--left_1vcct_320",
+  "teddy-card__inset--right": "_teddy-card__inset--right_1vcct_323",
+  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_1vcct_326",
+  "teddy-card__availability--badge": "_teddy-card__availability--badge_1vcct_341",
+  "teddy-card__availability--success": "_teddy-card__availability--success_1vcct_344",
+  "teddy-card__availability--warning": "_teddy-card__availability--warning_1vcct_347",
+  "teddy-card__availability--error": "_teddy-card__availability--error_1vcct_350",
+  "teddy-card__availability--special": "_teddy-card__availability--special_1vcct_353",
+  "teddy-card__availability--neutral": "_teddy-card__availability--neutral_1vcct_356",
+  "teddy-card__availability--information": "_teddy-card__availability--information_1vcct_359"
 };
 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_1p2ww_2",
+  "teddy-carousel__arrow": "_teddy-carousel__arrow_1p2ww_9",
+  "teddy-carousel__item": "_teddy-carousel__item_1p2ww_18",
+  "teddy-carousel--sm": "_teddy-carousel--sm_1p2ww_82"
+};
+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>;

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

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