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

package/dist/esm/components/side-modal/SideModal.js

@@ -3,7 +3,7 @@ import { useEffect as a } from "react";
 import m from "react-dom";
 import u from "../../assets/icons/cross.svg.js";
 import { TitleMedium as h } from "../TypographyStyle.js";
-import { SideModalStyle as f, SideModalContainer as y, SideModalHeader as S, SideModalBody as C, SideModalFooter as s, FooterButtonWrapper as B } from "./SideModal.style.js";
+import { SideModalStyle as f, SideModalContainer as y, SideModalHeader as s, SideModalBody as S, SideModalFooter as C, FooterButtonWrapper as B } from "./SideModal.style.js";
 import { Button as i } from "../button/Button.js";
 const D = (e) => {
   const { closeOnEscapeKey: n, onClose: d } = e;
@@ -18,20 +18,28 @@ const D = (e) => {
   }, [n, d]), m.createPortal(
     /* @__PURE__ */ t(f, { zIndex: e.zIndex, children: /* @__PURE__ */ o(y, { width: e.width, children: [
       /* @__PURE__ */ o(
-        S,
+        s,
         {
           headerStyle: {
             ...e.headerStyle
           },
           children: [
             e?.headerCustomComponent || /* @__PURE__ */ t(h, { children: e.header }),
-            !e.hideCrossButton && /* @__PURE__ */ t(u, { width: 24, height: 24, onClick: e.onClose }),
+            !e.hideCrossButton && /* @__PURE__ */ t(
+              u,
+              {
+                width: 24,
+                height: 24,
+                onClick: e.onClose,
+                "data-test": "side-modal-close-button"
+              }
+            ),
             " "
           ]
         }
       ),
       /* @__PURE__ */ o(
-        C,
+        S,
         {
           hideFooter: e.hideFooter,
           bodyStyle: {
@@ -44,7 +52,7 @@ const D = (e) => {
         }
       ),
       e.hideFooter === !0 ? null : /* @__PURE__ */ o(
-        s,
+        C,
         {
           footerDirection: e.footerDirection,
           footerStyle: {

package/dist/esm/components/side-modal/SideModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideModal.js","sources":["../../../../src/components/side-modal/SideModal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { TitleMedium } from '../TypographyStyle';\nimport {\n\tFooterButtonWrapper,\n\tSideModalBody,\n\tSideModalContainer,\n\tSideModalFooter,\n\tSideModalHeader,\n\tSideModalStyle,\n} from './SideModal.style';\n\nexport interface SideModalProps {\n\theader: string;\n\tchildren: React.ReactNode;\n\theaderCustomComponent?: React.ReactNode;\n\tfooterCustomComponent?: React.ReactNode;\n\tfooterDirection?: 'row' | 'row-reverse';\n\thideCrossButton?: boolean;\n\twidth?: string;\n\tsaveButtonProps?: ButtonProps;\n\tcancelButtonProps?: ButtonProps;\n\tonClose: () => void;\n\tzIndex?: number;\n\thideFooter?: boolean;\n\tbodyStyle?: React.CSSProperties;\n\telement?: Element | DocumentFragment;\n\theaderStyle?: React.CSSProperties;\n\tfooterStyle?: React.CSSProperties;\n\tcloseOnEscapeKey?: boolean;\n}\n\nexport const SideModal: React.FC<SideModalProps> = (props) => {\n\tconst { closeOnEscapeKey, onClose } = props;\n\n\t// Escape key handler - enabled by default\n\tuseEffect(() => {\n\t\t// Guard: Escape key must be enabled (default: true)\n\n\t\tconst escapeEnabled = closeOnEscapeKey ?? true;\n\t\tif (!escapeEnabled) return;\n\n\t\tconst handleEscapeKey = (event: KeyboardEvent) => {\n\t\t\tif (event.key !== 'Escape') return;\n\n\t\t\tonClose();\n\t\t};\n\n\t\tdocument.addEventListener('keydown', handleEscapeKey);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleEscapeKey);\n\t\t};\n\t}, [closeOnEscapeKey, onClose]);\n\n\treturn ReactDOM.createPortal(\n\t\t<SideModalStyle zIndex={props.zIndex}>\n\t\t\t<SideModalContainer width={props.width}>\n\t\t\t\t<SideModalHeader\n\t\t\t\t\theaderStyle={{\n\t\t\t\t\t\t...props.headerStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props?.headerCustomComponent || (\n\t\t\t\t\t\t<TitleMedium>{props.header}</TitleMedium>\n\t\t\t\t\t)}\n\t\t\t\t\t{!props.hideCrossButton && (\n\t\t\t\t\t\t<CrossIcon width={24} height={24} onClick={props.onClose} />\n\t\t\t\t\t)}{' '}\n\t\t\t\t</SideModalHeader>\n\t\t\t\t<SideModalBody\n\t\t\t\t\thideFooter={props.hideFooter}\n\t\t\t\t\tbodyStyle={{\n\t\t\t\t\t\t...props.bodyStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.children}{' '}\n\t\t\t\t</SideModalBody>\n\t\t\t\t{props.hideFooter === true ? null : (\n\t\t\t\t\t<SideModalFooter\n\t\t\t\t\t\tfooterDirection={props.footerDirection}\n\t\t\t\t\t\tfooterStyle={{\n\t\t\t\t\t\t\t...props.footerStyle,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{(props.saveButtonProps || props.cancelButtonProps) && (\n\t\t\t\t\t\t\t<FooterButtonWrapper footerDirection={props.footerDirection}>\n\t\t\t\t\t\t\t\t{props.saveButtonProps && <Button {...props.saveButtonProps} />}\n\t\t\t\t\t\t\t\t{props.cancelButtonProps && (\n\t\t\t\t\t\t\t\t\t<Button {...props.cancelButtonProps} />\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</FooterButtonWrapper>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.footerCustomComponent ? props.footerCustomComponent : <></>}{' '}\n\t\t\t\t\t</SideModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</SideModalContainer>\n\t\t</SideModalStyle>,\n\t\tprops.element ?? document.body,\n\t);\n};\n"],"names":["SideModal","props","closeOnEscapeKey","onClose","useEffect","handleEscapeKey","event","ReactDOM","jsx","SideModalStyle","jsxs","SideModalContainer","SideModalHeader","TitleMedium","CrossIcon","SideModalBody","SideModalFooter","FooterButtonWrapper","Button","Fragment"],"mappings":";;;;;;;AAmCO,MAAMA,IAAsC,CAACC,MAAU;AAC7D,QAAM,EAAE,kBAAAC,GAAkB,SAAAC,EAAA,IAAYF;AAGtC,SAAAG,EAAU,MAAM;AAIf,QAAI,EADkBF,KAAoB,IACtB;AAEpB,UAAMG,IAAkB,CAACC,MAAyB;AACjD,MAAIA,EAAM,QAAQ,YAElBH,EAAA;AAAA,IACD;AAEA,oBAAS,iBAAiB,WAAWE,CAAe,GAE7C,MAAM;AACZ,eAAS,oBAAoB,WAAWA,CAAe;AAAA,IACxD;AAAA,EACD,GAAG,CAACH,GAAkBC,CAAO,CAAC,GAEvBI,EAAS;AAAA,IACf,gBAAAC,EAACC,KAAe,QAAQR,EAAM,QAC7B,UAAA,gBAAAS,EAACC,GAAA,EAAmB,OAAOV,EAAM,OAChC,UAAA;AAAA,MAAA,gBAAAS;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,aAAa;AAAA,YACZ,GAAGX,EAAM;AAAA,UAAA;AAAA,UAGT,UAAA;AAAA,YAAAA,GAAO,yBACP,gBAAAO,EAACK,GAAA,EAAa,UAAAZ,EAAM,QAAO;AAAA,YAE3B,CAACA,EAAM,mBACP,gBAAAO,EAACM,GAAA,EAAU,OAAO,IAAI,QAAQ,IAAI,SAASb,EAAM,QAAA,CAAS;AAAA,YACxD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,gBAAAS;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,YAAYd,EAAM;AAAA,UAClB,WAAW;AAAA,YACV,GAAGA,EAAM;AAAA,UAAA;AAAA,UAGT,UAAA;AAAA,YAAAA,EAAM;AAAA,YAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjBA,EAAM,eAAe,KAAO,OAC5B,gBAAAS;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,iBAAiBf,EAAM;AAAA,UACvB,aAAa;AAAA,YACZ,GAAGA,EAAM;AAAA,UAAA;AAAA,UAGR,UAAA;AAAA,aAAAA,EAAM,mBAAmBA,EAAM,wCAC/BgB,GAAA,EAAoB,iBAAiBhB,EAAM,iBAC1C,UAAA;AAAA,cAAAA,EAAM,mBAAmB,gBAAAO,EAACU,GAAA,EAAQ,GAAGjB,EAAM,iBAAiB;AAAA,cAC5DA,EAAM,qBACN,gBAAAO,EAACU,GAAA,EAAQ,GAAGjB,EAAM,mBAAmB;AAAA,cACnC;AAAA,YAAA,GACJ;AAAA,YAEAA,EAAM,wBAAwBA,EAAM,wBAAwB,gBAAAO,EAAAW,GAAA,EAAE;AAAA,YAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEnE;AAAA,IAAA,EAAA,CACJ,EAAA,CACD;AAAA,IACAlB,EAAM,WAAW,SAAS;AAAA,EAAA;AAE5B;"}
+{"version":3,"file":"SideModal.js","sources":["../../../../src/components/side-modal/SideModal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { TitleMedium } from '../TypographyStyle';\nimport {\n\tFooterButtonWrapper,\n\tSideModalBody,\n\tSideModalContainer,\n\tSideModalFooter,\n\tSideModalHeader,\n\tSideModalStyle,\n} from './SideModal.style';\n\nexport interface SideModalProps {\n\theader: string;\n\tchildren: React.ReactNode;\n\theaderCustomComponent?: React.ReactNode;\n\tfooterCustomComponent?: React.ReactNode;\n\tfooterDirection?: 'row' | 'row-reverse';\n\thideCrossButton?: boolean;\n\twidth?: string;\n\tsaveButtonProps?: ButtonProps;\n\tcancelButtonProps?: ButtonProps;\n\tonClose: () => void;\n\tzIndex?: number;\n\thideFooter?: boolean;\n\tbodyStyle?: React.CSSProperties;\n\telement?: Element | DocumentFragment;\n\theaderStyle?: React.CSSProperties;\n\tfooterStyle?: React.CSSProperties;\n\tcloseOnEscapeKey?: boolean;\n}\n\nexport const SideModal: React.FC<SideModalProps> = (props) => {\n\tconst { closeOnEscapeKey, onClose } = props;\n\n\t// Escape key handler - enabled by default\n\tuseEffect(() => {\n\t\t// Guard: Escape key must be enabled (default: true)\n\n\t\tconst escapeEnabled = closeOnEscapeKey ?? true;\n\t\tif (!escapeEnabled) return;\n\n\t\tconst handleEscapeKey = (event: KeyboardEvent) => {\n\t\t\tif (event.key !== 'Escape') return;\n\n\t\t\tonClose();\n\t\t};\n\n\t\tdocument.addEventListener('keydown', handleEscapeKey);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleEscapeKey);\n\t\t};\n\t}, [closeOnEscapeKey, onClose]);\n\n\treturn ReactDOM.createPortal(\n\t\t<SideModalStyle zIndex={props.zIndex}>\n\t\t\t<SideModalContainer width={props.width}>\n\t\t\t\t<SideModalHeader\n\t\t\t\t\theaderStyle={{\n\t\t\t\t\t\t...props.headerStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props?.headerCustomComponent || (\n\t\t\t\t\t\t<TitleMedium>{props.header}</TitleMedium>\n\t\t\t\t\t)}\n\t\t\t\t\t{!props.hideCrossButton && (\n\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\tonClick={props.onClose}\n\t\t\t\t\t\t\tdata-test=\"side-modal-close-button\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}{' '}\n\t\t\t\t</SideModalHeader>\n\t\t\t\t<SideModalBody\n\t\t\t\t\thideFooter={props.hideFooter}\n\t\t\t\t\tbodyStyle={{\n\t\t\t\t\t\t...props.bodyStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.children}{' '}\n\t\t\t\t</SideModalBody>\n\t\t\t\t{props.hideFooter === true ? null : (\n\t\t\t\t\t<SideModalFooter\n\t\t\t\t\t\tfooterDirection={props.footerDirection}\n\t\t\t\t\t\tfooterStyle={{\n\t\t\t\t\t\t\t...props.footerStyle,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{(props.saveButtonProps || props.cancelButtonProps) && (\n\t\t\t\t\t\t\t<FooterButtonWrapper footerDirection={props.footerDirection}>\n\t\t\t\t\t\t\t\t{props.saveButtonProps && <Button {...props.saveButtonProps} />}\n\t\t\t\t\t\t\t\t{props.cancelButtonProps && (\n\t\t\t\t\t\t\t\t\t<Button {...props.cancelButtonProps} />\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</FooterButtonWrapper>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.footerCustomComponent ? props.footerCustomComponent : <></>}{' '}\n\t\t\t\t\t</SideModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</SideModalContainer>\n\t\t</SideModalStyle>,\n\t\tprops.element ?? document.body,\n\t);\n};\n"],"names":["SideModal","props","closeOnEscapeKey","onClose","useEffect","handleEscapeKey","event","ReactDOM","jsx","SideModalStyle","jsxs","SideModalContainer","SideModalHeader","TitleMedium","CrossIcon","SideModalBody","SideModalFooter","FooterButtonWrapper","Button","Fragment"],"mappings":";;;;;;;AAmCO,MAAMA,IAAsC,CAACC,MAAU;AAC7D,QAAM,EAAE,kBAAAC,GAAkB,SAAAC,EAAA,IAAYF;AAGtC,SAAAG,EAAU,MAAM;AAIf,QAAI,EADkBF,KAAoB,IACtB;AAEpB,UAAMG,IAAkB,CAACC,MAAyB;AACjD,MAAIA,EAAM,QAAQ,YAElBH,EAAA;AAAA,IACD;AAEA,oBAAS,iBAAiB,WAAWE,CAAe,GAE7C,MAAM;AACZ,eAAS,oBAAoB,WAAWA,CAAe;AAAA,IACxD;AAAA,EACD,GAAG,CAACH,GAAkBC,CAAO,CAAC,GAEvBI,EAAS;AAAA,IACf,gBAAAC,EAACC,KAAe,QAAQR,EAAM,QAC7B,UAAA,gBAAAS,EAACC,GAAA,EAAmB,OAAOV,EAAM,OAChC,UAAA;AAAA,MAAA,gBAAAS;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,aAAa;AAAA,YACZ,GAAGX,EAAM;AAAA,UAAA;AAAA,UAGT,UAAA;AAAA,YAAAA,GAAO,yBACP,gBAAAO,EAACK,GAAA,EAAa,UAAAZ,EAAM,QAAO;AAAA,YAE3B,CAACA,EAAM,mBACP,gBAAAO;AAAA,cAACM;AAAAA,cAAA;AAAA,gBACA,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,SAASb,EAAM;AAAA,gBACf,aAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAET;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,gBAAAS;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,YAAYd,EAAM;AAAA,UAClB,WAAW;AAAA,YACV,GAAGA,EAAM;AAAA,UAAA;AAAA,UAGT,UAAA;AAAA,YAAAA,EAAM;AAAA,YAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjBA,EAAM,eAAe,KAAO,OAC5B,gBAAAS;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,iBAAiBf,EAAM;AAAA,UACvB,aAAa;AAAA,YACZ,GAAGA,EAAM;AAAA,UAAA;AAAA,UAGR,UAAA;AAAA,aAAAA,EAAM,mBAAmBA,EAAM,wCAC/BgB,GAAA,EAAoB,iBAAiBhB,EAAM,iBAC1C,UAAA;AAAA,cAAAA,EAAM,mBAAmB,gBAAAO,EAACU,GAAA,EAAQ,GAAGjB,EAAM,iBAAiB;AAAA,cAC5DA,EAAM,qBACN,gBAAAO,EAACU,GAAA,EAAQ,GAAGjB,EAAM,mBAAmB;AAAA,cACnC;AAAA,YAAA,GACJ;AAAA,YAEAA,EAAM,wBAAwBA,EAAM,wBAAwB,gBAAAO,EAAAW,GAAA,EAAE;AAAA,YAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEnE;AAAA,IAAA,EAAA,CACJ,EAAA,CACD;AAAA,IACAlB,EAAM,WAAW,SAAS;AAAA,EAAA;AAE5B;"}

package/dist/esm/components/star-rating/Star.d.ts

@@ -10,4 +10,5 @@ export declare const Star: React.FC<{
     asHovered?: boolean;
     mode?: 'VIEW' | 'EDIT';
     version?: 'v1' | 'v2';
+    'data-testid'?: string;
 }>;

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

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

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

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

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

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

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, { size: i.size, children: /* @__PURE__ */ h(
+}, d = (i) => /* @__PURE__ */ h(r, { "data-test": "thumbnail-container", 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 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;"}
+{"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;"}

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

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