@telia/teddy 0.4.13 → 0.4.15

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

@@ -16,6 +16,17 @@ function getButtonVariant(variant) {
       return "primary";
   }
 }
+const getButtonSize = (layout) => {
+  switch (layout) {
+    case "navigation-vertical":
+    case "navigation-horizontal-small":
+    case "navigation-horizontal-small-centered":
+    case "navigation-horizontal-large":
+      return "sm";
+    default:
+      return "md";
+  }
+};
 const Button = React.forwardRef(
   ({ className, iconOnly, disclaimer, ...props }, forwardRef) => {
     const context = React.useContext(components_card_card.RootContext);
@@ -37,6 +48,7 @@ const Button = React.forwardRef(
           ref,
           ...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
           variant: getButtonVariant(context == null ? void 0 : context.variant),
+          size: getButtonSize(context == null ? void 0 : context.layout),
           ...props,
           className: classes
         }

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

@@ -14,6 +14,17 @@ function getButtonVariant(variant) {
       return "primary";
   }
 }
+const getButtonSize = (layout) => {
+  switch (layout) {
+    case "navigation-vertical":
+    case "navigation-horizontal-small":
+    case "navigation-horizontal-small-centered":
+    case "navigation-horizontal-large":
+      return "sm";
+    default:
+      return "md";
+  }
+};
 const Button = React__default.forwardRef(
   ({ className, iconOnly, disclaimer, ...props }, forwardRef) => {
     const context = React__default.useContext(RootContext);
@@ -35,6 +46,7 @@ const Button = React__default.forwardRef(
           ref,
           ...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
           variant: getButtonVariant(context == null ? void 0 : context.variant),
+          size: getButtonSize(context == null ? void 0 : context.layout),
           ...props,
           className: classes
         }

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

@@ -9,6 +9,9 @@ const getDefaultVariant = (layout) => {
   switch (layout) {
     case "rich-card-large":
       return "title-300";
+    case "navigation-horizontal-small":
+    case "navigation-horizontal-small-centered":
+      return "title-100";
     default:
       return "title-200";
   }

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

@@ -7,6 +7,9 @@ const getDefaultVariant = (layout) => {
   switch (layout) {
     case "rich-card-large":
       return "title-300";
+    case "navigation-horizontal-small":
+    case "navigation-horizontal-small-centered":
+      return "title-100";
     default:
       return "title-200";
   }

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

@@ -14,13 +14,12 @@ const Price = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { flexGrow: "1", mt: "auto", mb: "100", ref: forwardRef, className: classes, direction: "column", gap: "10", children: [
       textAbovePrice ? /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "additional-100", as: "p", faded: true, children: textAbovePrice }) : null,
       /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { direction: "row", align: "baseline", flexGrow: "1", wrap: "nowrap", children: [
-        pricePrefix && /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-200", as: "p", faded: true, children: pricePrefix }),
+        pricePrefix && /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-200", as: "p", faded: true, mr: "100", children: pricePrefix }),
         /* @__PURE__ */ jsxRuntime.jsx(
           components_text_text.Text,
           {
             variant: "paragraph-100-bold",
             as: "span",
-            ml: "100",
             mr: "100",
             color: variant === "purple" ? tokens_color_variables.teddyColorBrandCorePurple : void 0,
             className: components_card_card.styles[`${rootColorDotsClass}--big`],

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

@@ -12,13 +12,12 @@ const Price = React__default.forwardRef(
     return /* @__PURE__ */ jsxs(Flex, { flexGrow: "1", mt: "auto", mb: "100", ref: forwardRef, className: classes, direction: "column", gap: "10", children: [
       textAbovePrice ? /* @__PURE__ */ jsx(Text, { variant: "additional-100", as: "p", faded: true, children: textAbovePrice }) : null,
       /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "baseline", flexGrow: "1", wrap: "nowrap", children: [
-        pricePrefix && /* @__PURE__ */ jsx(Text, { variant: "paragraph-200", as: "p", faded: true, children: pricePrefix }),
+        pricePrefix && /* @__PURE__ */ jsx(Text, { variant: "paragraph-200", as: "p", faded: true, mr: "100", children: pricePrefix }),
         /* @__PURE__ */ jsx(
           Text,
           {
             variant: "paragraph-100-bold",
             as: "span",
-            ml: "100",
             mr: "100",
             color: variant === "purple" ? teddyColorBrandCorePurple : void 0,
             className: styles[`${rootColorDotsClass}--big`],

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

@@ -7,10 +7,10 @@ const Slider = require("react-slick");
 require("../../assets/sprite.1321fab0-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");
 const styles = {
-  "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"
+  "teddy-carousel": "_teddy-carousel_8pf7z_2",
+  "teddy-carousel__arrow": "_teddy-carousel__arrow_8pf7z_9",
+  "teddy-carousel__item": "_teddy-carousel__item_8pf7z_21",
+  "teddy-carousel--sm": "_teddy-carousel--sm_8pf7z_99"
 };
 const rootClassName = "teddy-carousel";
 const CustomArrow = ({

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

@@ -5,10 +5,10 @@ import Slider from "react-slick";
 import "../../assets/sprite.1321fab0-teddy.svg";
 import { Icon } from "../icon/icon.js";
 const styles = {
-  "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"
+  "teddy-carousel": "_teddy-carousel_8pf7z_2",
+  "teddy-carousel__arrow": "_teddy-carousel__arrow_8pf7z_9",
+  "teddy-carousel__item": "_teddy-carousel__item_8pf7z_21",
+  "teddy-carousel--sm": "_teddy-carousel--sm_8pf7z_99"
 };
 const rootClassName = "teddy-carousel";
 const CustomArrow = ({

package/dist/style.css

@@ -1806,41 +1806,41 @@
   --teddy-color-brand-core-purple: var(--teddy-color-purple-550);
   --teddy-color-brand-deep-purple: var(--teddy-color-purple-900);
 }
-._teddy-carousel_1pdex_2 {
+._teddy-carousel_8pf7z_2 {
   width: 100%;
   min-width: 10rem;
   max-width: 15rem;
   height: 288px;
   margin: 0 auto 2rem;
 }
-._teddy-carousel__arrow_1pdex_9 {
+._teddy-carousel__arrow_8pf7z_9 {
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 2;
-  width: 3rem;
-  height: 3rem;
+  width: 3rem !important;
+  height: 3rem !important;
   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_1pdex_21 {
+._teddy-carousel__item_8pf7z_21 {
   display: flex !important;
   justify-content: center;
 }
-._teddy-carousel_1pdex_2 .slick-prev:before,
-._teddy-carousel_1pdex_2 .slick-next:before {
+._teddy-carousel_8pf7z_2 .slick-prev:before,
+._teddy-carousel_8pf7z_2 .slick-next:before {
   content: "";
 }
-._teddy-carousel_1pdex_2 .slick-disabled {
+._teddy-carousel_8pf7z_2 .slick-disabled {
   cursor: initial;
   opacity: 0.3;
 }
-._teddy-carousel_1pdex_2 .slick-track {
+._teddy-carousel_8pf7z_2 .slick-track {
   display: flex;
 }
-._teddy-carousel_1pdex_2 .slick-slide > div {
+._teddy-carousel_8pf7z_2 .slick-slide > div {
   display: grid;
   place-items: center;
   width: 80%;
@@ -1848,82 +1848,82 @@
   height: 260px;
   padding: 0px;
 }
-._teddy-carousel_1pdex_2 .slick-slide img {
+._teddy-carousel_8pf7z_2 .slick-slide img {
   max-width: 10rem;
   max-height: 12.5rem;
   object-fit: contain;
   width: 100%;
   height: 100%;
 }
-._teddy-carousel_1pdex_2 .slick-next {
+._teddy-carousel_8pf7z_2 .slick-next {
   right: 0;
   color: var(--teddy-color-purple-700);
 }
-._teddy-carousel_1pdex_2 .slick-prev {
+._teddy-carousel_8pf7z_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 {
+._teddy-carousel_8pf7z_2 .slick-prev:focus-visible,
+._teddy-carousel_8pf7z_2 .slick-prev:active,
+._teddy-carousel_8pf7z_2 .slick-next:active,
+._teddy-carousel_8pf7z_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 {
+._teddy-carousel_8pf7z_2 .slick-prev:hover,
+._teddy-carousel_8pf7z_2 .slick-next:hover {
   color: var(--teddy-color-text-interactive-primary-hover);
   background-color: var(--teddy-color-background-interactive-transparent-hover);
 }
-._teddy-carousel_1pdex_2 .slick-dots {
+._teddy-carousel_8pf7z_2 .slick-dots {
   bottom: -2rem;
   margin: 0;
   padding: 0;
 }
-._teddy-carousel_1pdex_2 .slick-dots button {
+._teddy-carousel_8pf7z_2 .slick-dots button {
   width: 24px;
   height: 24px;
 }
-._teddy-carousel_1pdex_2 .slick-dots button:before {
+._teddy-carousel_8pf7z_2 .slick-dots button:before {
   width: 24px;
   height: 24px;
 }
-._teddy-carousel_1pdex_2 .slick-dots button:hover:before {
+._teddy-carousel_8pf7z_2 .slick-dots button:hover:before {
   color: var(--teddy-color-purple-700);
 }
-._teddy-carousel_1pdex_2 .slick-dots .slick-active button:before {
+._teddy-carousel_8pf7z_2 .slick-dots .slick-active button:before {
   color: var(--teddy-color-purple-700);
 }
-._teddy-carousel_1pdex_2 .slick-dots li {
+._teddy-carousel_8pf7z_2 .slick-dots li {
   width: 24px;
   height: 24px;
   margin: 0;
   padding: 0;
 }
-._teddy-carousel_1pdex_2 .slick-dots li button:before {
+._teddy-carousel_8pf7z_2 .slick-dots li button:before {
   font-size: 1rem;
 }
-._teddy-carousel--sm_1pdex_99 {
+._teddy-carousel--sm_8pf7z_99 {
   height: 180px;
 }
-._teddy-carousel--sm_1pdex_99 .slick-slide > div {
+._teddy-carousel--sm_8pf7z_99 .slick-slide > div {
   height: 170px;
 }
-._teddy-carousel--sm_1pdex_99 .slick-slide img {
+._teddy-carousel--sm_8pf7z_99 .slick-slide img {
   max-width: 8rem;
   max-height: 10rem;
 }
-._teddy-carousel--sm_1pdex_99 .slick-next {
+._teddy-carousel--sm_8pf7z_99 .slick-next {
   right: -0.5rem;
 }
-._teddy-carousel--sm_1pdex_99 .slick-prev {
+._teddy-carousel--sm_8pf7z_99 .slick-prev {
   left: -0.5rem;
 }
 @media (min-width: 600px) {
-  ._teddy-carousel--sm_1pdex_99 .slick-next {
+  ._teddy-carousel--sm_8pf7z_99 .slick-next {
     right: 0rem;
   }
-  ._teddy-carousel--sm_1pdex_99 .slick-prev {
+  ._teddy-carousel--sm_8pf7z_99 .slick-prev {
     left: 0rem;
   }
 }._teddy-scroll-area_1r6mf_1 {

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=9"
   },
   "private": false,
-  "version": "0.4.13",
+  "version": "0.4.15",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"