@telia/teddy 0.4.2 → 0.4.4

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

@@ -8,24 +8,26 @@ const components_flex_flex = require("../flex/flex.cjs");
 const components_text_text = require("../text/text.cjs");
 const tokens_color_variables = require("../../tokens/color/variables.cjs");
 const Price = React.forwardRef(
-  ({ className, pricePrefix, priceText, variant = "default", textAbovePrice, textBelowPrice }, forwardRef) => {
+  ({ className, pricePrefix, priceSuffix, priceText, variant = "default", textAbovePrice, textBelowPrice }, forwardRef) => {
     const rootColorDotsClass = `${components_card_card.rootClassName}__price`;
     const classes = clsx([components_card_card.styles[rootColorDotsClass]], className);
     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: [
-        /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-200", as: "p", faded: true, children: pricePrefix ? `${pricePrefix} ` : null }),
+        pricePrefix && /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-200", as: "p", faded: true, 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`],
             children: priceText
           }
-        )
+        ),
+        priceSuffix && /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-200", as: "p", faded: true, children: priceSuffix })
       ] }),
       textBelowPrice ? /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "additional-100", as: "p", faded: true, children: textBelowPrice }) : null
     ] });

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

@@ -5,6 +5,7 @@ export type PriceProps = {
     textAbovePrice?: string;
     textBelowPrice?: string;
     pricePrefix?: string;
+    priceSuffix?: string;
     priceText: string;
     className?: string;
 };

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

@@ -6,24 +6,26 @@ import { Flex } from "../flex/flex.js";
 import { Text } from "../text/text.js";
 import { teddyColorBrandCorePurple } from "../../tokens/color/variables.js";
 const Price = React__default.forwardRef(
-  ({ className, pricePrefix, priceText, variant = "default", textAbovePrice, textBelowPrice }, forwardRef) => {
+  ({ className, pricePrefix, priceSuffix, priceText, variant = "default", textAbovePrice, textBelowPrice }, forwardRef) => {
     const rootColorDotsClass = `${rootClassName}__price`;
     const classes = clsx([styles[rootColorDotsClass]], className);
     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: [
-        /* @__PURE__ */ jsx(Text, { variant: "paragraph-200", as: "p", faded: true, children: pricePrefix ? `${pricePrefix} ` : null }),
+        pricePrefix && /* @__PURE__ */ jsx(Text, { variant: "paragraph-200", as: "p", faded: true, 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`],
             children: priceText
           }
-        )
+        ),
+        priceSuffix && /* @__PURE__ */ jsx(Text, { variant: "paragraph-200", as: "p", faded: true, children: priceSuffix })
       ] }),
       textBelowPrice ? /* @__PURE__ */ jsx(Text, { variant: "additional-100", as: "p", faded: true, children: textBelowPrice }) : null
     ] });

package/dist/components/radio-card-group/radio-card-group-item-title.cjs

@@ -768,6 +768,10 @@ const Desktop = React.forwardRef(() => {
   });
   const topMenuSize = utils_useSize.useSize(topMenuRef.current);
   const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
+  const [isClientSide, setIsClientSide] = React.useState(false);
+  React.useEffect(() => {
+    setIsClientSide(true);
+  }, []);
   if (!rootContext)
     return null;
   const { selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
@@ -882,13 +886,13 @@ const Desktop = React.forwardRef(() => {
                     )
                   }
                 ),
-                typeof window !== "undefined" && /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
                     style: utils_generateStyling_index.mergeStyles({ ["--teddy-viewport-wrapper-height"]: viewPortHeight }),
                     className: styles[`${rootClassName}__viewport-wrapper`],
                     "data-state": showMenu ? "open" : "closed",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    children: isClientSide && /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                       ((_a2 = subLink.links) == null ? void 0 : _a2.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                         HightlightedLinksDesktop,
                         {

package/dist/components/radio-card-group/radio-card-group-item-title.js

@@ -747,6 +747,10 @@ const Desktop = React__default.forwardRef(() => {
   });
   const topMenuSize = useSize(topMenuRef.current);
   const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
+  const [isClientSide, setIsClientSide] = React__default.useState(false);
+  React__default.useEffect(() => {
+    setIsClientSide(true);
+  }, []);
   if (!rootContext)
     return null;
   const { selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
@@ -861,13 +865,13 @@ const Desktop = React__default.forwardRef(() => {
                     )
                   }
                 ),
-                typeof window !== "undefined" && /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(
                   "div",
                   {
                     style: mergeStyles({ ["--teddy-viewport-wrapper-height"]: viewPortHeight }),
                     className: styles[`${rootClassName}__viewport-wrapper`],
                     "data-state": showMenu ? "open" : "closed",
-                    children: /* @__PURE__ */ jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    children: isClientSide && /* @__PURE__ */ jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxs(Fragment, { children: [
                       ((_a2 = subLink.links) == null ? void 0 : _a2.length) > 0 && /* @__PURE__ */ jsx(
                         HightlightedLinksDesktop,
                         {

package/package.json

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