@telia/teddy 0.0.82 → 0.0.83

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

@@ -6,12 +6,11 @@ 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_13hgl_2",
-  "teddy-carousel__arrow": "_teddy-carousel__arrow_13hgl_9",
-  "teddy-carousel__item": "_teddy-carousel__item_13hgl_18",
-  "teddy-carousel--sm": "_teddy-carousel--sm_13hgl_82"
+  "teddy-carousel": "_teddy-carousel_1pdex_2",
+  "teddy-carousel__arrow": "_teddy-carousel__arrow_1pdex_9",
+  "teddy-carousel__item": "_teddy-carousel__item_1pdex_21",
+  "teddy-carousel--sm": "_teddy-carousel--sm_1pdex_99"
 };
 const rootClassName = "teddy-carousel";
 const CustomArrow = ({
@@ -31,7 +30,7 @@ const CustomArrow = ({
       onClick();
       handleClick();
     },
-    children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: icon, color: tokens_color_variables.teddyColorTextInteractivePrimary, size: "md" })
+    children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: icon, size: "md" })
   }
 );
 const Carousel = ({

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

@@ -4,12 +4,11 @@ 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_13hgl_2",
-  "teddy-carousel__arrow": "_teddy-carousel__arrow_13hgl_9",
-  "teddy-carousel__item": "_teddy-carousel__item_13hgl_18",
-  "teddy-carousel--sm": "_teddy-carousel--sm_13hgl_82"
+  "teddy-carousel": "_teddy-carousel_1pdex_2",
+  "teddy-carousel__arrow": "_teddy-carousel__arrow_1pdex_9",
+  "teddy-carousel__item": "_teddy-carousel__item_1pdex_21",
+  "teddy-carousel--sm": "_teddy-carousel--sm_1pdex_99"
 };
 const rootClassName = "teddy-carousel";
 const CustomArrow = ({
@@ -29,7 +28,7 @@ const CustomArrow = ({
       onClick();
       handleClick();
     },
-    children: /* @__PURE__ */ jsx(Icon, { name: icon, color: teddyColorTextInteractivePrimary, size: "md" })
+    children: /* @__PURE__ */ jsx(Icon, { name: icon, size: "md" })
   }
 );
 const Carousel = ({

package/dist/style.css

@@ -3568,14 +3568,14 @@
   --teddy-color-brand-core-purple: var(--teddy-color-purple-550);
   --teddy-color-brand-deep-purple: var(--teddy-color-purple-900);
 }
-._teddy-carousel_13hgl_2 {
+._teddy-carousel_1pdex_2 {
   width: 100%;
   min-width: 10rem;
   max-width: 15rem;
   height: 288px;
   margin: 0 auto 2rem;
 }
-._teddy-carousel__arrow_13hgl_9 {
+._teddy-carousel__arrow_1pdex_9 {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -3583,23 +3583,26 @@
   width: 3rem;
   height: 3rem;
   border-radius: 2rem;
+  transition-duration: var(--teddy-motion-duration-100);
+  transition-timing-function: var(--teddy-motion-easing-ease-in-out);
+  transition-property: background-color, color;
 }
-._teddy-carousel__item_13hgl_18 {
+._teddy-carousel__item_1pdex_21 {
   display: flex !important;
   justify-content: center;
 }
-._teddy-carousel_13hgl_2 .slick-prev:before,
-._teddy-carousel_13hgl_2 .slick-next:before {
+._teddy-carousel_1pdex_2 .slick-prev:before,
+._teddy-carousel_1pdex_2 .slick-next:before {
   content: "";
 }
-._teddy-carousel_13hgl_2 .slick-disabled {
+._teddy-carousel_1pdex_2 .slick-disabled {
   cursor: initial;
   opacity: 0.3;
 }
-._teddy-carousel_13hgl_2 .slick-track {
+._teddy-carousel_1pdex_2 .slick-track {
   display: flex;
 }
-._teddy-carousel_13hgl_2 .slick-slide > div {
+._teddy-carousel_1pdex_2 .slick-slide > div {
   display: grid;
   place-items: center;
   width: 80%;
@@ -3607,68 +3610,82 @@
   height: 260px;
   padding: 0px;
 }
-._teddy-carousel_13hgl_2 .slick-slide img {
+._teddy-carousel_1pdex_2 .slick-slide img {
   max-width: 10rem;
   max-height: 12.5rem;
   object-fit: contain;
   width: 100%;
   height: 100%;
 }
-._teddy-carousel_13hgl_2 .slick-next {
+._teddy-carousel_1pdex_2 .slick-next {
   right: 0;
+  color: var(--teddy-color-purple-700);
 }
-._teddy-carousel_13hgl_2 .slick-prev {
+._teddy-carousel_1pdex_2 .slick-prev {
   left: 0;
+  color: var(--teddy-color-purple-700);
+}
+._teddy-carousel_1pdex_2 .slick-prev:focus-visible,
+._teddy-carousel_1pdex_2 .slick-prev:active,
+._teddy-carousel_1pdex_2 .slick-next:active,
+._teddy-carousel_1pdex_2 .slick-next:focus-visible {
+  color: var(--teddy-color-text-interactive-primary-active);
+  background-color: var(--teddy-color-border-interactive-primary-negative-hover);
+}
+._teddy-carousel_1pdex_2 .slick-prev:hover,
+._teddy-carousel_1pdex_2 .slick-next:hover {
+  color: var(--teddy-color-text-interactive-primary-hover);
+  background-color: var(--teddy-color-background-interactive-transparent-hover);
 }
-._teddy-carousel_13hgl_2 .slick-dots {
+._teddy-carousel_1pdex_2 .slick-dots {
   bottom: -2rem;
   margin: 0;
   padding: 0;
 }
-._teddy-carousel_13hgl_2 .slick-dots button {
+._teddy-carousel_1pdex_2 .slick-dots button {
   width: 24px;
   height: 24px;
 }
-._teddy-carousel_13hgl_2 .slick-dots button:before {
+._teddy-carousel_1pdex_2 .slick-dots button:before {
   width: 24px;
   height: 24px;
 }
-._teddy-carousel_13hgl_2 .slick-dots button:hover:before {
+._teddy-carousel_1pdex_2 .slick-dots button:hover:before {
   color: var(--teddy-color-purple-700);
 }
-._teddy-carousel_13hgl_2 .slick-dots .slick-active button:before {
+._teddy-carousel_1pdex_2 .slick-dots .slick-active button:before {
   color: var(--teddy-color-purple-700);
 }
-._teddy-carousel_13hgl_2 .slick-dots li {
+._teddy-carousel_1pdex_2 .slick-dots li {
   width: 24px;
   height: 24px;
   margin: 0;
   padding: 0;
 }
-._teddy-carousel_13hgl_2 .slick-dots li button:before {
+._teddy-carousel_1pdex_2 .slick-dots li button:before {
   font-size: 1rem;
 }
-._teddy-carousel--sm_13hgl_82 {
+._teddy-carousel--sm_1pdex_99 {
   height: 180px;
 }
-._teddy-carousel--sm_13hgl_82 .slick-slide > div {
+._teddy-carousel--sm_1pdex_99 .slick-slide > div {
   height: 170px;
 }
-._teddy-carousel--sm_13hgl_82 .slick-slide img {
+._teddy-carousel--sm_1pdex_99 .slick-slide img {
   max-width: 8rem;
   max-height: 10rem;
 }
-._teddy-carousel--sm_13hgl_82 .slick-next {
-  right: 0.5rem;
+._teddy-carousel--sm_1pdex_99 .slick-next {
+  right: -0.5rem;
 }
-._teddy-carousel--sm_13hgl_82 .slick-prev {
-  left: 0.5rem;
+._teddy-carousel--sm_1pdex_99 .slick-prev {
+  left: -0.5rem;
 }
 @media (min-width: 600px) {
-  ._teddy-carousel--sm_13hgl_82 .slick-next {
+  ._teddy-carousel--sm_1pdex_99 .slick-next {
     right: 0rem;
   }
-  ._teddy-carousel--sm_13hgl_82 .slick-prev {
+  ._teddy-carousel--sm_1pdex_99 .slick-prev {
     left: 0rem;
   }
 }@layer heading, button, card, notification;

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=8"
   },
   "private": false,
-  "version": "0.0.82",
+  "version": "0.0.83",
   "sideEffects": [
     "**/*.css"
   ],