npm - @bikdotai/bik-component-library - Versions diffs - 0.0.840-tools-beta.5 → 0.0.841-beta.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (185) hide show

package/dist/cjs/components/progress-bar-v2/ProgressBarV2.js CHANGED Viewed

@@ -1,40 +1,40 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),m=require("styled-components"),g=require("../TypographyStyle.js"),r=require("../../constants/Theme.js"),x=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=x(m);var h=(e=>(e.RIGHT="right",e.LEFT="left",e.TOP="top",e.BOTTOM="bottom",e))(h||{}),u=(e=>(e.CIRCLE="circle",e.LINE="line",e))(u||{});const O=e=>{const{type:p,progress:i,progressBarThickness:a,size:s,color:d,text:c,textPosition:f,showProgress:l,matchParentWidth:b=!1}=e;let t=f;return t||(t="left"),o.jsxs(v,{alignment:t,children:[l&&(t==="top"||t==="left")&&o.jsx(g.BodyTiny,{style:{marginBottom:t==="top"?"8px":void 0,marginRight:t==="left"?"8px":void 0},color:r.COLORS.content.secondary,children:c??`${i}% completed...`}),p==="line"?o.jsx($,{size:s,progressBarThickness:a,matchParentWidth:b,children:o.jsx(k,{progress:i,color:d})}):o.jsx(y,{progress:i,color:d,size:s,children:o.jsx(C,{progress:i,size:s,progressBarThickness:a})}),l&&(t==="bottom"||t==="right")&&o.jsx(g.BodyTiny,{style:{marginTop:t==="bottom"?"8px":void 0,marginLeft:t==="right"?"8px":void 0},color:r.COLORS.content.secondary,children:c??`${i}% completed...`})]})},v=n.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),v=require("styled-components"),g=require("../TypographyStyle.js"),r=require("../../constants/Theme.js"),m=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},s=m(v);var h=(t=>(t.RIGHT="right",t.LEFT="left",t.TOP="top",t.BOTTOM="bottom",t))(h||{}),u=(t=>(t.CIRCLE="circle",t.LINE="line",t))(u||{});const x=t=>{const{type:p,progress:i,progressBarThickness:a,size:n,color:d,text:c,textPosition:b,showProgress:l,matchParentWidth:f=!1}=t;let e=b;return e||(e="left"),o.jsxs(O,{alignment:e,"data-testid":"progress-bar-v2",children:[l&&(e==="top"||e==="left")&&o.jsx(g.BodyTiny,{style:{marginBottom:e==="top"?"8px":void 0,marginRight:e==="left"?"8px":void 0},color:r.COLORS.content.secondary,children:c??`${i}% completed...`}),p==="line"?o.jsx($,{size:n,progressBarThickness:a,matchParentWidth:f,"data-testid":"progress-bar-v2-track",children:o.jsx(k,{progress:i,color:d,"data-testid":"progress-bar-v2-fill"})}):o.jsx(y,{progress:i,color:d,size:n,"data-testid":"progress-bar-v2-track",children:o.jsx(C,{progress:i,size:n,progressBarThickness:a,"data-testid":"progress-bar-v2-fill"})}),l&&(e==="bottom"||e==="right")&&o.jsx(g.BodyTiny,{style:{marginTop:e==="bottom"?"8px":void 0,marginLeft:e==="right"?"8px":void 0},color:r.COLORS.content.secondary,children:c??`${i}% completed...`})]})},O=s.default.div`
 	display: flex;
-	flex-direction: ${e=>e?.alignment==="top"||e?.alignment==="bottom"?"column":"row"};
+	flex-direction: ${t=>t?.alignment==="top"||t?.alignment==="bottom"?"column":"row"};
 	align-items: center;
 	width: 100%;
-`,y=n.default.div`
-	width: ${e=>e.size??32}px;
-	height: ${e=>e.size??32}px;
+`,y=s.default.div`
+	width: ${t=>t.size??32}px;
+	height: ${t=>t.size??32}px;
 	border-radius: 50%;
 	overflow: hidden;
 	background: conic-gradient(
-		${e=>e.color??r.COLORS.background.brand}
-			${e=>e.progress*3.6}deg,
+		${t=>t.color??r.COLORS.background.brand}
+			${t=>t.progress*3.6}deg,
 		${r.COLORS.content.inactive} 0deg
 	);
 	position: relative;
-`,C=n.default.div`
+`,C=s.default.div`
 	background-color: ${r.COLORS.background.inactive};
 	transition: width 0.3s ease-in-out;
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
-	width: ${e=>e.progressBarThickness?e.size??32-e.progressBarThickness:20}px;
-	height: ${e=>e.progressBarThickness?e.size??32-e.progressBarThickness:20}px;
+	width: ${t=>t.progressBarThickness?t.size??32-t.progressBarThickness:20}px;
+	height: ${t=>t.progressBarThickness?t.size??32-t.progressBarThickness:20}px;
 	border-radius: 50%;
 	background: ${r.COLORS.surface.standard};
-`,$=n.default.div`
-	width: ${e=>e.matchParentWidth?"100%":`${e.size??90}px`};
-	height: ${e=>e.progressBarThickness??8}px;
+`,$=s.default.div`
+	width: ${t=>t.matchParentWidth?"100%":`${t.size??90}px`};
+	height: ${t=>t.progressBarThickness??8}px;
 	background-color: ${r.COLORS.background.inactive};
 	border-radius: 4px;
 	overflow: hidden;
-`,k=n.default.div`
+`,k=s.default.div`
 	height: 100%;
-	width: ${e=>e.progress}%;
-	background-color: ${e=>e.color??r.COLORS.background.brand};
+	width: ${t=>t.progress}%;
+	background-color: ${t=>t.color??r.COLORS.background.brand};
 	transition: width 0.3s ease-in-out;
-`;exports.ProgressBarType=u;exports.ProgressBarV2=O;exports.TextAlignment=h;
+`;exports.ProgressBarType=u;exports.ProgressBarV2=x;exports.TextAlignment=h;
 //# sourceMappingURL=ProgressBarV2.js.map

package/dist/cjs/components/progress-bar-v2/ProgressBarV2.js.map CHANGED Viewed

	@@ -1 +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":"4RAIO,IAAKA,GAAAA,IACXA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,IAAM,MACNA,EAAA,OAAS,SAJEA,IAAAA,GAAA,CAAA,CAAA,EAOAC,GAAAA,IACXA,EAAA,OAAS,SACTA,EAAA,KAAO,OAFIA,IAAAA,GAAA,CAAA,CAAA,EAiBL,MAAMC,EAAiBC,GAA8B,CAC3D,KAAM,CACL,KAAAC,EACA,SAAAC,EACA,qBAAAC,EACA,KAAAC,EACA,MAAAC,EACA,KAAAC,EACA,aAAAC,EACA,aAAAC,EACA,iBAAAC,EAAmB,EAAA,EAChBT,EAEJ,IAAIU,EAAYH,EAChB,OAAKG,IACJA,EAAY,QAIZC,~~OAACC~~,~~GAAc~~,UAAAF,~~EACb~~,SAAA,CAAAF,IACCE,IAAc,OACdA,IAAc,SACdG,EAAAA,IAACC,EAAAA,SAAA,CACA,MAAO,CACN,aAAcJ,IAAc,MAAoB,MAAQ,OACxD,YAAaA,IAAc,OAAqB,MAAQ,MAAA,EAEzD,MAAOK,EAAAA,OAAO,QAAQ,UAErB,SAAAT,GAAQ,GAAGJ,CAAQ,gBAAA,CAAA,EAGtBD,IAAS,OACTY,EAAAA,IAACG,EAAA,CACA,KAAAZ,EACA,qBAAAD,EACA,iBAAAM,~~EAEA~~,SAAAI,EAAAA,IAACI,EAAA,~~CAAkB~~,SAAAf,~~EAAoB~~,MAAAG,~~CAAA~~,~~CAAc~~,CAAA,CAAA,~~EAGtDQ~~,EAAAA,IAACK,EAAA,~~CAAgB~~,SAAAhB,~~EAAoB~~,MAAAG,~~EAAc~~,KAAAD,~~EAClD~~,SAAAS,EAAAA,IAACM,EAAA,CACA,SAAAjB,EACA,KAAAE,EACA,qBAAAD,CAAA,CAAA,~~EAEF~~,~~EAEAK,~~IACCE,IAAc,UACdA,IAAc,UACdG,EAAAA,IAACC,EAAAA,SAAA,CACA,MAAO,CACN,UAAWJ,IAAc,SAAuB,MAAQ,OACxD,WAAYA,IAAc,QAAsB,MAAQ,MAAA,EAEzD,MAAOK,EAAAA,OAAO,QAAQ,UAErB,SAAAT,GAAQ,GAAGJ,CAAQ,gBAAA,CAAA,CACrB,EAEH,CAEF,EAEMU,EAAgBQ,EAAAA,QAAO;AAAA;AAAA,mBAETpB,GAClBA,GAAO,YAAc,OACrBA,GAAO,YAAc,SAClB,SACA,KAAK;AAAA;AAAA;AAAA,EAKJkB,EAAkBE,EAAAA,QAAO;AAAA,UAKpBpB,GAAUA,EAAM,MAAQ,EAAE;AAAA,WACzBA,GAAUA,EAAM,MAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,IAIjCA,GAAUA,EAAM,OAASe,EAAAA,OAAO,WAAW,KAAK;AAAA,KAC/Cf,GAAUA,EAAM,SAAW,GAAG;AAAA,IAChCe,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,EAKrBI,EAAuBC,EAAAA,QAAO;AAAA,qBAKfL,EAAAA,OAAO,WAAW,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMpCf,GACTA,EAAM,qBACHA,EAAM,MAAQ,GAAKA,EAAM,qBACzB,EAAE;AAAA,WACKA,GACVA,EAAM,qBACHA,EAAM,MAAQ,GAAKA,EAAM,qBACzB,EAAE;AAAA;AAAA,eAEQe,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGhCC,EAAeI,EAAAA,QAAO;AAAA,UAKjBpB,GACTA,EAAM,iBAAmB,OAAS,GAAGA,EAAM,MAAQ,EAAE,IAAI;AAAA,WAC/CA,GAAUA,EAAM,sBAAwB,CAAC;AAAA,qBAChCe,EAAAA,OAAO,WAAW,QAAQ;AAAA;AAAA;AAAA,EAKzCE,EAAoBG,EAAAA,QAAO;AAAA;AAAA,UAKtBpB,GAAUA,EAAM,QAAQ;AAAA,qBACbA,GAAUA,EAAM,OAASe,EAAAA,OAAO,WAAW,KAAK;AAAA;AAAA"}
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} 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/cjs/components/radioButton/RadioButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),a=require("react"),r=require("./RadioButton.styled.js"),n=require("../TypographyStyle.js"),t=require("../../constants/Theme.js"),O=e=>{const l=a.useMemo(()=>e?.activeColor||t.COLORS.background.positive.vibrant,[e.activeColor]),s=a.useMemo(()=>e.isDisabled?t.COLORS.content.inactive:e.isActive?l:t.COLORS.content.primary,[e.isDisabled,e.isActive,l]);return i.jsxs("svg",{width:e.isSmall?"16":"20",height:e.isSmall?"16":"20",viewBox:e.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i.jsx("circle",{cx:e.isSmall?"8":"10",cy:e.isSmall?"8":"10",r:e.isSmall?6:9,stroke:s,strokeWidth:e.isSmall?1.5:2}),e.isActive&&i.jsx("circle",{cx:e.isSmall?"8":"10",cy:e.isSmall?"8":"10",r:e.isSmall?3:5,fill:e.isDisabled?t.COLORS.content.inactive:l})]})},b=e=>{const[l,s]=a.useState(e.isActive||!1),[S,c]=a.useState(!1),[u,d]=a.useState(!1),x=()=>{if(!e.skipSelectingOff&&!e.isDisabled){const o=!l;s(o),e.onValueChange?.(o,e.value)}};a.useEffect(()=>{s(e.isActive)},[e.isActive]);const C=()=>e.label?e.boldOnChecked&&l||e.alwaysBold?i.jsx(n.TitleSmall,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):e.size==="SMALL"?i.jsx(n.BodyCaption,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):e.labelSize==="MEDIUM"?i.jsx(n.BodySecondary,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):i.jsx(n.BodyPrimary,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):i.jsx(i.Fragment,{});return i.jsxs(r.RadioButtonContainer,{"data-test":e["data-test"],onClick:x,onMouseEnter:()=>c(!e.skipHoverState),onMouseLeave:()=>c(!1),onMouseDown:()=>d(!e.skipHoverState),onMouseUp:()=>d(!1),style:e.caption?{alignItems:"flex-start"}:{},children:[i.jsx(r.RadioButtonIcon,{checked:l,hovered:S,clicked:u,isDisabled:e.isDisabled||!1,size:e.size,style:e.caption?{margin:"2px 0"}:{},children:i.jsx(O,{isSmall:e.size==="SMALL",isActive:l,isDisabled:e.isDisabled||!1,activeColor:e.activeColor})}),i.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:e.gapBetweenBodyAndCaption||"0px"},children:[C(),e.caption&&i.jsx(n.BodyCaption,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.secondary,children:e.caption})]})]})};exports.RadioButton=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),a=require("react"),r=require("./RadioButton.styled.js"),n=require("../TypographyStyle.js"),t=require("../../constants/Theme.js"),O=e=>{const l=a.useMemo(()=>e?.activeColor||t.COLORS.background.positive.vibrant,[e.activeColor]),s=a.useMemo(()=>e.isDisabled?t.COLORS.content.inactive:e.isActive?l:t.COLORS.content.primary,[e.isDisabled,e.isActive,l]);return i.jsxs("svg",{width:e.isSmall?"16":"20",height:e.isSmall?"16":"20",viewBox:e.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i.jsx("circle",{cx:e.isSmall?"8":"10",cy:e.isSmall?"8":"10",r:e.isSmall?6:9,stroke:s,strokeWidth:e.isSmall?1.5:2}),e.isActive&&i.jsx("circle",{"data-test":"radio-checked-indicator",cx:e.isSmall?"8":"10",cy:e.isSmall?"8":"10",r:e.isSmall?3:5,fill:e.isDisabled?t.COLORS.content.inactive:l})]})},b=e=>{const[l,s]=a.useState(e.isActive||!1),[S,c]=a.useState(!1),[u,d]=a.useState(!1),x=()=>{if(!e.skipSelectingOff&&!e.isDisabled){const o=!l;s(o),e.onValueChange?.(o,e.value)}};a.useEffect(()=>{s(e.isActive)},[e.isActive]);const C=()=>e.label?e.boldOnChecked&&l||e.alwaysBold?i.jsx(n.TitleSmall,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):e.size==="SMALL"?i.jsx(n.BodyCaption,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):e.labelSize==="MEDIUM"?i.jsx(n.BodySecondary,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):i.jsx(n.BodyPrimary,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):i.jsx(i.Fragment,{});return i.jsxs(r.RadioButtonContainer,{"data-test":e["data-test"],onClick:x,onMouseEnter:()=>c(!e.skipHoverState),onMouseLeave:()=>c(!1),onMouseDown:()=>d(!e.skipHoverState),onMouseUp:()=>d(!1),style:e.caption?{alignItems:"flex-start"}:{},children:[i.jsx(r.RadioButtonIcon,{checked:l,hovered:S,clicked:u,isDisabled:e.isDisabled||!1,size:e.size,style:e.caption?{margin:"2px 0"}:{},children:i.jsx(O,{isSmall:e.size==="SMALL",isActive:l,isDisabled:e.isDisabled||!1,activeColor:e.activeColor})}),i.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:e.gapBetweenBodyAndCaption||"0px"},children:[C(),e.caption&&i.jsx(n.BodyCaption,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.secondary,children:e.caption})]})]})};exports.RadioButton=b;
 //# sourceMappingURL=RadioButton.js.map

package/dist/cjs/components/radioButton/RadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radioButton/RadioButton.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tRadioButtonContainer,\n\tRadioButtonIcon,\n} from '@src/components/radioButton/RadioButton.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type RadioButtonProps = {\n\tisActive: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tlabel?: string;\n\tcaption?: string;\n\tonValueChange: (checked: boolean, value?: string) => void;\n\tskipHoverState?: boolean;\n\tsize?: 'DEFAULT' \| 'SMALL';\n\tskipSelectingOff?: boolean;\n\tlabelSize?: 'DEFAULT' \| 'MEDIUM';\n\tboldOnChecked?: boolean;\n\talwaysBold?: boolean;\n\tactiveColor?: string;\n\tgapBetweenBodyAndCaption?: string;\n\t'data-test'?: string;\n};\n\nconst CheckMark: React.FC<{\n\tisActive: boolean;\n\tisDisabled: boolean;\n\tisSmall: boolean;\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props?.activeColor \|\| COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\tconst strokeColor = useMemo(\n\t\t() =>\n\t\t\tprops.isDisabled\n\t\t\t\t? COLORS.content.inactive\n\t\t\t\t: props.isActive\n\t\t\t\t? fillColor\n\t\t\t\t: COLORS.content.primary,\n\t\t[props.isDisabled, props.isActive, fillColor],\n\t);\n\n\treturn (\n\t\t<svg\n\t\t\twidth={props.isSmall ? '16' : '20'}\n\t\t\theight={props.isSmall ? '16' : '20'}\n\t\t\tviewBox={props.isSmall ? '0 0 16 16' : '0 0 20 20'}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<circle\n\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\tr={props.isSmall ? 6 : 9}\n\t\t\t\tstroke={strokeColor}\n\t\t\t\tstrokeWidth={props.isSmall ? 1.5 : 2}\n\t\t\t/>\n\t\t\t{props.isActive && (\n\t\t\t\t<circle\n\t\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\t\tr={props.isSmall ? 3 : 5}\n\t\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const RadioButton: React.FC<RadioButtonProps> = (props) => {\n\tconst [isActive, setIsActive] = useState(props.isActive \|\| false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = () => {\n\t\tif (props.skipSelectingOff) {\n\t\t\treturn;\n\t\t}\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isActive;\n\t\t\tsetIsActive(newVal);\n\t\t\tprops.onValueChange?.(newVal, props.value);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsActive(props.isActive);\n\t}, [props.isActive]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif ((props.boldOnChecked && isActive) \|\| props.alwaysBold) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'MEDIUM') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<RadioButtonContainer\n\t\t\tdata-test={props['data-test']}\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tstyle={props.caption ? { alignItems: 'flex-start' } : {}}\n\t\t>\n\t\t\t<RadioButtonIcon\n\t\t\t\tchecked={isActive}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\tsize={props.size}\n\t\t\t\tstyle={props.caption ? { margin: '2px 0' } : {}}\n\t\t\t>\n\t\t\t\t<CheckMark\n\t\t\t\t\tisSmall={props.size === 'SMALL'}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\t\tactiveColor={props.activeColor}\n\t\t\t\t/>\n\t\t\t</RadioButtonIcon>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tgap: props.gapBetweenBodyAndCaption \|\| '0px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{renderLabel()}\n\t\t\t\t{props.caption && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.caption}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</RadioButtonContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","strokeColor","jsxs","jsx","RadioButton","isActive","setIsActive","useState","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","newVal","useEffect","renderLabel","TitleSmall","BodyCaption","BodySecondary","BodyPrimary","Fragment","RadioButtonContainer","RadioButtonIcon"],"mappings":"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"}
1	+ {"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radioButton/RadioButton.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tRadioButtonContainer,\n\tRadioButtonIcon,\n} from '@src/components/radioButton/RadioButton.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type RadioButtonProps = {\n\tisActive: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tlabel?: string;\n\tcaption?: string;\n\tonValueChange: (checked: boolean, value?: string) => void;\n\tskipHoverState?: boolean;\n\tsize?: 'DEFAULT' \| 'SMALL';\n\tskipSelectingOff?: boolean;\n\tlabelSize?: 'DEFAULT' \| 'MEDIUM';\n\tboldOnChecked?: boolean;\n\talwaysBold?: boolean;\n\tactiveColor?: string;\n\tgapBetweenBodyAndCaption?: string;\n\t'data-test'?: string;\n};\n\nconst CheckMark: React.FC<{\n\tisActive: boolean;\n\tisDisabled: boolean;\n\tisSmall: boolean;\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props?.activeColor \|\| COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\tconst strokeColor = useMemo(\n\t\t() =>\n\t\t\tprops.isDisabled\n\t\t\t\t? COLORS.content.inactive\n\t\t\t\t: props.isActive\n\t\t\t\t? fillColor\n\t\t\t\t: COLORS.content.primary,\n\t\t[props.isDisabled, props.isActive, fillColor],\n\t);\n\n\treturn (\n\t\t<svg\n\t\t\twidth={props.isSmall ? '16' : '20'}\n\t\t\theight={props.isSmall ? '16' : '20'}\n\t\t\tviewBox={props.isSmall ? '0 0 16 16' : '0 0 20 20'}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<circle\n\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\tr={props.isSmall ? 6 : 9}\n\t\t\t\tstroke={strokeColor}\n\t\t\t\tstrokeWidth={props.isSmall ? 1.5 : 2}\n\t\t\t/>\n\t\t\t{props.isActive && (\n\t\t\t\t<circle\n\t\t\t\t\tdata-test=\"radio-checked-indicator\"\n\t\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\t\tr={props.isSmall ? 3 : 5}\n\t\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const RadioButton: React.FC<RadioButtonProps> = (props) => {\n\tconst [isActive, setIsActive] = useState(props.isActive \|\| false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = () => {\n\t\tif (props.skipSelectingOff) {\n\t\t\treturn;\n\t\t}\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isActive;\n\t\t\tsetIsActive(newVal);\n\t\t\tprops.onValueChange?.(newVal, props.value);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsActive(props.isActive);\n\t}, [props.isActive]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif ((props.boldOnChecked && isActive) \|\| props.alwaysBold) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'MEDIUM') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<RadioButtonContainer\n\t\t\tdata-test={props['data-test']}\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tstyle={props.caption ? { alignItems: 'flex-start' } : {}}\n\t\t>\n\t\t\t<RadioButtonIcon\n\t\t\t\tchecked={isActive}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\tsize={props.size}\n\t\t\t\tstyle={props.caption ? { margin: '2px 0' } : {}}\n\t\t\t>\n\t\t\t\t<CheckMark\n\t\t\t\t\tisSmall={props.size === 'SMALL'}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\t\tactiveColor={props.activeColor}\n\t\t\t\t/>\n\t\t\t</RadioButtonIcon>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tgap: props.gapBetweenBodyAndCaption \|\| '0px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{renderLabel()}\n\t\t\t\t{props.caption && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.caption}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</RadioButtonContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","strokeColor","jsxs","jsx","RadioButton","isActive","setIsActive","useState","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","newVal","useEffect","renderLabel","TitleSmall","BodyCaption","BodySecondary","BodyPrimary","Fragment","RadioButtonContainer","RadioButtonIcon"],"mappings":"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"}

package/dist/cjs/components/radioList/RadioList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("react"),y=require("./RadioList.styled.js"),o=require("../TypographyStyle.js"),h=require("../../constants/Theme.js"),O=require("../radioButton/RadioButton.js"),R=e=>{const[l,n]=d.useState(e.listItems);d.useEffect(()=>{n(e.listItems)},[e.listItems]);const r=(i,u)=>{let c;const a=[...l];a.forEach(s=>{s.value===u?(c=s,s.isActive=i):s.isActive=!i}),n(a),e.onChange(c)};return t.jsxs(y.RadioListStyled,{children:[(e.title||e.subTitle)&&t.jsxs("div",{className:"title__container",children:[e.title&&t.jsx(o.TitleRegular,{children:e.title}),e.subTitle&&t.jsx(o.BodySecondary,{color:h.COLORS.text.secondary,children:e.subTitle})]}),t.jsx("div",{style:e.listContainerStyles??{},className:"list__container",children:l.map(i=>t.jsx(O.RadioButton,{...i,onValueChange:r,boldOnChecked:e.boldOnChecked},i.value))})]})};exports.RadioList=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),d=require("react"),y=require("./RadioList.styled.js"),o=require("../TypographyStyle.js"),h=require("../../constants/Theme.js"),O=require("../radioButton/RadioButton.js"),R=e=>{const[n,l]=d.useState(e.listItems);d.useEffect(()=>{l(e.listItems)},[e.listItems]);const r=(t,u)=>{let a;const c=[...n];c.forEach(s=>{s.value===u?(a=s,s.isActive=t):s.isActive=!t}),l(c),e.onChange(a)};return i.jsxs(y.RadioListStyled,{children:[(e.title||e.subTitle)&&i.jsxs("div",{className:"title__container",children:[e.title&&i.jsx(o.TitleRegular,{children:e.title}),e.subTitle&&i.jsx(o.BodySecondary,{color:h.COLORS.text.secondary,children:e.subTitle})]}),i.jsx("div",{"data-test":"radio-list-container",style:e.listContainerStyles??{},className:"list__container",children:n.map(t=>i.jsx(O.RadioButton,{"data-test":t.value,...t,onValueChange:r,boldOnChecked:e.boldOnChecked},t.value))})]})};exports.RadioList=R;
 //# sourceMappingURL=RadioList.js.map

package/dist/cjs/components/radioList/RadioList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioList.js","sources":["../../../../src/components/radioList/RadioList.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { RadioButton, RadioButtonProps } from '@src/components/radioButton';\nimport { RadioListStyled } from '@src/components/radioList/RadioList.styled';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\ntype RadioListItem = Omit<RadioButtonProps, 'onValueChange'> & {\n\tvalue: string;\n};\n\nexport type RadioListProps = {\n\ttitle?: string;\n\tsubTitle?: string;\n\tlistItems: RadioListItem[];\n\tonChange: (option: RadioListItem) => void;\n\tlistContainerStyles?: React.CSSProperties;\n\tboldOnChecked?: boolean;\n};\n\nexport const RadioList: React.FC<RadioListProps> = (props) => {\n\tconst [listOptions, setListOptions] = useState<RadioListItem[]>(\n\t\tprops.listItems,\n\t);\n\n\tuseEffect(() => {\n\t\tsetListOptions(props.listItems);\n\t}, [props.listItems]);\n\n\tconst onOptionClicked = (checked: boolean, value: string \| undefined) => {\n\t\tlet selectedOption;\n\t\tconst temptListOptions = [...listOptions];\n\t\ttemptListOptions.forEach((option) => {\n\t\t\tif (option.value === value) {\n\t\t\t\tselectedOption = option;\n\t\t\t\toption['isActive'] = checked;\n\t\t\t} else {\n\t\t\t\toption['isActive'] = !checked;\n\t\t\t}\n\t\t});\n\t\tsetListOptions(temptListOptions);\n\t\tprops.onChange(selectedOption);\n\t};\n\n\treturn (\n\t\t<RadioListStyled>\n\t\t\t{(props.title \|\| props.subTitle) && (\n\t\t\t\t<div className=\"title__container\">\n\t\t\t\t\t{props.title && <TitleRegular>{props.title}</TitleRegular>}\n\t\t\t\t\t{props.subTitle && (\n\t\t\t\t\t\t<BodySecondary color={COLORS.text.secondary}>\n\t\t\t\t\t\t\t{props.subTitle}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div ~~style~~={props.listContainerStyles ?? {}} ~~className~~=\"list__container\">\n\t\t\t\t{listOptions.map((listItem) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\tkey={listItem.value}\n\t\t\t\t\t\t\t{...listItem}\n\t\t\t\t\t\t\tonValueChange={onOptionClicked}\n\t\t\t\t\t\t\tboldOnChecked={props.boldOnChecked}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</RadioListStyled>\n\t);\n};\n"],"names":["RadioList","props","listOptions","setListOptions","useState","useEffect","onOptionClicked","checked","value","selectedOption","temptListOptions","option","RadioListStyled","jsxs","jsx","TitleRegular","BodySecondary","COLORS","listItem","RadioButton"],"mappings":"+RAmBaA,EAAuCC,GAAU,CAC7D,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SACrCH,EAAM,SAAA,EAGPI,EAAAA,UAAU,IAAM,CACfF,EAAeF,EAAM,SAAS,CAC/B,EAAG,CAACA,EAAM,SAAS,CAAC,EAEpB,MAAMK,EAAkB,CAACC,EAAkBC,IAA8B,CACxE,IAAIC,EACJ,MAAMC,EAAmB,CAAC,GAAGR,CAAW,EACxCQ,EAAiB,QAASC,GAAW,CAChCA,EAAO,QAAUH,GACpBC,EAAiBE,EACjBA,EAAO,SAAcJ,GAErBI,EAAO,SAAc,CAACJ,CAExB,CAAC,EACDJ,EAAeO,CAAgB,EAC/BT,EAAM,SAASQ,CAAc,CAC9B,EAEA,cACEG,kBAAA,CACE,SAAA,EAAAX,EAAM,OAASA,EAAM,WACtBY,OAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAAZ,EAAM,OAASa,MAACC,EAAAA,aAAA,CAAc,SAAAd,EAAM,MAAM,EAC1CA,EAAM,UACNa,MAACE,EAAAA,cAAA,CAAc,MAAOC,SAAO,KAAK,UAChC,SAAAhB,EAAM,QAAA,CACR,CAAA,EAEF,EAEDa,EAAAA,IAAC,MAAA,~~CAAI~~,MAAOb,EAAM,qBAAuB,CAAA,~~EAAI~~,UAAU,~~kBACrD~~,SAAAC,EAAY,IAAKgB,GAEhBJ,EAAAA,IAACK,EAAAA,YAAA,~~CAEC~~,~~GAAGD~~,EACJ,cAAeZ,EACf,cAAeL,EAAM,aAAA,~~EAHhBiB~~,EAAS,KAAA,~~CAMhB~~,CAAA,CACF,~~CAAA,~~EACD,CAEF"}
1	+ {"version":3,"file":"RadioList.js","sources":["../../../../src/components/radioList/RadioList.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { RadioButton, RadioButtonProps } from '@src/components/radioButton';\nimport { RadioListStyled } from '@src/components/radioList/RadioList.styled';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\ntype RadioListItem = Omit<RadioButtonProps, 'onValueChange'> & {\n\tvalue: string;\n};\n\nexport type RadioListProps = {\n\ttitle?: string;\n\tsubTitle?: string;\n\tlistItems: RadioListItem[];\n\tonChange: (option: RadioListItem) => void;\n\tlistContainerStyles?: React.CSSProperties;\n\tboldOnChecked?: boolean;\n};\n\nexport const RadioList: React.FC<RadioListProps> = (props) => {\n\tconst [listOptions, setListOptions] = useState<RadioListItem[]>(\n\t\tprops.listItems,\n\t);\n\n\tuseEffect(() => {\n\t\tsetListOptions(props.listItems);\n\t}, [props.listItems]);\n\n\tconst onOptionClicked = (checked: boolean, value: string \| undefined) => {\n\t\tlet selectedOption;\n\t\tconst temptListOptions = [...listOptions];\n\t\ttemptListOptions.forEach((option) => {\n\t\t\tif (option.value === value) {\n\t\t\t\tselectedOption = option;\n\t\t\t\toption['isActive'] = checked;\n\t\t\t} else {\n\t\t\t\toption['isActive'] = !checked;\n\t\t\t}\n\t\t});\n\t\tsetListOptions(temptListOptions);\n\t\tprops.onChange(selectedOption);\n\t};\n\n\treturn (\n\t\t<RadioListStyled>\n\t\t\t{(props.title \|\| props.subTitle) && (\n\t\t\t\t<div className=\"title__container\">\n\t\t\t\t\t{props.title && <TitleRegular>{props.title}</TitleRegular>}\n\t\t\t\t\t{props.subTitle && (\n\t\t\t\t\t\t<BodySecondary color={COLORS.text.secondary}>\n\t\t\t\t\t\t\t{props.subTitle}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tdata-test=\"radio-list-container\"\n\t\t\t\tstyle={props.listContainerStyles ?? {}}\n\t\t\t\tclassName=\"list__container\"\n\t\t\t>\n\t\t\t\t{listOptions.map((listItem) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\tkey={listItem.value}\n\t\t\t\t\t\t\tdata-test={listItem.value}\n\t\t\t\t\t\t\t{...listItem}\n\t\t\t\t\t\t\tonValueChange={onOptionClicked}\n\t\t\t\t\t\t\tboldOnChecked={props.boldOnChecked}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</RadioListStyled>\n\t);\n};\n"],"names":["RadioList","props","listOptions","setListOptions","useState","useEffect","onOptionClicked","checked","value","selectedOption","temptListOptions","option","RadioListStyled","jsxs","jsx","TitleRegular","BodySecondary","COLORS","listItem","RadioButton"],"mappings":"+RAmBaA,EAAuCC,GAAU,CAC7D,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SACrCH,EAAM,SAAA,EAGPI,EAAAA,UAAU,IAAM,CACfF,EAAeF,EAAM,SAAS,CAC/B,EAAG,CAACA,EAAM,SAAS,CAAC,EAEpB,MAAMK,EAAkB,CAACC,EAAkBC,IAA8B,CACxE,IAAIC,EACJ,MAAMC,EAAmB,CAAC,GAAGR,CAAW,EACxCQ,EAAiB,QAASC,GAAW,CAChCA,EAAO,QAAUH,GACpBC,EAAiBE,EACjBA,EAAO,SAAcJ,GAErBI,EAAO,SAAc,CAACJ,CAExB,CAAC,EACDJ,EAAeO,CAAgB,EAC/BT,EAAM,SAASQ,CAAc,CAC9B,EAEA,cACEG,kBAAA,CACE,SAAA,EAAAX,EAAM,OAASA,EAAM,WACtBY,OAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAAZ,EAAM,OAASa,MAACC,EAAAA,aAAA,CAAc,SAAAd,EAAM,MAAM,EAC1CA,EAAM,UACNa,MAACE,EAAAA,cAAA,CAAc,MAAOC,SAAO,KAAK,UAChC,SAAAhB,EAAM,QAAA,CACR,CAAA,EAEF,EAEDa,EAAAA,IAAC,MAAA,CACA,YAAU,uBACV,MAAOb,EAAM,qBAAuB,CAAA,EACpC,UAAU,kBAET,SAAAC,EAAY,IAAKgB,GAEhBJ,EAAAA,IAACK,EAAAA,YAAA,CAEA,YAAWD,EAAS,MACnB,GAAGA,EACJ,cAAeZ,EACf,cAAeL,EAAM,aAAA,EAJhBiB,EAAS,KAAA,CAOhB,CAAA,CAAA,CACF,EACD,CAEF"}

package/dist/cjs/components/searchBar/searchBar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("react/jsx-runtime"),m=require("../../assets/icons/searchIcon.js"),t=require("react"),q=require("../../assets/icons/cross.svg.js"),y=require("../input/Input.js"),B=e=>{const{isEnabled:s,onEnter:d,placeholder:g,width:b,variant:C,validate:v,isActive:i}=e,[h,n]=t.useState("search"),[f,o]=t.useState("default"),[I,a]=t.useState(i?"active":s?"none":"disabled"),[u,l]=t.useState(e.initialValue||e.searchValue||"");t.useEffect(()=>{l(e.searchValue??""),e.searchValue?.trim()?.length?n("cross"):n("search")},[e.searchValue]),t.useEffect(()=>{a(i?"active":s?"none":"disabled")},[s,i]),t.useEffect(()=>{e.reset&&S()},[e?.reset]);const k=(c,r)=>{if(e.onChange(c),l(c),r?.type==="keydown"&&(r.which===13||r.keyCode===13)){E(c);return}c.trim().length?n("cross"):n("search")},E=c=>{s&&d(c)},S=()=>{n("search"),o("default"),l(""),e.onChange(""),a("none"),d("")};return V.jsx(y.Input,{"data-test":e["data-test"],id:"search-bar",validate:v,onFocus:()=>{u.length&&n("cross"),f==="default"&&s&&(o("clicked"),a("active"))},width:b,state:I,leftIcon:h==="search"&&f==="default"?{icon:m.SearchIcon}:void 0,rightIcon:h==="cross"&&!e.suffixButton?{icon:q.default,callback:()=>{S(),e.onClickCross&&e.onClickCross()}}:void 0,onChangeText:k,placeholder:g,variant:C,value:u,onBlur:()=>{u.length||o("default"),a("none")},button:{text:"",buttonProps:e.suffixButton}})};exports.SearchBar=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("react/jsx-runtime"),m=require("../../assets/icons/searchIcon.js"),t=require("react"),q=require("../../assets/icons/cross.svg.js"),y=require("../input/Input.js"),B=e=>{const{isEnabled:s,onEnter:d,placeholder:g,width:b,variant:C,validate:v,isActive:i}=e,[h,n]=t.useState("search"),[f,o]=t.useState("default"),[I,a]=t.useState(i?"active":s?"none":"disabled"),[u,r]=t.useState(e.initialValue||e.searchValue||"");t.useEffect(()=>{r(e.searchValue??""),e.searchValue?.trim()?.length?n("cross"):n("search")},[e.searchValue]),t.useEffect(()=>{a(i?"active":s?"none":"disabled")},[s,i]),t.useEffect(()=>{e.reset&&S()},[e?.reset]);const k=(c,l)=>{if(e.onChange(c),r(c),l?.type==="keydown"&&(l.which===13||l.keyCode===13)){E(c);return}c.trim().length?n("cross"):n("search")},E=c=>{s&&d(c)},S=()=>{n("search"),o("default"),r(""),e.onChange(""),a("none"),d("")};return V.jsx(y.Input,{"data-test":e["data-test"],id:"search-bar",validate:v,onFocus:()=>{u.length&&n("cross"),f==="default"&&s&&(o("clicked"),a("active"))},width:b,state:I,leftIcon:h==="search"&&f==="default"?{icon:m.SearchIcon}:void 0,rightIcon:h==="cross"&&!e.suffixButton?{icon:q.default,callback:()=>{S(),e.onClickCross&&e.onClickCross()},"data-test":"search-clear-icon"}:void 0,onChangeText:k,placeholder:g,variant:C,value:u,onBlur:()=>{u.length||o("default"),a("none")},button:{text:"",buttonProps:e.suffixButton}})};exports.SearchBar=B;
 //# sourceMappingURL=searchBar.js.map

package/dist/cjs/components/searchBar/searchBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"searchBar.js","sources":["../../../../src/components/searchBar/searchBar.tsx"],"sourcesContent":["import { SearchIcon } from '@src/assets/icons/searchIcon';\nimport { useEffect, useState } from 'react';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { ButtonProps } from '../button/model';\nimport { Input } from '../input/Input';\nimport { InputVariant } from '../input/Input.model';\n\nexport interface SearchBarProps {\n\twidth: string;\n\tisEnabled: boolean;\n\tonChange: (searchText: string) => void;\n\tonEnter: (searchText: string) => void;\n\tplaceholder: string;\n\tvariant: InputVariant;\n\tvalidate?: (input?: string \| number) => [boolean, string];\n\tinitialValue?: string;\n\treset?: boolean;\n\tonClickCross?: () => void;\n\tisActive?: boolean;\n\tsuffixButton?: ButtonProps;\n\tsearchValue?: string;\n\t'data-test'?: string;\n}\n\ntype ActiveStates = 'none' \| 'disabled' \| 'active';\ntype Mode = 'default' \| 'clicked';\n\nexport const SearchBar = (props: SearchBarProps) => {\n\tconst {\n\t\tisEnabled,\n\t\tonEnter,\n\t\tplaceholder,\n\t\twidth,\n\t\tvariant,\n\t\tvalidate,\n\t\tisActive,\n\t} = props;\n\tconst [icon, setIcon] = useState<string>('search');\n\tconst [mode, setMode] = useState<Mode>('default');\n\tconst [inputState, setInputState] = useState<ActiveStates>(\n\t\tisActive ? 'active' : isEnabled ? 'none' : 'disabled',\n\t);\n\tconst [value, setValue] = useState<string>(\n\t\tprops.initialValue \|\| props.searchValue \|\| '',\n\t);\n\n\tuseEffect(() => {\n\t\tsetValue(props.searchValue ?? '');\n\t\tif (props.searchValue?.trim()?.length) {\n\t\t\tsetIcon('cross');\n\t\t} else {\n\t\t\tsetIcon('search');\n\t\t}\n\t}, [props.searchValue]);\n\n\tuseEffect(() => {\n\t\tisActive\n\t\t\t? setInputState('active')\n\t\t\t: isEnabled\n\t\t\t? setInputState('none')\n\t\t\t: setInputState('disabled');\n\t}, [isEnabled, isActive]);\n\n\tuseEffect(() => {\n\t\tprops.reset && resetSearch();\n\t}, [props?.reset]);\n\n\tconst handleOnChange = (searchText: string, event: any) => {\n\t\tprops.onChange(searchText);\n\t\tsetValue(searchText);\n\n\t\tif (\n\t\t\tevent?.type === 'keydown' &&\n\t\t\t(event.which === 13 \|\| event.keyCode === 13)\n\t\t) {\n\t\t\thandleEnter(searchText);\n\t\t\treturn;\n\t\t}\n\n\t\tif (searchText.trim().length) {\n\t\t\tsetIcon('cross');\n\t\t} else {\n\t\t\tsetIcon('search');\n\t\t}\n\t};\n\n\tconst handleEnter = (searchText: string) => {\n\t\tisEnabled && onEnter(searchText);\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetIcon('search');\n\t\tsetMode('default');\n\t\tsetValue('');\n\t\tprops.onChange('');\n\t\tsetInputState('none');\n\t\tonEnter('');\n\t};\n\n\treturn (\n\t\t<Input\n\t\t\tdata-test={props['data-test']}\n\t\t\tid=\"search-bar\"\n\t\t\tvalidate={validate}\n\t\t\tonFocus={() => {\n\t\t\t\tif (value.length) setIcon('cross');\n\t\t\t\tif (mode === 'default') {\n\t\t\t\t\tif (isEnabled) {\n\t\t\t\t\t\tsetMode('clicked');\n\t\t\t\t\t\tsetInputState('active');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t\twidth={width}\n\t\t\tstate={inputState}\n\t\t\tleftIcon={\n\t\t\t\ticon === 'search' && mode === 'default'\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ticon: SearchIcon,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trightIcon={\n\t\t\t\ticon === 'cross' && !props.suffixButton\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ticon: CrossIcon,\n\t\t\t\t\t\t\tcallback: () => {\n\t\t\t\t\t\t\t\tresetSearch();\n\t\t\t\t\t\t\t\tprops.onClickCross && props.onClickCross();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tonChangeText={handleOnChange}\n\t\t\tplaceholder={placeholder}\n\t\t\tvariant={variant}\n\t\t\tvalue={value}\n\t\t\tonBlur={() => {\n\t\t\t\tif (!value.length) {\n\t\t\t\t\tsetMode('default');\n\t\t\t\t}\n\t\t\t\tsetInputState('none');\n\t\t\t}}\n\t\t\tbutton={{ text: '', buttonProps: props.suffixButton }}\n\t\t/>\n\t);\n};\n"],"names":["SearchBar","props","isEnabled","onEnter","placeholder","width","variant","validate","isActive","icon","setIcon","useState","mode","setMode","inputState","setInputState","value","setValue","useEffect","resetSearch","handleOnChange","searchText","event","handleEnter","jsx","Input","SearchIcon","CrossIcon"],"mappings":"kQA2BaA,EAAaC,GAA0B,CACnD,KAAM,CACL,UAAAC,EACA,QAAAC,EACA,YAAAC,EACA,MAAAC,EACA,QAAAC,EACA,SAAAC,EACA,SAAAC,CAAA,EACGP,EACE,CAACQ,EAAMC,CAAO,EAAIC,EAAAA,SAAiB,QAAQ,EAC3C,CAACC,EAAMC,CAAO,EAAIF,EAAAA,SAAe,SAAS,EAC1C,CAACG,EAAYC,CAAa,EAAIJ,EAAAA,SACnCH,EAAW,SAAWN,EAAY,OAAS,UAAA,EAEtC,CAACc,EAAOC,CAAQ,EAAIN,EAAAA,SACzBV,EAAM,cAAgBA,EAAM,aAAe,EAAA,EAG5CiB,EAAAA,UAAU,IAAM,CACfD,EAAShB,EAAM,aAAe,EAAE,EAC5BA,EAAM,aAAa,KAAA,GAAQ,OAC9BS,EAAQ,OAAO,EAEfA,EAAQ,QAAQ,CAElB,EAAG,CAACT,EAAM,WAAW,CAAC,EAEtBiB,EAAAA,UAAU,IAAM,CAEZH,EADHP,EACiB,SACdN,EACc,OACA,UAHQ,CAI1B,EAAG,CAACA,EAAWM,CAAQ,CAAC,EAExBU,EAAAA,UAAU,IAAM,CACfjB,EAAM,OAASkB,EAAA,CAChB,EAAG,CAAClB,GAAO,KAAK,CAAC,EAEjB,MAAMmB,EAAiB,CAACC,EAAoBC,IAAe,CAI1D,GAHArB,EAAM,SAASoB,CAAU,EACzBJ,EAASI,CAAU,EAGlBC,GAAO,OAAS,YACfA,EAAM,QAAU,IAAMA,EAAM,UAAY,IACxC,CACDC,EAAYF,CAAU,EACtB,MACD,CAEIA,EAAW,KAAA,EAAO,OACrBX,EAAQ,OAAO,EAEfA,EAAQ,QAAQ,CAElB,EAEMa,EAAeF,GAAuB,CAC3CnB,GAAaC,EAAQkB,CAAU,CAChC,EAEMF,EAAc,IAAM,CACzBT,EAAQ,QAAQ,EAChBG,EAAQ,SAAS,EACjBI,EAAS,EAAE,EACXhB,EAAM,SAAS,EAAE,EACjBc,EAAc,MAAM,EACpBZ,EAAQ,EAAE,CACX,EAEA,OACCqB,EAAAA,IAACC,EAAAA,MAAA,CACA,YAAWxB,EAAM,WAAW,EAC5B,GAAG,aACH,SAAAM,EACA,QAAS,IAAM,CACVS,EAAM,QAAQN,EAAQ,OAAO,EAC7BE,IAAS,WACRV,IACHW,EAAQ,SAAS,EACjBE,EAAc,QAAQ,EAGzB,EACA,MAAAV,EACA,MAAOS,EACP,SACCL,IAAS,UAAYG,IAAS,UAC3B,CACA,KAAMc,EAAAA,UAAA,EAEN,OAEJ,UACCjB,IAAS,SAAW,CAACR,EAAM,aACxB,CACA,KAAM0B,EAAAA,QACN,SAAU,IAAM,CACfR,EAAA,EACAlB,EAAM,cAAgBA,EAAM,aAAA,CAC7B,~~CAAA~~,~~EAEA~~,OAEJ,aAAcmB,EACd,YAAAhB,EACA,QAAAE,EACA,MAAAU,EACA,OAAQ,IAAM,CACRA,EAAM,QACVH,EAAQ,SAAS,EAElBE,EAAc,MAAM,CACrB,EACA,OAAQ,CAAE,KAAM,GAAI,YAAad,EAAM,YAAA,CAAa,CAAA,CAGvD"}
1	+ {"version":3,"file":"searchBar.js","sources":["../../../../src/components/searchBar/searchBar.tsx"],"sourcesContent":["import { SearchIcon } from '@src/assets/icons/searchIcon';\nimport { useEffect, useState } from 'react';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { ButtonProps } from '../button/model';\nimport { Input } from '../input/Input';\nimport { InputVariant } from '../input/Input.model';\n\nexport interface SearchBarProps {\n\twidth: string;\n\tisEnabled: boolean;\n\tonChange: (searchText: string) => void;\n\tonEnter: (searchText: string) => void;\n\tplaceholder: string;\n\tvariant: InputVariant;\n\tvalidate?: (input?: string \| number) => [boolean, string];\n\tinitialValue?: string;\n\treset?: boolean;\n\tonClickCross?: () => void;\n\tisActive?: boolean;\n\tsuffixButton?: ButtonProps;\n\tsearchValue?: string;\n\t'data-test'?: string;\n}\n\ntype ActiveStates = 'none' \| 'disabled' \| 'active';\ntype Mode = 'default' \| 'clicked';\n\nexport const SearchBar = (props: SearchBarProps) => {\n\tconst {\n\t\tisEnabled,\n\t\tonEnter,\n\t\tplaceholder,\n\t\twidth,\n\t\tvariant,\n\t\tvalidate,\n\t\tisActive,\n\t} = props;\n\tconst [icon, setIcon] = useState<string>('search');\n\tconst [mode, setMode] = useState<Mode>('default');\n\tconst [inputState, setInputState] = useState<ActiveStates>(\n\t\tisActive ? 'active' : isEnabled ? 'none' : 'disabled',\n\t);\n\tconst [value, setValue] = useState<string>(\n\t\tprops.initialValue \|\| props.searchValue \|\| '',\n\t);\n\n\tuseEffect(() => {\n\t\tsetValue(props.searchValue ?? '');\n\t\tif (props.searchValue?.trim()?.length) {\n\t\t\tsetIcon('cross');\n\t\t} else {\n\t\t\tsetIcon('search');\n\t\t}\n\t}, [props.searchValue]);\n\n\tuseEffect(() => {\n\t\tisActive\n\t\t\t? setInputState('active')\n\t\t\t: isEnabled\n\t\t\t? setInputState('none')\n\t\t\t: setInputState('disabled');\n\t}, [isEnabled, isActive]);\n\n\tuseEffect(() => {\n\t\tprops.reset && resetSearch();\n\t}, [props?.reset]);\n\n\tconst handleOnChange = (searchText: string, event: any) => {\n\t\tprops.onChange(searchText);\n\t\tsetValue(searchText);\n\n\t\tif (\n\t\t\tevent?.type === 'keydown' &&\n\t\t\t(event.which === 13 \|\| event.keyCode === 13)\n\t\t) {\n\t\t\thandleEnter(searchText);\n\t\t\treturn;\n\t\t}\n\n\t\tif (searchText.trim().length) {\n\t\t\tsetIcon('cross');\n\t\t} else {\n\t\t\tsetIcon('search');\n\t\t}\n\t};\n\n\tconst handleEnter = (searchText: string) => {\n\t\tisEnabled && onEnter(searchText);\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetIcon('search');\n\t\tsetMode('default');\n\t\tsetValue('');\n\t\tprops.onChange('');\n\t\tsetInputState('none');\n\t\tonEnter('');\n\t};\n\n\treturn (\n\t\t<Input\n\t\t\tdata-test={props['data-test']}\n\t\t\tid=\"search-bar\"\n\t\t\tvalidate={validate}\n\t\t\tonFocus={() => {\n\t\t\t\tif (value.length) setIcon('cross');\n\t\t\t\tif (mode === 'default') {\n\t\t\t\t\tif (isEnabled) {\n\t\t\t\t\t\tsetMode('clicked');\n\t\t\t\t\t\tsetInputState('active');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t\twidth={width}\n\t\t\tstate={inputState}\n\t\t\tleftIcon={\n\t\t\t\ticon === 'search' && mode === 'default'\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ticon: SearchIcon,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trightIcon={\n\t\t\t\ticon === 'cross' && !props.suffixButton\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ticon: CrossIcon,\n\t\t\t\t\t\t\tcallback: () => {\n\t\t\t\t\t\t\t\tresetSearch();\n\t\t\t\t\t\t\t\tprops.onClickCross && props.onClickCross();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t'data-test': 'search-clear-icon',\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tonChangeText={handleOnChange}\n\t\t\tplaceholder={placeholder}\n\t\t\tvariant={variant}\n\t\t\tvalue={value}\n\t\t\tonBlur={() => {\n\t\t\t\tif (!value.length) {\n\t\t\t\t\tsetMode('default');\n\t\t\t\t}\n\t\t\t\tsetInputState('none');\n\t\t\t}}\n\t\t\tbutton={{ text: '', buttonProps: props.suffixButton }}\n\t\t/>\n\t);\n};\n"],"names":["SearchBar","props","isEnabled","onEnter","placeholder","width","variant","validate","isActive","icon","setIcon","useState","mode","setMode","inputState","setInputState","value","setValue","useEffect","resetSearch","handleOnChange","searchText","event","handleEnter","jsx","Input","SearchIcon","CrossIcon"],"mappings":"kQA2BaA,EAAaC,GAA0B,CACnD,KAAM,CACL,UAAAC,EACA,QAAAC,EACA,YAAAC,EACA,MAAAC,EACA,QAAAC,EACA,SAAAC,EACA,SAAAC,CAAA,EACGP,EACE,CAACQ,EAAMC,CAAO,EAAIC,EAAAA,SAAiB,QAAQ,EAC3C,CAACC,EAAMC,CAAO,EAAIF,EAAAA,SAAe,SAAS,EAC1C,CAACG,EAAYC,CAAa,EAAIJ,EAAAA,SACnCH,EAAW,SAAWN,EAAY,OAAS,UAAA,EAEtC,CAACc,EAAOC,CAAQ,EAAIN,EAAAA,SACzBV,EAAM,cAAgBA,EAAM,aAAe,EAAA,EAG5CiB,EAAAA,UAAU,IAAM,CACfD,EAAShB,EAAM,aAAe,EAAE,EAC5BA,EAAM,aAAa,KAAA,GAAQ,OAC9BS,EAAQ,OAAO,EAEfA,EAAQ,QAAQ,CAElB,EAAG,CAACT,EAAM,WAAW,CAAC,EAEtBiB,EAAAA,UAAU,IAAM,CAEZH,EADHP,EACiB,SACdN,EACc,OACA,UAHQ,CAI1B,EAAG,CAACA,EAAWM,CAAQ,CAAC,EAExBU,EAAAA,UAAU,IAAM,CACfjB,EAAM,OAASkB,EAAA,CAChB,EAAG,CAAClB,GAAO,KAAK,CAAC,EAEjB,MAAMmB,EAAiB,CAACC,EAAoBC,IAAe,CAI1D,GAHArB,EAAM,SAASoB,CAAU,EACzBJ,EAASI,CAAU,EAGlBC,GAAO,OAAS,YACfA,EAAM,QAAU,IAAMA,EAAM,UAAY,IACxC,CACDC,EAAYF,CAAU,EACtB,MACD,CAEIA,EAAW,KAAA,EAAO,OACrBX,EAAQ,OAAO,EAEfA,EAAQ,QAAQ,CAElB,EAEMa,EAAeF,GAAuB,CAC3CnB,GAAaC,EAAQkB,CAAU,CAChC,EAEMF,EAAc,IAAM,CACzBT,EAAQ,QAAQ,EAChBG,EAAQ,SAAS,EACjBI,EAAS,EAAE,EACXhB,EAAM,SAAS,EAAE,EACjBc,EAAc,MAAM,EACpBZ,EAAQ,EAAE,CACX,EAEA,OACCqB,EAAAA,IAACC,EAAAA,MAAA,CACA,YAAWxB,EAAM,WAAW,EAC5B,GAAG,aACH,SAAAM,EACA,QAAS,IAAM,CACVS,EAAM,QAAQN,EAAQ,OAAO,EAC7BE,IAAS,WACRV,IACHW,EAAQ,SAAS,EACjBE,EAAc,QAAQ,EAGzB,EACA,MAAAV,EACA,MAAOS,EACP,SACCL,IAAS,UAAYG,IAAS,UAC3B,CACA,KAAMc,EAAAA,UAAA,EAEN,OAEJ,UACCjB,IAAS,SAAW,CAACR,EAAM,aACxB,CACA,KAAM0B,EAAAA,QACN,SAAU,IAAM,CACfR,EAAA,EACAlB,EAAM,cAAgBA,EAAM,aAAA,CAC7B,EACA,YAAa,mBAAA,EAEb,OAEJ,aAAcmB,EACd,YAAAhB,EACA,QAAAE,EACA,MAAAU,EACA,OAAQ,IAAM,CACRA,EAAM,QACVH,EAAQ,SAAS,EAElBE,EAAc,MAAM,CACrB,EACA,OAAQ,CAAE,KAAM,GAAI,YAAad,EAAM,YAAA,CAAa,CAAA,CAGvD"}

package/dist/cjs/components/shimmer-image/ShimmerImage.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react"),f=require("../shimmer/ShimmerComponent/BikShimmer.js"),g="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",h=({imageUrl:s,width:o,height:a,borderRadius:r,alt:c,useDynamicInfoImageSize:n,defaultImageUrl:u=g,imagePreviewStyles:b})=>{const[l,m]=i.useState(!0),[p,d]=i.useState(!1);return i.useEffect(()=>{const e=new Image;return e.src=s,e.onload=()=>{d(!1),m(!1)},e.onerror=()=>{d(!0),m(!1)},()=>{e.onload=null,e.onerror=null}},[s]),t.jsxs("div",{style:{position:"relative",width:n?`min(100%, ${o}px)`:o,...n?{aspectRatio:1}:{height:a},borderRadius:r},children:[l&&t.jsx(f.BikShimmer,{boxes:[{height:`${a}px`,width:`${o}px`,marginTop:"0px"}]}),p?t.jsx("img",{src:u,alt:c??"Image",style:{borderRadius:r??0,display:"block",width:"100%",height:"100%",objectFit:"cover"}}):t.jsx("img",{src:s,alt:c??"Image",style:{borderRadius:r??0,display:l?"none":"block",width:"100%",height:"100%",objectFit:"cover",...b}})]})};exports.DEFAULT_IMAGE=g;exports.ShimmerImage=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),f=require("../shimmer/ShimmerComponent/BikShimmer.js"),g="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",h=({imageUrl:s,width:o,height:a,borderRadius:i,alt:c,useDynamicInfoImageSize:n,defaultImageUrl:u=g,imagePreviewStyles:b})=>{const[l,m]=r.useState(!0),[p,d]=r.useState(!1);return r.useEffect(()=>{const e=new Image;return e.src=s,e.onload=()=>{d(!1),m(!1)},e.onerror=()=>{d(!0),m(!1)},()=>{e.onload=null,e.onerror=null}},[s]),t.jsxs("div",{style:{position:"relative",width:n?`min(100%, ${o}px)`:o,...n?{aspectRatio:1}:{height:a},borderRadius:i},"data-testid":"shimmer-image-container",children:[l&&t.jsx(f.BikShimmer,{boxes:[{height:`${a}px`,width:`${o}px`,marginTop:"0px"}]}),p?t.jsx("img",{src:u,alt:c??"Image",style:{borderRadius:i??0,display:"block",width:"100%",height:"100%",objectFit:"cover"}}):t.jsx("img",{src:s,alt:c??"Image",style:{borderRadius:i??0,display:l?"none":"block",width:"100%",height:"100%",objectFit:"cover",...b}})]})};exports.DEFAULT_IMAGE=g;exports.ShimmerImage=h;
 //# sourceMappingURL=ShimmerImage.js.map

package/dist/cjs/components/shimmer-image/ShimmerImage.js.map CHANGED Viewed

	@@ -1 +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":"+LAcaA,EACZ,+KAEYC,EAA4C,CAAC,CACzD,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,IAAAC,EACA,wBAAAC,EACA,gBAAAC,EAAkBR,EAClB,mBAAAS,CACD,IAAM,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAI,EACzC,CAACC,EAASC,CAAU,EAAIF,EAAAA,SAAS,EAAK,EAE5CG,OAAAA,EAAAA,UAAU,IAAM,CACf,MAAMC,EAAQ,IAAI,MAClB,OAAAA,EAAM,IAAMd,EAEZc,EAAM,OAAS,IAAM,CACpBF,EAAW,EAAK,EAChBH,EAAa,EAAK,CACnB,EAEAK,EAAM,QAAU,IAAM,CACrBF,EAAW,EAAI,EACfH,EAAa,EAAK,CACnB,EAEO,IAAM,CACZK,EAAM,OAAS,KACfA,EAAM,QAAU,IACjB,CACD,EAAG,CAACd,CAAQ,CAAC,EAGZe,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,SAAU,WACV,MAAOV,EAA0B,aAAaJ,CAAK,MAAQA,EAC3D,GAAII,EAA0B,CAAE,YAAa,CAAA,EAAM,CAAE,OAAAH,CAAA,EACrD,aAAAC,CAAA,~~EAGA~~,SAAA,CAAAK,GACAQ,EAAAA,IAACC,EAAAA,WAAA,CACA,MAAO,CACN,CAAE,OAAQ,GAAGf,CAAM,KAAM,MAAO,GAAGD,CAAK,KAAM,UAAW,KAAA,CAAM,CAChE,CAAA,EAGDU,EACAK,EAAAA,IAAC,MAAA,CACA,IAAKV,EACL,IAAKF,GAAO,QACZ,MAAO,CACN,aAAcD,GAAgB,EAC9B,QAAS,QACT,MAAO,OACP,OAAQ,OACR,UAAW,OAAA,CACZ,CAAA,~~EAIDa~~,EAAAA,IAAC,MAAA,CACA,IAAKhB,EACL,IAAKI,GAAO,QACZ,MAAO,CACN,aAAcD,GAAgB,EAC9B,QAASK,EAAY,OAAS,QAC9B,MAAO,OACP,OAAQ,OACR,UAAW,QACX,GAAGD,CAAA,CACJ,CAAA,CACD,CAAA,CAAA,CAIJ"}
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\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":"+LAcaA,EACZ,+KAEYC,EAA4C,CAAC,CACzD,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,IAAAC,EACA,wBAAAC,EACA,gBAAAC,EAAkBR,EAClB,mBAAAS,CACD,IAAM,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAI,EACzC,CAACC,EAASC,CAAU,EAAIF,EAAAA,SAAS,EAAK,EAE5CG,OAAAA,EAAAA,UAAU,IAAM,CACf,MAAMC,EAAQ,IAAI,MAClB,OAAAA,EAAM,IAAMd,EAEZc,EAAM,OAAS,IAAM,CACpBF,EAAW,EAAK,EAChBH,EAAa,EAAK,CACnB,EAEAK,EAAM,QAAU,IAAM,CACrBF,EAAW,EAAI,EACfH,EAAa,EAAK,CACnB,EAEO,IAAM,CACZK,EAAM,OAAS,KACfA,EAAM,QAAU,IACjB,CACD,EAAG,CAACd,CAAQ,CAAC,EAGZe,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,SAAU,WACV,MAAOV,EAA0B,aAAaJ,CAAK,MAAQA,EAC3D,GAAII,EAA0B,CAAE,YAAa,CAAA,EAAM,CAAE,OAAAH,CAAA,EACrD,aAAAC,CAAA,EAED,cAAY,0BAEX,SAAA,CAAAK,GACAQ,EAAAA,IAACC,EAAAA,WAAA,CACA,MAAO,CACN,CAAE,OAAQ,GAAGf,CAAM,KAAM,MAAO,GAAGD,CAAK,KAAM,UAAW,KAAA,CAAM,CAChE,CAAA,EAGDU,EACAK,EAAAA,IAAC,MAAA,CACA,IAAKV,EACL,IAAKF,GAAO,QACZ,MAAO,CACN,aAAcD,GAAgB,EAC9B,QAAS,QACT,MAAO,OACP,OAAQ,OACR,UAAW,OAAA,CACZ,CAAA,EAGDa,EAAAA,IAAC,MAAA,CACA,IAAKhB,EACL,IAAKI,GAAO,QACZ,MAAO,CACN,aAAcD,GAAgB,EAC9B,QAASK,EAAY,OAAS,QAC9B,MAAO,OACP,OAAQ,OACR,UAAW,QACX,GAAGD,CAAA,CACJ,CAAA,CACD,CAAA,CAAA,CAIJ"}

package/dist/cjs/components/side-modal/SideModal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),a=require("react-dom"),u=require("../../assets/icons/cross.svg.js"),s=require("../TypographyStyle.js"),o=require("./SideModal.style.js"),i=require("../button/Button.js"),h=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=h(a),f=e=>{const{closeOnEscapeKey:n,onClose:d}=e;return l.useEffect(()=>{if(!(n??!0))return;const r=c=>{c.key==="Escape"&&d()};return document.addEventListener("keydown",r),()=>{document.removeEventListener("keydown",r)}},[n,d]),y.default.createPortal(t.jsx(o.SideModalStyle,{zIndex:e.zIndex,children:t.jsxs(o.SideModalContainer,{width:e.width,children:[t.jsxs(o.SideModalHeader,{headerStyle:{...e.headerStyle},children:[e?.headerCustomComponent||t.jsx(s.TitleMedium,{children:e.header}),!e.hideCrossButton&&t.jsx(u.default,{width:24,height:24,onClick:e.onClose})," "]}),t.jsxs(o.SideModalBody,{hideFooter:e.hideFooter,bodyStyle:{...e.bodyStyle},children:[e.children," "]}),e.hideFooter===!0?null:t.jsxs(o.SideModalFooter,{footerDirection:e.footerDirection,footerStyle:{...e.footerStyle},children:[(e.saveButtonProps||e.cancelButtonProps)&&t.jsxs(o.FooterButtonWrapper,{footerDirection:e.footerDirection,children:[e.saveButtonProps&&t.jsx(i.Button,{...e.saveButtonProps}),e.cancelButtonProps&&t.jsx(i.Button,{...e.cancelButtonProps})," "]}),e.footerCustomComponent?e.footerCustomComponent:t.jsx(t.Fragment,{})," "]})," "]})}),e.element??document.body)};exports.SideModal=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),a=require("react-dom"),u=require("../../assets/icons/cross.svg.js"),s=require("../TypographyStyle.js"),o=require("./SideModal.style.js"),r=require("../button/Button.js"),h=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=h(a),f=e=>{const{closeOnEscapeKey:n,onClose:d}=e;return l.useEffect(()=>{if(!(n??!0))return;const i=c=>{c.key==="Escape"&&d()};return document.addEventListener("keydown",i),()=>{document.removeEventListener("keydown",i)}},[n,d]),y.default.createPortal(t.jsx(o.SideModalStyle,{zIndex:e.zIndex,children:t.jsxs(o.SideModalContainer,{width:e.width,children:[t.jsxs(o.SideModalHeader,{headerStyle:{...e.headerStyle},children:[e?.headerCustomComponent||t.jsx(s.TitleMedium,{children:e.header}),!e.hideCrossButton&&t.jsx(u.default,{width:24,height:24,onClick:e.onClose,"data-test":"side-modal-close-button"})," "]}),t.jsxs(o.SideModalBody,{hideFooter:e.hideFooter,bodyStyle:{...e.bodyStyle},children:[e.children," "]}),e.hideFooter===!0?null:t.jsxs(o.SideModalFooter,{footerDirection:e.footerDirection,footerStyle:{...e.footerStyle},children:[(e.saveButtonProps||e.cancelButtonProps)&&t.jsxs(o.FooterButtonWrapper,{footerDirection:e.footerDirection,children:[e.saveButtonProps&&t.jsx(r.Button,{...e.saveButtonProps}),e.cancelButtonProps&&t.jsx(r.Button,{...e.cancelButtonProps})," "]}),e.footerCustomComponent?e.footerCustomComponent:t.jsx(t.Fragment,{})," "]})," "]})}),e.element??document.body)};exports.SideModal=f;
 //# sourceMappingURL=SideModal.js.map

package/dist/cjs/components/side-modal/SideModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideModal.js","sources":["../../../../src/components/side-modal/SideModal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { TitleMedium } from '../TypographyStyle';\nimport {\n\tFooterButtonWrapper,\n\tSideModalBody,\n\tSideModalContainer,\n\tSideModalFooter,\n\tSideModalHeader,\n\tSideModalStyle,\n} from './SideModal.style';\n\nexport interface SideModalProps {\n\theader: string;\n\tchildren: React.ReactNode;\n\theaderCustomComponent?: React.ReactNode;\n\tfooterCustomComponent?: React.ReactNode;\n\tfooterDirection?: 'row' \| 'row-reverse';\n\thideCrossButton?: boolean;\n\twidth?: string;\n\tsaveButtonProps?: ButtonProps;\n\tcancelButtonProps?: ButtonProps;\n\tonClose: () => void;\n\tzIndex?: number;\n\thideFooter?: boolean;\n\tbodyStyle?: React.CSSProperties;\n\telement?: Element \| DocumentFragment;\n\theaderStyle?: React.CSSProperties;\n\tfooterStyle?: React.CSSProperties;\n\tcloseOnEscapeKey?: boolean;\n}\n\nexport const SideModal: React.FC<SideModalProps> = (props) => {\n\tconst { closeOnEscapeKey, onClose } = props;\n\n\t// Escape key handler - enabled by default\n\tuseEffect(() => {\n\t\t// Guard: Escape key must be enabled (default: true)\n\n\t\tconst escapeEnabled = closeOnEscapeKey ?? true;\n\t\tif (!escapeEnabled) return;\n\n\t\tconst handleEscapeKey = (event: KeyboardEvent) => {\n\t\t\tif (event.key !== 'Escape') return;\n\n\t\t\tonClose();\n\t\t};\n\n\t\tdocument.addEventListener('keydown', handleEscapeKey);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleEscapeKey);\n\t\t};\n\t}, [closeOnEscapeKey, onClose]);\n\n\treturn ReactDOM.createPortal(\n\t\t<SideModalStyle zIndex={props.zIndex}>\n\t\t\t<SideModalContainer width={props.width}>\n\t\t\t\t<SideModalHeader\n\t\t\t\t\theaderStyle={{\n\t\t\t\t\t\t...props.headerStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props?.headerCustomComponent \|\| (\n\t\t\t\t\t\t<TitleMedium>{props.header}</TitleMedium>\n\t\t\t\t\t)}\n\t\t\t\t\t{!props.hideCrossButton && (\n\t\t\t\t\t\t<CrossIcon ~~width~~={24} ~~height~~={24} ~~onClick~~={props.onClose} />\n\t\t\t\t\t)}{' '}\n\t\t\t\t</SideModalHeader>\n\t\t\t\t<SideModalBody\n\t\t\t\t\thideFooter={props.hideFooter}\n\t\t\t\t\tbodyStyle={{\n\t\t\t\t\t\t...props.bodyStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.children}{' '}\n\t\t\t\t</SideModalBody>\n\t\t\t\t{props.hideFooter === true ? null : (\n\t\t\t\t\t<SideModalFooter\n\t\t\t\t\t\tfooterDirection={props.footerDirection}\n\t\t\t\t\t\tfooterStyle={{\n\t\t\t\t\t\t\t...props.footerStyle,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{(props.saveButtonProps \|\| props.cancelButtonProps) && (\n\t\t\t\t\t\t\t<FooterButtonWrapper footerDirection={props.footerDirection}>\n\t\t\t\t\t\t\t\t{props.saveButtonProps && <Button {...props.saveButtonProps} />}\n\t\t\t\t\t\t\t\t{props.cancelButtonProps && (\n\t\t\t\t\t\t\t\t\t<Button {...props.cancelButtonProps} />\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</FooterButtonWrapper>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.footerCustomComponent ? props.footerCustomComponent : <></>}{' '}\n\t\t\t\t\t</SideModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</SideModalContainer>\n\t\t</SideModalStyle>,\n\t\tprops.element ?? document.body,\n\t);\n};\n"],"names":["SideModal","props","closeOnEscapeKey","onClose","useEffect","handleEscapeKey","event","ReactDOM","jsx","SideModalStyle","jsxs","SideModalContainer","SideModalHeader","TitleMedium","CrossIcon","SideModalBody","SideModalFooter","FooterButtonWrapper","Button","Fragment"],"mappings":"iXAmCaA,EAAuCC,GAAU,CAC7D,KAAM,CAAE,iBAAAC,EAAkB,QAAAC,CAAA,EAAYF,EAGtCG,OAAAA,EAAAA,UAAU,IAAM,CAIf,GAAI,EADkBF,GAAoB,IACtB,OAEpB,MAAMG,EAAmBC,GAAyB,CAC7CA,EAAM,MAAQ,UAElBH,EAAA,CACD,EAEA,gBAAS,iBAAiB,UAAWE,CAAe,EAE7C,IAAM,CACZ,SAAS,oBAAoB,UAAWA,CAAe,CACxD,CACD,EAAG,CAACH,EAAkBC,CAAO,CAAC,EAEvBI,EAAAA,QAAS,aACfC,EAAAA,IAACC,EAAAA,gBAAe,OAAQR,EAAM,OAC7B,SAAAS,EAAAA,KAACC,EAAAA,mBAAA,CAAmB,MAAOV,EAAM,MAChC,SAAA,CAAAS,EAAAA,KAACE,EAAAA,gBAAA,CACA,YAAa,CACZ,GAAGX,EAAM,WAAA,EAGT,SAAA,CAAAA,GAAO,uBACPO,MAACK,EAAAA,YAAA,CAAa,SAAAZ,EAAM,OAAO,EAE3B,CAACA,EAAM,iBACPO,~~MAACM~~,EAAAA,QAAA,~~CAAU~~,MAAO,~~GAAI~~,OAAQ,~~GAAI~~,QAASb,EAAM,~~OAAA~~,~~CAAS~~,~~EACxD~~,GAAA,CAAA,CAAA,EAEJS,EAAAA,KAACK,EAAAA,cAAA,CACA,WAAYd,EAAM,WAClB,UAAW,CACV,GAAGA,EAAM,SAAA,EAGT,SAAA,CAAAA,EAAM,SAAU,GAAA,CAAA,CAAA,EAEjBA,EAAM,aAAe,GAAO,KAC5BS,EAAAA,KAACM,EAAAA,gBAAA,CACA,gBAAiBf,EAAM,gBACvB,YAAa,CACZ,GAAGA,EAAM,WAAA,EAGR,SAAA,EAAAA,EAAM,iBAAmBA,EAAM,2BAC/BgB,EAAAA,oBAAA,CAAoB,gBAAiBhB,EAAM,gBAC1C,SAAA,CAAAA,EAAM,iBAAmBO,MAACU,EAAAA,OAAA,CAAQ,GAAGjB,EAAM,gBAAiB,EAC5DA,EAAM,mBACNO,MAACU,EAAAA,OAAA,CAAQ,GAAGjB,EAAM,kBAAmB,EACnC,GAAA,EACJ,EAEAA,EAAM,sBAAwBA,EAAM,sBAAwBO,EAAAA,IAAAW,EAAAA,SAAA,EAAE,EAAK,GAAA,CAAA,CAAA,EAEnE,GAAA,CAAA,CACJ,CAAA,CACD,EACAlB,EAAM,SAAW,SAAS,IAAA,CAE5B"}
1	+ {"version":3,"file":"SideModal.js","sources":["../../../../src/components/side-modal/SideModal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { TitleMedium } from '../TypographyStyle';\nimport {\n\tFooterButtonWrapper,\n\tSideModalBody,\n\tSideModalContainer,\n\tSideModalFooter,\n\tSideModalHeader,\n\tSideModalStyle,\n} from './SideModal.style';\n\nexport interface SideModalProps {\n\theader: string;\n\tchildren: React.ReactNode;\n\theaderCustomComponent?: React.ReactNode;\n\tfooterCustomComponent?: React.ReactNode;\n\tfooterDirection?: 'row' \| 'row-reverse';\n\thideCrossButton?: boolean;\n\twidth?: string;\n\tsaveButtonProps?: ButtonProps;\n\tcancelButtonProps?: ButtonProps;\n\tonClose: () => void;\n\tzIndex?: number;\n\thideFooter?: boolean;\n\tbodyStyle?: React.CSSProperties;\n\telement?: Element \| DocumentFragment;\n\theaderStyle?: React.CSSProperties;\n\tfooterStyle?: React.CSSProperties;\n\tcloseOnEscapeKey?: boolean;\n}\n\nexport const SideModal: React.FC<SideModalProps> = (props) => {\n\tconst { closeOnEscapeKey, onClose } = props;\n\n\t// Escape key handler - enabled by default\n\tuseEffect(() => {\n\t\t// Guard: Escape key must be enabled (default: true)\n\n\t\tconst escapeEnabled = closeOnEscapeKey ?? true;\n\t\tif (!escapeEnabled) return;\n\n\t\tconst handleEscapeKey = (event: KeyboardEvent) => {\n\t\t\tif (event.key !== 'Escape') return;\n\n\t\t\tonClose();\n\t\t};\n\n\t\tdocument.addEventListener('keydown', handleEscapeKey);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleEscapeKey);\n\t\t};\n\t}, [closeOnEscapeKey, onClose]);\n\n\treturn ReactDOM.createPortal(\n\t\t<SideModalStyle zIndex={props.zIndex}>\n\t\t\t<SideModalContainer width={props.width}>\n\t\t\t\t<SideModalHeader\n\t\t\t\t\theaderStyle={{\n\t\t\t\t\t\t...props.headerStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props?.headerCustomComponent \|\| (\n\t\t\t\t\t\t<TitleMedium>{props.header}</TitleMedium>\n\t\t\t\t\t)}\n\t\t\t\t\t{!props.hideCrossButton && (\n\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\tonClick={props.onClose}\n\t\t\t\t\t\t\tdata-test=\"side-modal-close-button\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}{' '}\n\t\t\t\t</SideModalHeader>\n\t\t\t\t<SideModalBody\n\t\t\t\t\thideFooter={props.hideFooter}\n\t\t\t\t\tbodyStyle={{\n\t\t\t\t\t\t...props.bodyStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.children}{' '}\n\t\t\t\t</SideModalBody>\n\t\t\t\t{props.hideFooter === true ? null : (\n\t\t\t\t\t<SideModalFooter\n\t\t\t\t\t\tfooterDirection={props.footerDirection}\n\t\t\t\t\t\tfooterStyle={{\n\t\t\t\t\t\t\t...props.footerStyle,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{(props.saveButtonProps \|\| props.cancelButtonProps) && (\n\t\t\t\t\t\t\t<FooterButtonWrapper footerDirection={props.footerDirection}>\n\t\t\t\t\t\t\t\t{props.saveButtonProps && <Button {...props.saveButtonProps} />}\n\t\t\t\t\t\t\t\t{props.cancelButtonProps && (\n\t\t\t\t\t\t\t\t\t<Button {...props.cancelButtonProps} />\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</FooterButtonWrapper>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.footerCustomComponent ? props.footerCustomComponent : <></>}{' '}\n\t\t\t\t\t</SideModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</SideModalContainer>\n\t\t</SideModalStyle>,\n\t\tprops.element ?? document.body,\n\t);\n};\n"],"names":["SideModal","props","closeOnEscapeKey","onClose","useEffect","handleEscapeKey","event","ReactDOM","jsx","SideModalStyle","jsxs","SideModalContainer","SideModalHeader","TitleMedium","CrossIcon","SideModalBody","SideModalFooter","FooterButtonWrapper","Button","Fragment"],"mappings":"iXAmCaA,EAAuCC,GAAU,CAC7D,KAAM,CAAE,iBAAAC,EAAkB,QAAAC,CAAA,EAAYF,EAGtCG,OAAAA,EAAAA,UAAU,IAAM,CAIf,GAAI,EADkBF,GAAoB,IACtB,OAEpB,MAAMG,EAAmBC,GAAyB,CAC7CA,EAAM,MAAQ,UAElBH,EAAA,CACD,EAEA,gBAAS,iBAAiB,UAAWE,CAAe,EAE7C,IAAM,CACZ,SAAS,oBAAoB,UAAWA,CAAe,CACxD,CACD,EAAG,CAACH,EAAkBC,CAAO,CAAC,EAEvBI,EAAAA,QAAS,aACfC,EAAAA,IAACC,EAAAA,gBAAe,OAAQR,EAAM,OAC7B,SAAAS,EAAAA,KAACC,EAAAA,mBAAA,CAAmB,MAAOV,EAAM,MAChC,SAAA,CAAAS,EAAAA,KAACE,EAAAA,gBAAA,CACA,YAAa,CACZ,GAAGX,EAAM,WAAA,EAGT,SAAA,CAAAA,GAAO,uBACPO,MAACK,EAAAA,YAAA,CAAa,SAAAZ,EAAM,OAAO,EAE3B,CAACA,EAAM,iBACPO,EAAAA,IAACM,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,QAASb,EAAM,QACf,YAAU,yBAAA,CAAA,EAET,GAAA,CAAA,CAAA,EAEJS,EAAAA,KAACK,EAAAA,cAAA,CACA,WAAYd,EAAM,WAClB,UAAW,CACV,GAAGA,EAAM,SAAA,EAGT,SAAA,CAAAA,EAAM,SAAU,GAAA,CAAA,CAAA,EAEjBA,EAAM,aAAe,GAAO,KAC5BS,EAAAA,KAACM,EAAAA,gBAAA,CACA,gBAAiBf,EAAM,gBACvB,YAAa,CACZ,GAAGA,EAAM,WAAA,EAGR,SAAA,EAAAA,EAAM,iBAAmBA,EAAM,2BAC/BgB,EAAAA,oBAAA,CAAoB,gBAAiBhB,EAAM,gBAC1C,SAAA,CAAAA,EAAM,iBAAmBO,MAACU,EAAAA,OAAA,CAAQ,GAAGjB,EAAM,gBAAiB,EAC5DA,EAAM,mBACNO,MAACU,EAAAA,OAAA,CAAQ,GAAGjB,EAAM,kBAAmB,EACnC,GAAA,EACJ,EAEAA,EAAM,sBAAwBA,EAAM,sBAAwBO,EAAAA,IAAAW,EAAAA,SAAA,EAAE,EAAK,GAAA,CAAA,CAAA,EAEnE,GAAA,CAAA,CACJ,CAAA,CACD,EACAlB,EAAM,SAAW,SAAS,IAAA,CAE5B"}

package/dist/cjs/components/spinner/Spinner.js CHANGED Viewed

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("styled-components"),n=require("../../constants/Theme.js"),r=require("./themes.js"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=l(d),o=({size:e,color:a,className:s})=>t.jsx("div",{className:`spinner-container ${s}`,children:t.jsx(i,{width:`${r.SizeMap[e]}px`,height:`${r.SizeMap[e]}px`,size:e,color:a??n.COLORS.stroke.brand})});o.displayName="Spinner";const i=c.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("styled-components"),n=require("../../constants/Theme.js"),t=require("./themes.js"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=l(d),i=({size:e,color:a,className:s})=>r.jsx("div",{className:`spinner-container ${s}`,"data-testid":"spinner-container",children:r.jsx(o,{width:`${t.SizeMap[e]}px`,height:`${t.SizeMap[e]}px`,size:e,color:a??n.COLORS.stroke.brand,"data-testid":"spinner"})});i.displayName="Spinner";const o=c.default.div`
 	width: ${e=>e.width};
 	height: ${e=>e.height};
-	border: ${e=>e.size?r.BorderMap[e.size]:5}px solid
+	border: ${e=>e.size?t.BorderMap[e.size]:5}px solid
 		${e=>e.backgroundColor??"transparent"};
 	border-bottom-color: ${e=>e.color??n.COLORS.stroke.brand};
 	border-radius: 50%;
@@ -16,5 +16,5 @@
 			transform: rotate(360deg);
 		}
 	}
-`;exports.PureSpinner=i;exports.Spinner=o;
+`;exports.PureSpinner=o;exports.Spinner=i;
 //# sourceMappingURL=Spinner.js.map

package/dist/cjs/components/spinner/Spinner.js.map CHANGED Viewed

	@@ -1 +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":"kRAMaA,EAAU,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,UAAAC,KAErCC,EAAAA,IAAC,MAAA,~~CAAI~~,UAAW,qBAAqBD,CAAS,~~GAC7C~~,SAAAC,EAAAA,IAACC,EAAA,CACA,MAAO,GAAGC,EAAAA,QAAQL,CAAI,CAAC,KACvB,OAAQ,GAAGK,EAAAA,QAAQL,CAAI,CAAC,KACxB,KAAAA,EACA,MAAOC,GAASK,~~EAAAA~~,OAAO,~~OAAO~~,~~KAAA~~,CAAA,~~EAEhC~~,~~EAIFP~~,EAAQ,YAAc,UAEf,MAAMK,EAAcG,EAAAA,QAAO;AAAA,UAOvBC,GAAUA,EAAM,KAAK;AAAA,WACpBA,GAAUA,EAAM,MAAM;AAAA,WACtBA,GAAWA,EAAM,KAAOC,EAAAA,UAAUD,EAAM,IAAI,EAAI,CAAE;AAAA,IACzDA,GAAUA,EAAM,iBAAmB,aAAa;AAAA,wBAC5BA,GAAUA,EAAM,OAASF,EAAAA,OAAO,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
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\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":"kRAMaA,EAAU,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,UAAAC,KAErCC,EAAAA,IAAC,MAAA,CACA,UAAW,qBAAqBD,CAAS,GACzC,cAAY,oBAEZ,SAAAC,EAAAA,IAACC,EAAA,CACA,MAAO,GAAGC,EAAAA,QAAQL,CAAI,CAAC,KACvB,OAAQ,GAAGK,EAAAA,QAAQL,CAAI,CAAC,KACxB,KAAAA,EACA,MAAOC,GAASK,SAAO,OAAO,MAC9B,cAAY,SAAA,CAAA,CACb,CAAA,EAKHP,EAAQ,YAAc,UAEf,MAAMK,EAAcG,EAAAA,QAAO;AAAA,UAOvBC,GAAUA,EAAM,KAAK;AAAA,WACpBA,GAAUA,EAAM,MAAM;AAAA,WACtBA,GAAWA,EAAM,KAAOC,EAAAA,UAAUD,EAAM,IAAI,EAAI,CAAE;AAAA,IACzDA,GAAUA,EAAM,iBAAmB,aAAa;AAAA,wBAC5BA,GAAUA,EAAM,OAASF,EAAAA,OAAO,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/star-rating/Star.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),s=require("react"),o=require("../../constants/Theme.js"),g=require("../../assets/icons/starEmpty.svg.js"),S=require("../../assets/icons/starFilled.svg.js"),M=require("../../assets/icons/starFilledV2.svg.js"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=b(s),v=e=>e==="v1"?S.default:M.default,O=({size:e,filled:d,emptyColor:E,filledColor:a,onClick:n,asHovered:c,onHover:h,mode:r,version:f="v1"})=>{const[l,t]=s.useState(!1);s.useEffect(()=>{h?.(l)},[l]),s.useEffect(()=>{c||t(!1)},[c]);const i=p.default.useMemo(()=>v(f),[f]);return c?u.jsx(i,{onClick:()=>{n?.("select")},onMouseEnter:()=>t(!0),onMouseLeave:()=>t(!1),style:{cursor:"pointer"},width:e,height:e,color:a??o.COLORS.background.warning.vibrant}):l?u.jsx(i,{onMouseLeave:()=>t(!1),onMouseEnter:()=>t(!0),style:{cursor:"pointer"},onClick:()=>{n?.("select")},width:e,height:e,color:a??o.COLORS.background.warning.vibrant}):d?u.jsx(i,{onMouseEnter:()=>r!=="VIEW"&&t(!0),onMouseLeave:()=>r!=="VIEW"&&t(!1),style:{cursor:r!=="VIEW"?"pointer":"default"},onClick:()=>{r!=="VIEW"&&n?.("de-select")},width:e,height:e,color:a??o.COLORS.background.warning.vibrant}):u.jsx(g.default,{onMouseEnter:()=>r!=="VIEW"&&t(!0),onMouseLeave:()=>r!=="VIEW"&&t(!1),style:{cursor:r!=="VIEW"?"pointer":"default"},onClick:()=>{r!=="VIEW"&&n?.("select")},width:e,height:e,color:E??o.COLORS.surface.standard})};exports.Star=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),s=require("../../constants/Theme.js"),S=require("../../assets/icons/starEmpty.svg.js"),M=require("../../assets/icons/starFilled.svg.js"),b=require("../../assets/icons/starFilledV2.svg.js"),p=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},v=p(o),O=t=>t==="v1"?M.default:b.default,V=({size:t,filled:E,emptyColor:h,filledColor:c,onClick:n,asHovered:i,onHover:g,mode:r,version:d="v1","data-testid":u})=>{const[l,e]=o.useState(!1);o.useEffect(()=>{g?.(l)},[l]),o.useEffect(()=>{i||e(!1)},[i]);const f=v.default.useMemo(()=>O(d),[d]);return i?a.jsx(f,{"data-testid":u,onClick:()=>{n?.("select")},onMouseEnter:()=>e(!0),onMouseLeave:()=>e(!1),style:{cursor:"pointer"},width:t,height:t,color:c??s.COLORS.background.warning.vibrant}):l?a.jsx(f,{"data-testid":u,onMouseLeave:()=>e(!1),onMouseEnter:()=>e(!0),style:{cursor:"pointer"},onClick:()=>{n?.("select")},width:t,height:t,color:c??s.COLORS.background.warning.vibrant}):E?a.jsx(f,{"data-testid":u,onMouseEnter:()=>r!=="VIEW"&&e(!0),onMouseLeave:()=>r!=="VIEW"&&e(!1),style:{cursor:r!=="VIEW"?"pointer":"default"},onClick:()=>{r!=="VIEW"&&n?.("de-select")},width:t,height:t,color:c??s.COLORS.background.warning.vibrant}):a.jsx(S.default,{"data-testid":u,onMouseEnter:()=>r!=="VIEW"&&e(!0),onMouseLeave:()=>r!=="VIEW"&&e(!1),style:{cursor:r!=="VIEW"?"pointer":"default"},onClick:()=>{r!=="VIEW"&&n?.("select")},width:t,height:t,color:h??s.COLORS.surface.standard})};exports.Star=V;
 //# sourceMappingURL=Star.js.map

package/dist/cjs/components/star-rating/Star.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Star.js","sources":["../../../../src/components/star-rating/Star.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport StarEmpty from '../../assets/icons/starEmpty.svg';\nimport StarFilledV1 from '../../assets/icons/starFilled.svg';\nimport StarFilledV2 from '../../assets/icons/starFilledV2.svg';\n\nconst GetStar = (version: 'v1' \| 'v2') => {\n\tif (version === 'v1') {\n\t\treturn StarFilledV1;\n\t}\n\treturn StarFilledV2;\n};\n\nexport const Star: React.FC<{\n\tfilled?: boolean;\n\tsize?: number;\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonClick?: (action: 'de-select' \| 'select') => void;\n\tonHover?: (hovered: boolean) => void;\n\t/** this means this star is hovered-active cause there is a star hovered after this */\n\tasHovered?: boolean;\n\tmode?: 'VIEW' \| 'EDIT';\n\tversion?: 'v1' \| 'v2';\n}> = ({\n\tsize,\n\tfilled,\n\temptyColor,\n\tfilledColor,\n\tonClick,\n\tasHovered,\n\tonHover,\n\tmode,\n\tversion = 'v1',\n}) => {\n\tconst [hovered, setHovered] = useState(false);\n\n\tuseEffect(() => {\n\t\tonHover?.(hovered);\n\t}, [hovered]);\n\n\tuseEffect(() => {\n\t\tif (!asHovered) {\n\t\t\tsetHovered(false);\n\t\t}\n\t}, [asHovered]);\n\n\tconst StarFilled = React.useMemo(() => GetStar(version), [version]);\n\n\tif (asHovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (hovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (filled) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tmode !== 'VIEW' && onClick?.('de-select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<StarEmpty\n\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\tonClick={() => {\n\t\t\t\tmode !== 'VIEW' && onClick?.('select');\n\t\t\t}}\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tcolor={emptyColor ?? COLORS.surface.standard}\n\t\t/>\n\t);\n};\n"],"names":["GetStar","version","StarFilledV1","StarFilledV2","Star","size","filled","emptyColor","filledColor","onClick","asHovered","onHover","mode","hovered","setHovered","useState","useEffect","StarFilled","React","jsx","COLORS","StarEmpty"],"mappings":"oYAMMA,EAAWC,GACZA,IAAY,KACRC,EAAAA,QAEDC,EAAAA,QAGKC,~~EAWR~~,CAAC,CACL,KAAAC,EACA,OAAAC,EACA,WAAAC,EACA,YAAAC,EACA,QAAAC,EACA,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAX,EAAU,~~IACX~~,IAAM,CACL,KAAM,~~CAACY~~,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EAE5CC,EAAAA,UAAU,IAAM,~~CACfL~~,~~IAAUE~~,CAAO,CAClB,EAAG,CAACA,CAAO,CAAC,EAEZG,EAAAA,UAAU,IAAM,~~CACVN~~,~~GACJI~~,EAAW,EAAK,CAElB,EAAG,~~CAACJ~~,CAAS,CAAC,EAEd,~~MAAMO~~,EAAaC,EAAAA,QAAM,QAAQ,~~IAAMlB~~,EAAQC,CAAO,EAAG,CAACA,CAAO,CAAC,EAElE,OAAIS,~~EAEFS~~,EAAAA,IAACF,EAAA,CACA,QAAS,IAAM,~~CACdR~~,IAAU,QAAQ,CACnB,EACA,aAAc,~~IAAMK~~,EAAW,EAAI,EACnC,aAAc,IAAMA,EAAW,EAAK,EACpC,MAAO,CAAE,OAAQ,SAAA,EACjB,~~MAAOT~~,EACP,OAAQA,EACR,MAAOG,~~GAAeY~~,SAAO,WAAW,QAAQ,OAAA,CAAA,EAK/CP,EAEFM,EAAAA,IAACF,EAAA,CACA,aAAc,~~IAAMH~~,EAAW,EAAK,EACpC,aAAc,IAAMA,EAAW,EAAI,EACnC,MAAO,CAAE,OAAQ,SAAA,EACjB,QAAS,IAAM,~~CACdL~~,IAAU,QAAQ,CACnB,EACA,MAAOJ,EACP,OAAQA,EACR,MAAOG,~~GAAeY~~,SAAO,WAAW,QAAQ,OAAA,CAAA,EAK/Cd,~~EAEFa~~,EAAAA,IAACF,EAAA,CACA,aAAc,~~IAAML~~,IAAS,~~QAAUE~~,EAAW,EAAI,EACtD,aAAc,~~IAAMF~~,IAAS,~~QAAUE~~,EAAW,EAAK,EACvD,MAAO,CAAE,~~OAAQF~~,IAAS,OAAS,UAAY,SAAA,EAC/C,QAAS,IAAM,CACdA,IAAS,QAAUH,IAAU,WAAW,CACzC,EACA,MAAOJ,EACP,OAAQA,EACR,MAAOG,~~GAAeY~~,SAAO,WAAW,QAAQ,OAAA,CAAA,EAMlDD,EAAAA,IAACE,EAAAA,QAAA,CACA,aAAc,~~IAAMT~~,IAAS,~~QAAUE~~,EAAW,EAAI,EACtD,aAAc,~~IAAMF~~,IAAS,~~QAAUE~~,EAAW,EAAK,EACvD,MAAO,CAAE,~~OAAQF~~,IAAS,OAAS,UAAY,SAAA,EAC/C,QAAS,IAAM,CACdA,IAAS,QAAUH,IAAU,QAAQ,CACtC,EACA,MAAOJ,EACP,OAAQA,EACR,MAAOE,~~GAAca~~,EAAAA,OAAO,QAAQ,QAAA,CAAA,CAGvC"}
1	+ {"version":3,"file":"Star.js","sources":["../../../../src/components/star-rating/Star.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport StarEmpty from '../../assets/icons/starEmpty.svg';\nimport StarFilledV1 from '../../assets/icons/starFilled.svg';\nimport StarFilledV2 from '../../assets/icons/starFilledV2.svg';\n\nconst GetStar = (version: 'v1' \| 'v2') => {\n\tif (version === 'v1') {\n\t\treturn StarFilledV1;\n\t}\n\treturn StarFilledV2;\n};\n\nexport const Star: React.FC<{\n\tfilled?: boolean;\n\tsize?: number;\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonClick?: (action: 'de-select' \| 'select') => void;\n\tonHover?: (hovered: boolean) => void;\n\t/** this means this star is hovered-active cause there is a star hovered after this */\n\tasHovered?: boolean;\n\tmode?: 'VIEW' \| 'EDIT';\n\tversion?: 'v1' \| 'v2';\n\t'data-testid'?: string;\n}> = ({\n\tsize,\n\tfilled,\n\temptyColor,\n\tfilledColor,\n\tonClick,\n\tasHovered,\n\tonHover,\n\tmode,\n\tversion = 'v1',\n\t'data-testid': dataTestId,\n}) => {\n\tconst [hovered, setHovered] = useState(false);\n\n\tuseEffect(() => {\n\t\tonHover?.(hovered);\n\t}, [hovered]);\n\n\tuseEffect(() => {\n\t\tif (!asHovered) {\n\t\t\tsetHovered(false);\n\t\t}\n\t}, [asHovered]);\n\n\tconst StarFilled = React.useMemo(() => GetStar(version), [version]);\n\n\tif (asHovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (hovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (filled) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tmode !== 'VIEW' && onClick?.('de-select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<StarEmpty\n\t\t\tdata-testid={dataTestId}\n\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\tonClick={() => {\n\t\t\t\tmode !== 'VIEW' && onClick?.('select');\n\t\t\t}}\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tcolor={emptyColor ?? COLORS.surface.standard}\n\t\t/>\n\t);\n};\n"],"names":["GetStar","version","StarFilledV1","StarFilledV2","Star","size","filled","emptyColor","filledColor","onClick","asHovered","onHover","mode","dataTestId","hovered","setHovered","useState","useEffect","StarFilled","React","jsx","COLORS","StarEmpty"],"mappings":"oYAMMA,EAAWC,GACZA,IAAY,KACRC,EAAAA,QAEDC,EAAAA,QAGKC,EAYR,CAAC,CACL,KAAAC,EACA,OAAAC,EACA,WAAAC,EACA,YAAAC,EACA,QAAAC,EACA,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAX,EAAU,KACV,cAAeY,CAChB,IAAM,CACL,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EAE5CC,EAAAA,UAAU,IAAM,CACfN,IAAUG,CAAO,CAClB,EAAG,CAACA,CAAO,CAAC,EAEZG,EAAAA,UAAU,IAAM,CACVP,GACJK,EAAW,EAAK,CAElB,EAAG,CAACL,CAAS,CAAC,EAEd,MAAMQ,EAAaC,EAAAA,QAAM,QAAQ,IAAMnB,EAAQC,CAAO,EAAG,CAACA,CAAO,CAAC,EAElE,OAAIS,EAEFU,EAAAA,IAACF,EAAA,CACA,cAAaL,EACb,QAAS,IAAM,CACdJ,IAAU,QAAQ,CACnB,EACA,aAAc,IAAMM,EAAW,EAAI,EACnC,aAAc,IAAMA,EAAW,EAAK,EACpC,MAAO,CAAE,OAAQ,SAAA,EACjB,MAAOV,EACP,OAAQA,EACR,MAAOG,GAAea,SAAO,WAAW,QAAQ,OAAA,CAAA,EAK/CP,EAEFM,EAAAA,IAACF,EAAA,CACA,cAAaL,EACb,aAAc,IAAME,EAAW,EAAK,EACpC,aAAc,IAAMA,EAAW,EAAI,EACnC,MAAO,CAAE,OAAQ,SAAA,EACjB,QAAS,IAAM,CACdN,IAAU,QAAQ,CACnB,EACA,MAAOJ,EACP,OAAQA,EACR,MAAOG,GAAea,SAAO,WAAW,QAAQ,OAAA,CAAA,EAK/Cf,EAEFc,EAAAA,IAACF,EAAA,CACA,cAAaL,EACb,aAAc,IAAMD,IAAS,QAAUG,EAAW,EAAI,EACtD,aAAc,IAAMH,IAAS,QAAUG,EAAW,EAAK,EACvD,MAAO,CAAE,OAAQH,IAAS,OAAS,UAAY,SAAA,EAC/C,QAAS,IAAM,CACdA,IAAS,QAAUH,IAAU,WAAW,CACzC,EACA,MAAOJ,EACP,OAAQA,EACR,MAAOG,GAAea,SAAO,WAAW,QAAQ,OAAA,CAAA,EAMlDD,EAAAA,IAACE,EAAAA,QAAA,CACA,cAAaT,EACb,aAAc,IAAMD,IAAS,QAAUG,EAAW,EAAI,EACtD,aAAc,IAAMH,IAAS,QAAUG,EAAW,EAAK,EACvD,MAAO,CAAE,OAAQH,IAAS,OAAS,UAAY,SAAA,EAC/C,QAAS,IAAM,CACdA,IAAS,QAAUH,IAAU,QAAQ,CACtC,EACA,MAAOJ,EACP,OAAQA,EACR,MAAOE,GAAcc,EAAAA,OAAO,QAAQ,QAAA,CAAA,CAGvC"}

package/dist/cjs/components/star-rating/StarRating.js CHANGED Viewed

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),q=require("styled-components"),R=require("./Star.js"),_=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},b=_(q),C=b.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),q=require("styled-components"),R=require("./Star.js"),_=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},b=_(q),C=b.default.div`
 	display: flex;
 	flex-direction: row;
 	gap: 12px;
 	justify-content: start;
 	align-items: center;
-`,H=({emptyColor:t,filledColor:u,onChange:f,value:d,maxValue:l,starSize:S,mode:m,version:p="v1"})=>{const[r,o]=s.useState(d??0),[v,y]=s.useState(!1),[a,i]=s.useState(0),g=s.useMemo(()=>Array(l??5).fill(null).map((n,j)=>j+1),[l]);return s.useEffect(()=>{v&&f(r)},[r]),s.useEffect(()=>{y(!0)},[]),c.jsx(C,{children:g.map(e=>c.jsx(R.Star,{asHovered:a?e<=a:!1,size:S??24,filled:a?void 0:e<=r,emptyColor:t,filledColor:u,onClick:n=>{n==="de-select"?e<r?o(e):o(e-1):o(e)},onHover:n=>{i(n?e:0)},mode:m,version:p},e))})};exports.StarRating=H;
+`,H=({emptyColor:e,filledColor:u,onChange:f,value:d,maxValue:l,starSize:S,mode:m,version:p="v1"})=>{const[r,n]=s.useState(d??0),[v,y]=s.useState(!1),[o,i]=s.useState(0),g=s.useMemo(()=>Array(l??5).fill(null).map((a,j)=>j+1),[l]);return s.useEffect(()=>{v&&f(r)},[r]),s.useEffect(()=>{y(!0)},[]),c.jsx(C,{children:g.map(t=>c.jsx(R.Star,{asHovered:o?t<=o:!1,size:S??24,filled:o?void 0:t<=r,emptyColor:e,filledColor:u,onClick:a=>{a==="de-select"?t<r?n(t):n(t-1):n(t)},onHover:a=>{i(a?t:0)},mode:m,version:p,"data-testid":`star-${t}`},t))})};exports.StarRating=H;
 //# sourceMappingURL=StarRating.js.map

package/dist/cjs/components/star-rating/StarRating.js.map CHANGED Viewed

	@@ -1 +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":"6PAIMA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQZC,EASR,CAAC,CACL,WAAAC,EACA,YAAAC,EACA,SAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAAC,EAAU,IACX,IAAM,CACL,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAASP,GAAS,CAAC,EACvC,CAACQ,EAASC,CAAc,EAAIF,EAAAA,SAAS,EAAK,EAC1C,CAACG,EAAaC,CAAc,EAAIJ,EAAAA,SAAS,CAAC,EAE1CK,EAAMC,EAAAA,QAAQ,IAEZ,MADOZ,GAAY,CACR,EAChB,KAAK,IAAI,EACT,IAAI,CAACa,EAAGC,IAAQA,EAAM,CAAC,EACvB,CAACd,CAAQ,CAAC,EAEbe,OAAAA,EAAAA,UAAU,IAAM,CACXR,GACHT,EAASM,CAAK,CAEhB,EAAG,CAACA,CAAK,CAAC,EAEVW,EAAAA,UAAU,IAAM,CACfP,EAAe,EAAI,CACpB,EAAG,CAAA,CAAE,EAGJQ,EAAAA,IAACvB,EAAA,CACC,SAAAkB,EAAI,IAAKG,GACTE,EAAAA,IAACC,EAAAA,KAAA,CACA,UAAWR,EAAcK,GAAOL,EAAc,GAE9C,KAAMR,GAAY,GAClB,OAAQQ,EAAc,OAAYK,GAAOV,EACzC,WAAAR,EACA,YAAAC,EACA,QAAUqB,GAAW,CAChBA,IAAW,YACVJ,EAAMV,EACTC,EAASS,CAAG,EAEZT,EAASS,EAAM,CAAC,EAGjBT,EAASS,CAAG,CAEd,EACA,QAAUK,GAAY,GACjBA,EAAwBL,EAEZ,CAFe,CAIhC,EACA,KAAAZ,EACA,QAAAC,~~CAAA~~,~~EAvBKW~~,CAAA,~~CAyBN~~,EACF,CAEF"}
1	+ {"version":3,"file":"StarRating.js","sources":["../../../../src/components/star-rating/StarRating.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\nimport { Star } from './Star';\n\nconst Container = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: start;\n\talign-items: center;\n`;\n\nexport const StarRating: React.FC<{\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonChange: (stars: number) => void;\n\tvalue?: number;\n\tmaxValue?: number;\n\tstarSize?: number;\n\tmode?: 'VIEW' \| 'EDIT';\n\tversion?: 'v1' \| 'v2';\n}> = ({\n\temptyColor,\n\tfilledColor,\n\tonChange,\n\tvalue,\n\tmaxValue,\n\tstarSize,\n\tmode,\n\tversion = 'v1',\n}) => {\n\tconst [stars, setStars] = useState(value ?? 0);\n\tconst [mounted, setMountedFlag] = useState(false);\n\tconst [hoveredStar, setHoveredStar] = useState(0);\n\n\tconst arr = useMemo(() => {\n\t\tconst limit = maxValue ?? 5;\n\t\treturn Array(limit)\n\t\t\t.fill(null)\n\t\t\t.map((_, idx) => idx + 1);\n\t}, [maxValue]);\n\n\tuseEffect(() => {\n\t\tif (mounted) {\n\t\t\tonChange(stars);\n\t\t}\n\t}, [stars]);\n\n\tuseEffect(() => {\n\t\tsetMountedFlag(true);\n\t}, []);\n\n\treturn (\n\t\t<Container>\n\t\t\t{arr.map((idx) => (\n\t\t\t\t<Star\n\t\t\t\t\tasHovered={hoveredStar ? idx <= hoveredStar : false}\n\t\t\t\t\tkey={idx}\n\t\t\t\t\tsize={starSize ?? 24}\n\t\t\t\t\tfilled={hoveredStar ? undefined : idx <= stars}\n\t\t\t\t\temptyColor={emptyColor}\n\t\t\t\t\tfilledColor={filledColor}\n\t\t\t\t\tonClick={(action) => {\n\t\t\t\t\t\tif (action === 'de-select') {\n\t\t\t\t\t\t\tif (idx < stars) {\n\t\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetStars(idx - 1);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonHover={(hovered) => {\n\t\t\t\t\t\tif (hovered) setHoveredStar(idx);\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\tsetHoveredStar(0);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tmode={mode}\n\t\t\t\t\tversion={version}\n\t\t\t\t\tdata-testid={`star-${idx}`}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</Container>\n\t);\n};\n"],"names":["Container","styled","StarRating","emptyColor","filledColor","onChange","value","maxValue","starSize","mode","version","stars","setStars","useState","mounted","setMountedFlag","hoveredStar","setHoveredStar","arr","useMemo","_","idx","useEffect","jsx","Star","action","hovered"],"mappings":"6PAIMA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQZC,EASR,CAAC,CACL,WAAAC,EACA,YAAAC,EACA,SAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAAC,EAAU,IACX,IAAM,CACL,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAASP,GAAS,CAAC,EACvC,CAACQ,EAASC,CAAc,EAAIF,EAAAA,SAAS,EAAK,EAC1C,CAACG,EAAaC,CAAc,EAAIJ,EAAAA,SAAS,CAAC,EAE1CK,EAAMC,EAAAA,QAAQ,IAEZ,MADOZ,GAAY,CACR,EAChB,KAAK,IAAI,EACT,IAAI,CAACa,EAAGC,IAAQA,EAAM,CAAC,EACvB,CAACd,CAAQ,CAAC,EAEbe,OAAAA,EAAAA,UAAU,IAAM,CACXR,GACHT,EAASM,CAAK,CAEhB,EAAG,CAACA,CAAK,CAAC,EAEVW,EAAAA,UAAU,IAAM,CACfP,EAAe,EAAI,CACpB,EAAG,CAAA,CAAE,EAGJQ,EAAAA,IAACvB,EAAA,CACC,SAAAkB,EAAI,IAAKG,GACTE,EAAAA,IAACC,EAAAA,KAAA,CACA,UAAWR,EAAcK,GAAOL,EAAc,GAE9C,KAAMR,GAAY,GAClB,OAAQQ,EAAc,OAAYK,GAAOV,EACzC,WAAAR,EACA,YAAAC,EACA,QAAUqB,GAAW,CAChBA,IAAW,YACVJ,EAAMV,EACTC,EAASS,CAAG,EAEZT,EAASS,EAAM,CAAC,EAGjBT,EAASS,CAAG,CAEd,EACA,QAAUK,GAAY,GACjBA,EAAwBL,EAEZ,CAFe,CAIhC,EACA,KAAAZ,EACA,QAAAC,EACA,cAAa,QAAQW,CAAG,EAAA,EAxBnBA,CAAA,CA0BN,EACF,CAEF"}

package/dist/cjs/components/states/StateComponent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("../../constants/Theme.js"),E=require("../../assets/icons/errorIcon.svg.js"),I=require("../../assets/icons/retryIcon.svg.js"),z=require("../../assets/icons/state_icon.svg.js"),A=require("../../assets/icons/successIcon.svg.js"),N=require("../../assets/icons/warningIcon.svg.js"),w=require("../spinner/Spinner.js"),r=require("../TypographyStyle.js"),i=require("./StateComponent.styled.js"),h=require("../button/Button.js");var y=(e=>(e.SUCCESS="success",e.ERROR="error",e.WARNING="warning",e.LOADING="loading",e.RETRY="retry",e.INFO="info",e))(y||{}),x=(e=>(e.CANCEL="cancel",e.OTHER="other",e))(x||{}),S=(e=>(e.SINGLE="SINGLE",e.DOUBLE="DOUBLE",e))(S||{});const M=e=>{const j=()=>{if(n=="success")return t.jsx(A.default,{});if(n=="warning")return t.jsx(N.default,{});if(n=="error")return t.jsx(E.default,{});if(n==="loading")return t.jsx(w.Spinner,{size:"large"});if(n==="retry")return t.jsx(I.default,{});if(n=="info")return t.jsx(z.default,{})},{states:n,heading:a,subline:u,errorText:d,icon:g=j(),isButtonEnabled:L,type:m,buttonText:T,buttonType:C,onButtonClick:o,leadingIcon:B,width:O,headerImage:l,iconWidth:R,iconHeight:b,closeButtonType:f,secondaryButtonText:q,"data-test":s}=e;return t.jsxs(i.StateComponentContainer,{width:O,"data-test":s,children:[t.jsx(i.StateIcon,{iconWidth:R,iconHeight:b,children:l?t.jsx("img",{src:l,width:"100%",height:"auto",alt:""}):g}),t.jsxs(i.StateHeading,{size:e.size,children:[e.size==="SMALL"&&t.jsx(r.TitleRegular,{children:a}),e.size!=="SMALL"&&t.jsx(r.TitleMedium,{children:a})]}),t.jsxs(i.StateSubline,{children:[e.size!=="SMALL"&&t.jsx(r.BodyPrimary,{color:c.COLORS.content.secondary,children:u}),e.size==="SMALL"&&t.jsx(r.BodySecondary,{color:c.COLORS.content.secondary,children:u}),d&&t.jsx(r.BodySecondary,{color:c.COLORS.content.negative,style:{marginTop:8,whiteSpace:"pre-line"},children:d})]}),e.children??t.jsx(t.Fragment,{}),L&&t.jsx(t.Fragment,{children:t.jsxs(i.ButtonContainer,{size:e.size,children:[m=="DOUBLE"&&t.jsx(h.Button,{"data-test":`${s}-cancel`,onClick:()=>o&&o("cancel"),buttonType:f||"secondary",buttonText:q||"Cancel",matchParentWidth:!0}),t.jsx(h.Button,{"data-test":`${s}-primary`,onClick:()=>o&&o("other"),buttonType:C??"primary",LeadingIcon:B,buttonText:T??"Retry",matchParentWidth:!0})]})})]})};exports.ButtonActions=x;exports.ButtonTypes=S;exports.StateComponent=M;exports.StateInterface=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../constants/Theme.js"),E=require("../../assets/icons/errorIcon.svg.js"),I=require("../../assets/icons/retryIcon.svg.js"),z=require("../../assets/icons/state_icon.svg.js"),A=require("../../assets/icons/successIcon.svg.js"),N=require("../../assets/icons/warningIcon.svg.js"),w=require("../spinner/Spinner.js"),r=require("../TypographyStyle.js"),i=require("./StateComponent.styled.js"),h=require("../button/Button.js");var y=(t=>(t.SUCCESS="success",t.ERROR="error",t.WARNING="warning",t.LOADING="loading",t.RETRY="retry",t.INFO="info",t))(y||{}),x=(t=>(t.CANCEL="cancel",t.OTHER="other",t))(x||{}),S=(t=>(t.SINGLE="SINGLE",t.DOUBLE="DOUBLE",t))(S||{});const M=t=>{const g=()=>{if(n=="success")return e.jsx(A.default,{"data-test":"static-icon"});if(n=="warning")return e.jsx(N.default,{"data-test":"static-icon"});if(n=="error")return e.jsx(E.default,{"data-test":"static-icon"});if(n==="loading")return e.jsx(w.Spinner,{size:"large"});if(n==="retry")return e.jsx(I.default,{"data-test":"static-icon"});if(n=="info")return e.jsx(z.default,{"data-test":"static-icon"})},{states:n,heading:c,subline:d,errorText:u,icon:j=g(),isButtonEnabled:m,type:L,buttonText:T,buttonType:C,onButtonClick:o,leadingIcon:B,width:O,headerImage:l,iconWidth:R,iconHeight:b,closeButtonType:f,secondaryButtonText:q,"data-test":a}=t;return e.jsxs(i.StateComponentContainer,{width:O,"data-test":a,children:[e.jsx(i.StateIcon,{iconWidth:R,iconHeight:b,"data-test":"state-icon",children:l?e.jsx("img",{"data-test":"header-image",src:l,width:"100%",height:"auto",alt:""}):j}),e.jsxs(i.StateHeading,{size:t.size,children:[t.size==="SMALL"&&e.jsx(r.TitleRegular,{children:c}),t.size!=="SMALL"&&e.jsx(r.TitleMedium,{children:c})]}),e.jsxs(i.StateSubline,{children:[t.size!=="SMALL"&&e.jsx(r.BodyPrimary,{color:s.COLORS.content.secondary,children:d}),t.size==="SMALL"&&e.jsx(r.BodySecondary,{color:s.COLORS.content.secondary,children:d}),u&&e.jsx(r.BodySecondary,{color:s.COLORS.content.negative,style:{marginTop:8,whiteSpace:"pre-line"},children:u})]}),t.children??e.jsx(e.Fragment,{}),m&&e.jsx(e.Fragment,{children:e.jsxs(i.ButtonContainer,{size:t.size,children:[L=="DOUBLE"&&e.jsx(h.Button,{"data-test":`${a}-cancel`,onClick:()=>o&&o("cancel"),buttonType:f||"secondary",buttonText:q||"Cancel",matchParentWidth:!0}),e.jsx(h.Button,{"data-test":`${a}-primary`,onClick:()=>o&&o("other"),buttonType:C??"primary",LeadingIcon:B,buttonText:T??"Retry",matchParentWidth:!0})]})})]})};exports.ButtonActions=x;exports.ButtonTypes=S;exports.StateComponent=M;exports.StateInterface=y;
 //# sourceMappingURL=StateComponent.js.map

package/dist/cjs/components/states/StateComponent.js.map CHANGED Viewed

	@@ -1 +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":"oiBAwBO,IAAKA,GAAAA,IACXA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,KAAO,OANIA,IAAAA,GAAA,CAAA,CAAA,EASAC,GAAAA,IACXA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFGA,IAAAA,GAAA,CAAA,CAAA,EAIAC,GAAAA,IACXA,EAAA,OAAS,SACTA,EAAA,OAAS,SAFEA,IAAAA,GAAA,CAAA,CAAA,EA4BL,MAAMC,EAERC,GAAU,CACd,MAAMC,EAAW,IAAM,CACtB,GAAIC,GAAU,UACb,~~aAAQC~~,EAAAA,QAAA,~~EAAY~~,~~EAErB~~,~~GAAID~~,GAAU,UACb,~~aAAQE~~,EAAAA,QAAA,~~EAAY~~,~~EAErB~~,~~GAAIF~~,GAAU,QACb,~~aAAQG~~,EAAAA,QAAA,~~EAAU~~,~~EAEnB~~,~~GAAIH~~,IAAW,UACd,~~OAAOI~~,EAAAA,~~IAACC~~,EAAAA,QAAA,CAAQ,KAAM,OAAA,CAAS,EAEhC,GAAIL,IAAW,QACd,~~aAAQM~~,EAAAA,QAAA,~~EAAU~~,~~EAEnB~~,GAAIN,GAAU,OACb,~~aAAQO~~,EAAAA,QAAA,~~EAAS~~,~~CAEnB~~,EACM,CACL,OAAAP,EACA,QAAAQ,EACA,QAAAC,EACA,UAAAC,EACA,KAAAC,EAAOZ,EAAA,EACP,gBAAAa,EACA,KAAAC,EACA,WAAAC,EACA,WAAAC,EACA,cAAAC,EACA,YAAAC,EACA,MAAAC,EACA,YAAAC,EACA,UAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,oBAAAC,EACA,YAAaC,CAAA,EACV1B,EAEJ,OACC2B,EAAAA,KAACC,EAAAA,wBAAA,CAAwB,MAAAR,EAAc,YAAWM,EACjD,SAAA,~~CAAApB~~,~~MAACuB~~,EAAAA,UAAA,~~CAAU~~,UAAAP,~~EAAsB~~,WAAAC,~~EAC/B~~,SAAAF,~~QACC~~,MAAA,~~CAAI~~,~~IAAKA~~,~~EAAa~~,MAAO,~~OAAQ~~,OAAQ,~~OAAQ~~,IAAK,EAAA,~~CAAI~~,~~EAE/DR~~,~~EAEF~~,~~EACAc~~,EAAAA,KAACG,EAAAA,aAAA,CAAa,KAAM9B,EAAM,KACxB,SAAA,CAAAA,EAAM,OAAS,~~SAAWM~~,EAAAA,~~IAACyB~~,EAAAA,aAAA,CAAc,SAAArB,EAAQ,EACjDV,EAAM,OAAS,~~SAAWM~~,EAAAA,~~IAAC0B~~,EAAAA,aAAa,SAAAtB,CAAA,CAAQ,CAAA,EAClD,SACCuB,EAAAA,aAAA,CACC,SAAA,CAAAjC,EAAM,OAAS,~~SACfM~~,EAAAA,~~IAAC4B~~,EAAAA,YAAA,CAAY,MAAOC,EAAAA,OAAO,QAAQ,UAAY,SAAAxB,CAAA,CAAQ,EAEvDX,EAAM,OAAS,~~SACfM~~,EAAAA,~~IAAC8B~~,EAAAA,eAAc,MAAOD,EAAAA,OAAO,QAAQ,UACnC,SAAAxB,CAAA,CACF,EAEAC,~~GACAN~~,EAAAA,~~IAAC8B~~,EAAAA,cAAA,CACA,MAAOD,EAAAA,OAAO,QAAQ,SACtB,MAAO,CAAE,UAAW,EAAG,WAAY,UAAA,EAElC,SAAAvB,CAAA,CAAA,CACF,EAEF,EACCZ,EAAM,~~UAAYM~~,~~MAAA+B~~,EAAAA,SAAA,CAAA,CAAE,EACpBvB,~~GACAR~~,EAAAA,~~IAAA+B~~,WAAA,CACC,SAAAV,EAAAA,KAACW,EAAAA,gBAAA,CAAgB,KAAMtC,EAAM,KAC3B,SAAA,CAAAe,GAAQ,~~UACRT~~,EAAAA,~~IAACiC~~,EAAAA,OAAA,CACA,YAAW,GAAGb,CAAQ,UACtB,QAAS,IACRR,GAAiBA,EAAc,QAAA,EAEhC,WAAYM,GAAmB,YAC/B,WAAYC,GAAuB,SACnC,iBAAgB,EAAA,CAAA,~~EAGlBnB~~,EAAAA,~~IAACiC~~,EAAAA,OAAA,CACA,YAAW,GAAGb,CAAQ,WACtB,QAAS,IACRR,GAAiBA,EAAc,OAAA,EAEhC,WAAYD,GAAc,UAC1B,YAAaE,EACb,WAAYH,GAAc,QAC1B,iBAAgB,EAAA,CAAA,CACjB,CAAA,CACD,CAAA,CACD,CAAA,EAEF,CAEF"}
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 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":"oiBAwBO,IAAKA,GAAAA,IACXA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,KAAO,OANIA,IAAAA,GAAA,CAAA,CAAA,EASAC,GAAAA,IACXA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFGA,IAAAA,GAAA,CAAA,CAAA,EAIAC,GAAAA,IACXA,EAAA,OAAS,SACTA,EAAA,OAAS,SAFEA,IAAAA,GAAA,CAAA,CAAA,EA4BL,MAAMC,EAERC,GAAU,CACd,MAAMC,EAAW,IAAM,CACtB,GAAIC,GAAU,UACb,OAAOC,EAAAA,IAACC,EAAAA,QAAA,CAAY,YAAU,aAAA,CAAc,EAE7C,GAAIF,GAAU,UACb,OAAOC,EAAAA,IAACE,EAAAA,QAAA,CAAY,YAAU,aAAA,CAAc,EAE7C,GAAIH,GAAU,QACb,OAAOC,EAAAA,IAACG,EAAAA,QAAA,CAAU,YAAU,aAAA,CAAc,EAE3C,GAAIJ,IAAW,UACd,OAAOC,EAAAA,IAACI,EAAAA,QAAA,CAAQ,KAAM,OAAA,CAAS,EAEhC,GAAIL,IAAW,QACd,OAAOC,EAAAA,IAACK,EAAAA,QAAA,CAAU,YAAU,aAAA,CAAc,EAE3C,GAAIN,GAAU,OACb,OAAOC,EAAAA,IAACM,EAAAA,QAAA,CAAS,YAAU,aAAA,CAAc,CAE3C,EACM,CACL,OAAAP,EACA,QAAAQ,EACA,QAAAC,EACA,UAAAC,EACA,KAAAC,EAAOZ,EAAA,EACP,gBAAAa,EACA,KAAAC,EACA,WAAAC,EACA,WAAAC,EACA,cAAAC,EACA,YAAAC,EACA,MAAAC,EACA,YAAAC,EACA,UAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,oBAAAC,EACA,YAAaC,CAAA,EACV1B,EAEJ,OACC2B,EAAAA,KAACC,EAAAA,wBAAA,CAAwB,MAAAR,EAAc,YAAWM,EACjD,SAAA,CAAAvB,EAAAA,IAAC0B,EAAAA,UAAA,CACA,UAAAP,EACA,WAAAC,EACA,YAAU,aAET,SAAAF,EACAlB,EAAAA,IAAC,MAAA,CACA,YAAU,eACV,IAAKkB,EACL,MAAO,OACP,OAAQ,OACR,IAAK,EAAA,CAAA,EAGNR,CAAA,CAAA,EAGFc,EAAAA,KAACG,EAAAA,aAAA,CAAa,KAAM9B,EAAM,KACxB,SAAA,CAAAA,EAAM,OAAS,SAAWG,EAAAA,IAAC4B,EAAAA,aAAA,CAAc,SAAArB,EAAQ,EACjDV,EAAM,OAAS,SAAWG,EAAAA,IAAC6B,EAAAA,aAAa,SAAAtB,CAAA,CAAQ,CAAA,EAClD,SACCuB,EAAAA,aAAA,CACC,SAAA,CAAAjC,EAAM,OAAS,SACfG,EAAAA,IAAC+B,EAAAA,YAAA,CAAY,MAAOC,EAAAA,OAAO,QAAQ,UAAY,SAAAxB,CAAA,CAAQ,EAEvDX,EAAM,OAAS,SACfG,EAAAA,IAACiC,EAAAA,eAAc,MAAOD,EAAAA,OAAO,QAAQ,UACnC,SAAAxB,CAAA,CACF,EAEAC,GACAT,EAAAA,IAACiC,EAAAA,cAAA,CACA,MAAOD,EAAAA,OAAO,QAAQ,SACtB,MAAO,CAAE,UAAW,EAAG,WAAY,UAAA,EAElC,SAAAvB,CAAA,CAAA,CACF,EAEF,EACCZ,EAAM,UAAYG,MAAAkC,EAAAA,SAAA,CAAA,CAAE,EACpBvB,GACAX,EAAAA,IAAAkC,WAAA,CACC,SAAAV,EAAAA,KAACW,EAAAA,gBAAA,CAAgB,KAAMtC,EAAM,KAC3B,SAAA,CAAAe,GAAQ,UACRZ,EAAAA,IAACoC,EAAAA,OAAA,CACA,YAAW,GAAGb,CAAQ,UACtB,QAAS,IACRR,GAAiBA,EAAc,QAAA,EAEhC,WAAYM,GAAmB,YAC/B,WAAYC,GAAuB,SACnC,iBAAgB,EAAA,CAAA,EAGlBtB,EAAAA,IAACoC,EAAAA,OAAA,CACA,YAAW,GAAGb,CAAQ,WACtB,QAAS,IACRR,GAAiBA,EAAc,OAAA,EAEhC,WAAYD,GAAc,UAC1B,YAAaE,EACb,WAAYH,GAAc,QAC1B,iBAAgB,EAAA,CAAA,CACjB,CAAA,CACD,CAAA,CACD,CAAA,EAEF,CAEF"}

package/dist/cjs/components/stepper/Stepper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../constants/Theme.js"),v=require("../../assets/icons/check.svg.js"),C=require("../../assets/icons/errorInfo.svg.js"),d=require("../TypographyStyle.js"),h=require("./Stepper.styled.js"),j=r=>{const{steps:t,activeStep:o,onClickingEachStep:l,hideHoverState:a}=r;return e.jsx(h.StepperContainer,{children:t.map((s,i)=>e.jsx(x,{stepsCount:t.length,eachStep:s,onClickingStep:n=>{l(n)},isActive:o?.stepKey==s?.stepKey,isLastElement:i==t.length-1,index:i,hideHoverState:a},i))})},x=r=>{const{eachStep:t,isLastElement:o,index:l,isActive:a,onClickingStep:s,hideHoverState:i}=r,{stepName:n,isCompleted:u,isError:S,isInActive:c}=t,g=()=>{!c&&s(t)},p=()=>a?"active":u?"completed":S?"error":c?"inactive":"default";return e.jsxs(h.SingleStepperChildContainer,{stepsCount:r.stepsCount,onClick:g,selectedState:p(),isInActive:c||i,children:[e.jsxs("div",{className:`hover-container ${c?"blocked":"pointer"} `,children:[e.jsx("div",{className:"badge",children:p()=="completed"?e.jsx(v.default,{height:16,width:16,color:m.COLORS.content.positive}):p()=="error"?e.jsx(C.default,{height:16,width:16}):e.jsx(d.BodySecondary,{className:"badge-text",children:l+1})}),e.jsx(d.BodyPrimary,{className:"step-text",title:n,children:n})]}),e.jsx("div",{className:o?"":"horizontal-divider"})]})};exports.Stepper=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../constants/Theme.js"),v=require("../../assets/icons/check.svg.js"),C=require("../../assets/icons/errorInfo.svg.js"),p=require("../TypographyStyle.js"),h=require("./Stepper.styled.js"),y=s=>{const{steps:t,activeStep:o,onClickingEachStep:a,hideHoverState:d}=s;return e.jsx(h.StepperContainer,{children:t.map((r,i)=>e.jsx(j,{stepsCount:t.length,eachStep:r,onClickingStep:n=>{a(n)},isActive:o?.stepKey==r?.stepKey,isLastElement:i==t.length-1,index:i,hideHoverState:d},i))})},j=s=>{const{eachStep:t,isLastElement:o,index:a,isActive:d,onClickingStep:r,hideHoverState:i}=s,{stepName:n,isCompleted:u,isError:S,isInActive:c}=t,g=()=>{!c&&r(t)},l=()=>d?"active":u?"completed":S?"error":c?"inactive":"default";return e.jsxs(h.SingleStepperChildContainer,{stepsCount:s.stepsCount,onClick:g,selectedState:l(),isInActive:c||i,children:[e.jsxs("div",{className:`hover-container ${c?"blocked":"pointer"} `,children:[e.jsx("div",{className:"badge","data-testid":`step-badge-${t.stepKey}`,children:l()=="completed"?e.jsx(v.default,{"data-testid":"badge-icon",height:16,width:16,color:m.COLORS.content.positive}):l()=="error"?e.jsx(C.default,{"data-testid":"badge-icon",height:16,width:16}):e.jsx(p.BodySecondary,{className:"badge-text",children:a+1})}),e.jsx(p.BodyPrimary,{className:"step-text",title:n,children:n})]}),e.jsx("div",{className:o?"":"horizontal-divider"})]})};exports.Stepper=y;
 //# sourceMappingURL=Stepper.js.map

package/dist/cjs/components/stepper/Stepper.js.map CHANGED Viewed

	@@ -1 +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":"6TAiBaA,EAAWC,GAAiC,CACxD,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,mBAAAC,EAAoB,eAAAC,GAC9CJ,EAED,aACEK,EAAAA,iBAAA,CACC,SAAAJ,EAAM,IAAI,CAACK,EAAaC,IACxBC,EAAAA,IAACC,EAAA,CACA,WAAYR,EAAM,OAClB,SAAUK,EACV,eAAiBI,GAAS,CACzBP,EAAmBO,CAAI,CACxB,EACA,SAAUR,GAAY,SAAWI,GAAa,QAE9C,cAAeC,GAASN,EAAM,OAAS,EACvC,MAAAM,EACA,eAAAH,CAAA,EAHKG,CAAA,CAKN,EACF,CAEF,EAEME,EAAiBE,GAA8B,CACpD,KAAM,CACL,SAAAC,EACA,cAAAC,EACA,MAAAN,EACA,SAAAO,EACA,eAAAC,EACA,eAAAX,CAAA,EACGO,EACE,CAAE,SAAAK,EAAU,YAAAC,EAAa,QAAAC,EAAS,WAAAC,GAAeP,EACjDQ,EAAa,IAAM,CACxB,CAACD,GAAcJ,EAAeH,CAAQ,CACvC,EACMS,EAAe,IAChBP,EACI,SAEJG,EACI,YAEJC,EACI,QAEJC,EACI,WAED,UAER,OACCG,EAAAA,KAACC,EAAAA,4BAAA,CACA,WAAYZ,EAAM,WAClB,QAASS,EACT,cAAeC,EAAA,EACf,WAAYF,GAAcf,EAE1B,SAAA,CAAAkB,EAAAA,KAAC,OAAI,UAAW,mBAAmBH,EAAa,UAAY,SAAS,IACpE,SAAA,CAAAX,~~MAAC~~,MAAA,CAAI,UAAU,~~QACb~~,~~SAAAa~~,EAAA,GAAkB,YAClBb,EAAAA,IAACgB,EAAAA,QAAA,~~CAAM~~,OAAQ,~~GAAI~~,MAAO,~~GAAI~~,MAAOC,EAAAA,OAAO,QAAQ,QAAA,~~CAAU~~,~~EAC3DJ~~,~~KAAkB~~,QACrBb,~~EAAAA~~,~~IAACkB,~~EAAAA,QAAA,CAAU,OAAQ,GAAI,MAAO,EAAA,CAAI,~~QAEjCC~~,EAAAA,cAAA,CAAc,UAAU,aAAc,SAAApB,EAAQ,EAAE,EAEnD,QACCqB,EAAAA,YAAA,CAAY,UAAU,YAAY,MAAOZ,EACxC,SAAAA,CAAA,CACF,CAAA,EACD,QACC,MAAA,CAAI,UAAYH,EAAuC,GAAvB,oBAAuB,CAAI,CAAA,CAAA,CAAA,CAG/D"}
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\" 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":"6TAiBaA,EAAWC,GAAiC,CACxD,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,mBAAAC,EAAoB,eAAAC,GAC9CJ,EAED,aACEK,EAAAA,iBAAA,CACC,SAAAJ,EAAM,IAAI,CAACK,EAAaC,IACxBC,EAAAA,IAACC,EAAA,CACA,WAAYR,EAAM,OAClB,SAAUK,EACV,eAAiBI,GAAS,CACzBP,EAAmBO,CAAI,CACxB,EACA,SAAUR,GAAY,SAAWI,GAAa,QAE9C,cAAeC,GAASN,EAAM,OAAS,EACvC,MAAAM,EACA,eAAAH,CAAA,EAHKG,CAAA,CAKN,EACF,CAEF,EAEME,EAAiBE,GAA8B,CACpD,KAAM,CACL,SAAAC,EACA,cAAAC,EACA,MAAAN,EACA,SAAAO,EACA,eAAAC,EACA,eAAAX,CAAA,EACGO,EACE,CAAE,SAAAK,EAAU,YAAAC,EAAa,QAAAC,EAAS,WAAAC,GAAeP,EACjDQ,EAAa,IAAM,CACxB,CAACD,GAAcJ,EAAeH,CAAQ,CACvC,EACMS,EAAe,IAChBP,EACI,SAEJG,EACI,YAEJC,EACI,QAEJC,EACI,WAED,UAER,OACCG,EAAAA,KAACC,EAAAA,4BAAA,CACA,WAAYZ,EAAM,WAClB,QAASS,EACT,cAAeC,EAAA,EACf,WAAYF,GAAcf,EAE1B,SAAA,CAAAkB,EAAAA,KAAC,OAAI,UAAW,mBAAmBH,EAAa,UAAY,SAAS,IACpE,SAAA,CAAAX,EAAAA,IAAC,MAAA,CAAI,UAAU,QAAQ,cAAa,cAAcI,EAAS,OAAO,GAChE,SAAAS,EAAA,GAAkB,YAClBb,EAAAA,IAACgB,EAAAA,QAAA,CACA,cAAY,aACZ,OAAQ,GACR,MAAO,GACP,MAAOC,EAAAA,OAAO,QAAQ,QAAA,CAAA,EAEpBJ,EAAA,GAAkB,QACrBb,MAACkB,EAAAA,QAAA,CAAU,cAAY,aAAa,OAAQ,GAAI,MAAO,EAAA,CAAI,EAE3DlB,EAAAA,IAACmB,EAAAA,cAAA,CAAc,UAAU,aAAc,SAAApB,EAAQ,EAAE,EAEnD,QACCqB,EAAAA,YAAA,CAAY,UAAU,YAAY,MAAOZ,EACxC,SAAAA,CAAA,CACF,CAAA,EACD,QACC,MAAA,CAAI,UAAYH,EAAuC,GAAvB,oBAAuB,CAAI,CAAA,CAAA,CAAA,CAG/D"}