@bikdotai/bik-component-library 0.0.840-beta.0 → 0.0.840-tools-beta.0

package/dist/esm/components/star-rating/Star.js

@@ -1,32 +1,30 @@
-import { jsx as a } from "react/jsx-runtime";
-import d, { useState as v, useEffect as E } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import p, { useState as v, useEffect as f } from "react";
 import { COLORS as u } from "../../constants/Theme.js";
 import S from "../../assets/icons/starEmpty.svg.js";
 import M from "../../assets/icons/starFilled.svg.js";
 import V from "../../assets/icons/starFilledV2.svg.js";
-const W = (t) => t === "v1" ? M : V, k = ({
+const I = (t) => t === "v1" ? M : V, L = ({
   size: t,
-  filled: g,
-  emptyColor: h,
-  filledColor: s,
+  filled: E,
+  emptyColor: g,
+  filledColor: a,
   onClick: o,
-  asHovered: i,
-  onHover: p,
+  asHovered: s,
+  onHover: h,
   mode: e,
-  version: f = "v1",
-  "data-testid": n
+  version: l = "v1"
 }) => {
   const [c, r] = v(!1);
-  E(() => {
-    p?.(c);
-  }, [c]), E(() => {
-    i || r(!1);
-  }, [i]);
-  const l = d.useMemo(() => W(f), [f]);
-  return i ? /* @__PURE__ */ a(
-    l,
+  f(() => {
+    h?.(c);
+  }, [c]), f(() => {
+    s || r(!1);
+  }, [s]);
+  const i = p.useMemo(() => I(l), [l]);
+  return s ? /* @__PURE__ */ n(
+    i,
     {
-      "data-testid": n,
       onClick: () => {
         o?.("select");
       },
@@ -35,12 +33,11 @@ const W = (t) => t === "v1" ? M : V, k = ({
       style: { cursor: "pointer" },
       width: t,
       height: t,
-      color: s ?? u.background.warning.vibrant
+      color: a ?? u.background.warning.vibrant
     }
-  ) : c ? /* @__PURE__ */ a(
-    l,
+  ) : c ? /* @__PURE__ */ n(
+    i,
     {
-      "data-testid": n,
       onMouseLeave: () => r(!1),
       onMouseEnter: () => r(!0),
       style: { cursor: "pointer" },
@@ -49,12 +46,11 @@ const W = (t) => t === "v1" ? M : V, k = ({
       },
       width: t,
       height: t,
-      color: s ?? u.background.warning.vibrant
+      color: a ?? u.background.warning.vibrant
     }
-  ) : g ? /* @__PURE__ */ a(
-    l,
+  ) : E ? /* @__PURE__ */ n(
+    i,
     {
-      "data-testid": n,
       onMouseEnter: () => e !== "VIEW" && r(!0),
       onMouseLeave: () => e !== "VIEW" && r(!1),
       style: { cursor: e !== "VIEW" ? "pointer" : "default" },
@@ -63,12 +59,11 @@ const W = (t) => t === "v1" ? M : V, k = ({
       },
       width: t,
       height: t,
-      color: s ?? u.background.warning.vibrant
+      color: a ?? u.background.warning.vibrant
     }
-  ) : /* @__PURE__ */ a(
+  ) : /* @__PURE__ */ n(
     S,
     {
-      "data-testid": n,
       onMouseEnter: () => e !== "VIEW" && r(!0),
       onMouseLeave: () => e !== "VIEW" && r(!1),
       style: { cursor: e !== "VIEW" ? "pointer" : "default" },
@@ -77,11 +72,11 @@ const W = (t) => t === "v1" ? M : V, k = ({
       },
       width: t,
       height: t,
-      color: h ?? u.surface.standard
+      color: g ?? u.surface.standard
     }
   );
 };
 export {
-  k as Star
+  L as Star
 };
 //# sourceMappingURL=Star.js.map

package/dist/esm/components/star-rating/Star.js.map

@@ -1 +1 @@
-{"version":3,"file":"Star.js","sources":["../../../../src/components/star-rating/Star.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport StarEmpty from '../../assets/icons/starEmpty.svg';\nimport StarFilledV1 from '../../assets/icons/starFilled.svg';\nimport StarFilledV2 from '../../assets/icons/starFilledV2.svg';\n\nconst GetStar = (version: 'v1' | 'v2') => {\n\tif (version === 'v1') {\n\t\treturn StarFilledV1;\n\t}\n\treturn StarFilledV2;\n};\n\nexport const Star: React.FC<{\n\tfilled?: boolean;\n\tsize?: number;\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonClick?: (action: 'de-select' | 'select') => void;\n\tonHover?: (hovered: boolean) => void;\n\t/** this means this star is hovered-active cause there is a star hovered after this  */\n\tasHovered?: boolean;\n\tmode?: 'VIEW' | 'EDIT';\n\tversion?: 'v1' | 'v2';\n\t'data-testid'?: string;\n}> = ({\n\tsize,\n\tfilled,\n\temptyColor,\n\tfilledColor,\n\tonClick,\n\tasHovered,\n\tonHover,\n\tmode,\n\tversion = 'v1',\n\t'data-testid': dataTestId,\n}) => {\n\tconst [hovered, setHovered] = useState(false);\n\n\tuseEffect(() => {\n\t\tonHover?.(hovered);\n\t}, [hovered]);\n\n\tuseEffect(() => {\n\t\tif (!asHovered) {\n\t\t\tsetHovered(false);\n\t\t}\n\t}, [asHovered]);\n\n\tconst StarFilled = React.useMemo(() => GetStar(version), [version]);\n\n\tif (asHovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (hovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (filled) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tmode !== 'VIEW' && onClick?.('de-select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<StarEmpty\n\t\t\tdata-testid={dataTestId}\n\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\tonClick={() => {\n\t\t\t\tmode !== 'VIEW' && onClick?.('select');\n\t\t\t}}\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tcolor={emptyColor ?? COLORS.surface.standard}\n\t\t/>\n\t);\n};\n"],"names":["GetStar","version","StarFilledV1","StarFilledV2","Star","size","filled","emptyColor","filledColor","onClick","asHovered","onHover","mode","dataTestId","hovered","setHovered","useState","useEffect","StarFilled","React","jsx","COLORS","StarEmpty"],"mappings":";;;;;;AAMA,MAAMA,IAAU,CAACC,MACZA,MAAY,OACRC,IAEDC,GAGKC,IAYR,CAAC;AAAA,EACL,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAX,IAAU;AAAA,EACV,eAAeY;AAChB,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK;AAE5C,EAAAC,EAAU,MAAM;AACf,IAAAN,IAAUG,CAAO;AAAA,EAClB,GAAG,CAACA,CAAO,CAAC,GAEZG,EAAU,MAAM;AACf,IAAKP,KACJK,EAAW,EAAK;AAAA,EAElB,GAAG,CAACL,CAAS,CAAC;AAEd,QAAMQ,IAAaC,EAAM,QAAQ,MAAMnB,EAAQC,CAAO,GAAG,CAACA,CAAO,CAAC;AAElE,SAAIS,IAEF,gBAAAU;AAAA,IAACF;AAAA,IAAA;AAAA,MACA,eAAaL;AAAA,MACb,SAAS,MAAM;AACd,QAAAJ,IAAU,QAAQ;AAAA,MACnB;AAAA,MACA,cAAc,MAAMM,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,OAAO,EAAE,QAAQ,UAAA;AAAA,MACjB,OAAOV;AAAA,MACP,QAAQA;AAAA,MACR,OAAOG,KAAea,EAAO,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA,IAK/CP,IAEF,gBAAAM;AAAA,IAACF;AAAA,IAAA;AAAA,MACA,eAAaL;AAAA,MACb,cAAc,MAAME,EAAW,EAAK;AAAA,MACpC,cAAc,MAAMA,EAAW,EAAI;AAAA,MACnC,OAAO,EAAE,QAAQ,UAAA;AAAA,MACjB,SAAS,MAAM;AACd,QAAAN,IAAU,QAAQ;AAAA,MACnB;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,OAAOG,KAAea,EAAO,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA,IAK/Cf,IAEF,gBAAAc;AAAA,IAACF;AAAA,IAAA;AAAA,MACA,eAAaL;AAAA,MACb,cAAc,MAAMD,MAAS,UAAUG,EAAW,EAAI;AAAA,MACtD,cAAc,MAAMH,MAAS,UAAUG,EAAW,EAAK;AAAA,MACvD,OAAO,EAAE,QAAQH,MAAS,SAAS,YAAY,UAAA;AAAA,MAC/C,SAAS,MAAM;AACd,QAAAA,MAAS,UAAUH,IAAU,WAAW;AAAA,MACzC;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,OAAOG,KAAea,EAAO,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA,IAMlD,gBAAAD;AAAA,IAACE;AAAAA,IAAA;AAAA,MACA,eAAaT;AAAA,MACb,cAAc,MAAMD,MAAS,UAAUG,EAAW,EAAI;AAAA,MACtD,cAAc,MAAMH,MAAS,UAAUG,EAAW,EAAK;AAAA,MACvD,OAAO,EAAE,QAAQH,MAAS,SAAS,YAAY,UAAA;AAAA,MAC/C,SAAS,MAAM;AACd,QAAAA,MAAS,UAAUH,IAAU,QAAQ;AAAA,MACtC;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,OAAOE,KAAcc,EAAO,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGvC;"}
+{"version":3,"file":"Star.js","sources":["../../../../src/components/star-rating/Star.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport StarEmpty from '../../assets/icons/starEmpty.svg';\nimport StarFilledV1 from '../../assets/icons/starFilled.svg';\nimport StarFilledV2 from '../../assets/icons/starFilledV2.svg';\n\nconst GetStar = (version: 'v1' | 'v2') => {\n\tif (version === 'v1') {\n\t\treturn StarFilledV1;\n\t}\n\treturn StarFilledV2;\n};\n\nexport const Star: React.FC<{\n\tfilled?: boolean;\n\tsize?: number;\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonClick?: (action: 'de-select' | 'select') => void;\n\tonHover?: (hovered: boolean) => void;\n\t/** this means this star is hovered-active cause there is a star hovered after this  */\n\tasHovered?: boolean;\n\tmode?: 'VIEW' | 'EDIT';\n\tversion?: 'v1' | 'v2';\n}> = ({\n\tsize,\n\tfilled,\n\temptyColor,\n\tfilledColor,\n\tonClick,\n\tasHovered,\n\tonHover,\n\tmode,\n\tversion = 'v1',\n}) => {\n\tconst [hovered, setHovered] = useState(false);\n\n\tuseEffect(() => {\n\t\tonHover?.(hovered);\n\t}, [hovered]);\n\n\tuseEffect(() => {\n\t\tif (!asHovered) {\n\t\t\tsetHovered(false);\n\t\t}\n\t}, [asHovered]);\n\n\tconst StarFilled = React.useMemo(() => GetStar(version), [version]);\n\n\tif (asHovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (hovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (filled) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tmode !== 'VIEW' && onClick?.('de-select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<StarEmpty\n\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\tonClick={() => {\n\t\t\t\tmode !== 'VIEW' && onClick?.('select');\n\t\t\t}}\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tcolor={emptyColor ?? COLORS.surface.standard}\n\t\t/>\n\t);\n};\n"],"names":["GetStar","version","StarFilledV1","StarFilledV2","Star","size","filled","emptyColor","filledColor","onClick","asHovered","onHover","mode","hovered","setHovered","useState","useEffect","StarFilled","React","jsx","COLORS","StarEmpty"],"mappings":";;;;;;AAMA,MAAMA,IAAU,CAACC,MACZA,MAAY,OACRC,IAEDC,GAGKC,IAWR,CAAC;AAAA,EACL,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAX,IAAU;AACX,MAAM;AACL,QAAM,CAACY,GAASC,CAAU,IAAIC,EAAS,EAAK;AAE5C,EAAAC,EAAU,MAAM;AACf,IAAAL,IAAUE,CAAO;AAAA,EAClB,GAAG,CAACA,CAAO,CAAC,GAEZG,EAAU,MAAM;AACf,IAAKN,KACJI,EAAW,EAAK;AAAA,EAElB,GAAG,CAACJ,CAAS,CAAC;AAEd,QAAMO,IAAaC,EAAM,QAAQ,MAAMlB,EAAQC,CAAO,GAAG,CAACA,CAAO,CAAC;AAElE,SAAIS,IAEF,gBAAAS;AAAA,IAACF;AAAA,IAAA;AAAA,MACA,SAAS,MAAM;AACd,QAAAR,IAAU,QAAQ;AAAA,MACnB;AAAA,MACA,cAAc,MAAMK,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,OAAO,EAAE,QAAQ,UAAA;AAAA,MACjB,OAAOT;AAAA,MACP,QAAQA;AAAA,MACR,OAAOG,KAAeY,EAAO,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA,IAK/CP,IAEF,gBAAAM;AAAA,IAACF;AAAA,IAAA;AAAA,MACA,cAAc,MAAMH,EAAW,EAAK;AAAA,MACpC,cAAc,MAAMA,EAAW,EAAI;AAAA,MACnC,OAAO,EAAE,QAAQ,UAAA;AAAA,MACjB,SAAS,MAAM;AACd,QAAAL,IAAU,QAAQ;AAAA,MACnB;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,OAAOG,KAAeY,EAAO,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA,IAK/Cd,IAEF,gBAAAa;AAAA,IAACF;AAAA,IAAA;AAAA,MACA,cAAc,MAAML,MAAS,UAAUE,EAAW,EAAI;AAAA,MACtD,cAAc,MAAMF,MAAS,UAAUE,EAAW,EAAK;AAAA,MACvD,OAAO,EAAE,QAAQF,MAAS,SAAS,YAAY,UAAA;AAAA,MAC/C,SAAS,MAAM;AACd,QAAAA,MAAS,UAAUH,IAAU,WAAW;AAAA,MACzC;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,OAAOG,KAAeY,EAAO,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA,IAMlD,gBAAAD;AAAA,IAACE;AAAAA,IAAA;AAAA,MACA,cAAc,MAAMT,MAAS,UAAUE,EAAW,EAAI;AAAA,MACtD,cAAc,MAAMF,MAAS,UAAUE,EAAW,EAAK;AAAA,MACvD,OAAO,EAAE,QAAQF,MAAS,SAAS,YAAY,UAAA;AAAA,MAC/C,SAAS,MAAM;AACd,QAAAA,MAAS,UAAUH,IAAU,QAAQ;AAAA,MACtC;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,OAAOE,KAAca,EAAO,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGvC;"}

package/dist/esm/components/star-rating/StarRating.js

@@ -1,4 +1,4 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { useState as n, useMemo as j, useEffect as f } from "react";
 import C from "styled-components";
 import { Star as M } from "./Star.js";
@@ -13,35 +13,34 @@ const k = C.div`
   filledColor: m,
   onChange: p,
   value: u,
-  maxValue: a,
-  starSize: d,
-  mode: v,
+  maxValue: l,
+  starSize: v,
+  mode: d,
   version: S = "v1"
 }) => {
-  const [e, s] = n(u ?? 0), [g, y] = n(!1), [o, l] = n(0), H = j(() => Array(a ?? 5).fill(null).map((r, h) => h + 1), [a]);
+  const [t, o] = n(u ?? 0), [g, y] = n(!1), [s, i] = n(0), H = j(() => Array(l ?? 5).fill(null).map((r, h) => h + 1), [l]);
   return f(() => {
-    g && p(e);
-  }, [e]), f(() => {
+    g && p(t);
+  }, [t]), f(() => {
     y(!0);
-  }, []), /* @__PURE__ */ i(k, { children: H.map((t) => /* @__PURE__ */ i(
+  }, []), /* @__PURE__ */ a(k, { children: H.map((e) => /* @__PURE__ */ a(
     M,
     {
-      asHovered: o ? t <= o : !1,
-      size: d ?? 24,
-      filled: o ? void 0 : t <= e,
+      asHovered: s ? e <= s : !1,
+      size: v ?? 24,
+      filled: s ? void 0 : e <= t,
       emptyColor: c,
       filledColor: m,
       onClick: (r) => {
-        r === "de-select" ? t < e ? s(t) : s(t - 1) : s(t);
+        r === "de-select" ? e < t ? o(e) : o(e - 1) : o(e);
       },
       onHover: (r) => {
-        l(r ? t : 0);
+        i(r ? e : 0);
       },
-      mode: v,
-      version: S,
-      "data-testid": `star-${t}`
+      mode: d,
+      version: S
     },
-    t
+    e
   )) });
 };
 export {

package/dist/esm/components/star-rating/StarRating.js.map

@@ -1 +1 @@
-{"version":3,"file":"StarRating.js","sources":["../../../../src/components/star-rating/StarRating.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\nimport { Star } from './Star';\n\nconst Container = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: start;\n\talign-items: center;\n`;\n\nexport const StarRating: React.FC<{\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonChange: (stars: number) => void;\n\tvalue?: number;\n\tmaxValue?: number;\n\tstarSize?: number;\n\tmode?: 'VIEW' | 'EDIT';\n\tversion?: 'v1' | 'v2';\n}> = ({\n\temptyColor,\n\tfilledColor,\n\tonChange,\n\tvalue,\n\tmaxValue,\n\tstarSize,\n\tmode,\n\tversion = 'v1',\n}) => {\n\tconst [stars, setStars] = useState(value ?? 0);\n\tconst [mounted, setMountedFlag] = useState(false);\n\tconst [hoveredStar, setHoveredStar] = useState(0);\n\n\tconst arr = useMemo(() => {\n\t\tconst limit = maxValue ?? 5;\n\t\treturn Array(limit)\n\t\t\t.fill(null)\n\t\t\t.map((_, idx) => idx + 1);\n\t}, [maxValue]);\n\n\tuseEffect(() => {\n\t\tif (mounted) {\n\t\t\tonChange(stars);\n\t\t}\n\t}, [stars]);\n\n\tuseEffect(() => {\n\t\tsetMountedFlag(true);\n\t}, []);\n\n\treturn (\n\t\t<Container>\n\t\t\t{arr.map((idx) => (\n\t\t\t\t<Star\n\t\t\t\t\tasHovered={hoveredStar ? idx <= hoveredStar : false}\n\t\t\t\t\tkey={idx}\n\t\t\t\t\tsize={starSize ?? 24}\n\t\t\t\t\tfilled={hoveredStar ? undefined : idx <= stars}\n\t\t\t\t\temptyColor={emptyColor}\n\t\t\t\t\tfilledColor={filledColor}\n\t\t\t\t\tonClick={(action) => {\n\t\t\t\t\t\tif (action === 'de-select') {\n\t\t\t\t\t\t\tif (idx < stars) {\n\t\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetStars(idx - 1);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonHover={(hovered) => {\n\t\t\t\t\t\tif (hovered) setHoveredStar(idx);\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\tsetHoveredStar(0);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tmode={mode}\n\t\t\t\t\tversion={version}\n\t\t\t\t\tdata-testid={`star-${idx}`}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</Container>\n\t);\n};\n"],"names":["Container","styled","StarRating","emptyColor","filledColor","onChange","value","maxValue","starSize","mode","version","stars","setStars","useState","mounted","setMountedFlag","hoveredStar","setHoveredStar","arr","useMemo","_","idx","useEffect","jsx","Star","action","hovered"],"mappings":";;;;AAIA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQZC,IASR,CAAC;AAAA,EACL,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AACX,MAAM;AACL,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASP,KAAS,CAAC,GACvC,CAACQ,GAASC,CAAc,IAAIF,EAAS,EAAK,GAC1C,CAACG,GAAaC,CAAc,IAAIJ,EAAS,CAAC,GAE1CK,IAAMC,EAAQ,MAEZ,MADOZ,KAAY,CACR,EAChB,KAAK,IAAI,EACT,IAAI,CAACa,GAAGC,MAAQA,IAAM,CAAC,GACvB,CAACd,CAAQ,CAAC;AAEb,SAAAe,EAAU,MAAM;AACf,IAAIR,KACHT,EAASM,CAAK;AAAA,EAEhB,GAAG,CAACA,CAAK,CAAC,GAEVW,EAAU,MAAM;AACf,IAAAP,EAAe,EAAI;AAAA,EACpB,GAAG,CAAA,CAAE,GAGJ,gBAAAQ,EAACvB,GAAA,EACC,UAAAkB,EAAI,IAAI,CAACG,MACT,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAWR,IAAcK,KAAOL,IAAc;AAAA,MAE9C,MAAMR,KAAY;AAAA,MAClB,QAAQQ,IAAc,SAAYK,KAAOV;AAAA,MACzC,YAAAR;AAAA,MACA,aAAAC;AAAA,MACA,SAAS,CAACqB,MAAW;AACpB,QAAIA,MAAW,cACVJ,IAAMV,IACTC,EAASS,CAAG,IAEZT,EAASS,IAAM,CAAC,IAGjBT,EAASS,CAAG;AAAA,MAEd;AAAA,MACA,SAAS,CAACK,MAAY;AACrB,UAAIA,IAAwBL,IAEZ,CAFe;AAAA,MAIhC;AAAA,MACA,MAAAZ;AAAA,MACA,SAAAC;AAAA,MACA,eAAa,QAAQW,CAAG;AAAA,IAAA;AAAA,IAxBnBA;AAAA,EAAA,CA0BN,GACF;AAEF;"}
+{"version":3,"file":"StarRating.js","sources":["../../../../src/components/star-rating/StarRating.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\nimport { Star } from './Star';\n\nconst Container = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: start;\n\talign-items: center;\n`;\n\nexport const StarRating: React.FC<{\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonChange: (stars: number) => void;\n\tvalue?: number;\n\tmaxValue?: number;\n\tstarSize?: number;\n\tmode?: 'VIEW' | 'EDIT';\n\tversion?: 'v1' | 'v2';\n}> = ({\n\temptyColor,\n\tfilledColor,\n\tonChange,\n\tvalue,\n\tmaxValue,\n\tstarSize,\n\tmode,\n\tversion = 'v1',\n}) => {\n\tconst [stars, setStars] = useState(value ?? 0);\n\tconst [mounted, setMountedFlag] = useState(false);\n\tconst [hoveredStar, setHoveredStar] = useState(0);\n\n\tconst arr = useMemo(() => {\n\t\tconst limit = maxValue ?? 5;\n\t\treturn Array(limit)\n\t\t\t.fill(null)\n\t\t\t.map((_, idx) => idx + 1);\n\t}, [maxValue]);\n\n\tuseEffect(() => {\n\t\tif (mounted) {\n\t\t\tonChange(stars);\n\t\t}\n\t}, [stars]);\n\n\tuseEffect(() => {\n\t\tsetMountedFlag(true);\n\t}, []);\n\n\treturn (\n\t\t<Container>\n\t\t\t{arr.map((idx) => (\n\t\t\t\t<Star\n\t\t\t\t\tasHovered={hoveredStar ? idx <= hoveredStar : false}\n\t\t\t\t\tkey={idx}\n\t\t\t\t\tsize={starSize ?? 24}\n\t\t\t\t\tfilled={hoveredStar ? undefined : idx <= stars}\n\t\t\t\t\temptyColor={emptyColor}\n\t\t\t\t\tfilledColor={filledColor}\n\t\t\t\t\tonClick={(action) => {\n\t\t\t\t\t\tif (action === 'de-select') {\n\t\t\t\t\t\t\tif (idx < stars) {\n\t\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetStars(idx - 1);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonHover={(hovered) => {\n\t\t\t\t\t\tif (hovered) setHoveredStar(idx);\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\tsetHoveredStar(0);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tmode={mode}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</Container>\n\t);\n};\n"],"names":["Container","styled","StarRating","emptyColor","filledColor","onChange","value","maxValue","starSize","mode","version","stars","setStars","useState","mounted","setMountedFlag","hoveredStar","setHoveredStar","arr","useMemo","_","idx","useEffect","jsx","Star","action","hovered"],"mappings":";;;;AAIA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQZC,IASR,CAAC;AAAA,EACL,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AACX,MAAM;AACL,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASP,KAAS,CAAC,GACvC,CAACQ,GAASC,CAAc,IAAIF,EAAS,EAAK,GAC1C,CAACG,GAAaC,CAAc,IAAIJ,EAAS,CAAC,GAE1CK,IAAMC,EAAQ,MAEZ,MADOZ,KAAY,CACR,EAChB,KAAK,IAAI,EACT,IAAI,CAACa,GAAGC,MAAQA,IAAM,CAAC,GACvB,CAACd,CAAQ,CAAC;AAEb,SAAAe,EAAU,MAAM;AACf,IAAIR,KACHT,EAASM,CAAK;AAAA,EAEhB,GAAG,CAACA,CAAK,CAAC,GAEVW,EAAU,MAAM;AACf,IAAAP,EAAe,EAAI;AAAA,EACpB,GAAG,CAAA,CAAE,GAGJ,gBAAAQ,EAACvB,GAAA,EACC,UAAAkB,EAAI,IAAI,CAACG,MACT,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAWR,IAAcK,KAAOL,IAAc;AAAA,MAE9C,MAAMR,KAAY;AAAA,MAClB,QAAQQ,IAAc,SAAYK,KAAOV;AAAA,MACzC,YAAAR;AAAA,MACA,aAAAC;AAAA,MACA,SAAS,CAACqB,MAAW;AACpB,QAAIA,MAAW,cACVJ,IAAMV,IACTC,EAASS,CAAG,IAEZT,EAASS,IAAM,CAAC,IAGjBT,EAASS,CAAG;AAAA,MAEd;AAAA,MACA,SAAS,CAACK,MAAY;AACrB,UAAIA,IAAwBL,IAEZ,CAFe;AAAA,MAIhC;AAAA,MACA,MAAAZ;AAAA,MACA,SAAAC;AAAA,IAAA;AAAA,IAvBKW;AAAA,EAAA,CAyBN,GACF;AAEF;"}

package/dist/esm/components/template-preview/TemplatePreview.js

@@ -1,43 +1,42 @@
-import { jsx as r, jsxs as w, Fragment as T } from "react/jsx-runtime";
-import { useTemplateModalContext as x } from "../template-context-mapper/context/templateModalContext.js";
-import W from "../../utils/StringUtils.js";
+import { jsx as r, jsxs as x, Fragment as C } from "react/jsx-runtime";
+import { useTemplateModalContext as W } from "../template-context-mapper/context/templateModalContext.js";
+import H from "../../utils/StringUtils.js";
 import { COLORS as a } from "../../constants/Theme.js";
-import H from "../../assets/icons/aiContentIcon.svg.js";
-import { TitleRegular as S } from "../TypographyStyle.js";
+import S from "../../assets/icons/aiContentIcon.svg.js";
+import { TitleRegular as w } from "../TypographyStyle.js";
 import E from "./EmailTemplateThumbnailPreview.js";
-import { CHANNEL_TYPE as d } from "./models/Channels.js";
+import { CHANNEL_TYPE as l } from "./models/Channels.js";
 import A from "./SmsTemplatePreview.js";
 import { AiContentBadge as R } from "./TemplatePreview.styled.js";
 import V from "./webpush/WebpushPreview.js";
 import k from "./WhatsAppTemplatePreview.js";
 const Y = ({
   template: e,
-  channel: o,
+  channel: t,
   whatsAppSpecificMeta: n,
-  templateCreationsInfo: t,
+  templateCreationsInfo: o,
   hideHeader: y,
-  size: g,
+  size: u,
   onlyTemplateContent: v,
   emailSpecificMeta: i,
-  smsSpecificMeta: l,
-  showSampleValues: C,
+  smsSpecificMeta: d,
+  showSampleValues: h,
   carouselCardIndex: m,
   isWhatsappCarousel: s,
-  isPreview: b,
-  applyBorderBottom: h,
-  webPushSpecificMeta: u,
+  isPreview: p,
+  applyBorderBottom: b,
+  webPushSpecificMeta: g,
   hidePointerEvents: P
 }) => {
-  const { setSelectedCarouselIndex: p } = x();
-  return o === d.SMS ? /* @__PURE__ */ r(
+  const { setSelectedCarouselIndex: T } = W();
+  return t === l.SMS ? /* @__PURE__ */ r(
     "div",
     {
-      "data-test": "template-preview-wrapper",
       style: {
-        marginTop: t ? 16 : 0,
-        border: t ? `1px solid ${a.stroke.primary}` : "none",
+        marginTop: o ? 16 : 0,
+        border: o ? `1px solid ${a.stroke.primary}` : "none",
         borderRadius: 4,
-        ...l?.templateContainerStyles
+        ...d?.templateContainerStyles
       },
       children: /* @__PURE__ */ r(
         A,
@@ -45,18 +44,18 @@ const Y = ({
           template: e,
           hideHeader: y,
           onlyTemplateContent: v,
-          size: g ?? "large",
-          variableStore: l?.smsVariableStore,
-          display_content: l?.smsDisplayContent,
-          uniqueId: l?.uniqueId
+          size: u ?? "large",
+          variableStore: d?.smsVariableStore,
+          display_content: d?.smsDisplayContent,
+          uniqueId: d?.uniqueId
         }
       )
     }
-  ) : o === d.EMAIL ? /* @__PURE__ */ r(
+  ) : t === l.EMAIL ? /* @__PURE__ */ r(
     "div",
     {
       style: {
-        marginTop: t ? 16 : 0,
+        marginTop: o ? 16 : 0,
         ...i?.templateContainerStyles
       },
       children: /* @__PURE__ */ r(
@@ -71,38 +70,38 @@ const Y = ({
           containerStyle: i?.containerStyle,
           emailDisplayContent: i?.emailDisplayContent,
           emailHtmlContainerId: i?.emailHtmlContainerId,
-          applyBorderBottom: h,
+          applyBorderBottom: b,
           hidePointerEvents: P
         }
       )
     }
-  ) : o === d.WHATSAPP || o === d.RCS ? /* @__PURE__ */ w(
+  ) : t === l.WHATSAPP || t === l.RCS ? /* @__PURE__ */ x(
     "div",
     {
       style: {
         ...n?.templateContainerStyles,
-        ...t ? B.WhatsAppWrapper : {},
+        ...o ? B.WhatsAppWrapper : {},
         position: "relative"
       },
       onClick: () => {
-        if (p && s) {
+        if (T && s) {
           if (m === -1 && !e?.mapping?.body?.length)
             return;
-          p(m ?? -1);
+          T(m ?? -1);
         }
       },
       children: [
-        t ? /* @__PURE__ */ r("div", { style: { padding: 16 }, children: /* @__PURE__ */ r(S, { children: W.convertToTitleCase(e?.label ?? "") }) }) : /* @__PURE__ */ r(T, {}),
+        o ? /* @__PURE__ */ r("div", { style: { padding: 16 }, children: /* @__PURE__ */ r(w, { children: H.convertToTitleCase(e?.label ?? "") }) }) : /* @__PURE__ */ r(C, {}),
         /* @__PURE__ */ r(
           k,
           {
-            showSampleValues: C,
+            showSampleValues: h,
             showHeader: n?.showWhatsAppHeader,
             extras: n?.whatsAppExtras,
             template: e,
-            size: t ? "small" : g ?? "large",
+            size: o ? "small" : u ?? "large",
             containerStyle: {
-              borderWidth: t ? 0 : 1,
+              borderWidth: o ? 0 : 1,
               borderTopWidth: 1,
               ...n?.containerStyle ?? {},
               height: "100%"
@@ -111,20 +110,20 @@ const Y = ({
             usePlaceHolderName: n?.usePlaceHolderName,
             carouselCardIndex: m,
             isWhatsappCarousel: s,
-            isPreview: b,
-            channel: o
+            isPreview: p,
+            channel: t
           }
         ),
-        (!!e?.aiContentConfigId || !!e?.isAiGenerated) && !s && /* @__PURE__ */ r(R, { "data-test": "ai-content-badge", children: /* @__PURE__ */ r(H, { width: 48, height: 48 }) })
+        (!!e?.aiContentConfigId || !!e?.isAiGenerated) && !s && /* @__PURE__ */ r(R, { children: /* @__PURE__ */ r(S, { width: 48, height: 48 }) })
       ]
     }
-  ) : o == d.WEBPUSH ? /* @__PURE__ */ r("div", { style: { ...u?.containerStyle }, children: /* @__PURE__ */ r(
+  ) : t == l.WEBPUSH ? /* @__PURE__ */ r("div", { style: { ...g?.containerStyle }, children: /* @__PURE__ */ r(
     V,
     {
       template: e,
-      extraContainerCss: u?.extraContainerCss
+      extraContainerCss: g?.extraContainerCss
     }
-  ) }) : /* @__PURE__ */ r(T, {});
+  ) }) : /* @__PURE__ */ r(C, {});
 }, B = {
   WhatsAppWrapper: {
     backgroundColor: a.surface.standard,

package/dist/esm/components/template-preview/TemplatePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplatePreview.js","sources":["../../../../src/components/template-preview/TemplatePreview.tsx"],"sourcesContent":["import React from 'react';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport AiContentIcon from '../../assets/icons/aiContentIcon.svg';\nimport { TitleRegular } from '../TypographyStyle';\nimport EmailTemplateThumbnailPreview from './EmailTemplateThumbnailPreview';\nimport { CHANNEL_TYPE } from './models/Channels';\nimport { EmailMeta, EmailTemplateType } from './models/EmailTemplate';\nimport { SMSMeta, SMSTemplateType } from './models/SmsTemplate';\nimport { AllTemplateTypes } from './models/types';\nimport { WebpushMetaType, WebpushTemplateType } from './models/WebpushTemplate';\nimport { WhatsappMeta, WhatsAppTemplate } from './models/WhatsAppTemplate';\nimport SmsTemplatePreview from './SmsTemplatePreview';\nimport { AiContentBadge } from './TemplatePreview.styled';\nimport WebpushPreview from './webpush/WebpushPreview';\nimport WhatsappTemplatePreview from './WhatsAppTemplatePreview';\n\nexport interface TemplatePreviewProps {\n\ttemplate?: AllTemplateTypes;\n\tchannel: CHANNEL_TYPE;\n\tonlyTemplateContent?: boolean;\n\toutsidePreview?: boolean;\n\ttemplateCreationsInfo?: boolean;\n\twhatsAppSpecificMeta?: WhatsappMeta;\n\temailSpecificMeta?: EmailMeta;\n\tsmsSpecificMeta?: SMSMeta;\n\thideHeader?: boolean;\n\tsize?: 'small' | 'large';\n\ttemplateContainerStyles?: React.CSSProperties;\n\tshowSampleValues?: boolean;\n\tcarouselCardIndex?: number;\n\tisWhatsappCarousel?: boolean;\n\tisPreview?: boolean;\n\tapplyBorderBottom?: boolean;\n\twebPushSpecificMeta?: WebpushMetaType;\n\thidePointerEvents?: boolean;\n}\nexport const TemplatePreview = ({\n\ttemplate,\n\tchannel,\n\twhatsAppSpecificMeta,\n\ttemplateCreationsInfo,\n\thideHeader,\n\tsize,\n\tonlyTemplateContent,\n\temailSpecificMeta,\n\tsmsSpecificMeta,\n\tshowSampleValues,\n\tcarouselCardIndex,\n\tisWhatsappCarousel,\n\tisPreview,\n\tapplyBorderBottom,\n\twebPushSpecificMeta,\n\thidePointerEvents,\n}: TemplatePreviewProps) => {\n\tconst { setSelectedCarouselIndex } = useTemplateModalContext();\n\tif (channel === CHANNEL_TYPE.SMS) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tdata-test=\"template-preview-wrapper\"\n\t\t\t\tstyle={{\n\t\t\t\t\tmarginTop: templateCreationsInfo ? 16 : 0,\n\t\t\t\t\tborder: templateCreationsInfo\n\t\t\t\t\t\t? `1px solid ${COLORS.stroke.primary}`\n\t\t\t\t\t\t: 'none',\n\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t...smsSpecificMeta?.templateContainerStyles,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SmsTemplatePreview\n\t\t\t\t\ttemplate={template as SMSTemplateType}\n\t\t\t\t\thideHeader={hideHeader}\n\t\t\t\t\tonlyTemplateContent={onlyTemplateContent}\n\t\t\t\t\tsize={size ?? 'large'}\n\t\t\t\t\tvariableStore={smsSpecificMeta?.smsVariableStore}\n\t\t\t\t\tdisplay_content={smsSpecificMeta?.smsDisplayContent}\n\t\t\t\t\tuniqueId={smsSpecificMeta?.uniqueId}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t} else if (channel === CHANNEL_TYPE.EMAIL) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tmarginTop: templateCreationsInfo ? 16 : 0,\n\t\t\t\t\t...emailSpecificMeta?.templateContainerStyles,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<EmailTemplateThumbnailPreview\n\t\t\t\t\ttemplate={template as EmailTemplateType}\n\t\t\t\t\thandleViewTemplate={() => {\n\t\t\t\t\t\temailSpecificMeta?.handleViewTemplate?.();\n\t\t\t\t\t}}\n\t\t\t\t\thideHeader={hideHeader}\n\t\t\t\t\thideViewButton={emailSpecificMeta?.hideViewButtonForEmail}\n\t\t\t\t\tcontainerStyle={emailSpecificMeta?.containerStyle}\n\t\t\t\t\temailDisplayContent={emailSpecificMeta?.emailDisplayContent}\n\t\t\t\t\temailHtmlContainerId={emailSpecificMeta?.emailHtmlContainerId}\n\t\t\t\t\tapplyBorderBottom={applyBorderBottom}\n\t\t\t\t\thidePointerEvents={hidePointerEvents}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t} else if (\n\t\tchannel === CHANNEL_TYPE.WHATSAPP ||\n\t\tchannel === CHANNEL_TYPE.RCS\n\t) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\t...whatsAppSpecificMeta?.templateContainerStyles,\n\t\t\t\t\t...(templateCreationsInfo ? styles.WhatsAppWrapper : {}),\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t}}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tif (setSelectedCarouselIndex && isWhatsappCarousel) {\n\t\t\t\t\t\tif (carouselCardIndex === -1 && !template?.mapping?.body?.length) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tsetSelectedCarouselIndex(carouselCardIndex ?? -1);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{templateCreationsInfo ? (\n\t\t\t\t\t<div style={{ padding: 16 }}>\n\t\t\t\t\t\t<TitleRegular>\n\t\t\t\t\t\t\t{StringUtils.convertToTitleCase(template?.label ?? '')}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t\t<WhatsappTemplatePreview\n\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\tshowHeader={whatsAppSpecificMeta?.showWhatsAppHeader}\n\t\t\t\t\textras={whatsAppSpecificMeta?.whatsAppExtras}\n\t\t\t\t\ttemplate={template as WhatsAppTemplate}\n\t\t\t\t\tsize={templateCreationsInfo ? 'small' : size ?? 'large'}\n\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\tborderWidth: templateCreationsInfo ? 0 : 1,\n\t\t\t\t\t\tborderTopWidth: 1,\n\t\t\t\t\t\t...(whatsAppSpecificMeta?.containerStyle ?? {}),\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t}}\n\t\t\t\t\tzeroStateComponent={whatsAppSpecificMeta?.zeroStateComponent}\n\t\t\t\t\tusePlaceHolderName={whatsAppSpecificMeta?.usePlaceHolderName}\n\t\t\t\t\tcarouselCardIndex={carouselCardIndex}\n\t\t\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\tchannel={channel}\n\t\t\t\t/>\n\t\t\t\t{(!!template?.['aiContentConfigId'] || !!template?.['isAiGenerated']) &&\n\t\t\t\t\t!isWhatsappCarousel && (\n\t\t\t\t\t\t<AiContentBadge data-test=\"ai-content-badge\">\n\t\t\t\t\t\t\t<AiContentIcon width={48} height={48} />\n\t\t\t\t\t\t</AiContentBadge>\n\t\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t} else if (channel == CHANNEL_TYPE.WEBPUSH) {\n\t\treturn (\n\t\t\t<div style={{ ...webPushSpecificMeta?.containerStyle }}>\n\t\t\t\t<WebpushPreview\n\t\t\t\t\ttemplate={template as WebpushTemplateType}\n\t\t\t\t\textraContainerCss={webPushSpecificMeta?.extraContainerCss}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\t{\n\t\treturn <></>;\n\t}\n};\n\nconst styles = {\n\tWhatsAppWrapper: {\n\t\tbackgroundColor: COLORS.surface.standard,\n\t\tborderRadius: 4,\n\t\tborder: `1px solid ${COLORS.background.inactive}`,\n\t\tmarginTop: 16,\n\t},\n};\n"],"names":["TemplatePreview","template","channel","whatsAppSpecificMeta","templateCreationsInfo","hideHeader","size","onlyTemplateContent","emailSpecificMeta","smsSpecificMeta","showSampleValues","carouselCardIndex","isWhatsappCarousel","isPreview","applyBorderBottom","webPushSpecificMeta","hidePointerEvents","setSelectedCarouselIndex","useTemplateModalContext","CHANNEL_TYPE","jsx","COLORS","SmsTemplatePreview","EmailTemplateThumbnailPreview","jsxs","styles","TitleRegular","StringUtils","Fragment","WhatsappTemplatePreview","AiContentBadge","AiContentIcon","WebpushPreview"],"mappings":"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"}
+{"version":3,"file":"TemplatePreview.js","sources":["../../../../src/components/template-preview/TemplatePreview.tsx"],"sourcesContent":["import React from 'react';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport AiContentIcon from '../../assets/icons/aiContentIcon.svg';\nimport { TitleRegular } from '../TypographyStyle';\nimport EmailTemplateThumbnailPreview from './EmailTemplateThumbnailPreview';\nimport { CHANNEL_TYPE } from './models/Channels';\nimport { EmailMeta, EmailTemplateType } from './models/EmailTemplate';\nimport { SMSMeta, SMSTemplateType } from './models/SmsTemplate';\nimport { AllTemplateTypes } from './models/types';\nimport { WebpushMetaType, WebpushTemplateType } from './models/WebpushTemplate';\nimport { WhatsappMeta, WhatsAppTemplate } from './models/WhatsAppTemplate';\nimport SmsTemplatePreview from './SmsTemplatePreview';\nimport { AiContentBadge } from './TemplatePreview.styled';\nimport WebpushPreview from './webpush/WebpushPreview';\nimport WhatsappTemplatePreview from './WhatsAppTemplatePreview';\n\nexport interface TemplatePreviewProps {\n\ttemplate?: AllTemplateTypes;\n\tchannel: CHANNEL_TYPE;\n\tonlyTemplateContent?: boolean;\n\toutsidePreview?: boolean;\n\ttemplateCreationsInfo?: boolean;\n\twhatsAppSpecificMeta?: WhatsappMeta;\n\temailSpecificMeta?: EmailMeta;\n\tsmsSpecificMeta?: SMSMeta;\n\thideHeader?: boolean;\n\tsize?: 'small' | 'large';\n\ttemplateContainerStyles?: React.CSSProperties;\n\tshowSampleValues?: boolean;\n\tcarouselCardIndex?: number;\n\tisWhatsappCarousel?: boolean;\n\tisPreview?: boolean;\n\tapplyBorderBottom?: boolean;\n\twebPushSpecificMeta?: WebpushMetaType;\n\thidePointerEvents?: boolean;\n}\nexport const TemplatePreview = ({\n\ttemplate,\n\tchannel,\n\twhatsAppSpecificMeta,\n\ttemplateCreationsInfo,\n\thideHeader,\n\tsize,\n\tonlyTemplateContent,\n\temailSpecificMeta,\n\tsmsSpecificMeta,\n\tshowSampleValues,\n\tcarouselCardIndex,\n\tisWhatsappCarousel,\n\tisPreview,\n\tapplyBorderBottom,\n\twebPushSpecificMeta,\n\thidePointerEvents,\n}: TemplatePreviewProps) => {\n\tconst { setSelectedCarouselIndex } = useTemplateModalContext();\n\tif (channel === CHANNEL_TYPE.SMS) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tmarginTop: templateCreationsInfo ? 16 : 0,\n\t\t\t\t\tborder: templateCreationsInfo\n\t\t\t\t\t\t? `1px solid ${COLORS.stroke.primary}`\n\t\t\t\t\t\t: 'none',\n\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t...smsSpecificMeta?.templateContainerStyles,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SmsTemplatePreview\n\t\t\t\t\ttemplate={template as SMSTemplateType}\n\t\t\t\t\thideHeader={hideHeader}\n\t\t\t\t\tonlyTemplateContent={onlyTemplateContent}\n\t\t\t\t\tsize={size ?? 'large'}\n\t\t\t\t\tvariableStore={smsSpecificMeta?.smsVariableStore}\n\t\t\t\t\tdisplay_content={smsSpecificMeta?.smsDisplayContent}\n\t\t\t\t\tuniqueId={smsSpecificMeta?.uniqueId}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t} else if (channel === CHANNEL_TYPE.EMAIL) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tmarginTop: templateCreationsInfo ? 16 : 0,\n\t\t\t\t\t...emailSpecificMeta?.templateContainerStyles,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<EmailTemplateThumbnailPreview\n\t\t\t\t\ttemplate={template as EmailTemplateType}\n\t\t\t\t\thandleViewTemplate={() => {\n\t\t\t\t\t\temailSpecificMeta?.handleViewTemplate?.();\n\t\t\t\t\t}}\n\t\t\t\t\thideHeader={hideHeader}\n\t\t\t\t\thideViewButton={emailSpecificMeta?.hideViewButtonForEmail}\n\t\t\t\t\tcontainerStyle={emailSpecificMeta?.containerStyle}\n\t\t\t\t\temailDisplayContent={emailSpecificMeta?.emailDisplayContent}\n\t\t\t\t\temailHtmlContainerId={emailSpecificMeta?.emailHtmlContainerId}\n\t\t\t\t\tapplyBorderBottom={applyBorderBottom}\n\t\t\t\t\thidePointerEvents={hidePointerEvents}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t} else if (\n\t\tchannel === CHANNEL_TYPE.WHATSAPP ||\n\t\tchannel === CHANNEL_TYPE.RCS\n\t) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\t...whatsAppSpecificMeta?.templateContainerStyles,\n\t\t\t\t\t...(templateCreationsInfo ? styles.WhatsAppWrapper : {}),\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t}}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tif (setSelectedCarouselIndex && isWhatsappCarousel) {\n\t\t\t\t\t\tif (carouselCardIndex === -1 && !template?.mapping?.body?.length) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tsetSelectedCarouselIndex(carouselCardIndex ?? -1);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{templateCreationsInfo ? (\n\t\t\t\t\t<div style={{ padding: 16 }}>\n\t\t\t\t\t\t<TitleRegular>\n\t\t\t\t\t\t\t{StringUtils.convertToTitleCase(template?.label ?? '')}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t\t<WhatsappTemplatePreview\n\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\tshowHeader={whatsAppSpecificMeta?.showWhatsAppHeader}\n\t\t\t\t\textras={whatsAppSpecificMeta?.whatsAppExtras}\n\t\t\t\t\ttemplate={template as WhatsAppTemplate}\n\t\t\t\t\tsize={templateCreationsInfo ? 'small' : size ?? 'large'}\n\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\tborderWidth: templateCreationsInfo ? 0 : 1,\n\t\t\t\t\t\tborderTopWidth: 1,\n\t\t\t\t\t\t...(whatsAppSpecificMeta?.containerStyle ?? {}),\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t}}\n\t\t\t\t\tzeroStateComponent={whatsAppSpecificMeta?.zeroStateComponent}\n\t\t\t\t\tusePlaceHolderName={whatsAppSpecificMeta?.usePlaceHolderName}\n\t\t\t\t\tcarouselCardIndex={carouselCardIndex}\n\t\t\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\tchannel={channel}\n\t\t\t\t/>\n\t\t\t\t{(!!template?.['aiContentConfigId'] || !!template?.['isAiGenerated']) &&\n\t\t\t\t\t!isWhatsappCarousel && (\n\t\t\t\t\t\t<AiContentBadge>\n\t\t\t\t\t\t\t<AiContentIcon width={48} height={48} />\n\t\t\t\t\t\t</AiContentBadge>\n\t\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t} else if (channel == CHANNEL_TYPE.WEBPUSH) {\n\t\treturn (\n\t\t\t<div style={{ ...webPushSpecificMeta?.containerStyle }}>\n\t\t\t\t<WebpushPreview\n\t\t\t\t\ttemplate={template as WebpushTemplateType}\n\t\t\t\t\textraContainerCss={webPushSpecificMeta?.extraContainerCss}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\t{\n\t\treturn <></>;\n\t}\n};\n\nconst styles = {\n\tWhatsAppWrapper: {\n\t\tbackgroundColor: COLORS.surface.standard,\n\t\tborderRadius: 4,\n\t\tborder: `1px solid ${COLORS.background.inactive}`,\n\t\tmarginTop: 16,\n\t},\n};\n"],"names":["TemplatePreview","template","channel","whatsAppSpecificMeta","templateCreationsInfo","hideHeader","size","onlyTemplateContent","emailSpecificMeta","smsSpecificMeta","showSampleValues","carouselCardIndex","isWhatsappCarousel","isPreview","applyBorderBottom","webPushSpecificMeta","hidePointerEvents","setSelectedCarouselIndex","useTemplateModalContext","CHANNEL_TYPE","jsx","COLORS","SmsTemplatePreview","EmailTemplateThumbnailPreview","jsxs","styles","TitleRegular","StringUtils","Fragment","WhatsappTemplatePreview","AiContentBadge","AiContentIcon","WebpushPreview"],"mappings":"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"}

package/dist/esm/components/thumbnail/Thumbnail.js

@@ -2,7 +2,7 @@ import { jsx as h } from "react/jsx-runtime";
 import { SIZE as t } from "../avatar/AvatarHelper.js";
 import { THUMBNAIL_SIZE_MAP as e } from "./constants.js";
 import { ThumbnailStyle as r } from "./Thumbnail.styled.js";
-var a = /* @__PURE__ */ ((i) => (i.ONE_ONE = "ONE_ONE", i.VERTICAL = "VERTICAL", i.HORIZONTAL = "HORIZONTAL", i))(a || {});
+var A = /* @__PURE__ */ ((i) => (i.ONE_ONE = "ONE_ONE", i.VERTICAL = "VERTICAL", i.HORIZONTAL = "HORIZONTAL", i))(A || {});
 const E = {
   VERTICAL: {
     [t.SMALL]: { width: 30, height: 40 },
@@ -15,7 +15,7 @@ const E = {
     [t.LARGE]: { width: 80, height: 60 }
   },
   ONE_ONE: {}
-}, d = (i) => /* @__PURE__ */ h(r, { "data-test": "thumbnail-container", size: i.size, children: /* @__PURE__ */ h(
+}, d = (i) => /* @__PURE__ */ h(r, { size: i.size, children: /* @__PURE__ */ h(
   "img",
   {
     alt: "",
@@ -29,7 +29,7 @@ const E = {
   }
 ) });
 export {
-  a as RATIO,
+  A as RATIO,
   d as Thumbnail
 };
 //# sourceMappingURL=Thumbnail.js.map

package/dist/esm/components/thumbnail/Thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.js","sources":["../../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport { SIZE } from '@src/components/avatar/AvatarHelper';\nimport { THUMBNAIL_SIZE_MAP } from '@src/components/thumbnail/constants';\nimport { ThumbnailStyle } from '@src/components/thumbnail/Thumbnail.styled';\n\nexport enum RATIO {\n\tONE_ONE = 'ONE_ONE',\n\tVERTICAL = 'VERTICAL',\n\tHORIZONTAL = 'HORIZONTAL',\n}\n\nconst IMAGE_ASPECT_RATIO = {\n\t[RATIO.VERTICAL]: {\n\t\t[SIZE.SMALL]: { width: 30, height: 40 },\n\t\t[SIZE.MEDIUM]: { width: 48, height: 64 },\n\t\t[SIZE.LARGE]: { width: 60, height: 80 },\n\t},\n\t[RATIO.HORIZONTAL]: {\n\t\t[SIZE.SMALL]: { width: 40, height: 30 },\n\t\t[SIZE.MEDIUM]: { width: 64, height: 48 },\n\t\t[SIZE.LARGE]: { width: 80, height: 60 },\n\t},\n\t[RATIO.ONE_ONE]: {},\n};\n\nexport type ThumbnailProps = {\n\tsize: SIZE;\n\tratio: RATIO;\n\timageUrl: string;\n};\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n\treturn (\n\t\t<ThumbnailStyle data-test=\"thumbnail-container\" size={props.size}>\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={\n\t\t\t\t\tIMAGE_ASPECT_RATIO[props.ratio][props.size]?.width ||\n\t\t\t\t\tTHUMBNAIL_SIZE_MAP[props.size]\n\t\t\t\t}\n\t\t\t\theight={\n\t\t\t\t\tIMAGE_ASPECT_RATIO[props.ratio][props.size]?.height ||\n\t\t\t\t\tTHUMBNAIL_SIZE_MAP[props.size]\n\t\t\t\t}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props.ratio === RATIO.ONE_ONE ? 4 : 0,\n\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t}}\n\t\t\t\tsrc={props.imageUrl}\n\t\t\t/>\n\t\t</ThumbnailStyle>\n\t);\n};\n"],"names":["RATIO","IMAGE_ASPECT_RATIO","SIZE","Thumbnail","props","ThumbnailStyle","jsx","THUMBNAIL_SIZE_MAP"],"mappings":";;;;AAKO,IAAKA,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,aAAa,cAHFA,IAAAA,KAAA,CAAA,CAAA;AAMZ,MAAMC,IAAqB;AAAA,EACzB,UAAiB;AAAA,IACjB,CAACC,EAAK,KAAK,GAAG,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,IACnC,CAACA,EAAK,MAAM,GAAG,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,IACpC,CAACA,EAAK,KAAK,GAAG,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,EAAG;AAAA,EAEtC,YAAmB;AAAA,IACnB,CAACA,EAAK,KAAK,GAAG,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,IACnC,CAACA,EAAK,MAAM,GAAG,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,IACpC,CAACA,EAAK,KAAK,GAAG,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,EAAG;AAAA,EAEtC,SAAgB,CAAA;AAClB,GAQaC,IAAsC,CAACC,wBAEjDC,GAAA,EAAe,aAAU,uBAAsB,MAAMD,EAAM,MAC3D,UAAA,gBAAAE;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,KAAI;AAAA,IACJ,OACCL,EAAmBG,EAAM,KAAK,EAAEA,EAAM,IAAI,GAAG,SAC7CG,EAAmBH,EAAM,IAAI;AAAA,IAE9B,QACCH,EAAmBG,EAAM,KAAK,EAAEA,EAAM,IAAI,GAAG,UAC7CG,EAAmBH,EAAM,IAAI;AAAA,IAE9B,OAAO;AAAA,MACN,cAAcA,EAAM,UAAU,YAAgB,IAAI;AAAA,MAClD,WAAW;AAAA,IAAA;AAAA,IAEZ,KAAKA,EAAM;AAAA,EAAA;AAAA,GAEb;"}
+{"version":3,"file":"Thumbnail.js","sources":["../../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport { SIZE } from '@src/components/avatar/AvatarHelper';\nimport { THUMBNAIL_SIZE_MAP } from '@src/components/thumbnail/constants';\nimport { ThumbnailStyle } from '@src/components/thumbnail/Thumbnail.styled';\n\nexport enum RATIO {\n\tONE_ONE = 'ONE_ONE',\n\tVERTICAL = 'VERTICAL',\n\tHORIZONTAL = 'HORIZONTAL',\n}\n\nconst IMAGE_ASPECT_RATIO = {\n\t[RATIO.VERTICAL]: {\n\t\t[SIZE.SMALL]: { width: 30, height: 40 },\n\t\t[SIZE.MEDIUM]: { width: 48, height: 64 },\n\t\t[SIZE.LARGE]: { width: 60, height: 80 },\n\t},\n\t[RATIO.HORIZONTAL]: {\n\t\t[SIZE.SMALL]: { width: 40, height: 30 },\n\t\t[SIZE.MEDIUM]: { width: 64, height: 48 },\n\t\t[SIZE.LARGE]: { width: 80, height: 60 },\n\t},\n\t[RATIO.ONE_ONE]: {},\n};\n\nexport type ThumbnailProps = {\n\tsize: SIZE;\n\tratio: RATIO;\n\timageUrl: string;\n};\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n\treturn (\n\t\t<ThumbnailStyle size={props.size}>\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={\n\t\t\t\t\tIMAGE_ASPECT_RATIO[props.ratio][props.size]?.width ||\n\t\t\t\t\tTHUMBNAIL_SIZE_MAP[props.size]\n\t\t\t\t}\n\t\t\t\theight={\n\t\t\t\t\tIMAGE_ASPECT_RATIO[props.ratio][props.size]?.height ||\n\t\t\t\t\tTHUMBNAIL_SIZE_MAP[props.size]\n\t\t\t\t}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props.ratio === RATIO.ONE_ONE ? 4 : 0,\n\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t}}\n\t\t\t\tsrc={props.imageUrl}\n\t\t\t/>\n\t\t</ThumbnailStyle>\n\t);\n};\n"],"names":["RATIO","IMAGE_ASPECT_RATIO","SIZE","Thumbnail","props","jsx","ThumbnailStyle","THUMBNAIL_SIZE_MAP"],"mappings":";;;;AAKO,IAAKA,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,aAAa,cAHFA,IAAAA,KAAA,CAAA,CAAA;AAMZ,MAAMC,IAAqB;AAAA,EACzB,UAAiB;AAAA,IACjB,CAACC,EAAK,KAAK,GAAG,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,IACnC,CAACA,EAAK,MAAM,GAAG,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,IACpC,CAACA,EAAK,KAAK,GAAG,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,EAAG;AAAA,EAEtC,YAAmB;AAAA,IACnB,CAACA,EAAK,KAAK,GAAG,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,IACnC,CAACA,EAAK,MAAM,GAAG,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,IACpC,CAACA,EAAK,KAAK,GAAG,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,EAAG;AAAA,EAEtC,SAAgB,CAAA;AAClB,GAQaC,IAAsC,CAACC,MAElD,gBAAAC,EAACC,GAAA,EAAe,MAAMF,EAAM,MAC3B,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,KAAI;AAAA,IACJ,OACCJ,EAAmBG,EAAM,KAAK,EAAEA,EAAM,IAAI,GAAG,SAC7CG,EAAmBH,EAAM,IAAI;AAAA,IAE9B,QACCH,EAAmBG,EAAM,KAAK,EAAEA,EAAM,IAAI,GAAG,UAC7CG,EAAmBH,EAAM,IAAI;AAAA,IAE9B,OAAO;AAAA,MACN,cAAcA,EAAM,UAAU,YAAgB,IAAI;AAAA,MAClD,WAAW;AAAA,IAAA;AAAA,IAEZ,KAAKA,EAAM;AAAA,EAAA;AAAA,GAEb;"}

package/dist/esm/components/zeroState/ZeroState.js

@@ -27,38 +27,31 @@ const b = d.div`
   title: a,
   IconHolderStyle: s,
   style: m,
-  isLoading: n,
+  isLoading: o,
   containerWidth: l,
-  ...o
+  ...n
 }) => {
   let c = f;
   const r = l ? parseFloat(l) : 0;
   return r && !isNaN(r) && r <= 150 && (c = y), /* @__PURE__ */ p(b, { style: m ?? {}, children: [
-    n ? /* @__PURE__ */ t(h, { size: "large", color: e.stroke.brand }) : /* @__PURE__ */ t(
-      S,
+    o ? /* @__PURE__ */ t(h, { size: "large", color: e.stroke.brand }) : /* @__PURE__ */ t(S, { style: s ?? {}, children: n?.Icon || /* @__PURE__ */ t(
+      x,
       {
-        "data-test": "zero-state-icon-holder",
-        style: s ?? {},
-        children: o?.Icon || /* @__PURE__ */ t(
-          x,
-          {
-            color: e.content.placeholder,
-            height: 24,
-            width: 24
-          }
-        )
+        color: e.content.placeholder,
+        height: 24,
+        width: 24
       }
-    ),
+    ) }),
     /* @__PURE__ */ t(
       c,
       {
         style: {
           color: e.content.primary
         },
-        children: n ? "Loading..." : a || "No results found"
+        children: o ? "Loading..." : a || "No results found"
       }
     ),
-    !!i && !n && /* @__PURE__ */ t(
+    !!i && !o && /* @__PURE__ */ t(
       u,
       {
         style: {
@@ -69,11 +62,11 @@ const b = d.div`
         children: i
       }
     ),
-    !!o?.actionButton && /* @__PURE__ */ t(
+    !!n?.actionButton && /* @__PURE__ */ t(
       "div",
       {
-        style: o?.buttonWidth ? { width: o?.buttonWidth, display: "flex" } : {},
-        children: /* @__PURE__ */ t(g, { ...o?.actionButton })
+        style: n?.buttonWidth ? { width: n?.buttonWidth, display: "flex" } : {},
+        children: /* @__PURE__ */ t(g, { ...n?.actionButton })
       }
     )
   ] });

package/dist/esm/components/zeroState/ZeroState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZeroState.js","sources":["../../../../src/components/zeroState/ZeroState.tsx"],"sourcesContent":["// import SearchIcon from '@bik-icons/search.svg';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { Spinner } from '@src/components/spinner';\nimport {\n\tBodyCaption,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport AlertIcon from '../../assets/icons/alert.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 1;\n\tgap: 6px;\n`;\n\nconst IconHolder = styled.div`\n\tbackground: ${COLORS.background.base};\n\twidth: 48px;\n\theight: 48px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 24px;\n`;\n\nexport const ZeroState: React.FC<{\n\tisLoading?: boolean;\n\ttitle: string;\n\tsubTitle?: string;\n\tIconHolderStyle?: React.CSSProperties;\n\tstyle?: React.CSSProperties /** now this component is extendable through styled-component */;\n\tactionButton?: ButtonProps;\n\tbuttonWidth?: number;\n\tIcon?: React.ReactNode;\n\tcontainerWidth?: string;\n}> = ({\n\tsubTitle,\n\ttitle,\n\tIconHolderStyle,\n\tstyle,\n\tisLoading,\n\tcontainerWidth,\n\t...otherProps\n}) => {\n\tlet TitleTypography = TitleRegular;\n\tconst numericWidth = containerWidth ? parseFloat(containerWidth) : 0;\n\n\tif (numericWidth && !isNaN(numericWidth) && numericWidth <= 150) {\n\t\tTitleTypography = TitleSmall;\n\t}\n\treturn (\n\t\t<Container style={style ?? {}}>\n\t\t\t{isLoading ? (\n\t\t\t\t<Spinner size={'large'} color={COLORS.stroke.brand} />\n\t\t\t) : (\n\t\t\t\t<IconHolder\n\t\t\t\t\tdata-test=\"zero-state-icon-holder\"\n\t\t\t\t\tstyle={IconHolderStyle ?? {}}\n\t\t\t\t>\n\t\t\t\t\t{otherProps?.Icon || (\n\t\t\t\t\t\t<AlertIcon\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</IconHolder>\n\t\t\t)}\n\n\t\t\t<TitleTypography\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{isLoading ? 'Loading...' : title || 'No results found'}\n\t\t\t</TitleTypography>\n\t\t\t{!!subTitle && !isLoading && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\tmaxWidth: 184,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{subTitle}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t\t{!!otherProps?.actionButton && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={\n\t\t\t\t\t\totherProps?.buttonWidth\n\t\t\t\t\t\t\t? { width: otherProps?.buttonWidth, display: 'flex' }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Button {...otherProps?.actionButton} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["Container","styled","COLORS","IconHolder","ZeroState","subTitle","title","IconHolderStyle","style","isLoading","containerWidth","otherProps","TitleTypography","TitleRegular","numericWidth","TitleSmall","jsxs","jsx","Spinner","AlertIcon","BodyCaption","Button"],"mappings":";;;;;;;AAcA,MAAMA,IAAYC,EAAO;AAAA,eACVC,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShCC,IAAaF,EAAO;AAAA,eACXC,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUxBE,IAUR,CAAC;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,MAAIC,IAAkBC;AACtB,QAAMC,IAAeJ,IAAiB,WAAWA,CAAc,IAAI;AAEnE,SAAII,KAAgB,CAAC,MAAMA,CAAY,KAAKA,KAAgB,QAC3DF,IAAkBG,IAGlB,gBAAAC,EAAChB,GAAA,EAAU,OAAOQ,KAAS,CAAA,GACzB,UAAA;AAAA,IAAAC,IACA,gBAAAQ,EAACC,KAAQ,MAAM,SAAS,OAAOhB,EAAO,OAAO,OAAO,IAEpD,gBAAAe;AAAA,MAACd;AAAA,MAAA;AAAA,QACA,aAAU;AAAA,QACV,OAAOI,KAAmB,CAAA;AAAA,QAEzB,aAAY,QACZ,gBAAAU;AAAA,UAACE;AAAAA,UAAA;AAAA,YACA,OAAOjB,EAAO,QAAQ;AAAA,YACtB,QAAQ;AAAA,YACR,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,IAKH,gBAAAe;AAAA,MAACL;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAOV,EAAO,QAAQ;AAAA,QAAA;AAAA,QAGtB,UAAAO,IAAY,eAAeH,KAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAErC,CAAC,CAACD,KAAY,CAACI,KACf,gBAAAQ;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAOlB,EAAO,QAAQ;AAAA,UACtB,WAAW;AAAA,UACX,UAAU;AAAA,QAAA;AAAA,QAGV,UAAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF,CAAC,CAACM,GAAY,gBACd,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,OACCN,GAAY,cACT,EAAE,OAAOA,GAAY,aAAa,SAAS,OAAA,IAC3C,CAAA;AAAA,QAGJ,UAAA,gBAAAM,EAACI,GAAA,EAAQ,GAAGV,GAAY,aAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,GAEF;AAEF;"}
+{"version":3,"file":"ZeroState.js","sources":["../../../../src/components/zeroState/ZeroState.tsx"],"sourcesContent":["// import SearchIcon from '@bik-icons/search.svg';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { Spinner } from '@src/components/spinner';\nimport {\n\tBodyCaption,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport AlertIcon from '../../assets/icons/alert.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 1;\n\tgap: 6px;\n`;\n\nconst IconHolder = styled.div`\n\tbackground: ${COLORS.background.base};\n\twidth: 48px;\n\theight: 48px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 24px;\n`;\n\nexport const ZeroState: React.FC<{\n\tisLoading?: boolean;\n\ttitle: string;\n\tsubTitle?: string;\n\tIconHolderStyle?: React.CSSProperties;\n\tstyle?: React.CSSProperties /** now this component is extendable through styled-component */;\n\tactionButton?: ButtonProps;\n\tbuttonWidth?: number;\n\tIcon?: React.ReactNode;\n\tcontainerWidth?: string;\n}> = ({\n\tsubTitle,\n\ttitle,\n\tIconHolderStyle,\n\tstyle,\n\tisLoading,\n\tcontainerWidth,\n\t...otherProps\n}) => {\n\tlet TitleTypography = TitleRegular;\n\tconst numericWidth = containerWidth ? parseFloat(containerWidth) : 0;\n\n\tif (numericWidth && !isNaN(numericWidth) && numericWidth <= 150) {\n\t\tTitleTypography = TitleSmall;\n\t}\n\treturn (\n\t\t<Container style={style ?? {}}>\n\t\t\t{isLoading ? (\n\t\t\t\t<Spinner size={'large'} color={COLORS.stroke.brand} />\n\t\t\t) : (\n\t\t\t\t<IconHolder style={IconHolderStyle ?? {}}>\n\t\t\t\t\t{otherProps?.Icon || (\n\t\t\t\t\t\t<AlertIcon\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</IconHolder>\n\t\t\t)}\n\n\t\t\t<TitleTypography\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{isLoading ? 'Loading...' : title || 'No results found'}\n\t\t\t</TitleTypography>\n\t\t\t{!!subTitle && !isLoading && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\tmaxWidth: 184,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{subTitle}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t\t{!!otherProps?.actionButton && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={\n\t\t\t\t\t\totherProps?.buttonWidth\n\t\t\t\t\t\t\t? { width: otherProps?.buttonWidth, display: 'flex' }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Button {...otherProps?.actionButton} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["Container","styled","COLORS","IconHolder","ZeroState","subTitle","title","IconHolderStyle","style","isLoading","containerWidth","otherProps","TitleTypography","TitleRegular","numericWidth","TitleSmall","jsxs","Spinner","jsx","AlertIcon","BodyCaption","Button"],"mappings":";;;;;;;AAcA,MAAMA,IAAYC,EAAO;AAAA,eACVC,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShCC,IAAaF,EAAO;AAAA,eACXC,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUxBE,IAUR,CAAC;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,MAAIC,IAAkBC;AACtB,QAAMC,IAAeJ,IAAiB,WAAWA,CAAc,IAAI;AAEnE,SAAII,KAAgB,CAAC,MAAMA,CAAY,KAAKA,KAAgB,QAC3DF,IAAkBG,IAGlB,gBAAAC,EAAChB,GAAA,EAAU,OAAOQ,KAAS,CAAA,GACzB,UAAA;AAAA,IAAAC,sBACCQ,GAAA,EAAQ,MAAM,SAAS,OAAOf,EAAO,OAAO,MAAA,CAAO,IAEpD,gBAAAgB,EAACf,KAAW,OAAOI,KAAmB,CAAA,GACpC,aAAY,QACZ,gBAAAW;AAAA,MAACC;AAAAA,MAAA;AAAA,QACA,OAAOjB,EAAO,QAAQ;AAAA,QACtB,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,IAAA,GAGV;AAAA,IAGD,gBAAAgB;AAAA,MAACN;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAOV,EAAO,QAAQ;AAAA,QAAA;AAAA,QAGtB,UAAAO,IAAY,eAAeH,KAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAErC,CAAC,CAACD,KAAY,CAACI,KACf,gBAAAS;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAOlB,EAAO,QAAQ;AAAA,UACtB,WAAW;AAAA,UACX,UAAU;AAAA,QAAA;AAAA,QAGV,UAAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF,CAAC,CAACM,GAAY,gBACd,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,OACCP,GAAY,cACT,EAAE,OAAOA,GAAY,aAAa,SAAS,OAAA,IAC3C,CAAA;AAAA,QAGJ,UAAA,gBAAAO,EAACG,GAAA,EAAQ,GAAGV,GAAY,aAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,GAEF;AAEF;"}