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

package/dist/esm/components/radioList/RadioList.js

@@ -1,9 +1,9 @@
-import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
 import { useState as m, useEffect as u } from "react";
 import { RadioListStyled as f } from "./RadioList.styled.js";
 import { TitleRegular as h, BodySecondary as O } from "../TypographyStyle.js";
-import { COLORS as C } from "../../constants/Theme.js";
-import { RadioButton as v } from "../radioButton/RadioButton.js";
+import { COLORS as v } from "../../constants/Theme.js";
+import { RadioButton as C } from "../radioButton/RadioButton.js";
 const T = (t) => {
   const [n, s] = m(
     t.listItems
@@ -12,26 +12,35 @@ const T = (t) => {
     s(t.listItems);
   }, [t.listItems]);
   const d = (e, r) => {
-    let o;
-    const c = [...n];
-    c.forEach((i) => {
-      i.value === r ? (o = i, i.isActive = e) : i.isActive = !e;
-    }), s(c), t.onChange(o);
+    let a;
+    const o = [...n];
+    o.forEach((i) => {
+      i.value === r ? (a = i, i.isActive = e) : i.isActive = !e;
+    }), s(o), t.onChange(a);
   };
-  return /* @__PURE__ */ a(f, { children: [
-    (t.title || t.subTitle) && /* @__PURE__ */ a("div", { className: "title__container", children: [
+  return /* @__PURE__ */ c(f, { children: [
+    (t.title || t.subTitle) && /* @__PURE__ */ c("div", { className: "title__container", children: [
       t.title && /* @__PURE__ */ l(h, { children: t.title }),
-      t.subTitle && /* @__PURE__ */ l(O, { color: C.text.secondary, children: t.subTitle })
+      t.subTitle && /* @__PURE__ */ l(O, { color: v.text.secondary, children: t.subTitle })
     ] }),
-    /* @__PURE__ */ l("div", { style: t.listContainerStyles ?? {}, className: "list__container", children: n.map((e) => /* @__PURE__ */ l(
-      v,
+    /* @__PURE__ */ l(
+      "div",
       {
-        ...e,
-        onValueChange: d,
-        boldOnChecked: t.boldOnChecked
-      },
-      e.value
-    )) })
+        "data-test": "radio-list-container",
+        style: t.listContainerStyles ?? {},
+        className: "list__container",
+        children: n.map((e) => /* @__PURE__ */ l(
+          C,
+          {
+            "data-test": e.value,
+            ...e,
+            onValueChange: d,
+            boldOnChecked: t.boldOnChecked
+          },
+          e.value
+        ))
+      }
+    )
   ] });
 };
 export {

package/dist/esm/components/radioList/RadioList.js.map

@@ -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":";;;;;;AAmBO,MAAMA,IAAsC,CAACC,MAAU;AAC7D,QAAM,CAACC,GAAaC,CAAc,IAAIC;AAAA,IACrCH,EAAM;AAAA,EAAA;AAGP,EAAAI,EAAU,MAAM;AACf,IAAAF,EAAeF,EAAM,SAAS;AAAA,EAC/B,GAAG,CAACA,EAAM,SAAS,CAAC;AAEpB,QAAMK,IAAkB,CAACC,GAAkBC,MAA8B;AACxE,QAAIC;AACJ,UAAMC,IAAmB,CAAC,GAAGR,CAAW;AACxC,IAAAQ,EAAiB,QAAQ,CAACC,MAAW;AACpC,MAAIA,EAAO,UAAUH,KACpBC,IAAiBE,GACjBA,EAAO,WAAcJ,KAErBI,EAAO,WAAc,CAACJ;AAAA,IAExB,CAAC,GACDJ,EAAeO,CAAgB,GAC/BT,EAAM,SAASQ,CAAc;AAAA,EAC9B;AAEA,2BACEG,GAAA,EACE,UAAA;AAAA,KAAAX,EAAM,SAASA,EAAM,aACtB,gBAAAY,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAAZ,EAAM,SAAS,gBAAAa,EAACC,GAAA,EAAc,UAAAd,EAAM,OAAM;AAAA,MAC1CA,EAAM,YACN,gBAAAa,EAACE,GAAA,EAAc,OAAOC,EAAO,KAAK,WAChC,UAAAhB,EAAM,SAAA,CACR;AAAA,IAAA,GAEF;AAAA,IAED,gBAAAa,EAAC,OAAA,EAAI,OAAOb,EAAM,uBAAuB,CAAA,GAAI,WAAU,mBACrD,UAAAC,EAAY,IAAI,CAACgB,MAEhB,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QAEC,GAAGD;AAAA,QACJ,eAAeZ;AAAA,QACf,eAAeL,EAAM;AAAA,MAAA;AAAA,MAHhBiB,EAAS;AAAA,IAAA,CAMhB,EAAA,CACF;AAAA,EAAA,GACD;AAEF;"}
+{"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":";;;;;;AAmBO,MAAMA,IAAsC,CAACC,MAAU;AAC7D,QAAM,CAACC,GAAaC,CAAc,IAAIC;AAAA,IACrCH,EAAM;AAAA,EAAA;AAGP,EAAAI,EAAU,MAAM;AACf,IAAAF,EAAeF,EAAM,SAAS;AAAA,EAC/B,GAAG,CAACA,EAAM,SAAS,CAAC;AAEpB,QAAMK,IAAkB,CAACC,GAAkBC,MAA8B;AACxE,QAAIC;AACJ,UAAMC,IAAmB,CAAC,GAAGR,CAAW;AACxC,IAAAQ,EAAiB,QAAQ,CAACC,MAAW;AACpC,MAAIA,EAAO,UAAUH,KACpBC,IAAiBE,GACjBA,EAAO,WAAcJ,KAErBI,EAAO,WAAc,CAACJ;AAAA,IAExB,CAAC,GACDJ,EAAeO,CAAgB,GAC/BT,EAAM,SAASQ,CAAc;AAAA,EAC9B;AAEA,2BACEG,GAAA,EACE,UAAA;AAAA,KAAAX,EAAM,SAASA,EAAM,aACtB,gBAAAY,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAAZ,EAAM,SAAS,gBAAAa,EAACC,GAAA,EAAc,UAAAd,EAAM,OAAM;AAAA,MAC1CA,EAAM,YACN,gBAAAa,EAACE,GAAA,EAAc,OAAOC,EAAO,KAAK,WAChC,UAAAhB,EAAM,SAAA,CACR;AAAA,IAAA,GAEF;AAAA,IAED,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,aAAU;AAAA,QACV,OAAOb,EAAM,uBAAuB,CAAA;AAAA,QACpC,WAAU;AAAA,QAET,UAAAC,EAAY,IAAI,CAACgB,MAEhB,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YAEA,aAAWD,EAAS;AAAA,YACnB,GAAGA;AAAA,YACJ,eAAeZ;AAAA,YACf,eAAeL,EAAM;AAAA,UAAA;AAAA,UAJhBiB,EAAS;AAAA,QAAA,CAOhB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACD;AAEF;"}

package/dist/esm/components/searchBar/searchBar.js

@@ -1,27 +1,27 @@
 import { jsx as B } from "react/jsx-runtime";
 import { SearchIcon as E } from "../../assets/icons/searchIcon.js";
-import { useState as c, useEffect as d } from "react";
+import { useState as o, useEffect as d } from "react";
 import w from "../../assets/icons/cross.svg.js";
 import { Input as x } from "../input/Input.js";
 const O = (e) => {
   const {
-    isEnabled: o,
+    isEnabled: c,
     onEnter: h,
     placeholder: C,
     width: v,
     variant: b,
     validate: S,
     isActive: i
-  } = e, [f, t] = c("search"), [m, s] = c("default"), [k, n] = c(
-    i ? "active" : o ? "none" : "disabled"
-  ), [l, r] = c(
+  } = e, [f, t] = o("search"), [m, s] = o("default"), [k, n] = o(
+    i ? "active" : c ? "none" : "disabled"
+  ), [l, r] = o(
     e.initialValue || e.searchValue || ""
   );
   d(() => {
     r(e.searchValue ?? ""), e.searchValue?.trim()?.length ? t("cross") : t("search");
   }, [e.searchValue]), d(() => {
-    n(i ? "active" : o ? "none" : "disabled");
-  }, [o, i]), d(() => {
+    n(i ? "active" : c ? "none" : "disabled");
+  }, [c, i]), d(() => {
     e.reset && g();
   }, [e?.reset]);
   const I = (a, u) => {
@@ -31,7 +31,7 @@ const O = (e) => {
     }
     a.trim().length ? t("cross") : t("search");
   }, V = (a) => {
-    o && h(a);
+    c && h(a);
   }, g = () => {
     t("search"), s("default"), r(""), e.onChange(""), n("none"), h("");
   };
@@ -42,7 +42,7 @@ const O = (e) => {
       id: "search-bar",
       validate: S,
       onFocus: () => {
-        l.length && t("cross"), m === "default" && o && (s("clicked"), n("active"));
+        l.length && t("cross"), m === "default" && c && (s("clicked"), n("active"));
       },
       width: v,
       state: k,
@@ -53,7 +53,8 @@ const O = (e) => {
         icon: w,
         callback: () => {
           g(), e.onClickCross && e.onClickCross();
-        }
+        },
+        "data-test": "search-clear-icon"
       } : void 0,
       onChangeText: I,
       placeholder: C,

package/dist/esm/components/searchBar/searchBar.js.map

@@ -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":";;;;;AA2BO,MAAMA,IAAY,CAACC,MAA0B;AACnD,QAAM;AAAA,IACL,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACGP,GACE,CAACQ,GAAMC,CAAO,IAAIC,EAAiB,QAAQ,GAC3C,CAACC,GAAMC,CAAO,IAAIF,EAAe,SAAS,GAC1C,CAACG,GAAYC,CAAa,IAAIJ;AAAA,IACnCH,IAAW,WAAWN,IAAY,SAAS;AAAA,EAAA,GAEtC,CAACc,GAAOC,CAAQ,IAAIN;AAAA,IACzBV,EAAM,gBAAgBA,EAAM,eAAe;AAAA,EAAA;AAG5C,EAAAiB,EAAU,MAAM;AACf,IAAAD,EAAShB,EAAM,eAAe,EAAE,GAC5BA,EAAM,aAAa,KAAA,GAAQ,SAC9BS,EAAQ,OAAO,IAEfA,EAAQ,QAAQ;AAAA,EAElB,GAAG,CAACT,EAAM,WAAW,CAAC,GAEtBiB,EAAU,MAAM;AACf,IACGH,EADHP,IACiB,WACdN,IACc,SACA,UAHQ;AAAA,EAI1B,GAAG,CAACA,GAAWM,CAAQ,CAAC,GAExBU,EAAU,MAAM;AACf,IAAAjB,EAAM,SAASkB,EAAA;AAAA,EAChB,GAAG,CAAClB,GAAO,KAAK,CAAC;AAEjB,QAAMmB,IAAiB,CAACC,GAAoBC,MAAe;AAI1D,QAHArB,EAAM,SAASoB,CAAU,GACzBJ,EAASI,CAAU,GAGlBC,GAAO,SAAS,cACfA,EAAM,UAAU,MAAMA,EAAM,YAAY,KACxC;AACD,MAAAC,EAAYF,CAAU;AACtB;AAAA,IACD;AAEA,IAAIA,EAAW,KAAA,EAAO,SACrBX,EAAQ,OAAO,IAEfA,EAAQ,QAAQ;AAAA,EAElB,GAEMa,IAAc,CAACF,MAAuB;AAC3C,IAAAnB,KAAaC,EAAQkB,CAAU;AAAA,EAChC,GAEMF,IAAc,MAAM;AACzB,IAAAT,EAAQ,QAAQ,GAChBG,EAAQ,SAAS,GACjBI,EAAS,EAAE,GACXhB,EAAM,SAAS,EAAE,GACjBc,EAAc,MAAM,GACpBZ,EAAQ,EAAE;AAAA,EACX;AAEA,SACC,gBAAAqB;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,aAAWxB,EAAM,WAAW;AAAA,MAC5B,IAAG;AAAA,MACH,UAAAM;AAAA,MACA,SAAS,MAAM;AACd,QAAIS,EAAM,UAAQN,EAAQ,OAAO,GAC7BE,MAAS,aACRV,MACHW,EAAQ,SAAS,GACjBE,EAAc,QAAQ;AAAA,MAGzB;AAAA,MACA,OAAAV;AAAA,MACA,OAAOS;AAAA,MACP,UACCL,MAAS,YAAYG,MAAS,YAC3B;AAAA,QACA,MAAMc;AAAA,MAAA,IAEN;AAAA,MAEJ,WACCjB,MAAS,WAAW,CAACR,EAAM,eACxB;AAAA,QACA,MAAM0B;AAAAA,QACN,UAAU,MAAM;AACf,UAAAR,EAAA,GACAlB,EAAM,gBAAgBA,EAAM,aAAA;AAAA,QAC7B;AAAA,MAAA,IAEA;AAAA,MAEJ,cAAcmB;AAAA,MACd,aAAAhB;AAAA,MACA,SAAAE;AAAA,MACA,OAAAU;AAAA,MACA,QAAQ,MAAM;AACb,QAAKA,EAAM,UACVH,EAAQ,SAAS,GAElBE,EAAc,MAAM;AAAA,MACrB;AAAA,MACA,QAAQ,EAAE,MAAM,IAAI,aAAad,EAAM,aAAA;AAAA,IAAa;AAAA,EAAA;AAGvD;"}
+{"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":";;;;;AA2BO,MAAMA,IAAY,CAACC,MAA0B;AACnD,QAAM;AAAA,IACL,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACGP,GACE,CAACQ,GAAMC,CAAO,IAAIC,EAAiB,QAAQ,GAC3C,CAACC,GAAMC,CAAO,IAAIF,EAAe,SAAS,GAC1C,CAACG,GAAYC,CAAa,IAAIJ;AAAA,IACnCH,IAAW,WAAWN,IAAY,SAAS;AAAA,EAAA,GAEtC,CAACc,GAAOC,CAAQ,IAAIN;AAAA,IACzBV,EAAM,gBAAgBA,EAAM,eAAe;AAAA,EAAA;AAG5C,EAAAiB,EAAU,MAAM;AACf,IAAAD,EAAShB,EAAM,eAAe,EAAE,GAC5BA,EAAM,aAAa,KAAA,GAAQ,SAC9BS,EAAQ,OAAO,IAEfA,EAAQ,QAAQ;AAAA,EAElB,GAAG,CAACT,EAAM,WAAW,CAAC,GAEtBiB,EAAU,MAAM;AACf,IACGH,EADHP,IACiB,WACdN,IACc,SACA,UAHQ;AAAA,EAI1B,GAAG,CAACA,GAAWM,CAAQ,CAAC,GAExBU,EAAU,MAAM;AACf,IAAAjB,EAAM,SAASkB,EAAA;AAAA,EAChB,GAAG,CAAClB,GAAO,KAAK,CAAC;AAEjB,QAAMmB,IAAiB,CAACC,GAAoBC,MAAe;AAI1D,QAHArB,EAAM,SAASoB,CAAU,GACzBJ,EAASI,CAAU,GAGlBC,GAAO,SAAS,cACfA,EAAM,UAAU,MAAMA,EAAM,YAAY,KACxC;AACD,MAAAC,EAAYF,CAAU;AACtB;AAAA,IACD;AAEA,IAAIA,EAAW,KAAA,EAAO,SACrBX,EAAQ,OAAO,IAEfA,EAAQ,QAAQ;AAAA,EAElB,GAEMa,IAAc,CAACF,MAAuB;AAC3C,IAAAnB,KAAaC,EAAQkB,CAAU;AAAA,EAChC,GAEMF,IAAc,MAAM;AACzB,IAAAT,EAAQ,QAAQ,GAChBG,EAAQ,SAAS,GACjBI,EAAS,EAAE,GACXhB,EAAM,SAAS,EAAE,GACjBc,EAAc,MAAM,GACpBZ,EAAQ,EAAE;AAAA,EACX;AAEA,SACC,gBAAAqB;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,aAAWxB,EAAM,WAAW;AAAA,MAC5B,IAAG;AAAA,MACH,UAAAM;AAAA,MACA,SAAS,MAAM;AACd,QAAIS,EAAM,UAAQN,EAAQ,OAAO,GAC7BE,MAAS,aACRV,MACHW,EAAQ,SAAS,GACjBE,EAAc,QAAQ;AAAA,MAGzB;AAAA,MACA,OAAAV;AAAA,MACA,OAAOS;AAAA,MACP,UACCL,MAAS,YAAYG,MAAS,YAC3B;AAAA,QACA,MAAMc;AAAA,MAAA,IAEN;AAAA,MAEJ,WACCjB,MAAS,WAAW,CAACR,EAAM,eACxB;AAAA,QACA,MAAM0B;AAAAA,QACN,UAAU,MAAM;AACf,UAAAR,EAAA,GACAlB,EAAM,gBAAgBA,EAAM,aAAA;AAAA,QAC7B;AAAA,QACA,aAAa;AAAA,MAAA,IAEb;AAAA,MAEJ,cAAcmB;AAAA,MACd,aAAAhB;AAAA,MACA,SAAAE;AAAA,MACA,OAAAU;AAAA,MACA,QAAQ,MAAM;AACb,QAAKA,EAAM,UACVH,EAAQ,SAAS,GAElBE,EAAc,MAAM;AAAA,MACrB;AAAA,MACA,QAAQ,EAAE,MAAM,IAAI,aAAad,EAAM,aAAA;AAAA,IAAa;AAAA,EAAA;AAGvD;"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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