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

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/states/StateComponent.js

@@ -1,5 +1,5 @@
-import { jsxs as i, jsx as e, Fragment as s } from "react/jsx-runtime";
-import { COLORS as c } from "../../constants/Theme.js";
+import { jsxs as i, jsx as e, Fragment as m } from "react/jsx-runtime";
+import { COLORS as a } from "../../constants/Theme.js";
 import v from "../../assets/icons/errorIcon.svg.js";
 import z from "../../assets/icons/retryIcon.svg.js";
 import B from "../../assets/icons/state_icon.svg.js";
@@ -12,32 +12,32 @@ import { Button as h } from "../button/Button.js";
 var H = /* @__PURE__ */ ((t) => (t.SUCCESS = "success", t.ERROR = "error", t.WARNING = "warning", t.LOADING = "loading", t.RETRY = "retry", t.INFO = "info", t))(H || {}), P = /* @__PURE__ */ ((t) => (t.CANCEL = "cancel", t.OTHER = "other", t))(P || {}), j = /* @__PURE__ */ ((t) => (t.SINGLE = "SINGLE", t.DOUBLE = "DOUBLE", t))(j || {});
 const tt = (t) => {
   const g = () => {
-    if (r == "success")
-      return /* @__PURE__ */ e(O, {});
-    if (r == "warning")
-      return /* @__PURE__ */ e(x, {});
-    if (r == "error")
-      return /* @__PURE__ */ e(v, {});
-    if (r === "loading")
+    if (n == "success")
+      return /* @__PURE__ */ e(O, { "data-test": "static-icon" });
+    if (n == "warning")
+      return /* @__PURE__ */ e(x, { "data-test": "static-icon" });
+    if (n == "error")
+      return /* @__PURE__ */ e(v, { "data-test": "static-icon" });
+    if (n === "loading")
       return /* @__PURE__ */ e(N, { size: "large" });
-    if (r === "retry")
-      return /* @__PURE__ */ e(z, {});
-    if (r == "info")
-      return /* @__PURE__ */ e(B, {});
+    if (n === "retry")
+      return /* @__PURE__ */ e(z, { "data-test": "static-icon" });
+    if (n == "info")
+      return /* @__PURE__ */ e(B, { "data-test": "static-icon" });
   }, {
-    states: r,
-    heading: a,
+    states: n,
+    heading: c,
     subline: d,
-    errorText: l,
+    errorText: s,
     icon: S = g(),
     isButtonEnabled: y,
     type: L,
     buttonText: f,
     buttonType: T,
-    onButtonClick: n,
+    onButtonClick: r,
     leadingIcon: C,
     width: E,
-    headerImage: m,
+    headerImage: l,
     iconWidth: R,
     iconHeight: p,
     closeButtonType: I,
@@ -45,30 +45,47 @@ const tt = (t) => {
     "data-test": o
   } = t;
   return /* @__PURE__ */ i(W, { width: E, "data-test": o, children: [
-    /* @__PURE__ */ e(D, { iconWidth: R, iconHeight: p, children: m ? /* @__PURE__ */ e("img", { src: m, width: "100%", height: "auto", alt: "" }) : S }),
+    /* @__PURE__ */ e(
+      D,
+      {
+        iconWidth: R,
+        iconHeight: p,
+        "data-test": "state-icon",
+        children: l ? /* @__PURE__ */ e(
+          "img",
+          {
+            "data-test": "header-image",
+            src: l,
+            width: "100%",
+            height: "auto",
+            alt: ""
+          }
+        ) : S
+      }
+    ),
     /* @__PURE__ */ i(G, { size: t.size, children: [
-      t.size === "SMALL" && /* @__PURE__ */ e(A, { children: a }),
-      t.size !== "SMALL" && /* @__PURE__ */ e(w, { children: a })
+      t.size === "SMALL" && /* @__PURE__ */ e(A, { children: c }),
+      t.size !== "SMALL" && /* @__PURE__ */ e(w, { children: c })
     ] }),
     /* @__PURE__ */ i(U, { children: [
-      t.size !== "SMALL" && /* @__PURE__ */ e(M, { color: c.content.secondary, children: d }),
-      t.size === "SMALL" && /* @__PURE__ */ e(u, { color: c.content.secondary, children: d }),
-      l && /* @__PURE__ */ e(
+      t.size !== "SMALL" && /* @__PURE__ */ e(M, { color: a.content.secondary, children: d }),
+      t.size === "SMALL" && /* @__PURE__ */ e(u, { color: a.content.secondary, children: d }),
+      s && /* @__PURE__ */ e(
         u,
         {
-          color: c.content.negative,
+          color: a.content.negative,
           style: { marginTop: 8, whiteSpace: "pre-line" },
-          children: l
+          children: s
         }
       )
     ] }),
-    t.children ?? /* @__PURE__ */ e(s, {}),
-    y && /* @__PURE__ */ e(s, { children: /* @__PURE__ */ i(k, { size: t.size, children: [
+    t.children ?? /* @__PURE__ */ e(m, {}),
+    y && /* @__PURE__ */ e(m, { children: /* @__PURE__ */ i(k, { size: t.size, children: [
       L == "DOUBLE" && /* @__PURE__ */ e(
         h,
         {
           "data-test": `${o}-cancel`,
-          onClick: () => n && n(
+          onClick: () => r && r(
             "cancel"
             /* CANCEL */
           ),
@@ -81,7 +98,7 @@ const tt = (t) => {
         h,
         {
           "data-test": `${o}-primary`,
-          onClick: () => n && n(
+          onClick: () => r && r(
             "other"
             /* OTHER */
           ),

package/dist/esm/components/states/StateComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"StateComponent.js","sources":["../../../../src/components/states/StateComponent.tsx"],"sourcesContent":["import React from 'react';\nimport { Type } from '@src/components/button/model';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorIcon.svg';\nimport RetryIcon from '../../assets/icons/retryIcon.svg';\nimport InfoIcon from '../../assets/icons/state_icon.svg';\nimport SuccessIcon from '../../assets/icons/successIcon.svg';\nimport WarningIcon from '../../assets/icons/warningIcon.svg';\nimport { Button } from '../button';\nimport { Spinner } from '../spinner/Spinner';\nimport {\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleRegular,\n} from '../TypographyStyle';\nimport {\n\tButtonContainer,\n\tStateComponentContainer,\n\tStateHeading,\n\tStateIcon,\n\tStateSubline,\n} from './StateComponent.styled';\n\nexport enum StateInterface {\n\tSUCCESS = 'success',\n\tERROR = 'error',\n\tWARNING = 'warning',\n\tLOADING = 'loading',\n\tRETRY = 'retry',\n\tINFO = 'info',\n}\n\nexport enum ButtonActions {\n\tCANCEL = 'cancel',\n\tOTHER = 'other',\n}\nexport enum ButtonTypes {\n\tSINGLE = 'SINGLE',\n\tDOUBLE = 'DOUBLE',\n}\n\nexport type StateComponentProps = {\n\theaderImage?: string;\n\tstates: StateInterface;\n\theading: string;\n\tsubline: string;\n\terrorText?: string;\n\ticon?: JSX.Element;\n\tisButtonEnabled: boolean;\n\ttype?: ButtonTypes;\n\tbuttonText?: string;\n\tbuttonType?: Type;\n\tbuttonIcon?: React.ReactElement;\n\tonButtonClick?: (buttonClicked: ButtonActions) => void;\n\tleadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\twidth: number;\n\tsize?: 'DEFAULT' | 'SMALL';\n\ticonHeight?: number;\n\ticonWidth?: number;\n\tcloseButtonType?: Type;\n\tsecondaryButtonText?: string;\n\t'data-test'?: string;\n};\n\nexport const StateComponent: React.FC<\n\tReact.PropsWithChildren<StateComponentProps>\n> = (props) => {\n\tconst findIcon = () => {\n\t\tif (states == StateInterface.SUCCESS) {\n\t\t\treturn <SuccessIcon />;\n\t\t}\n\t\tif (states == StateInterface.WARNING) {\n\t\t\treturn <WarningIcon />;\n\t\t}\n\t\tif (states == StateInterface.ERROR) {\n\t\t\treturn <ErrorIcon />;\n\t\t}\n\t\tif (states === StateInterface.LOADING) {\n\t\t\treturn <Spinner size={'large'} />;\n\t\t}\n\t\tif (states === StateInterface.RETRY) {\n\t\t\treturn <RetryIcon />;\n\t\t}\n\t\tif (states == StateInterface.INFO) {\n\t\t\treturn <InfoIcon />;\n\t\t}\n\t};\n\tconst {\n\t\tstates,\n\t\theading,\n\t\tsubline,\n\t\terrorText,\n\t\ticon = findIcon(),\n\t\tisButtonEnabled,\n\t\ttype,\n\t\tbuttonText,\n\t\tbuttonType,\n\t\tonButtonClick,\n\t\tleadingIcon,\n\t\twidth,\n\t\theaderImage,\n\t\ticonWidth,\n\t\ticonHeight,\n\t\tcloseButtonType,\n\t\tsecondaryButtonText,\n\t\t'data-test': dataTest,\n\t} = props;\n\n\treturn (\n\t\t<StateComponentContainer width={width} data-test={dataTest}>\n\t\t\t<StateIcon iconWidth={iconWidth} iconHeight={iconHeight}>\n\t\t\t\t{headerImage ? (\n\t\t\t\t\t<img src={headerImage} width={'100%'} height={'auto'} alt={''} />\n\t\t\t\t) : (\n\t\t\t\t\ticon\n\t\t\t\t)}\n\t\t\t</StateIcon>\n\t\t\t<StateHeading size={props.size}>\n\t\t\t\t{props.size === 'SMALL' && <TitleRegular>{heading}</TitleRegular>}\n\t\t\t\t{props.size !== 'SMALL' && <TitleMedium>{heading}</TitleMedium>}\n\t\t\t</StateHeading>\n\t\t\t<StateSubline>\n\t\t\t\t{props.size !== 'SMALL' && (\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>{subline}</BodyPrimary>\n\t\t\t\t)}\n\t\t\t\t{props.size === 'SMALL' && (\n\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{subline}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t\t{errorText && (\n\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\tstyle={{ marginTop: 8, whiteSpace: 'pre-line' }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{errorText}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t</StateSubline>\n\t\t\t{props.children ?? <></>}\n\t\t\t{isButtonEnabled && (\n\t\t\t\t<>\n\t\t\t\t\t<ButtonContainer size={props.size}>\n\t\t\t\t\t\t{type == ButtonTypes.DOUBLE && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test={`${dataTest}-cancel`}\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tonButtonClick && onButtonClick(ButtonActions.CANCEL)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tbuttonType={closeButtonType || 'secondary'}\n\t\t\t\t\t\t\t\tbuttonText={secondaryButtonText || 'Cancel'}\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test={`${dataTest}-primary`}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\tonButtonClick && onButtonClick(ButtonActions.OTHER)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbuttonType={buttonType ?? 'primary'}\n\t\t\t\t\t\t\tLeadingIcon={leadingIcon}\n\t\t\t\t\t\t\tbuttonText={buttonText ?? 'Retry'}\n\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ButtonContainer>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</StateComponentContainer>\n\t);\n};\n"],"names":["StateInterface","ButtonActions","ButtonTypes","StateComponent","props","findIcon","states","SuccessIcon","WarningIcon","ErrorIcon","jsx","Spinner","RetryIcon","InfoIcon","heading","subline","errorText","icon","isButtonEnabled","type","buttonText","buttonType","onButtonClick","leadingIcon","width","headerImage","iconWidth","iconHeight","closeButtonType","secondaryButtonText","dataTest","jsxs","StateComponentContainer","StateIcon","StateHeading","TitleRegular","TitleMedium","StateSubline","BodyPrimary","COLORS","BodySecondary","Fragment","ButtonContainer","Button"],"mappings":"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"}
+{"version":3,"file":"StateComponent.js","sources":["../../../../src/components/states/StateComponent.tsx"],"sourcesContent":["import React from 'react';\nimport { Type } from '@src/components/button/model';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorIcon.svg';\nimport RetryIcon from '../../assets/icons/retryIcon.svg';\nimport InfoIcon from '../../assets/icons/state_icon.svg';\nimport SuccessIcon from '../../assets/icons/successIcon.svg';\nimport WarningIcon from '../../assets/icons/warningIcon.svg';\nimport { Button } from '../button';\nimport { Spinner } from '../spinner/Spinner';\nimport {\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleRegular,\n} from '../TypographyStyle';\nimport {\n\tButtonContainer,\n\tStateComponentContainer,\n\tStateHeading,\n\tStateIcon,\n\tStateSubline,\n} from './StateComponent.styled';\n\nexport enum StateInterface {\n\tSUCCESS = 'success',\n\tERROR = 'error',\n\tWARNING = 'warning',\n\tLOADING = 'loading',\n\tRETRY = 'retry',\n\tINFO = 'info',\n}\n\nexport enum ButtonActions {\n\tCANCEL = 'cancel',\n\tOTHER = 'other',\n}\nexport enum ButtonTypes {\n\tSINGLE = 'SINGLE',\n\tDOUBLE = 'DOUBLE',\n}\n\nexport type StateComponentProps = {\n\theaderImage?: string;\n\tstates: StateInterface;\n\theading: string;\n\tsubline: string;\n\terrorText?: string;\n\ticon?: JSX.Element;\n\tisButtonEnabled: boolean;\n\ttype?: ButtonTypes;\n\tbuttonText?: string;\n\tbuttonType?: Type;\n\tbuttonIcon?: React.ReactElement;\n\tonButtonClick?: (buttonClicked: ButtonActions) => void;\n\tleadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\twidth: number;\n\tsize?: 'DEFAULT' | 'SMALL';\n\ticonHeight?: number;\n\ticonWidth?: number;\n\tcloseButtonType?: Type;\n\tsecondaryButtonText?: string;\n\t'data-test'?: string;\n};\n\nexport const StateComponent: React.FC<\n\tReact.PropsWithChildren<StateComponentProps>\n> = (props) => {\n\tconst findIcon = () => {\n\t\tif (states == StateInterface.SUCCESS) {\n\t\t\treturn <SuccessIcon data-test=\"static-icon\" />;\n\t\t}\n\t\tif (states == StateInterface.WARNING) {\n\t\t\treturn <WarningIcon data-test=\"static-icon\" />;\n\t\t}\n\t\tif (states == StateInterface.ERROR) {\n\t\t\treturn <ErrorIcon data-test=\"static-icon\" />;\n\t\t}\n\t\tif (states === StateInterface.LOADING) {\n\t\t\treturn <Spinner size={'large'} />;\n\t\t}\n\t\tif (states === StateInterface.RETRY) {\n\t\t\treturn <RetryIcon data-test=\"static-icon\" />;\n\t\t}\n\t\tif (states == StateInterface.INFO) {\n\t\t\treturn <InfoIcon data-test=\"static-icon\" />;\n\t\t}\n\t};\n\tconst {\n\t\tstates,\n\t\theading,\n\t\tsubline,\n\t\terrorText,\n\t\ticon = findIcon(),\n\t\tisButtonEnabled,\n\t\ttype,\n\t\tbuttonText,\n\t\tbuttonType,\n\t\tonButtonClick,\n\t\tleadingIcon,\n\t\twidth,\n\t\theaderImage,\n\t\ticonWidth,\n\t\ticonHeight,\n\t\tcloseButtonType,\n\t\tsecondaryButtonText,\n\t\t'data-test': dataTest,\n\t} = props;\n\n\treturn (\n\t\t<StateComponentContainer width={width} data-test={dataTest}>\n\t\t\t<StateIcon\n\t\t\t\ticonWidth={iconWidth}\n\t\t\t\ticonHeight={iconHeight}\n\t\t\t\tdata-test=\"state-icon\"\n\t\t\t>\n\t\t\t\t{headerImage ? (\n\t\t\t\t\t<img\n\t\t\t\t\t\tdata-test=\"header-image\"\n\t\t\t\t\t\tsrc={headerImage}\n\t\t\t\t\t\twidth={'100%'}\n\t\t\t\t\t\theight={'auto'}\n\t\t\t\t\t\talt={''}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\ticon\n\t\t\t\t)}\n\t\t\t</StateIcon>\n\t\t\t<StateHeading size={props.size}>\n\t\t\t\t{props.size === 'SMALL' && <TitleRegular>{heading}</TitleRegular>}\n\t\t\t\t{props.size !== 'SMALL' && <TitleMedium>{heading}</TitleMedium>}\n\t\t\t</StateHeading>\n\t\t\t<StateSubline>\n\t\t\t\t{props.size !== 'SMALL' && (\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>{subline}</BodyPrimary>\n\t\t\t\t)}\n\t\t\t\t{props.size === 'SMALL' && (\n\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{subline}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t\t{errorText && (\n\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\tstyle={{ marginTop: 8, whiteSpace: 'pre-line' }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{errorText}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t</StateSubline>\n\t\t\t{props.children ?? <></>}\n\t\t\t{isButtonEnabled && (\n\t\t\t\t<>\n\t\t\t\t\t<ButtonContainer size={props.size}>\n\t\t\t\t\t\t{type == ButtonTypes.DOUBLE && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test={`${dataTest}-cancel`}\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tonButtonClick && onButtonClick(ButtonActions.CANCEL)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tbuttonType={closeButtonType || 'secondary'}\n\t\t\t\t\t\t\t\tbuttonText={secondaryButtonText || 'Cancel'}\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test={`${dataTest}-primary`}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\tonButtonClick && onButtonClick(ButtonActions.OTHER)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbuttonType={buttonType ?? 'primary'}\n\t\t\t\t\t\t\tLeadingIcon={leadingIcon}\n\t\t\t\t\t\t\tbuttonText={buttonText ?? 'Retry'}\n\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ButtonContainer>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</StateComponentContainer>\n\t);\n};\n"],"names":["StateInterface","ButtonActions","ButtonTypes","StateComponent","props","findIcon","states","jsx","SuccessIcon","WarningIcon","ErrorIcon","Spinner","RetryIcon","InfoIcon","heading","subline","errorText","icon","isButtonEnabled","type","buttonText","buttonType","onButtonClick","leadingIcon","width","headerImage","iconWidth","iconHeight","closeButtonType","secondaryButtonText","dataTest","jsxs","StateComponentContainer","StateIcon","StateHeading","TitleRegular","TitleMedium","StateSubline","BodyPrimary","COLORS","BodySecondary","Fragment","ButtonContainer","Button"],"mappings":"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"}

package/dist/esm/components/stepper/Stepper.js

@@ -1,13 +1,13 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { COLORS as v } from "../../constants/Theme.js";
-import g from "../../assets/icons/check.svg.js";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { COLORS as S } from "../../constants/Theme.js";
+import v from "../../assets/icons/check.svg.js";
 import C from "../../assets/icons/errorInfo.svg.js";
 import { BodySecondary as f, BodyPrimary as u } from "../TypographyStyle.js";
 import { StepperContainer as k, SingleStepperChildContainer as y } from "./Stepper.styled.js";
-const O = (r) => {
-  const { steps: t, activeStep: c, onClickingEachStep: a, hideHoverState: l } = r;
+const L = (r) => {
+  const { steps: t, activeStep: c, onClickingEachStep: a, hideHoverState: d } = r;
   return /* @__PURE__ */ e(k, { children: t.map((n, i) => /* @__PURE__ */ e(
-    N,
+    b,
     {
       stepsCount: t.length,
       eachStep: n,
@@ -17,31 +17,39 @@ const O = (r) => {
       isActive: c?.stepKey == n?.stepKey,
       isLastElement: i == t.length - 1,
       index: i,
-      hideHoverState: l
+      hideHoverState: d
     },
     i
   )) });
-}, N = (r) => {
+}, b = (r) => {
   const {
     eachStep: t,
     isLastElement: c,
     index: a,
-    isActive: l,
+    isActive: d,
     onClickingStep: n,
     hideHoverState: i
-  } = r, { stepName: o, isCompleted: m, isError: h, isInActive: s } = t, S = () => {
+  } = r, { stepName: o, isCompleted: m, isError: h, isInActive: s } = t, g = () => {
     !s && n(t);
-  }, p = () => l ? "active" : m ? "completed" : h ? "error" : s ? "inactive" : "default";
-  return /* @__PURE__ */ d(
+  }, p = () => d ? "active" : m ? "completed" : h ? "error" : s ? "inactive" : "default";
+  return /* @__PURE__ */ l(
     y,
     {
       stepsCount: r.stepsCount,
-      onClick: S,
+      onClick: g,
       selectedState: p(),
       isInActive: s || i,
       children: [
-        /* @__PURE__ */ d("div", { className: `hover-container ${s ? "blocked" : "pointer"} `, children: [
-          /* @__PURE__ */ e("div", { className: "badge", children: p() == "completed" ? /* @__PURE__ */ e(g, { height: 16, width: 16, color: v.content.positive }) : p() == "error" ? /* @__PURE__ */ e(C, { height: 16, width: 16 }) : /* @__PURE__ */ e(f, { className: "badge-text", children: a + 1 }) }),
+        /* @__PURE__ */ l("div", { className: `hover-container ${s ? "blocked" : "pointer"} `, children: [
+          /* @__PURE__ */ e("div", { className: "badge", "data-testid": `step-badge-${t.stepKey}`, children: p() == "completed" ? /* @__PURE__ */ e(
+            v,
+            {
+              "data-testid": "badge-icon",
+              height: 16,
+              width: 16,
+              color: S.content.positive
+            }
+          ) : p() == "error" ? /* @__PURE__ */ e(C, { "data-testid": "badge-icon", height: 16, width: 16 }) : /* @__PURE__ */ e(f, { className: "badge-text", children: a + 1 }) }),
           /* @__PURE__ */ e(u, { className: "step-text", title: o, children: o })
         ] }),
         /* @__PURE__ */ e("div", { className: c ? "" : "horizontal-divider" })
@@ -50,6 +58,6 @@ const O = (r) => {
   );
 };
 export {
-  O as Stepper
+  L as Stepper
 };
 //# sourceMappingURL=Stepper.js.map

package/dist/esm/components/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport Check from '../../assets/icons/check.svg';\nimport ErrorInfo from '../../assets/icons/errorInfo.svg';\nimport { BodyPrimary, BodySecondary } from '../TypographyStyle';\nimport { EachStep, SingleStepperProps } from './Stepper.model';\nimport {\n\tSingleStepperChildContainer,\n\tStepperContainer,\n} from './Stepper.styled';\n\nexport interface StepperProps {\n\tsteps: EachStep[];\n\tactiveStep: EachStep;\n\tonClickingEachStep: (step: EachStep) => void;\n\thideHoverState?: boolean;\n}\n\nexport const Stepper = (stepperDetails: StepperProps) => {\n\tconst { steps, activeStep, onClickingEachStep, hideHoverState } =\n\t\tstepperDetails;\n\n\treturn (\n\t\t<StepperContainer>\n\t\t\t{steps.map((eachStepper, index) => (\n\t\t\t\t<SingleStepper\n\t\t\t\t\tstepsCount={steps.length}\n\t\t\t\t\teachStep={eachStepper}\n\t\t\t\t\tonClickingStep={(step) => {\n\t\t\t\t\t\tonClickingEachStep(step);\n\t\t\t\t\t}}\n\t\t\t\t\tisActive={activeStep?.stepKey == eachStepper?.stepKey}\n\t\t\t\t\tkey={index}\n\t\t\t\t\tisLastElement={index == steps.length - 1}\n\t\t\t\t\tindex={index}\n\t\t\t\t\thideHoverState={hideHoverState}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</StepperContainer>\n\t);\n};\n\nconst SingleStepper = (props: SingleStepperProps) => {\n\tconst {\n\t\teachStep,\n\t\tisLastElement,\n\t\tindex,\n\t\tisActive,\n\t\tonClickingStep,\n\t\thideHoverState,\n\t} = props;\n\tconst { stepName, isCompleted, isError, isInActive } = eachStep;\n\tconst OnClicking = () => {\n\t\t!isInActive && onClickingStep(eachStep);\n\t};\n\tconst ClassMapping = () => {\n\t\tif (isActive) {\n\t\t\treturn 'active';\n\t\t}\n\t\tif (isCompleted) {\n\t\t\treturn 'completed';\n\t\t}\n\t\tif (isError) {\n\t\t\treturn 'error';\n\t\t}\n\t\tif (isInActive) {\n\t\t\treturn 'inactive';\n\t\t}\n\t\treturn 'default';\n\t};\n\treturn (\n\t\t<SingleStepperChildContainer\n\t\t\tstepsCount={props.stepsCount}\n\t\t\tonClick={OnClicking}\n\t\t\tselectedState={ClassMapping()}\n\t\t\tisInActive={isInActive || hideHoverState}\n\t\t>\n\t\t\t<div className={`hover-container ${isInActive ? 'blocked' : 'pointer'} `}>\n\t\t\t\t<div className=\"badge\">\n\t\t\t\t\t{ClassMapping() == 'completed' ? (\n\t\t\t\t\t\t<Check height={16} width={16} color={COLORS.content.positive} />\n\t\t\t\t\t) : ClassMapping() == 'error' ? (\n\t\t\t\t\t\t<ErrorInfo height={16} width={16} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary className=\"badge-text\">{index + 1}</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<BodyPrimary className=\"step-text\" title={stepName}>\n\t\t\t\t\t{stepName}\n\t\t\t\t</BodyPrimary>\n\t\t\t</div>\n\t\t\t<div className={!isLastElement ? 'horizontal-divider' : ''} />\n\t\t</SingleStepperChildContainer>\n\t);\n};\n"],"names":["Stepper","stepperDetails","steps","activeStep","onClickingEachStep","hideHoverState","StepperContainer","eachStepper","index","jsx","SingleStepper","step","props","eachStep","isLastElement","isActive","onClickingStep","stepName","isCompleted","isError","isInActive","OnClicking","ClassMapping","jsxs","SingleStepperChildContainer","Check","COLORS","ErrorInfo","BodySecondary","BodyPrimary"],"mappings":";;;;;;AAiBO,MAAMA,IAAU,CAACC,MAAiC;AACxD,QAAM,EAAE,OAAAC,GAAO,YAAAC,GAAY,oBAAAC,GAAoB,gBAAAC,MAC9CJ;AAED,2BACEK,GAAA,EACC,UAAAJ,EAAM,IAAI,CAACK,GAAaC,MACxB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,YAAYR,EAAM;AAAA,MAClB,UAAUK;AAAA,MACV,gBAAgB,CAACI,MAAS;AACzB,QAAAP,EAAmBO,CAAI;AAAA,MACxB;AAAA,MACA,UAAUR,GAAY,WAAWI,GAAa;AAAA,MAE9C,eAAeC,KAASN,EAAM,SAAS;AAAA,MACvC,OAAAM;AAAA,MACA,gBAAAH;AAAA,IAAA;AAAA,IAHKG;AAAA,EAAA,CAKN,GACF;AAEF,GAEME,IAAgB,CAACE,MAA8B;AACpD,QAAM;AAAA,IACL,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAN;AAAA,IACA,UAAAO;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAX;AAAA,EAAA,IACGO,GACE,EAAE,UAAAK,GAAU,aAAAC,GAAa,SAAAC,GAAS,YAAAC,MAAeP,GACjDQ,IAAa,MAAM;AACxB,KAACD,KAAcJ,EAAeH,CAAQ;AAAA,EACvC,GACMS,IAAe,MAChBP,IACI,WAEJG,IACI,cAEJC,IACI,UAEJC,IACI,aAED;AAER,SACC,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,YAAYZ,EAAM;AAAA,MAClB,SAASS;AAAA,MACT,eAAeC,EAAA;AAAA,MACf,YAAYF,KAAcf;AAAA,MAE1B,UAAA;AAAA,QAAA,gBAAAkB,EAAC,SAAI,WAAW,mBAAmBH,IAAa,YAAY,SAAS,KACpE,UAAA;AAAA,UAAA,gBAAAX,EAAC,OAAA,EAAI,WAAU,SACb,UAAAa,EAAA,KAAkB,cAClB,gBAAAb,EAACgB,GAAA,EAAM,QAAQ,IAAI,OAAO,IAAI,OAAOC,EAAO,QAAQ,SAAA,CAAU,IAC3DJ,OAAkB,UACrB,gBAAAb,EAACkB,GAAA,EAAU,QAAQ,IAAI,OAAO,GAAA,CAAI,sBAEjCC,GAAA,EAAc,WAAU,cAAc,UAAApB,IAAQ,GAAE,GAEnD;AAAA,4BACCqB,GAAA,EAAY,WAAU,aAAY,OAAOZ,GACxC,UAAAA,EAAA,CACF;AAAA,QAAA,GACD;AAAA,0BACC,OAAA,EAAI,WAAYH,IAAuC,KAAvB,qBAAuB,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG/D;"}
+{"version":3,"file":"Stepper.js","sources":["../../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport Check from '../../assets/icons/check.svg';\nimport ErrorInfo from '../../assets/icons/errorInfo.svg';\nimport { BodyPrimary, BodySecondary } from '../TypographyStyle';\nimport { EachStep, SingleStepperProps } from './Stepper.model';\nimport {\n\tSingleStepperChildContainer,\n\tStepperContainer,\n} from './Stepper.styled';\n\nexport interface StepperProps {\n\tsteps: EachStep[];\n\tactiveStep: EachStep;\n\tonClickingEachStep: (step: EachStep) => void;\n\thideHoverState?: boolean;\n}\n\nexport const Stepper = (stepperDetails: StepperProps) => {\n\tconst { steps, activeStep, onClickingEachStep, hideHoverState } =\n\t\tstepperDetails;\n\n\treturn (\n\t\t<StepperContainer>\n\t\t\t{steps.map((eachStepper, index) => (\n\t\t\t\t<SingleStepper\n\t\t\t\t\tstepsCount={steps.length}\n\t\t\t\t\teachStep={eachStepper}\n\t\t\t\t\tonClickingStep={(step) => {\n\t\t\t\t\t\tonClickingEachStep(step);\n\t\t\t\t\t}}\n\t\t\t\t\tisActive={activeStep?.stepKey == eachStepper?.stepKey}\n\t\t\t\t\tkey={index}\n\t\t\t\t\tisLastElement={index == steps.length - 1}\n\t\t\t\t\tindex={index}\n\t\t\t\t\thideHoverState={hideHoverState}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</StepperContainer>\n\t);\n};\n\nconst SingleStepper = (props: SingleStepperProps) => {\n\tconst {\n\t\teachStep,\n\t\tisLastElement,\n\t\tindex,\n\t\tisActive,\n\t\tonClickingStep,\n\t\thideHoverState,\n\t} = props;\n\tconst { stepName, isCompleted, isError, isInActive } = eachStep;\n\tconst OnClicking = () => {\n\t\t!isInActive && onClickingStep(eachStep);\n\t};\n\tconst ClassMapping = () => {\n\t\tif (isActive) {\n\t\t\treturn 'active';\n\t\t}\n\t\tif (isCompleted) {\n\t\t\treturn 'completed';\n\t\t}\n\t\tif (isError) {\n\t\t\treturn 'error';\n\t\t}\n\t\tif (isInActive) {\n\t\t\treturn 'inactive';\n\t\t}\n\t\treturn 'default';\n\t};\n\treturn (\n\t\t<SingleStepperChildContainer\n\t\t\tstepsCount={props.stepsCount}\n\t\t\tonClick={OnClicking}\n\t\t\tselectedState={ClassMapping()}\n\t\t\tisInActive={isInActive || hideHoverState}\n\t\t>\n\t\t\t<div className={`hover-container ${isInActive ? 'blocked' : 'pointer'} `}>\n\t\t\t\t<div className=\"badge\" data-testid={`step-badge-${eachStep.stepKey}`}>\n\t\t\t\t\t{ClassMapping() == 'completed' ? (\n\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\tdata-testid=\"badge-icon\"\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\tcolor={COLORS.content.positive}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : ClassMapping() == 'error' ? (\n\t\t\t\t\t\t<ErrorInfo data-testid=\"badge-icon\" height={16} width={16} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary className=\"badge-text\">{index + 1}</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<BodyPrimary className=\"step-text\" title={stepName}>\n\t\t\t\t\t{stepName}\n\t\t\t\t</BodyPrimary>\n\t\t\t</div>\n\t\t\t<div className={!isLastElement ? 'horizontal-divider' : ''} />\n\t\t</SingleStepperChildContainer>\n\t);\n};\n"],"names":["Stepper","stepperDetails","steps","activeStep","onClickingEachStep","hideHoverState","StepperContainer","eachStepper","index","jsx","SingleStepper","step","props","eachStep","isLastElement","isActive","onClickingStep","stepName","isCompleted","isError","isInActive","OnClicking","ClassMapping","jsxs","SingleStepperChildContainer","Check","COLORS","ErrorInfo","BodySecondary","BodyPrimary"],"mappings":";;;;;;AAiBO,MAAMA,IAAU,CAACC,MAAiC;AACxD,QAAM,EAAE,OAAAC,GAAO,YAAAC,GAAY,oBAAAC,GAAoB,gBAAAC,MAC9CJ;AAED,2BACEK,GAAA,EACC,UAAAJ,EAAM,IAAI,CAACK,GAAaC,MACxB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,YAAYR,EAAM;AAAA,MAClB,UAAUK;AAAA,MACV,gBAAgB,CAACI,MAAS;AACzB,QAAAP,EAAmBO,CAAI;AAAA,MACxB;AAAA,MACA,UAAUR,GAAY,WAAWI,GAAa;AAAA,MAE9C,eAAeC,KAASN,EAAM,SAAS;AAAA,MACvC,OAAAM;AAAA,MACA,gBAAAH;AAAA,IAAA;AAAA,IAHKG;AAAA,EAAA,CAKN,GACF;AAEF,GAEME,IAAgB,CAACE,MAA8B;AACpD,QAAM;AAAA,IACL,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAN;AAAA,IACA,UAAAO;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAX;AAAA,EAAA,IACGO,GACE,EAAE,UAAAK,GAAU,aAAAC,GAAa,SAAAC,GAAS,YAAAC,MAAeP,GACjDQ,IAAa,MAAM;AACxB,KAACD,KAAcJ,EAAeH,CAAQ;AAAA,EACvC,GACMS,IAAe,MAChBP,IACI,WAEJG,IACI,cAEJC,IACI,UAEJC,IACI,aAED;AAER,SACC,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,YAAYZ,EAAM;AAAA,MAClB,SAASS;AAAA,MACT,eAAeC,EAAA;AAAA,MACf,YAAYF,KAAcf;AAAA,MAE1B,UAAA;AAAA,QAAA,gBAAAkB,EAAC,SAAI,WAAW,mBAAmBH,IAAa,YAAY,SAAS,KACpE,UAAA;AAAA,UAAA,gBAAAX,EAAC,OAAA,EAAI,WAAU,SAAQ,eAAa,cAAcI,EAAS,OAAO,IAChE,UAAAS,EAAA,KAAkB,cAClB,gBAAAb;AAAA,YAACgB;AAAAA,YAAA;AAAA,cACA,eAAY;AAAA,cACZ,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,OAAOC,EAAO,QAAQ;AAAA,YAAA;AAAA,UAAA,IAEpBJ,EAAA,KAAkB,UACrB,gBAAAb,EAACkB,GAAA,EAAU,eAAY,cAAa,QAAQ,IAAI,OAAO,GAAA,CAAI,IAE3D,gBAAAlB,EAACmB,GAAA,EAAc,WAAU,cAAc,UAAApB,IAAQ,GAAE,GAEnD;AAAA,4BACCqB,GAAA,EAAY,WAAU,aAAY,OAAOZ,GACxC,UAAAA,EAAA,CACF;AAAA,QAAA,GACD;AAAA,0BACC,OAAA,EAAI,WAAYH,IAAuC,KAAvB,qBAAuB,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG/D;"}

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/testimonial-card/TestimonialCard.js

@@ -2,15 +2,15 @@ import { jsxs as t, Fragment as d, jsx as r } from "react/jsx-runtime";
 import { BodyLarge as m, BodyPrimary as n, TitleMedium as h, TitleRegular as f, TitleLarge as T } from "../TypographyStyle.js";
 import { COLORS as o } from "../../constants/Theme.js";
 import g from "../../assets/icons/card_footer_arraw.svg.js";
-import { TestimonialCardStyle as v, TestimonialProfileInfo2 as u, Logo as w, TestimonialProfileCard as A, TestimonialProfileInfo as s, TestimonialProfileFooter as y, FooterText as S, FooterStat as x, FooterArrow as C } from "./TestimonialCard.style.js";
+import { TestimonialCardStyle as v, TestimonialProfileInfo2 as u, Logo as s, TestimonialProfileCard as w, TestimonialProfileInfo as A, TestimonialProfileFooter as y, FooterText as S, FooterStat as x, FooterArrow as C } from "./TestimonialCard.style.js";
 import { StarRating as F } from "../star-rating/StarRating.js";
 import { Avatar as I } from "../avatar/Avatar.js";
 import { AVATAR_BACKGROUND as L, SIZE as M, AVATAR_TYPES as P } from "../avatar/AvatarHelper.js";
 const N = (e) => {
   const i = e.version ?? "v1", a = () => i == "v2" ? /* @__PURE__ */ t(u, { children: [
-    /* @__PURE__ */ r(w, { src: e.avatarUrl }),
+    /* @__PURE__ */ r(s, { src: e.avatarUrl }),
     /* @__PURE__ */ r(n, { color: o.content.secondary, children: e.reviewerName })
-  ] }) : /* @__PURE__ */ t(A, { children: [
+  ] }) : /* @__PURE__ */ t(w, { children: [
     /* @__PURE__ */ r(
       I,
       {
@@ -20,7 +20,7 @@ const N = (e) => {
         photoUrl: e.avatarUrl
       }
     ),
-    /* @__PURE__ */ t(s, { children: [
+    /* @__PURE__ */ t(A, { children: [
       /* @__PURE__ */ r(h, { color: o.content.secondary, children: e.reviewerName }),
       /* @__PURE__ */ r(n, { color: o.content.secondary, children: e.reviewerCaption })
     ] })
@@ -33,6 +33,7 @@ const N = (e) => {
     /* @__PURE__ */ t(
       v,
       {
+        "data-testid": "testimonial-card",
         width: e.width,
         height: e.height,
         version: i,

package/dist/esm/components/testimonial-card/TestimonialCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TestimonialCard.js","sources":["../../../../src/components/testimonial-card/TestimonialCard.tsx"],"sourcesContent":["import React from 'react';\nimport {\n\tAvatar,\n\tAVATAR_BACKGROUND,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar';\nimport { StarRating } from '@src/components/star-rating';\nimport {\n\tBodyLarge,\n\tBodyPrimary,\n\tTitleLarge,\n\tTitleMedium,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport FooterArrowIcon from '../../assets/icons/card_footer_arraw.svg';\nimport {\n\tFooterArrow,\n\tFooterStat,\n\tFooterText,\n\tLogo,\n\tTestimonialCardStyle,\n\tTestimonialProfileCard,\n\tTestimonialProfileFooter,\n\tTestimonialProfileInfo,\n\tTestimonialProfileInfo2,\n} from './TestimonialCard.style';\n\nexport interface TestimonialCardProps {\n\ttestimonial: string;\n\tratingValue: number;\n\treviewerName: string;\n\tavatarUrl: string;\n\treviewerCaption?: string;\n\tratingMaxValue?: number;\n\tavatarSize?: SIZE;\n\tfooterText?: string;\n\tfooterStat?: string;\n\twidth?: string;\n\theight?: string;\n\tversion?: 'v1' | 'v2';\n}\n\nexport const TestimonialCard: React.FC<TestimonialCardProps> = (props) => {\n\tconst version = props.version ?? 'v1';\n\n\tconst getHTMLBody = () => {\n\t\tif (version == 'v2') {\n\t\t\treturn (\n\t\t\t\t<TestimonialProfileInfo2>\n\t\t\t\t\t<Logo src={props.avatarUrl} />\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{props.reviewerName}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</TestimonialProfileInfo2>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TestimonialProfileCard>\n\t\t\t\t<Avatar\n\t\t\t\t\ttype={AVATAR_TYPES.IMAGE}\n\t\t\t\t\tsize={props.avatarSize ?? SIZE.MEDIUM}\n\t\t\t\t\tbackground={AVATAR_BACKGROUND.LIGHT}\n\t\t\t\t\tphotoUrl={props.avatarUrl}\n\t\t\t\t/>\n\t\t\t\t<TestimonialProfileInfo>\n\t\t\t\t\t<TitleMedium color={COLORS.content.secondary}>\n\t\t\t\t\t\t{props.reviewerName}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{props.reviewerCaption}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</TestimonialProfileInfo>\n\t\t\t</TestimonialProfileCard>\n\t\t);\n\t};\n\n\tconst getFooterHTML = () => {\n\t\tif (version === 'v2') {\n\t\t\treturn (\n\t\t\t\t<TestimonialProfileFooter width={props.width}>\n\t\t\t\t\t<FooterText>\n\t\t\t\t\t\t<TitleRegular color={COLORS.text.white}>\n\t\t\t\t\t\t\t{props?.footerText}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t</FooterText>\n\n\t\t\t\t\t<FooterStat>\n\t\t\t\t\t\t<TitleLarge color={COLORS.text.white}>\n\t\t\t\t\t\t\t{props?.footerStat}\n\t\t\t\t\t\t</TitleLarge>\n\t\t\t\t\t</FooterStat>\n\n\t\t\t\t\t<FooterArrow>\n\t\t\t\t\t\t<FooterArrowIcon />\n\t\t\t\t\t</FooterArrow>\n\t\t\t\t</TestimonialProfileFooter>\n\t\t\t);\n\t\t}\n\n\t\treturn null;\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<TestimonialCardStyle\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tversion={version}\n\t\t\t>\n\t\t\t\t<StarRating\n\t\t\t\t\tstarSize={24}\n\t\t\t\t\tmaxValue={props.ratingMaxValue ?? 5}\n\t\t\t\t\tvalue={props.ratingValue}\n\t\t\t\t\tonChange={(stars) => console.log(stars)}\n\t\t\t\t\tmode={'VIEW'}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t\t<BodyLarge color={COLORS.content.secondary}>\n\t\t\t\t\t{props.testimonial}\n\t\t\t\t</BodyLarge>\n\t\t\t\t{getHTMLBody()}\n\t\t\t</TestimonialCardStyle>\n\n\t\t\t{getFooterHTML()}\n\t\t</>\n\t);\n};\n"],"names":["TestimonialCard","props","version","getHTMLBody","TestimonialProfileInfo2","jsx","Logo","BodyPrimary","COLORS","TestimonialProfileCard","Avatar","AVATAR_TYPES","SIZE","AVATAR_BACKGROUND","TestimonialProfileInfo","TitleMedium","getFooterHTML","jsxs","TestimonialProfileFooter","FooterText","TitleRegular","FooterStat","TitleLarge","FooterArrow","FooterArrowIcon","Fragment","TestimonialCardStyle","StarRating","stars","BodyLarge"],"mappings":";;;;;;;;AA4CO,MAAMA,IAAkD,CAACC,MAAU;AACzE,QAAMC,IAAUD,EAAM,WAAW,MAE3BE,IAAc,MACfD,KAAW,yBAEZE,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAK,KAAKL,EAAM,UAAA,CAAW;AAAA,sBAC3BM,GAAA,EAAY,OAAOC,EAAO,QAAQ,WACjC,YAAM,aAAA,CACR;AAAA,EAAA,GACD,sBAKAC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACA,MAAMC,EAAa;AAAA,QACnB,MAAMV,EAAM,cAAcW,EAAK;AAAA,QAC/B,YAAYC,EAAkB;AAAA,QAC9B,UAAUZ,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEhBa,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAT,EAACU,KAAY,OAAOP,EAAO,QAAQ,WACjC,YAAM,cACR;AAAA,wBACCD,GAAA,EAAY,OAAOC,EAAO,QAAQ,WACjC,YAAM,gBAAA,CACR;AAAA,IAAA,EAAA,CACD;AAAA,EAAA,GACD,GAIIQ,IAAgB,MACjBd,MAAY,OAEd,gBAAAe,EAACC,GAAA,EAAyB,OAAOjB,EAAM,OACtC,UAAA;AAAA,IAAA,gBAAAI,EAACc,GAAA,EACA,4BAACC,GAAA,EAAa,OAAOZ,EAAO,KAAK,OAC/B,UAAAP,GAAO,WAAA,CACT,EAAA,CACD;AAAA,IAEA,gBAAAI,EAACgB,GAAA,EACA,UAAA,gBAAAhB,EAACiB,GAAA,EAAW,OAAOd,EAAO,KAAK,OAC7B,UAAAP,GAAO,WAAA,CACT,EAAA,CACD;AAAA,IAEA,gBAAAI,EAACkB,GAAA,EACA,UAAA,gBAAAlB,EAACmB,GAAA,CAAA,CAAgB,EAAA,CAClB;AAAA,EAAA,GACD,IAIK;AAGR,SACC,gBAAAP,EAAAQ,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAR;AAAA,MAACS;AAAA,MAAA;AAAA,QACA,OAAOzB,EAAM;AAAA,QACb,QAAQA,EAAM;AAAA,QACd,SAAAC;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAG;AAAA,YAACsB;AAAA,YAAA;AAAA,cACA,UAAU;AAAA,cACV,UAAU1B,EAAM,kBAAkB;AAAA,cAClC,OAAOA,EAAM;AAAA,cACb,UAAU,CAAC2B,MAAU,QAAQ,IAAIA,CAAK;AAAA,cACtC,MAAM;AAAA,cACN,SAAA1B;AAAA,YAAA;AAAA,UAAA;AAAA,4BAEA2B,GAAA,EAAU,OAAOrB,EAAO,QAAQ,WAC/B,YAAM,aACR;AAAA,UACCL,EAAA;AAAA,QAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAGba,EAAA;AAAA,EAAc,GAChB;AAEF;"}
+{"version":3,"file":"TestimonialCard.js","sources":["../../../../src/components/testimonial-card/TestimonialCard.tsx"],"sourcesContent":["import React from 'react';\nimport {\n\tAvatar,\n\tAVATAR_BACKGROUND,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar';\nimport { StarRating } from '@src/components/star-rating';\nimport {\n\tBodyLarge,\n\tBodyPrimary,\n\tTitleLarge,\n\tTitleMedium,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport FooterArrowIcon from '../../assets/icons/card_footer_arraw.svg';\nimport {\n\tFooterArrow,\n\tFooterStat,\n\tFooterText,\n\tLogo,\n\tTestimonialCardStyle,\n\tTestimonialProfileCard,\n\tTestimonialProfileFooter,\n\tTestimonialProfileInfo,\n\tTestimonialProfileInfo2,\n} from './TestimonialCard.style';\n\nexport interface TestimonialCardProps {\n\ttestimonial: string;\n\tratingValue: number;\n\treviewerName: string;\n\tavatarUrl: string;\n\treviewerCaption?: string;\n\tratingMaxValue?: number;\n\tavatarSize?: SIZE;\n\tfooterText?: string;\n\tfooterStat?: string;\n\twidth?: string;\n\theight?: string;\n\tversion?: 'v1' | 'v2';\n}\n\nexport const TestimonialCard: React.FC<TestimonialCardProps> = (props) => {\n\tconst version = props.version ?? 'v1';\n\n\tconst getHTMLBody = () => {\n\t\tif (version == 'v2') {\n\t\t\treturn (\n\t\t\t\t<TestimonialProfileInfo2>\n\t\t\t\t\t<Logo src={props.avatarUrl} />\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{props.reviewerName}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</TestimonialProfileInfo2>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TestimonialProfileCard>\n\t\t\t\t<Avatar\n\t\t\t\t\ttype={AVATAR_TYPES.IMAGE}\n\t\t\t\t\tsize={props.avatarSize ?? SIZE.MEDIUM}\n\t\t\t\t\tbackground={AVATAR_BACKGROUND.LIGHT}\n\t\t\t\t\tphotoUrl={props.avatarUrl}\n\t\t\t\t/>\n\t\t\t\t<TestimonialProfileInfo>\n\t\t\t\t\t<TitleMedium color={COLORS.content.secondary}>\n\t\t\t\t\t\t{props.reviewerName}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{props.reviewerCaption}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</TestimonialProfileInfo>\n\t\t\t</TestimonialProfileCard>\n\t\t);\n\t};\n\n\tconst getFooterHTML = () => {\n\t\tif (version === 'v2') {\n\t\t\treturn (\n\t\t\t\t<TestimonialProfileFooter width={props.width}>\n\t\t\t\t\t<FooterText>\n\t\t\t\t\t\t<TitleRegular color={COLORS.text.white}>\n\t\t\t\t\t\t\t{props?.footerText}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t</FooterText>\n\n\t\t\t\t\t<FooterStat>\n\t\t\t\t\t\t<TitleLarge color={COLORS.text.white}>\n\t\t\t\t\t\t\t{props?.footerStat}\n\t\t\t\t\t\t</TitleLarge>\n\t\t\t\t\t</FooterStat>\n\n\t\t\t\t\t<FooterArrow>\n\t\t\t\t\t\t<FooterArrowIcon />\n\t\t\t\t\t</FooterArrow>\n\t\t\t\t</TestimonialProfileFooter>\n\t\t\t);\n\t\t}\n\n\t\treturn null;\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<TestimonialCardStyle\n\t\t\t\tdata-testid=\"testimonial-card\"\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tversion={version}\n\t\t\t>\n\t\t\t\t<StarRating\n\t\t\t\t\tstarSize={24}\n\t\t\t\t\tmaxValue={props.ratingMaxValue ?? 5}\n\t\t\t\t\tvalue={props.ratingValue}\n\t\t\t\t\tonChange={(stars) => console.log(stars)}\n\t\t\t\t\tmode={'VIEW'}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t\t<BodyLarge color={COLORS.content.secondary}>\n\t\t\t\t\t{props.testimonial}\n\t\t\t\t</BodyLarge>\n\t\t\t\t{getHTMLBody()}\n\t\t\t</TestimonialCardStyle>\n\n\t\t\t{getFooterHTML()}\n\t\t</>\n\t);\n};\n"],"names":["TestimonialCard","props","version","getHTMLBody","TestimonialProfileInfo2","jsx","Logo","BodyPrimary","COLORS","TestimonialProfileCard","Avatar","AVATAR_TYPES","SIZE","AVATAR_BACKGROUND","TestimonialProfileInfo","TitleMedium","getFooterHTML","jsxs","TestimonialProfileFooter","FooterText","TitleRegular","FooterStat","TitleLarge","FooterArrow","FooterArrowIcon","Fragment","TestimonialCardStyle","StarRating","stars","BodyLarge"],"mappings":";;;;;;;;AA4CO,MAAMA,IAAkD,CAACC,MAAU;AACzE,QAAMC,IAAUD,EAAM,WAAW,MAE3BE,IAAc,MACfD,KAAW,yBAEZE,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAK,KAAKL,EAAM,UAAA,CAAW;AAAA,sBAC3BM,GAAA,EAAY,OAAOC,EAAO,QAAQ,WACjC,YAAM,aAAA,CACR;AAAA,EAAA,GACD,sBAKAC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACA,MAAMC,EAAa;AAAA,QACnB,MAAMV,EAAM,cAAcW,EAAK;AAAA,QAC/B,YAAYC,EAAkB;AAAA,QAC9B,UAAUZ,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEhBa,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAT,EAACU,KAAY,OAAOP,EAAO,QAAQ,WACjC,YAAM,cACR;AAAA,wBACCD,GAAA,EAAY,OAAOC,EAAO,QAAQ,WACjC,YAAM,gBAAA,CACR;AAAA,IAAA,EAAA,CACD;AAAA,EAAA,GACD,GAIIQ,IAAgB,MACjBd,MAAY,OAEd,gBAAAe,EAACC,GAAA,EAAyB,OAAOjB,EAAM,OACtC,UAAA;AAAA,IAAA,gBAAAI,EAACc,GAAA,EACA,4BAACC,GAAA,EAAa,OAAOZ,EAAO,KAAK,OAC/B,UAAAP,GAAO,WAAA,CACT,EAAA,CACD;AAAA,IAEA,gBAAAI,EAACgB,GAAA,EACA,UAAA,gBAAAhB,EAACiB,GAAA,EAAW,OAAOd,EAAO,KAAK,OAC7B,UAAAP,GAAO,WAAA,CACT,EAAA,CACD;AAAA,IAEA,gBAAAI,EAACkB,GAAA,EACA,UAAA,gBAAAlB,EAACmB,GAAA,CAAA,CAAgB,EAAA,CAClB;AAAA,EAAA,GACD,IAIK;AAGR,SACC,gBAAAP,EAAAQ,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAR;AAAA,MAACS;AAAA,MAAA;AAAA,QACA,eAAY;AAAA,QACZ,OAAOzB,EAAM;AAAA,QACb,QAAQA,EAAM;AAAA,QACd,SAAAC;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAG;AAAA,YAACsB;AAAA,YAAA;AAAA,cACA,UAAU;AAAA,cACV,UAAU1B,EAAM,kBAAkB;AAAA,cAClC,OAAOA,EAAM;AAAA,cACb,UAAU,CAAC2B,MAAU,QAAQ,IAAIA,CAAK;AAAA,cACtC,MAAM;AAAA,cACN,SAAA1B;AAAA,YAAA;AAAA,UAAA;AAAA,4BAEA2B,GAAA,EAAU,OAAOrB,EAAO,QAAQ,WAC/B,YAAM,aACR;AAAA,UACCL,EAAA;AAAA,QAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAGba,EAAA;AAAA,EAAc,GAChB;AAEF;"}

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