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

package/dist/esm/components/progress-bar-v2/ProgressBarV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarV2.js","sources":["../../../../src/components/progress-bar-v2/ProgressBarV2.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BodyTiny } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport enum TextAlignment {\n\tRIGHT = 'right',\n\tLEFT = 'left',\n\tTOP = 'top',\n\tBOTTOM = 'bottom',\n}\n\nexport enum ProgressBarType {\n\tCIRCLE = 'circle',\n\tLINE = 'line',\n}\n\nexport interface ProgressBarV2Props {\n\tprogress: number;\n\ttype: ProgressBarType;\n\tshowProgress?: boolean;\n\ttext?: string;\n\tsize?: number;\n\tprogressBarThickness?: number;\n\tcolor?: string;\n\ttextPosition?: TextAlignment;\n\tmatchParentWidth?: boolean;\n}\n\nexport const ProgressBarV2 = (props: ProgressBarV2Props) => {\n\tconst {\n\t\ttype,\n\t\tprogress,\n\t\tprogressBarThickness,\n\t\tsize,\n\t\tcolor,\n\t\ttext,\n\t\ttextPosition,\n\t\tshowProgress,\n\t\tmatchParentWidth = false,\n\t} = props;\n\n\tlet alignment = textPosition;\n\tif (!alignment) {\n\t\talignment = TextAlignment.LEFT;\n\t}\n\n\treturn (\n\t\t<MainContainer alignment={alignment}>\n\t\t\t{showProgress &&\n\t\t\t\t(alignment === TextAlignment.TOP ||\n\t\t\t\t\talignment === TextAlignment.LEFT) && (\n\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmarginBottom: alignment === TextAlignment.TOP ? '8px' : undefined,\n\t\t\t\t\t\t\tmarginRight: alignment === TextAlignment.LEFT ? '8px' : undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t>\n\t\t\t\t\t\t{text ?? `${progress}% completed...`}\n\t\t\t\t\t</BodyTiny>\n\t\t\t\t)}\n\t\t\t{type === ProgressBarType.LINE ? (\n\t\t\t\t<BarContainer\n\t\t\t\t\tsize={size}\n\t\t\t\t\tprogressBarThickness={progressBarThickness}\n\t\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\t>\n\t\t\t\t\t<InnerBarContainer progress={progress} color={color} />\n\t\t\t\t</BarContainer>\n\t\t\t) : (\n\t\t\t\t<CircleContainer progress={progress} color={color} size={size}>\n\t\t\t\t\t<InnerCircleContainer\n\t\t\t\t\t\tprogress={progress}\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\tprogressBarThickness={progressBarThickness}\n\t\t\t\t\t/>\n\t\t\t\t</CircleContainer>\n\t\t\t)}\n\t\t\t{showProgress &&\n\t\t\t\t(alignment === TextAlignment.BOTTOM ||\n\t\t\t\t\talignment === TextAlignment.RIGHT) && (\n\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmarginTop: alignment === TextAlignment.BOTTOM ? '8px' : undefined,\n\t\t\t\t\t\t\tmarginLeft: alignment === TextAlignment.RIGHT ? '8px' : undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t>\n\t\t\t\t\t\t{text ?? `${progress}% completed...`}\n\t\t\t\t\t</BodyTiny>\n\t\t\t\t)}\n\t\t</MainContainer>\n\t);\n};\n\nconst MainContainer = styled.div<{ alignment?: TextAlignment }>`\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops?.alignment === TextAlignment.TOP ||\n\t\tprops?.alignment === TextAlignment.BOTTOM\n\t\t\t? 'column'\n\t\t\t: 'row'};\n\talign-items: center;\n\twidth: 100%;\n`;\n\nconst CircleContainer = styled.div<{\n\tprogress: number;\n\tsize?: number;\n\tcolor?: string;\n}>`\n\twidth: ${(props) => props.size ?? 32}px;\n\theight: ${(props) => props.size ?? 32}px;\n\tborder-radius: 50%;\n\toverflow: hidden;\n\tbackground: conic-gradient(\n\t\t${(props) => props.color ?? COLORS.background.brand}\n\t\t\t${(props) => props.progress * 3.6}deg,\n\t\t${COLORS.content.inactive} 0deg\n\t);\n\tposition: relative;\n`;\n\nconst InnerCircleContainer = styled.div<{\n\tprogress: number;\n\tsize?: number;\n\tprogressBarThickness?: number;\n}>`\n\tbackground-color: ${COLORS.background.inactive};\n\ttransition: width 0.3s ease-in-out;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\twidth: ${(props) =>\n\t\tprops.progressBarThickness\n\t\t\t? props.size ?? 32 - props.progressBarThickness\n\t\t\t: 20}px;\n\theight: ${(props) =>\n\t\tprops.progressBarThickness\n\t\t\t? props.size ?? 32 - props.progressBarThickness\n\t\t\t: 20}px;\n\tborder-radius: 50%;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nconst BarContainer = styled.div<{\n\tsize?: number;\n\tprogressBarThickness?: number;\n\tmatchParentWidth?: boolean;\n}>`\n\twidth: ${(props) =>\n\t\tprops.matchParentWidth ? '100%' : `${props.size ?? 90}px`};\n\theight: ${(props) => props.progressBarThickness ?? 8}px;\n\tbackground-color: ${COLORS.background.inactive};\n\tborder-radius: 4px;\n\toverflow: hidden;\n`;\n\nconst InnerBarContainer = styled.div<{\n\tprogress: number;\n\tcolor?: string;\n}>`\n\theight: 100%;\n\twidth: ${(props) => props.progress}%;\n\tbackground-color: ${(props) => props.color ?? COLORS.background.brand};\n\ttransition: width 0.3s ease-in-out;\n`;\n"],"names":["TextAlignment","ProgressBarType","ProgressBarV2","props","type","progress","progressBarThickness","size","color","text","textPosition","showProgress","matchParentWidth","alignment","jsxs","MainContainer","jsx","BodyTiny","COLORS","BarContainer","InnerBarContainer","CircleContainer","InnerCircleContainer","styled"],"mappings":"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"}
+{"version":3,"file":"ProgressBarV2.js","sources":["../../../../src/components/progress-bar-v2/ProgressBarV2.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BodyTiny } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport enum TextAlignment {\n\tRIGHT = 'right',\n\tLEFT = 'left',\n\tTOP = 'top',\n\tBOTTOM = 'bottom',\n}\n\nexport enum ProgressBarType {\n\tCIRCLE = 'circle',\n\tLINE = 'line',\n}\n\nexport interface ProgressBarV2Props {\n\tprogress: number;\n\ttype: ProgressBarType;\n\tshowProgress?: boolean;\n\ttext?: string;\n\tsize?: number;\n\tprogressBarThickness?: number;\n\tcolor?: string;\n\ttextPosition?: TextAlignment;\n\tmatchParentWidth?: boolean;\n}\n\nexport const ProgressBarV2 = (props: ProgressBarV2Props) => {\n\tconst {\n\t\ttype,\n\t\tprogress,\n\t\tprogressBarThickness,\n\t\tsize,\n\t\tcolor,\n\t\ttext,\n\t\ttextPosition,\n\t\tshowProgress,\n\t\tmatchParentWidth = false,\n\t} = props;\n\n\tlet alignment = textPosition;\n\tif (!alignment) {\n\t\talignment = TextAlignment.LEFT;\n\t}\n\n\treturn (\n\t\t<MainContainer alignment={alignment} data-testid=\"progress-bar-v2\">\n\t\t\t{showProgress &&\n\t\t\t\t(alignment === TextAlignment.TOP ||\n\t\t\t\t\talignment === TextAlignment.LEFT) && (\n\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmarginBottom: alignment === TextAlignment.TOP ? '8px' : undefined,\n\t\t\t\t\t\t\tmarginRight: alignment === TextAlignment.LEFT ? '8px' : undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t>\n\t\t\t\t\t\t{text ?? `${progress}% completed...`}\n\t\t\t\t\t</BodyTiny>\n\t\t\t\t)}\n\t\t\t{type === ProgressBarType.LINE ? (\n\t\t\t\t<BarContainer\n\t\t\t\t\tsize={size}\n\t\t\t\t\tprogressBarThickness={progressBarThickness}\n\t\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\t\tdata-testid=\"progress-bar-v2-track\"\n\t\t\t\t>\n\t\t\t\t\t<InnerBarContainer\n\t\t\t\t\t\tprogress={progress}\n\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\tdata-testid=\"progress-bar-v2-fill\"\n\t\t\t\t\t/>\n\t\t\t\t</BarContainer>\n\t\t\t) : (\n\t\t\t\t<CircleContainer\n\t\t\t\t\tprogress={progress}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tdata-testid=\"progress-bar-v2-track\"\n\t\t\t\t>\n\t\t\t\t\t<InnerCircleContainer\n\t\t\t\t\t\tprogress={progress}\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\tprogressBarThickness={progressBarThickness}\n\t\t\t\t\t\tdata-testid=\"progress-bar-v2-fill\"\n\t\t\t\t\t/>\n\t\t\t\t</CircleContainer>\n\t\t\t)}\n\t\t\t{showProgress &&\n\t\t\t\t(alignment === TextAlignment.BOTTOM ||\n\t\t\t\t\talignment === TextAlignment.RIGHT) && (\n\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmarginTop: alignment === TextAlignment.BOTTOM ? '8px' : undefined,\n\t\t\t\t\t\t\tmarginLeft: alignment === TextAlignment.RIGHT ? '8px' : undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t>\n\t\t\t\t\t\t{text ?? `${progress}% completed...`}\n\t\t\t\t\t</BodyTiny>\n\t\t\t\t)}\n\t\t</MainContainer>\n\t);\n};\n\nconst MainContainer = styled.div<{ alignment?: TextAlignment }>`\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops?.alignment === TextAlignment.TOP ||\n\t\tprops?.alignment === TextAlignment.BOTTOM\n\t\t\t? 'column'\n\t\t\t: 'row'};\n\talign-items: center;\n\twidth: 100%;\n`;\n\nconst CircleContainer = styled.div<{\n\tprogress: number;\n\tsize?: number;\n\tcolor?: string;\n}>`\n\twidth: ${(props) => props.size ?? 32}px;\n\theight: ${(props) => props.size ?? 32}px;\n\tborder-radius: 50%;\n\toverflow: hidden;\n\tbackground: conic-gradient(\n\t\t${(props) => props.color ?? COLORS.background.brand}\n\t\t\t${(props) => props.progress * 3.6}deg,\n\t\t${COLORS.content.inactive} 0deg\n\t);\n\tposition: relative;\n`;\n\nconst InnerCircleContainer = styled.div<{\n\tprogress: number;\n\tsize?: number;\n\tprogressBarThickness?: number;\n}>`\n\tbackground-color: ${COLORS.background.inactive};\n\ttransition: width 0.3s ease-in-out;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\twidth: ${(props) =>\n\t\tprops.progressBarThickness\n\t\t\t? props.size ?? 32 - props.progressBarThickness\n\t\t\t: 20}px;\n\theight: ${(props) =>\n\t\tprops.progressBarThickness\n\t\t\t? props.size ?? 32 - props.progressBarThickness\n\t\t\t: 20}px;\n\tborder-radius: 50%;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nconst BarContainer = styled.div<{\n\tsize?: number;\n\tprogressBarThickness?: number;\n\tmatchParentWidth?: boolean;\n}>`\n\twidth: ${(props) =>\n\t\tprops.matchParentWidth ? '100%' : `${props.size ?? 90}px`};\n\theight: ${(props) => props.progressBarThickness ?? 8}px;\n\tbackground-color: ${COLORS.background.inactive};\n\tborder-radius: 4px;\n\toverflow: hidden;\n`;\n\nconst InnerBarContainer = styled.div<{\n\tprogress: number;\n\tcolor?: string;\n}>`\n\theight: 100%;\n\twidth: ${(props) => props.progress}%;\n\tbackground-color: ${(props) => props.color ?? COLORS.background.brand};\n\ttransition: width 0.3s ease-in-out;\n`;\n"],"names":["TextAlignment","ProgressBarType","ProgressBarV2","props","type","progress","progressBarThickness","size","color","text","textPosition","showProgress","matchParentWidth","alignment","jsxs","MainContainer","jsx","BodyTiny","COLORS","BarContainer","InnerBarContainer","CircleContainer","InnerCircleContainer","styled"],"mappings":"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"}

package/dist/esm/components/shimmer-image/ShimmerImage.js

@@ -1,48 +1,49 @@
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import { useState as p, useEffect as h } from "react";
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import { useState as d, useEffect as h } from "react";
 import { BikShimmer as u } from "../shimmer/ShimmerComponent/BikShimmer.js";
 const x = "https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c", E = ({
-  imageUrl: e,
-  width: t,
+  imageUrl: t,
+  width: o,
   height: i,
   borderRadius: s,
   alt: a,
   useDynamicInfoImageSize: c,
-  defaultImageUrl: d = x,
+  defaultImageUrl: p = x,
   imagePreviewStyles: f
 }) => {
-  const [n, l] = p(!0), [b, m] = p(!1);
+  const [n, m] = d(!0), [g, l] = d(!1);
   return h(() => {
-    const o = new Image();
-    return o.src = e, o.onload = () => {
-      m(!1), l(!1);
-    }, o.onerror = () => {
-      m(!0), l(!1);
+    const e = new Image();
+    return e.src = t, e.onload = () => {
+      l(!1), m(!1);
+    }, e.onerror = () => {
+      l(!0), m(!1);
     }, () => {
-      o.onload = null, o.onerror = null;
+      e.onload = null, e.onerror = null;
     };
-  }, [e]), /* @__PURE__ */ g(
+  }, [t]), /* @__PURE__ */ b(
     "div",
     {
       style: {
         position: "relative",
-        width: c ? `min(100%, ${t}px)` : t,
+        width: c ? `min(100%, ${o}px)` : o,
         ...c ? { aspectRatio: 1 } : { height: i },
         borderRadius: s
       },
+      "data-testid": "shimmer-image-container",
       children: [
         n && /* @__PURE__ */ r(
           u,
           {
             boxes: [
-              { height: `${i}px`, width: `${t}px`, marginTop: "0px" }
+              { height: `${i}px`, width: `${o}px`, marginTop: "0px" }
             ]
           }
         ),
-        b ? /* @__PURE__ */ r(
+        g ? /* @__PURE__ */ r(
           "img",
           {
-            src: d,
+            src: p,
             alt: a ?? "Image",
             style: {
               borderRadius: s ?? 0,
@@ -55,7 +56,7 @@ const x = "https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o
         ) : /* @__PURE__ */ r(
           "img",
           {
-            src: e,
+            src: t,
             alt: a ?? "Image",
             style: {
               borderRadius: s ?? 0,

package/dist/esm/components/shimmer-image/ShimmerImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShimmerImage.js","sources":["../../../../src/components/shimmer-image/ShimmerImage.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { BikShimmer } from '../shimmer';\n\nexport type ShimmerImageProps = {\n\timageUrl: string;\n\twidth: number | string;\n\theight: number | string;\n\talt?: string;\n\tborderRadius?: number;\n\tdefaultImageUrl?: string;\n\tuseDynamicInfoImageSize?: boolean;\n\timagePreviewStyles?: React.CSSProperties;\n};\n\nexport const DEFAULT_IMAGE =\n\t'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c';\n\nexport const ShimmerImage: React.FC<ShimmerImageProps> = ({\n\timageUrl,\n\twidth,\n\theight,\n\tborderRadius,\n\talt,\n\tuseDynamicInfoImageSize,\n\tdefaultImageUrl = DEFAULT_IMAGE,\n\timagePreviewStyles\n}) => {\n\tconst [isLoading, setIsLoading] = useState(true);\n\tconst [isError, setIsError] = useState(false);\n\n\tuseEffect(() => {\n\t\tconst image = new Image();\n\t\timage.src = imageUrl;\n\n\t\timage.onload = () => {\n\t\t\tsetIsError(false);\n\t\t\tsetIsLoading(false);\n\t\t};\n\n\t\timage.onerror = () => {\n\t\t\tsetIsError(true);\n\t\t\tsetIsLoading(false);\n\t\t};\n\n\t\treturn () => {\n\t\t\timage.onload = null;\n\t\t\timage.onerror = null;\n\t\t};\n\t}, [imageUrl]);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t\twidth: useDynamicInfoImageSize ? `min(100%, ${width}px)` : width,\n\t\t\t\t...(useDynamicInfoImageSize ? { aspectRatio: 1 } : { height }),\n\t\t\t\tborderRadius,\n\t\t\t}}\n\t\t>\n\t\t\t{isLoading && (\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{ height: `${height}px`, width: `${width}px`, marginTop: '0px' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{isError ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={defaultImageUrl}\n\t\t\t\t\talt={alt ?? 'Image'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: borderRadius ?? 0,\n\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t}}\n\t\t\t\t\t\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<img\n\t\t\t\t\tsrc={imageUrl}\n\t\t\t\t\talt={alt ?? 'Image'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: borderRadius ?? 0,\n\t\t\t\t\t\tdisplay: isLoading ? 'none' : 'block',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t...imagePreviewStyles\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["DEFAULT_IMAGE","ShimmerImage","imageUrl","width","height","borderRadius","alt","useDynamicInfoImageSize","defaultImageUrl","imagePreviewStyles","isLoading","setIsLoading","useState","isError","setIsError","useEffect","image","jsxs","jsx","BikShimmer"],"mappings":";;;AAcO,MAAMA,IACZ,gLAEYC,IAA4C,CAAC;AAAA,EACzD,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,KAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,iBAAAC,IAAkBR;AAAA,EAClB,oBAAAS;AACD,MAAM;AACL,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAI,GACzC,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK;AAE5C,SAAAG,EAAU,MAAM;AACf,UAAMC,IAAQ,IAAI,MAAA;AAClB,WAAAA,EAAM,MAAMd,GAEZc,EAAM,SAAS,MAAM;AACpB,MAAAF,EAAW,EAAK,GAChBH,EAAa,EAAK;AAAA,IACnB,GAEAK,EAAM,UAAU,MAAM;AACrB,MAAAF,EAAW,EAAI,GACfH,EAAa,EAAK;AAAA,IACnB,GAEO,MAAM;AACZ,MAAAK,EAAM,SAAS,MACfA,EAAM,UAAU;AAAA,IACjB;AAAA,EACD,GAAG,CAACd,CAAQ,CAAC,GAGZ,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,UAAU;AAAA,QACV,OAAOV,IAA0B,aAAaJ,CAAK,QAAQA;AAAA,QAC3D,GAAII,IAA0B,EAAE,aAAa,EAAA,IAAM,EAAE,QAAAH,EAAA;AAAA,QACrD,cAAAC;AAAA,MAAA;AAAA,MAGA,UAAA;AAAA,QAAAK,KACA,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,EAAE,QAAQ,GAAGf,CAAM,MAAM,OAAO,GAAGD,CAAK,MAAM,WAAW,MAAA;AAAA,YAAM;AAAA,UAChE;AAAA,QAAA;AAAA,QAGDU,IACA,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,KAAKV;AAAA,YACL,KAAKF,KAAO;AAAA,YACZ,OAAO;AAAA,cACN,cAAcD,KAAgB;AAAA,cAC9B,SAAS;AAAA,cACT,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,WAAW;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA,IAID,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,KAAKhB;AAAA,YACL,KAAKI,KAAO;AAAA,YACZ,OAAO;AAAA,cACN,cAAcD,KAAgB;AAAA,cAC9B,SAASK,IAAY,SAAS;AAAA,cAC9B,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,WAAW;AAAA,cACX,GAAGD;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA;AAAA,MACD;AAAA,IAAA;AAAA,EAAA;AAIJ;"}
+{"version":3,"file":"ShimmerImage.js","sources":["../../../../src/components/shimmer-image/ShimmerImage.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { BikShimmer } from '../shimmer';\n\nexport type ShimmerImageProps = {\n\timageUrl: string;\n\twidth: number | string;\n\theight: number | string;\n\talt?: string;\n\tborderRadius?: number;\n\tdefaultImageUrl?: string;\n\tuseDynamicInfoImageSize?: boolean;\n\timagePreviewStyles?: React.CSSProperties;\n};\n\nexport const DEFAULT_IMAGE =\n\t'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c';\n\nexport const ShimmerImage: React.FC<ShimmerImageProps> = ({\n\timageUrl,\n\twidth,\n\theight,\n\tborderRadius,\n\talt,\n\tuseDynamicInfoImageSize,\n\tdefaultImageUrl = DEFAULT_IMAGE,\n\timagePreviewStyles,\n}) => {\n\tconst [isLoading, setIsLoading] = useState(true);\n\tconst [isError, setIsError] = useState(false);\n\n\tuseEffect(() => {\n\t\tconst image = new Image();\n\t\timage.src = imageUrl;\n\n\t\timage.onload = () => {\n\t\t\tsetIsError(false);\n\t\t\tsetIsLoading(false);\n\t\t};\n\n\t\timage.onerror = () => {\n\t\t\tsetIsError(true);\n\t\t\tsetIsLoading(false);\n\t\t};\n\n\t\treturn () => {\n\t\t\timage.onload = null;\n\t\t\timage.onerror = null;\n\t\t};\n\t}, [imageUrl]);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t\twidth: useDynamicInfoImageSize ? `min(100%, ${width}px)` : width,\n\t\t\t\t...(useDynamicInfoImageSize ? { aspectRatio: 1 } : { height }),\n\t\t\t\tborderRadius,\n\t\t\t}}\n\t\t\tdata-testid=\"shimmer-image-container\"\n\t\t>\n\t\t\t{isLoading && (\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{ height: `${height}px`, width: `${width}px`, marginTop: '0px' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{isError ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={defaultImageUrl}\n\t\t\t\t\talt={alt ?? 'Image'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: borderRadius ?? 0,\n\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<img\n\t\t\t\t\tsrc={imageUrl}\n\t\t\t\t\talt={alt ?? 'Image'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: borderRadius ?? 0,\n\t\t\t\t\t\tdisplay: isLoading ? 'none' : 'block',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t...imagePreviewStyles,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["DEFAULT_IMAGE","ShimmerImage","imageUrl","width","height","borderRadius","alt","useDynamicInfoImageSize","defaultImageUrl","imagePreviewStyles","isLoading","setIsLoading","useState","isError","setIsError","useEffect","image","jsxs","jsx","BikShimmer"],"mappings":";;;AAcO,MAAMA,IACZ,gLAEYC,IAA4C,CAAC;AAAA,EACzD,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,KAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,iBAAAC,IAAkBR;AAAA,EAClB,oBAAAS;AACD,MAAM;AACL,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAI,GACzC,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK;AAE5C,SAAAG,EAAU,MAAM;AACf,UAAMC,IAAQ,IAAI,MAAA;AAClB,WAAAA,EAAM,MAAMd,GAEZc,EAAM,SAAS,MAAM;AACpB,MAAAF,EAAW,EAAK,GAChBH,EAAa,EAAK;AAAA,IACnB,GAEAK,EAAM,UAAU,MAAM;AACrB,MAAAF,EAAW,EAAI,GACfH,EAAa,EAAK;AAAA,IACnB,GAEO,MAAM;AACZ,MAAAK,EAAM,SAAS,MACfA,EAAM,UAAU;AAAA,IACjB;AAAA,EACD,GAAG,CAACd,CAAQ,CAAC,GAGZ,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,UAAU;AAAA,QACV,OAAOV,IAA0B,aAAaJ,CAAK,QAAQA;AAAA,QAC3D,GAAII,IAA0B,EAAE,aAAa,EAAA,IAAM,EAAE,QAAAH,EAAA;AAAA,QACrD,cAAAC;AAAA,MAAA;AAAA,MAED,eAAY;AAAA,MAEX,UAAA;AAAA,QAAAK,KACA,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,EAAE,QAAQ,GAAGf,CAAM,MAAM,OAAO,GAAGD,CAAK,MAAM,WAAW,MAAA;AAAA,YAAM;AAAA,UAChE;AAAA,QAAA;AAAA,QAGDU,IACA,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,KAAKV;AAAA,YACL,KAAKF,KAAO;AAAA,YACZ,OAAO;AAAA,cACN,cAAcD,KAAgB;AAAA,cAC9B,SAAS;AAAA,cACT,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,WAAW;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA,IAGD,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,KAAKhB;AAAA,YACL,KAAKI,KAAO;AAAA,YACZ,OAAO;AAAA,cACN,cAAcD,KAAgB;AAAA,cAC9B,SAASK,IAAY,SAAS;AAAA,cAC9B,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,WAAW;AAAA,cACX,GAAGD;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA;AAAA,MACD;AAAA,IAAA;AAAA,EAAA;AAIJ;"}

package/dist/esm/components/spinner/Spinner.js

@@ -1,18 +1,26 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import a from "styled-components";
 import { COLORS as i } from "../../constants/Theme.js";
-import { BorderMap as d, SizeMap as t } from "./themes.js";
-const s = ({ size: r, color: e, className: n }) => /* @__PURE__ */ o("div", { className: `spinner-container ${n}`, children: /* @__PURE__ */ o(
-  m,
+import { BorderMap as d, SizeMap as o } from "./themes.js";
+const s = ({ size: r, color: e, className: n }) => /* @__PURE__ */ t(
+  "div",
   {
-    width: `${t[r]}px`,
-    height: `${t[r]}px`,
-    size: r,
-    color: e ?? i.stroke.brand
+    className: `spinner-container ${n}`,
+    "data-testid": "spinner-container",
+    children: /* @__PURE__ */ t(
+      p,
+      {
+        width: `${o[r]}px`,
+        height: `${o[r]}px`,
+        size: r,
+        color: e ?? i.stroke.brand,
+        "data-testid": "spinner"
+      }
+    )
   }
-) });
+);
 s.displayName = "Spinner";
-const m = a.div`
+const p = a.div`
 	width: ${(r) => r.width};
 	height: ${(r) => r.height};
 	border: ${(r) => r.size ? d[r.size] : 5}px solid
@@ -32,7 +40,7 @@ const m = a.div`
 	}
 `;
 export {
-  m as PureSpinner,
+  p as PureSpinner,
   s as Spinner
 };
 //# sourceMappingURL=Spinner.js.map

package/dist/esm/components/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-var-requires */\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { SpinnerProps } from './model';\nimport { BorderMap, SizeMap } from './themes';\n\nexport const Spinner = ({ size, color, className }: SpinnerProps) => {\n\treturn (\n\t\t<div className={`spinner-container ${className}`}>\n\t\t\t<PureSpinner\n\t\t\t\twidth={`${SizeMap[size]}px`}\n\t\t\t\theight={`${SizeMap[size]}px`}\n\t\t\t\tsize={size}\n\t\t\t\tcolor={color ?? COLORS.stroke.brand}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nSpinner.displayName = 'Spinner';\n\nexport const PureSpinner = styled.div<{\n\twidth: string;\n\theight: string;\n\tsize?: 'small' | 'large';\n\tcolor?: string;\n\tbackgroundColor?: string;\n}>`\n\twidth: ${(props) => props.width};\n\theight: ${(props) => props.height};\n\tborder: ${(props) => (props.size ? BorderMap[props.size] : 5)}px solid\n\t\t${(props) => props.backgroundColor ?? 'transparent'};\n\tborder-bottom-color: ${(props) => props.color ?? COLORS.stroke.brand};\n\tborder-radius: 50%;\n\tdisplay: inline-block;\n\tanimation: rotation 1s linear infinite;\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\n"],"names":["Spinner","size","color","className","jsx","PureSpinner","SizeMap","COLORS","styled","props","BorderMap"],"mappings":";;;;AAMO,MAAMA,IAAU,CAAC,EAAE,MAAAC,GAAM,OAAAC,GAAO,WAAAC,QAErC,gBAAAC,EAAC,OAAA,EAAI,WAAW,qBAAqBD,CAAS,IAC7C,UAAA,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,OAAO,GAAGC,EAAQL,CAAI,CAAC;AAAA,IACvB,QAAQ,GAAGK,EAAQL,CAAI,CAAC;AAAA,IACxB,MAAAA;AAAA,IACA,OAAOC,KAASK,EAAO,OAAO;AAAA,EAAA;AAAA,GAEhC;AAIFP,EAAQ,cAAc;AAEf,MAAMK,IAAcG,EAAO;AAAA,UAOxB,CAACC,MAAUA,EAAM,KAAK;AAAA,WACrB,CAACA,MAAUA,EAAM,MAAM;AAAA,WACvB,CAACA,MAAWA,EAAM,OAAOC,EAAUD,EAAM,IAAI,IAAI,CAAE;AAAA,IAC1D,CAACA,MAAUA,EAAM,mBAAmB,aAAa;AAAA,wBAC7B,CAACA,MAAUA,EAAM,SAASF,EAAO,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"Spinner.js","sources":["../../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-var-requires */\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { SpinnerProps } from './model';\nimport { BorderMap, SizeMap } from './themes';\n\nexport const Spinner = ({ size, color, className }: SpinnerProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={`spinner-container ${className}`}\n\t\t\tdata-testid=\"spinner-container\"\n\t\t>\n\t\t\t<PureSpinner\n\t\t\t\twidth={`${SizeMap[size]}px`}\n\t\t\t\theight={`${SizeMap[size]}px`}\n\t\t\t\tsize={size}\n\t\t\t\tcolor={color ?? COLORS.stroke.brand}\n\t\t\t\tdata-testid=\"spinner\"\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nSpinner.displayName = 'Spinner';\n\nexport const PureSpinner = styled.div<{\n\twidth: string;\n\theight: string;\n\tsize?: 'small' | 'large';\n\tcolor?: string;\n\tbackgroundColor?: string;\n}>`\n\twidth: ${(props) => props.width};\n\theight: ${(props) => props.height};\n\tborder: ${(props) => (props.size ? BorderMap[props.size] : 5)}px solid\n\t\t${(props) => props.backgroundColor ?? 'transparent'};\n\tborder-bottom-color: ${(props) => props.color ?? COLORS.stroke.brand};\n\tborder-radius: 50%;\n\tdisplay: inline-block;\n\tanimation: rotation 1s linear infinite;\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\n"],"names":["Spinner","size","color","className","jsx","PureSpinner","SizeMap","COLORS","styled","props","BorderMap"],"mappings":";;;;AAMO,MAAMA,IAAU,CAAC,EAAE,MAAAC,GAAM,OAAAC,GAAO,WAAAC,QAErC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAW,qBAAqBD,CAAS;AAAA,IACzC,eAAY;AAAA,IAEZ,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,OAAO,GAAGC,EAAQL,CAAI,CAAC;AAAA,QACvB,QAAQ,GAAGK,EAAQL,CAAI,CAAC;AAAA,QACxB,MAAAA;AAAA,QACA,OAAOC,KAASK,EAAO,OAAO;AAAA,QAC9B,eAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EACb;AAAA;AAKHP,EAAQ,cAAc;AAEf,MAAMK,IAAcG,EAAO;AAAA,UAOxB,CAACC,MAAUA,EAAM,KAAK;AAAA,WACrB,CAACA,MAAUA,EAAM,MAAM;AAAA,WACvB,CAACA,MAAWA,EAAM,OAAOC,EAAUD,EAAM,IAAI,IAAI,CAAE;AAAA,IAC1D,CAACA,MAAUA,EAAM,mBAAmB,aAAa;AAAA,wBAC7B,CAACA,MAAUA,EAAM,SAASF,EAAO,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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":";;;;;;;;;;;AAwBO,IAAKA,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,OAAO,QANIA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACXA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFGA,IAAAA,KAAA,CAAA,CAAA,GAIAC,sBAAAA,OACXA,EAAA,SAAS,UACTA,EAAA,SAAS,UAFEA,IAAAA,KAAA,CAAA,CAAA;AA4BL,MAAMC,KAET,CAACC,MAAU;AACd,QAAMC,IAAW,MAAM;AACtB,QAAIC,KAAU;AACb,+BAAQC,GAAA,EAAY;AAErB,QAAID,KAAU;AACb,+BAAQE,GAAA,EAAY;AAErB,QAAIF,KAAU;AACb,+BAAQG,GAAA,EAAU;AAEnB,QAAIH,MAAW;AACd,aAAO,gBAAAI,EAACC,GAAA,EAAQ,MAAM,QAAA,CAAS;AAEhC,QAAIL,MAAW;AACd,+BAAQM,GAAA,EAAU;AAEnB,QAAIN,KAAU;AACb,+BAAQO,GAAA,EAAS;AAAA,EAEnB,GACM;AAAA,IACL,QAAAP;AAAA,IACA,SAAAQ;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAOZ,EAAA;AAAA,IACP,iBAAAa;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,aAAaC;AAAA,EAAA,IACV1B;AAEJ,SACC,gBAAA2B,EAACC,GAAA,EAAwB,OAAAR,GAAc,aAAWM,GACjD,UAAA;AAAA,IAAA,gBAAApB,EAACuB,GAAA,EAAU,WAAAP,GAAsB,YAAAC,GAC/B,UAAAF,sBACC,OAAA,EAAI,KAAKA,GAAa,OAAO,QAAQ,QAAQ,QAAQ,KAAK,GAAA,CAAI,IAE/DR,GAEF;AAAA,IACA,gBAAAc,EAACG,GAAA,EAAa,MAAM9B,EAAM,MACxB,UAAA;AAAA,MAAAA,EAAM,SAAS,WAAW,gBAAAM,EAACyB,GAAA,EAAc,UAAArB,GAAQ;AAAA,MACjDV,EAAM,SAAS,WAAW,gBAAAM,EAAC0B,KAAa,UAAAtB,EAAA,CAAQ;AAAA,IAAA,GAClD;AAAA,sBACCuB,GAAA,EACC,UAAA;AAAA,MAAAjC,EAAM,SAAS,WACf,gBAAAM,EAAC4B,GAAA,EAAY,OAAOC,EAAO,QAAQ,WAAY,UAAAxB,EAAA,CAAQ;AAAA,MAEvDX,EAAM,SAAS,WACf,gBAAAM,EAAC8B,KAAc,OAAOD,EAAO,QAAQ,WACnC,UAAAxB,EAAA,CACF;AAAA,MAEAC,KACA,gBAAAN;AAAA,QAAC8B;AAAA,QAAA;AAAA,UACA,OAAOD,EAAO,QAAQ;AAAA,UACtB,OAAO,EAAE,WAAW,GAAG,YAAY,WAAA;AAAA,UAElC,UAAAvB;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GAEF;AAAA,IACCZ,EAAM,YAAY,gBAAAM,EAAA+B,GAAA,CAAA,CAAE;AAAA,IACpBvB,KACA,gBAAAR,EAAA+B,GAAA,EACC,UAAA,gBAAAV,EAACW,GAAA,EAAgB,MAAMtC,EAAM,MAC3B,UAAA;AAAA,MAAAe,KAAQ,YACR,gBAAAT;AAAA,QAACiC;AAAA,QAAA;AAAA,UACA,aAAW,GAAGb,CAAQ;AAAA,UACtB,SAAS,MACRR,KAAiBA;AAAA,YAAc;AAAA;AAAA,UAAA;AAAA,UAEhC,YAAYM,KAAmB;AAAA,UAC/B,YAAYC,KAAuB;AAAA,UACnC,kBAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,MAGlB,gBAAAnB;AAAA,QAACiC;AAAA,QAAA;AAAA,UACA,aAAW,GAAGb,CAAQ;AAAA,UACtB,SAAS,MACRR,KAAiBA;AAAA,YAAc;AAAA;AAAA,UAAA;AAAA,UAEhC,YAAYD,KAAc;AAAA,UAC1B,aAAaE;AAAA,UACb,YAAYH,KAAc;AAAA,UAC1B,kBAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB,EAAA,CACD,EAAA,CACD;AAAA,EAAA,GAEF;AAEF;"}
+{"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/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;"}