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

@bikdotai/bik-component-library 0.0.840 → 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 (99) hide show

package/dist/esm/components/floater/floater.js CHANGED Viewed

@@ -1,49 +1,50 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as d } from "react/jsx-runtime";
 import { useRef as g, useState as s, useEffect as O } from "react";
 const H = (f) => {
-  const i = g(null), [c, l] = s(0), [d, o] = s(0), [h, w] = s(!1), a = (t) => {
+  const i = g(null), [r, o] = s(0), [c, l] = s(0), [h, a] = s(!1), w = (t) => {
     if (f.useDefaultOffsets) {
-      o(t.left);
+      l(t.left);
       return;
     }
     let e = 0;
     f.leftOffset ? e = t.left + f.leftOffset : e = t.left + t.width + 30;
     const n = i?.current;
     if (!n) {
-      o(e);
+      l(e);
       return;
     }
-    e > window.innerWidth - n.offsetWidth && (e = window.innerWidth - n.offsetWidth - 50), o(e);
+    e > window.innerWidth - n.offsetWidth && (e = window.innerWidth - n.offsetWidth - 50), l(e);
   }, m = (t) => {
     if (f.useDefaultOffsets) {
-      l(t.top);
+      o(t.top);
       return;
     }
     let e = t.top;
     f.topOffset && (e = t.top + f.topOffset);
     const n = i?.current;
     if (!n) {
-      l(e);
+      o(e);
       return;
     }
     const u = window.innerHeight;
-    t.top + n.offsetHeight > u && (e = t.top - (t.top + n.offsetHeight - u) - 10), l(e);
+    t.top + n.offsetHeight > u && (e = t.top - (t.top + n.offsetHeight - u) - 10), o(e);
   };
   return O(() => {
     if (f.refElement.current) {
       const t = f.refElement.current.getBoundingClientRect();
-      a(t), m(t), w(!0);
+      w(t), m(t), a(!0);
     }
-  }), h ? /* @__PURE__ */ r(
+  }), h ? /* @__PURE__ */ d(
     "div",
     {
+      "data-testid": "floater-position",
       style: {
-        top: c,
-        left: d,
+        top: r,
+        left: c,
         position: "fixed",
         zIndex: 1e3
       },
-      children: /* @__PURE__ */ r("div", { ref: i, children: f.children })
+      children: /* @__PURE__ */ d("div", { ref: i, children: f.children })
     }
   ) : null;
 };

package/dist/esm/components/floater/floater.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"floater.js","sources":["../../../../src/components/floater/floater.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport type FloaterProps = {\n\tchildren?: React.ReactNode;\n\trefElement: React.MutableRefObject<any>;\n\tleftOffset?: number;\n\ttopOffset?: number;\n\tuseDefaultOffsets?: boolean;\n};\n\nexport const Floater = (props: FloaterProps) => {\n\tconst childRef = useRef<HTMLDivElement \| null>(null);\n\tconst [top, setTop] = useState<number>(0);\n\tconst [left, setLeft] = useState<number>(0);\n\tconst [show, setShow] = useState<boolean>(false);\n\n\tconst calculateLeft = (rect: DOMRect) => {\n\t\tif (props.useDefaultOffsets) {\n\t\t\tsetLeft(rect.left);\n\t\t\treturn;\n\t\t}\n\n\t\tlet left = 0;\n\t\tif (props.leftOffset) {\n\t\t\tleft = rect.left + props.leftOffset;\n\t\t} else {\n\t\t\tleft = rect.left + rect.width + 30;\n\t\t}\n\t\tconst childElement: any = childRef?.current;\n\t\tif (!childElement) {\n\t\t\tsetLeft(left);\n\t\t\treturn;\n\t\t}\n\t\tif (left > window.innerWidth - childElement.offsetWidth) {\n\t\t\tleft = window.innerWidth - childElement.offsetWidth - 50;\n\t\t}\n\t\tsetLeft(left);\n\t};\n\n\tconst calculateTop = (rect: DOMRect) => {\n\t\tif (props.useDefaultOffsets) {\n\t\t\tsetTop(rect.top);\n\t\t\treturn;\n\t\t}\n\t\tlet top: number = rect.top;\n\n\t\tif (props.topOffset) {\n\t\t\ttop = rect.top + props.topOffset;\n\t\t}\n\n\t\tconst childElement: any = childRef?.current;\n\t\tif (!childElement) {\n\t\t\tsetTop(top);\n\t\t\treturn;\n\t\t}\n\t\tconst windowHeight = window.innerHeight;\n\t\tif (rect.top + childElement.offsetHeight > windowHeight) {\n\t\t\ttop =\n\t\t\t\trect.top - (rect.top + childElement.offsetHeight - windowHeight) - 10;\n\t\t}\n\t\tsetTop(top);\n\t};\n\n\tuseEffect(() => {\n\t\tif (props.refElement.current) {\n\t\t\tconst rect = props.refElement.current.getBoundingClientRect();\n\t\t\tcalculateLeft(rect);\n\t\t\tcalculateTop(rect);\n\t\t\tsetShow(true);\n\t\t}\n\t});\n\n\tif (!show) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\ttop: top,\n\t\t\t\tleft: left,\n\t\t\t\tposition: 'fixed',\n\t\t\t\tzIndex: 1000,\n\t\t\t}}\n\t\t>\n\t\t\t<div ref={childRef}>{props.children}</div>\n\t\t</div>\n\t);\n};\n"],"names":["Floater","props","childRef","useRef","top","setTop","useState","left","setLeft","show","setShow","calculateLeft","rect","childElement","calculateTop","windowHeight","useEffect","jsx"],"mappings":";;AAUO,MAAMA,IAAU,CAACC,MAAwB;AAC/C,QAAMC,IAAWC,EAA8B,IAAI,GAC7C,CAACC,GAAKC,CAAM,IAAIC,EAAiB,CAAC,GAClC,CAACC,GAAMC,CAAO,IAAIF,EAAiB,CAAC,GACpC,CAACG,GAAMC,CAAO,IAAIJ,EAAkB,EAAK,GAEzCK,IAAgB,CAACC,MAAkB;AACxC,QAAIX,EAAM,mBAAmB;AAC5B,MAAAO,EAAQI,EAAK,IAAI;AACjB;AAAA,IACD;AAEA,QAAIL,IAAO;AACX,IAAIN,EAAM,aACTM,IAAOK,EAAK,OAAOX,EAAM,aAEzBM,IAAOK,EAAK,OAAOA,EAAK,QAAQ;AAEjC,UAAMC,IAAoBX,GAAU;AACpC,QAAI,CAACW,GAAc;AAClB,MAAAL,EAAQD,CAAI;AACZ;AAAA,IACD;AACA,IAAIA,IAAO,OAAO,aAAaM,EAAa,gBAC3CN,IAAO,OAAO,aAAaM,EAAa,cAAc,KAEvDL,EAAQD,CAAI;AAAA,EACb,GAEMO,IAAe,CAACF,MAAkB;AACvC,QAAIX,EAAM,mBAAmB;AAC5B,MAAAI,EAAOO,EAAK,GAAG;AACf;AAAA,IACD;AACA,QAAIR,IAAcQ,EAAK;AAEvB,IAAIX,EAAM,cACTG,IAAMQ,EAAK,MAAMX,EAAM;AAGxB,UAAMY,IAAoBX,GAAU;AACpC,QAAI,CAACW,GAAc;AAClB,MAAAR,EAAOD,CAAG;AACV;AAAA,IACD;AACA,UAAMW,IAAe,OAAO;AAC5B,IAAIH,EAAK,MAAMC,EAAa,eAAeE,MAC1CX,IACCQ,EAAK,OAAOA,EAAK,MAAMC,EAAa,eAAeE,KAAgB,KAErEV,EAAOD,CAAG;AAAA,EACX;AAWA,SATAY,EAAU,MAAM;AACf,QAAIf,EAAM,WAAW,SAAS;AAC7B,YAAMW,IAAOX,EAAM,WAAW,QAAQ,sBAAA;AACtC,MAAAU,EAAcC,CAAI,GAClBE,EAAaF,CAAI,GACjBF,EAAQ,EAAI;AAAA,IACb;AAAA,EACD,CAAC,GAEID,IAKJ,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,KAAAb;AAAA,QACA,MAAAG;AAAA,QACA,UAAU;AAAA,QACV,QAAQ;AAAA,MAAA;AAAA,MAGT,UAAA,gBAAAU,EAAC,OAAA,EAAI,KAAKf,GAAW,YAAM,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA,~~IAZ9B~~;~~AAeT~~;"}
1	+ {"version":3,"file":"floater.js","sources":["../../../../src/components/floater/floater.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport type FloaterProps = {\n\tchildren?: React.ReactNode;\n\trefElement: React.MutableRefObject<any>;\n\tleftOffset?: number;\n\ttopOffset?: number;\n\tuseDefaultOffsets?: boolean;\n};\n\nexport const Floater = (props: FloaterProps) => {\n\tconst childRef = useRef<HTMLDivElement \| null>(null);\n\tconst [top, setTop] = useState<number>(0);\n\tconst [left, setLeft] = useState<number>(0);\n\tconst [show, setShow] = useState<boolean>(false);\n\n\tconst calculateLeft = (rect: DOMRect) => {\n\t\tif (props.useDefaultOffsets) {\n\t\t\tsetLeft(rect.left);\n\t\t\treturn;\n\t\t}\n\n\t\tlet left = 0;\n\t\tif (props.leftOffset) {\n\t\t\tleft = rect.left + props.leftOffset;\n\t\t} else {\n\t\t\tleft = rect.left + rect.width + 30;\n\t\t}\n\t\tconst childElement: any = childRef?.current;\n\t\tif (!childElement) {\n\t\t\tsetLeft(left);\n\t\t\treturn;\n\t\t}\n\t\tif (left > window.innerWidth - childElement.offsetWidth) {\n\t\t\tleft = window.innerWidth - childElement.offsetWidth - 50;\n\t\t}\n\t\tsetLeft(left);\n\t};\n\n\tconst calculateTop = (rect: DOMRect) => {\n\t\tif (props.useDefaultOffsets) {\n\t\t\tsetTop(rect.top);\n\t\t\treturn;\n\t\t}\n\t\tlet top: number = rect.top;\n\n\t\tif (props.topOffset) {\n\t\t\ttop = rect.top + props.topOffset;\n\t\t}\n\n\t\tconst childElement: any = childRef?.current;\n\t\tif (!childElement) {\n\t\t\tsetTop(top);\n\t\t\treturn;\n\t\t}\n\t\tconst windowHeight = window.innerHeight;\n\t\tif (rect.top + childElement.offsetHeight > windowHeight) {\n\t\t\ttop =\n\t\t\t\trect.top - (rect.top + childElement.offsetHeight - windowHeight) - 10;\n\t\t}\n\t\tsetTop(top);\n\t};\n\n\tuseEffect(() => {\n\t\tif (props.refElement.current) {\n\t\t\tconst rect = props.refElement.current.getBoundingClientRect();\n\t\t\tcalculateLeft(rect);\n\t\t\tcalculateTop(rect);\n\t\t\tsetShow(true);\n\t\t}\n\t});\n\n\tif (!show) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"floater-position\"\n\t\t\tstyle={{\n\t\t\t\ttop: top,\n\t\t\t\tleft: left,\n\t\t\t\tposition: 'fixed',\n\t\t\t\tzIndex: 1000,\n\t\t\t}}\n\t\t>\n\t\t\t<div ref={childRef}>{props.children}</div>\n\t\t</div>\n\t);\n};\n"],"names":["Floater","props","childRef","useRef","top","setTop","useState","left","setLeft","show","setShow","calculateLeft","rect","childElement","calculateTop","windowHeight","useEffect","jsx"],"mappings":";;AAUO,MAAMA,IAAU,CAACC,MAAwB;AAC/C,QAAMC,IAAWC,EAA8B,IAAI,GAC7C,CAACC,GAAKC,CAAM,IAAIC,EAAiB,CAAC,GAClC,CAACC,GAAMC,CAAO,IAAIF,EAAiB,CAAC,GACpC,CAACG,GAAMC,CAAO,IAAIJ,EAAkB,EAAK,GAEzCK,IAAgB,CAACC,MAAkB;AACxC,QAAIX,EAAM,mBAAmB;AAC5B,MAAAO,EAAQI,EAAK,IAAI;AACjB;AAAA,IACD;AAEA,QAAIL,IAAO;AACX,IAAIN,EAAM,aACTM,IAAOK,EAAK,OAAOX,EAAM,aAEzBM,IAAOK,EAAK,OAAOA,EAAK,QAAQ;AAEjC,UAAMC,IAAoBX,GAAU;AACpC,QAAI,CAACW,GAAc;AAClB,MAAAL,EAAQD,CAAI;AACZ;AAAA,IACD;AACA,IAAIA,IAAO,OAAO,aAAaM,EAAa,gBAC3CN,IAAO,OAAO,aAAaM,EAAa,cAAc,KAEvDL,EAAQD,CAAI;AAAA,EACb,GAEMO,IAAe,CAACF,MAAkB;AACvC,QAAIX,EAAM,mBAAmB;AAC5B,MAAAI,EAAOO,EAAK,GAAG;AACf;AAAA,IACD;AACA,QAAIR,IAAcQ,EAAK;AAEvB,IAAIX,EAAM,cACTG,IAAMQ,EAAK,MAAMX,EAAM;AAGxB,UAAMY,IAAoBX,GAAU;AACpC,QAAI,CAACW,GAAc;AAClB,MAAAR,EAAOD,CAAG;AACV;AAAA,IACD;AACA,UAAMW,IAAe,OAAO;AAC5B,IAAIH,EAAK,MAAMC,EAAa,eAAeE,MAC1CX,IACCQ,EAAK,OAAOA,EAAK,MAAMC,EAAa,eAAeE,KAAgB,KAErEV,EAAOD,CAAG;AAAA,EACX;AAWA,SATAY,EAAU,MAAM;AACf,QAAIf,EAAM,WAAW,SAAS;AAC7B,YAAMW,IAAOX,EAAM,WAAW,QAAQ,sBAAA;AACtC,MAAAU,EAAcC,CAAI,GAClBE,EAAaF,CAAI,GACjBF,EAAQ,EAAI;AAAA,IACb;AAAA,EACD,CAAC,GAEID,IAKJ,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,eAAY;AAAA,MACZ,OAAO;AAAA,QACN,KAAAb;AAAA,QACA,MAAAG;AAAA,QACA,UAAU;AAAA,QACV,QAAQ;AAAA,MAAA;AAAA,MAGT,UAAA,gBAAAU,EAAC,OAAA,EAAI,KAAKf,GAAW,YAAM,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA,IAb9B;AAgBT;"}

package/dist/esm/components/modals/styledModal.js CHANGED Viewed

@@ -5,7 +5,7 @@ import n from "styled-components";
 import { Modal as h } from "./Modal.js";
 import { TitleMedium as m, BodyCaption as s, BodyPrimary as u } from "../TypographyStyle.js";
 import { COLORS as d } from "../../constants/Theme.js";
-import { Button as o } from "../button/Button.js";
+import { Button as a } from "../button/Button.js";
 const f = n.div`
 	display: flex;
 	flex-direction: column;
@@ -50,7 +50,7 @@ const f = n.div`
 	width: 100%;
 	z-index: 1;
 	box-shadow: ${(e) => e.showShadow ? "inset 0 -3px 6px rgba(0, 0, 0, 0.12)" : "none"};
-`, S = n(o)`
+`, S = n(a)`
 	margin-right: 8px;
 `, j = (e) => typeof window > "u" ? null : c.createPortal(
   /* @__PURE__ */ t(
@@ -78,9 +78,10 @@ const f = n.div`
               e.onBackPress && /* @__PURE__ */ t(
                 "div",
                 {
+                  "data-test": (e["data-test"] || "") + "-back-button",
                   style: { cursor: "pointer" },
-                  onClick: (a) => {
-                    e.onBackPress ? e.onBackPress() : a.stopPropagation();
+                  onClick: (o) => {
+                    e.onBackPress ? e.onBackPress() : o.stopPropagation();
                   },
                   children: /* @__PURE__ */ t(r, { width: 18, height: 18 })
                 }
@@ -146,7 +147,7 @@ const f = n.div`
         (e.primaryButton || e.secondaryButton || e.footerLeftCustomElement) && /* @__PURE__ */ i(C, { style: e.footerContainerStyle, children: [
           e.footerLeftCustomElement && /* @__PURE__ */ t(w, { children: e.footerLeftCustomElement }),
           e.secondaryButton && /* @__PURE__ */ t(S, { ...e.secondaryButton }),
-          e.primaryButton && /* @__PURE__ */ t(o, { ...e.primaryButton })
+          e.primaryButton && /* @__PURE__ */ t(a, { ...e.primaryButton })
         ] }),
         " "
       ] })

package/dist/esm/components/modals/styledModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styledModal.js","sources":["../../../../src/components/modals/styledModal.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Modal } from '@src/components/modals/Modal';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tTitleMedium,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonProps } from '../button/model';\n\nconst ModalWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\talign-items: flex-start;\n\toverflow: hidden;\n\tmax-width: 100%;\n`;\nconst ModalHeader = styled.div<{\n\ttintedHeader: boolean;\n}>`\n\tpadding: 16px 24px;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: center;\n\tbackground-color: ${(props) =>\n\t\tprops.tintedHeader ? COLORS.background.warning.light : 'transparent'};\n\tborder-top-left-radius: ${(props) => (props.tintedHeader ? '4px' : 'none')};\n`;\n\nconst ModalTitles = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nconst ModalCustomisation = styled.div`\n\tdisplay: flex;\n\tmargin-left: auto;\n\tjustify-content: flex-end;\n\talign-items: center;\n`;\n\nconst ModalSubtitle = styled(BodyPrimary)`\n\tmargin-top: 4px;\n\tcolor: ${COLORS.content.secondary} !important;\n`;\n\nconst ModalFooter = styled.div`\n\tpadding: 16px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: end;\n\tmargin-top: auto;\n\twidth: 100%;\n`;\n\nconst ModalFooterRightCustomisation = styled.div`\n\tmargin-right: auto;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: calc(100% - 32px);\n`;\n\nconst ModalBody = styled.div<{\n\tshowShadow: boolean;\n}>`\n\twidth: 100%;\n\tz-index: 1;\n\tbox-shadow: ${(props) =>\n\t\tprops.showShadow ? 'inset 0 -3px 6px rgba(0, 0, 0, 0.12)' : 'none'};\n`;\nconst SecondaryButtonWrapper = styled(Button)`\n\tmargin-right: 8px;\n`;\nexport const StyledModal: React.FC<{\n\t'data-test'?: string;\n\topen: boolean;\n\tonClose?: () => void;\n\tchildren?: React.ReactNode;\n\tcentralContainerStyles?: React.CSSProperties;\n\tcloseOnOutsideClick?: boolean;\n\tcloseOnEscapeKey?: boolean;\n\theadingTitle?: string;\n\theadingSubtitle?: string;\n\ttintedHeader?: boolean;\n\tprimaryButton?: ButtonProps;\n\tsecondaryButton?: ButtonProps;\n\tfooterShadow?: boolean;\n\tfooterLeftCustomElement?: React.ReactNode;\n\theaderLeftCustomElement?: React.ReactNode;\n\theaderRightCustomElement?: React.ReactNode;\n\tzIndex?: number;\n\thideCrossButton?: boolean;\n\twidth?: string;\n\twrapperStyle?: React.CSSProperties;\n\tonBackPress?: () => void;\n\tfooterContainerStyle?: React.CSSProperties;\n\tid?: string;\n\tmodalHeaderStyles?: React.CSSProperties;\n\tinnerModalId?: string;\n\tisBeta?: boolean;\n\tmodalBodyStyles?: React.CSSProperties;\n\tskipModalWithTimer?: boolean;\n\ttimeOut?: number;\n}> = (props) => {\n\tif (typeof window === 'undefined') return null;\n\n\treturn ReactDOM.createPortal(\n\t\t<Modal\n\t\t\tdata-test={props['data-test']}\n\t\t\tid={props.id}\n\t\t\tzIndex={props.zIndex}\n\t\t\topen={props.open}\n\t\t\tonClose={props.onClose}\n\t\t\tcloseOnOutsideClick={props.closeOnOutsideClick}\n\t\t\tcloseOnEscapeKey={props.closeOnEscapeKey}\n\t\t\tcentralContainerStyles={props.centralContainerStyles}\n\t\t\thideCrossButton={props.hideCrossButton}\n\t\t\twidth={props.width}\n\t\t\tskipModalWithTimer={props.skipModalWithTimer}\n\t\t\ttimeOut={props.timeOut}\n\t\t>\n\t\t\t<ModalWrapper style={props.wrapperStyle ?? {}} id={props.innerModalId}>\n\t\t\t\t{(props.headingTitle \|\|\n\t\t\t\t\tprops.headingSubtitle \|\|\n\t\t\t\t\tprops.headerRightCustomElement) && (\n\t\t\t\t\t<ModalHeader\n\t\t\t\t\t\tstyle={props.modalHeaderStyles ?? {}}\n\t\t\t\t\t\ttintedHeader={props.tintedHeader ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.onBackPress && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tprops.onBackPress ? props.onBackPress() : e.stopPropagation();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BackIcon width={18} height={18} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div style={{ flex: 1 }}>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\tgap: '8px',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t{props.headingTitle && (\n\t\t\t\t\t\t\t\t\t\t<TitleMedium>{props.headingTitle}</TitleMedium>\n\t\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t\t\t{props.isBeta && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tpadding: '2px 8px',\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: '16px',\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: '#1877f2',\n\t\t\t\t\t\t\t\t\t\t\theight: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.surface.standard }}>\n\t\t\t\t\t\t\t\t\t\t\tBETA\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{props.headerLeftCustomElement}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headingSubtitle && (\n\t\t\t\t\t\t\t\t\t<ModalSubtitle>{props.headingSubtitle}</ModalSubtitle>\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{props.headerRightCustomElement && (\n\t\t\t\t\t\t\t<ModalCustomisation>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headerRightCustomElement}{' '}\n\t\t\t\t\t\t\t</ModalCustomisation>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t</ModalHeader>\n\t\t\t\t)}\n\t\t\t\t{props.children && (\n\t\t\t\t\t<ModalBody\n\t\t\t\t\t\tstyle={props.modalBodyStyles ?? {}}\n\t\t\t\t\t\tshowShadow={props.footerShadow ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.children}{' '}\n\t\t\t\t\t</ModalBody>\n\t\t\t\t)}\n\t\t\t\t{(props.primaryButton \|\|\n\t\t\t\t\tprops.secondaryButton \|\|\n\t\t\t\t\tprops.footerLeftCustomElement) && (\n\t\t\t\t\t<ModalFooter style={props.footerContainerStyle}>\n\t\t\t\t\t\t{props.footerLeftCustomElement && (\n\t\t\t\t\t\t\t<ModalFooterRightCustomisation>\n\t\t\t\t\t\t\t\t{props.footerLeftCustomElement}\n\t\t\t\t\t\t\t</ModalFooterRightCustomisation>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.secondaryButton && (\n\t\t\t\t\t\t\t<SecondaryButtonWrapper {...props.secondaryButton} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.primaryButton && <Button {...props.primaryButton} />}\n\t\t\t\t\t</ModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</ModalWrapper>\n\t\t</Modal>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["ModalWrapper","styled","ModalHeader","props","COLORS","ModalTitles","ModalCustomisation","ModalSubtitle","BodyPrimary","ModalFooter","ModalFooterRightCustomisation","ModalBody","SecondaryButtonWrapper","Button","StyledModal","ReactDOM","jsx","Modal","jsxs","e","BackIcon","TitleMedium","BodyCaption"],"mappings":"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"}
1	+ {"version":3,"file":"styledModal.js","sources":["../../../../src/components/modals/styledModal.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Modal } from '@src/components/modals/Modal';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tTitleMedium,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonProps } from '../button/model';\n\nconst ModalWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\talign-items: flex-start;\n\toverflow: hidden;\n\tmax-width: 100%;\n`;\nconst ModalHeader = styled.div<{\n\ttintedHeader: boolean;\n}>`\n\tpadding: 16px 24px;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: center;\n\tbackground-color: ${(props) =>\n\t\tprops.tintedHeader ? COLORS.background.warning.light : 'transparent'};\n\tborder-top-left-radius: ${(props) => (props.tintedHeader ? '4px' : 'none')};\n`;\n\nconst ModalTitles = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nconst ModalCustomisation = styled.div`\n\tdisplay: flex;\n\tmargin-left: auto;\n\tjustify-content: flex-end;\n\talign-items: center;\n`;\n\nconst ModalSubtitle = styled(BodyPrimary)`\n\tmargin-top: 4px;\n\tcolor: ${COLORS.content.secondary} !important;\n`;\n\nconst ModalFooter = styled.div`\n\tpadding: 16px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: end;\n\tmargin-top: auto;\n\twidth: 100%;\n`;\n\nconst ModalFooterRightCustomisation = styled.div`\n\tmargin-right: auto;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: calc(100% - 32px);\n`;\n\nconst ModalBody = styled.div<{\n\tshowShadow: boolean;\n}>`\n\twidth: 100%;\n\tz-index: 1;\n\tbox-shadow: ${(props) =>\n\t\tprops.showShadow ? 'inset 0 -3px 6px rgba(0, 0, 0, 0.12)' : 'none'};\n`;\nconst SecondaryButtonWrapper = styled(Button)`\n\tmargin-right: 8px;\n`;\nexport const StyledModal: React.FC<{\n\t'data-test'?: string;\n\topen: boolean;\n\tonClose?: () => void;\n\tchildren?: React.ReactNode;\n\tcentralContainerStyles?: React.CSSProperties;\n\tcloseOnOutsideClick?: boolean;\n\tcloseOnEscapeKey?: boolean;\n\theadingTitle?: string;\n\theadingSubtitle?: string;\n\ttintedHeader?: boolean;\n\tprimaryButton?: ButtonProps;\n\tsecondaryButton?: ButtonProps;\n\tfooterShadow?: boolean;\n\tfooterLeftCustomElement?: React.ReactNode;\n\theaderLeftCustomElement?: React.ReactNode;\n\theaderRightCustomElement?: React.ReactNode;\n\tzIndex?: number;\n\thideCrossButton?: boolean;\n\twidth?: string;\n\twrapperStyle?: React.CSSProperties;\n\tonBackPress?: () => void;\n\tfooterContainerStyle?: React.CSSProperties;\n\tid?: string;\n\tmodalHeaderStyles?: React.CSSProperties;\n\tinnerModalId?: string;\n\tisBeta?: boolean;\n\tmodalBodyStyles?: React.CSSProperties;\n\tskipModalWithTimer?: boolean;\n\ttimeOut?: number;\n}> = (props) => {\n\tif (typeof window === 'undefined') return null;\n\n\treturn ReactDOM.createPortal(\n\t\t<Modal\n\t\t\tdata-test={props['data-test']}\n\t\t\tid={props.id}\n\t\t\tzIndex={props.zIndex}\n\t\t\topen={props.open}\n\t\t\tonClose={props.onClose}\n\t\t\tcloseOnOutsideClick={props.closeOnOutsideClick}\n\t\t\tcloseOnEscapeKey={props.closeOnEscapeKey}\n\t\t\tcentralContainerStyles={props.centralContainerStyles}\n\t\t\thideCrossButton={props.hideCrossButton}\n\t\t\twidth={props.width}\n\t\t\tskipModalWithTimer={props.skipModalWithTimer}\n\t\t\ttimeOut={props.timeOut}\n\t\t>\n\t\t\t<ModalWrapper style={props.wrapperStyle ?? {}} id={props.innerModalId}>\n\t\t\t\t{(props.headingTitle \|\|\n\t\t\t\t\tprops.headingSubtitle \|\|\n\t\t\t\t\tprops.headerRightCustomElement) && (\n\t\t\t\t\t<ModalHeader\n\t\t\t\t\t\tstyle={props.modalHeaderStyles ?? {}}\n\t\t\t\t\t\ttintedHeader={props.tintedHeader ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.onBackPress && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tdata-test={(props['data-test'] \|\| '') + '-back-button'}\n\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tprops.onBackPress ? props.onBackPress() : e.stopPropagation();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BackIcon width={18} height={18} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div style={{ flex: 1 }}>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\tgap: '8px',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t{props.headingTitle && (\n\t\t\t\t\t\t\t\t\t\t<TitleMedium>{props.headingTitle}</TitleMedium>\n\t\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t\t\t{props.isBeta && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tpadding: '2px 8px',\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: '16px',\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: '#1877f2',\n\t\t\t\t\t\t\t\t\t\t\theight: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.surface.standard }}>\n\t\t\t\t\t\t\t\t\t\t\tBETA\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{props.headerLeftCustomElement}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headingSubtitle && (\n\t\t\t\t\t\t\t\t\t<ModalSubtitle>{props.headingSubtitle}</ModalSubtitle>\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{props.headerRightCustomElement && (\n\t\t\t\t\t\t\t<ModalCustomisation>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headerRightCustomElement}{' '}\n\t\t\t\t\t\t\t</ModalCustomisation>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t</ModalHeader>\n\t\t\t\t)}\n\t\t\t\t{props.children && (\n\t\t\t\t\t<ModalBody\n\t\t\t\t\t\tstyle={props.modalBodyStyles ?? {}}\n\t\t\t\t\t\tshowShadow={props.footerShadow ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.children}{' '}\n\t\t\t\t\t</ModalBody>\n\t\t\t\t)}\n\t\t\t\t{(props.primaryButton \|\|\n\t\t\t\t\tprops.secondaryButton \|\|\n\t\t\t\t\tprops.footerLeftCustomElement) && (\n\t\t\t\t\t<ModalFooter style={props.footerContainerStyle}>\n\t\t\t\t\t\t{props.footerLeftCustomElement && (\n\t\t\t\t\t\t\t<ModalFooterRightCustomisation>\n\t\t\t\t\t\t\t\t{props.footerLeftCustomElement}\n\t\t\t\t\t\t\t</ModalFooterRightCustomisation>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.secondaryButton && (\n\t\t\t\t\t\t\t<SecondaryButtonWrapper {...props.secondaryButton} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.primaryButton && <Button {...props.primaryButton} />}\n\t\t\t\t\t</ModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</ModalWrapper>\n\t\t</Modal>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["ModalWrapper","styled","ModalHeader","props","COLORS","ModalTitles","ModalCustomisation","ModalSubtitle","BodyPrimary","ModalFooter","ModalFooterRightCustomisation","ModalBody","SecondaryButtonWrapper","Button","StyledModal","ReactDOM","jsx","Modal","jsxs","e","BackIcon","TitleMedium","BodyCaption"],"mappings":"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"}

package/dist/esm/components/pagination/Pagination.js CHANGED Viewed

@@ -1,21 +1,21 @@
 import { jsx as o, Fragment as h, jsxs as n } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
-import { BodySecondary as e, ButtonRegular as p } from "../TypographyStyle.js";
+import { BodySecondary as a, ButtonRegular as p } from "../TypographyStyle.js";
 import { COLORS as i } from "../../constants/Theme.js";
 import { Pagination as t } from "./Pagination.styled.js";
 const y = g(
   ({
-    id: a,
-    onShowMore: c,
+    id: c,
+    onShowMore: e,
     isLoading: d,
     numberOfItemsLoaded: l,
     totalNumberOfItems: r,
     ...s
-  }) => /* @__PURE__ */ o(t, { id: a, ...s, children: d ? (
+  }) => /* @__PURE__ */ o(t, { id: c, "data-testid": c, ...s, children: d ? (
     //TODO: @chinmayee replace with Spinner once done
     /* @__PURE__ */ o(h, { children: "loading..." })
   ) : /* @__PURE__ */ o("div", { children: l < r ? /* @__PURE__ */ n(t, { children: [
-    /* @__PURE__ */ n(e, { style: { color: i.content.secondary }, children: [
+    /* @__PURE__ */ n(a, { style: { color: i.content.secondary }, children: [
       "Showing ",
       l,
       " out of ",
@@ -27,11 +27,11 @@ const y = g(
       p,
       {
         style: { color: i.content.brand, cursor: "pointer" },
-        onClick: () => c && c(),
+        onClick: () => e && e(),
         children: "Show more"
       }
     )
-  ] }) : /* @__PURE__ */ o(t, { children: /* @__PURE__ */ n(e, { style: { color: i.content.secondary }, children: [
+  ] }) : /* @__PURE__ */ o(t, { children: /* @__PURE__ */ n(a, { style: { color: i.content.secondary }, children: [
     "Showing all ",
     r,
     " results"

package/dist/esm/components/pagination/Pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.js","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { BodySecondary, ButtonRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport * as Sc from './Pagination.styled';\n\nexport interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {\n\tnumberOfItemsLoaded: number;\n\ttotalNumberOfItems: number;\n\tisLoading?: boolean;\n\tonShowMore?: () => void;\n\twidth?: string;\n}\n\nexport const Pagination = forwardRef<HTMLButtonElement, PaginationProps>(\n\t({\n\t\tid,\n\t\tonShowMore,\n\t\tisLoading,\n\t\tnumberOfItemsLoaded,\n\t\ttotalNumberOfItems,\n\t\t...rest\n\t}) => {\n\t\treturn (\n\t\t\t<Sc.Pagination id={id} {...rest}>\n\t\t\t\t{isLoading ? (\n\t\t\t\t\t//TODO: @chinmayee replace with Spinner once done\n\t\t\t\t\t<>loading...</>\n\t\t\t\t) : (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{numberOfItemsLoaded < totalNumberOfItems ? (\n\t\t\t\t\t\t\t<Sc.Pagination>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\tShowing {numberOfItemsLoaded} out of {totalNumberOfItems}{' '}\n\t\t\t\t\t\t\t\t\tresults\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t<ButtonRegular\n\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.brand, cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\tonClick={() => onShowMore && onShowMore()}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tShow more\n\t\t\t\t\t\t\t\t</ButtonRegular>\n\t\t\t\t\t\t\t</Sc.Pagination>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Sc.Pagination>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\tShowing all {totalNumberOfItems} results\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t</Sc.Pagination>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Sc.Pagination>\n\t\t);\n\t},\n);\n\nPagination.displayName = 'Pagination';\n"],"names":["Pagination","forwardRef","id","onShowMore","isLoading","numberOfItemsLoaded","totalNumberOfItems","rest","Sc.Pagination","jsxs","BodySecondary","COLORS","~~jsx","~~ButtonRegular"],"mappings":";;;;;AAaO,MAAMA,IAAaC;AAAA,EACzB,CAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,~~wBAGDC~~,GAAA,EAAc,~~IAAAN~~,~~GAAS~~,GAAGK,~~GACzB~~,UAAAH;AAAA;AAAA,2BAEE,UAAA,aAAA,CAAU;AAAA,wBAEX,OAAA,EACC,UAAAC,IAAsBC,IACtB,~~gBAAAG~~,EAACD,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAc,OAAO,EAAE,OAAOC,EAAO,QAAQ,aAAa,UAAA;AAAA,MAAA;AAAA,~~MACjDN~~;AAAA,MAAoB;AAAA,MAASC;AAAA,MAAoB;AAAA,MAAI;AAAA,IAAA,GAE/D;AAAA,IACA,~~gBAAAM~~;AAAA,~~MAACC~~;AAAA,MAAA;AAAA,QACA,OAAO,EAAE,~~OAAOF~~,EAAO,QAAQ,OAAO,QAAQ,UAAA;AAAA,QAC9C,SAAS,~~MAAMR~~,KAAcA,EAAA;AAAA,QAC7B,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,EAAA,CACD,IAEA,~~gBAAAS~~,~~EAACJ~~,GAAA,EACA,UAAA,gBAAAC,EAACC,GAAA,EAAc,OAAO,EAAE,OAAOC,EAAO,QAAQ,aAAa,UAAA;AAAA,IAAA;AAAA,~~IAC7CL~~;AAAA,IAAmB;AAAA,EAAA,GACjC,EAAA,CACD,GAEF,GAEF;AAGH;AAEAN,EAAW,cAAc;"}
1	+ {"version":3,"file":"Pagination.js","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { BodySecondary, ButtonRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport * as Sc from './Pagination.styled';\n\nexport interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {\n\tnumberOfItemsLoaded: number;\n\ttotalNumberOfItems: number;\n\tisLoading?: boolean;\n\tonShowMore?: () => void;\n\twidth?: string;\n}\n\nexport const Pagination = forwardRef<HTMLButtonElement, PaginationProps>(\n\t({\n\t\tid,\n\t\tonShowMore,\n\t\tisLoading,\n\t\tnumberOfItemsLoaded,\n\t\ttotalNumberOfItems,\n\t\t...rest\n\t}) => {\n\t\treturn (\n\t\t\t<Sc.Pagination id={id} data-testid={id} {...rest}>\n\t\t\t\t{isLoading ? (\n\t\t\t\t\t//TODO: @chinmayee replace with Spinner once done\n\t\t\t\t\t<>loading...</>\n\t\t\t\t) : (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{numberOfItemsLoaded < totalNumberOfItems ? (\n\t\t\t\t\t\t\t<Sc.Pagination>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\tShowing {numberOfItemsLoaded} out of {totalNumberOfItems}{' '}\n\t\t\t\t\t\t\t\t\tresults\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t<ButtonRegular\n\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.brand, cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\tonClick={() => onShowMore && onShowMore()}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tShow more\n\t\t\t\t\t\t\t\t</ButtonRegular>\n\t\t\t\t\t\t\t</Sc.Pagination>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Sc.Pagination>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\tShowing all {totalNumberOfItems} results\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t</Sc.Pagination>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Sc.Pagination>\n\t\t);\n\t},\n);\n\nPagination.displayName = 'Pagination';\n"],"names":["Pagination","forwardRef","id","onShowMore","isLoading","numberOfItemsLoaded","totalNumberOfItems","rest","jsx","Sc.Pagination","jsxs","BodySecondary","COLORS","ButtonRegular"],"mappings":";;;;;AAaO,MAAMA,IAAaC;AAAA,EACzB,CAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,MAGF,gBAAAC,EAACC,GAAA,EAAc,IAAAP,GAAQ,eAAaA,GAAK,GAAGK,GAC1C,UAAAH;AAAA;AAAA,2BAEE,UAAA,aAAA,CAAU;AAAA,wBAEX,OAAA,EACC,UAAAC,IAAsBC,IACtB,gBAAAI,EAACD,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAc,OAAO,EAAE,OAAOC,EAAO,QAAQ,aAAa,UAAA;AAAA,MAAA;AAAA,MACjDP;AAAA,MAAoB;AAAA,MAASC;AAAA,MAAoB;AAAA,MAAI;AAAA,IAAA,GAE/D;AAAA,IACA,gBAAAE;AAAA,MAACK;AAAA,MAAA;AAAA,QACA,OAAO,EAAE,OAAOD,EAAO,QAAQ,OAAO,QAAQ,UAAA;AAAA,QAC9C,SAAS,MAAMT,KAAcA,EAAA;AAAA,QAC7B,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,EAAA,CACD,IAEA,gBAAAK,EAACC,GAAA,EACA,UAAA,gBAAAC,EAACC,GAAA,EAAc,OAAO,EAAE,OAAOC,EAAO,QAAQ,aAAa,UAAA;AAAA,IAAA;AAAA,IAC7CN;AAAA,IAAmB;AAAA,EAAA,GACjC,EAAA,CACD,GAEF,GAEF;AAGH;AAEAN,EAAW,cAAc;"}

package/dist/esm/components/progress-bar/CircularProgressBar.js CHANGED Viewed

@@ -1,54 +1,65 @@
-import { jsx as o, jsxs as a } from "react/jsx-runtime";
-import k from "../../assets/icons/checklistIcon.svg.js";
-const p = ({ percentage: s, width: r = 200, containerStyle: f }) => {
-  const l = s < 0 ? 0 : s > 100 ? 100 : s, e = r / 2 - r / 10, t = e * Math.PI * 2, i = t - t * l / 100, n = r / 10, c = r / 3;
-  return /* @__PURE__ */ o("div", { style: f, children: /* @__PURE__ */ a("svg", { width: r, height: r, viewBox: `0 0 ${r} ${r}`, children: [
-    /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ a("linearGradient", { id: "gradientStroke", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-      /* @__PURE__ */ o("stop", { offset: "0%", stopColor: "#7000FF" }),
-      /* @__PURE__ */ o("stop", { offset: "100%", stopColor: "#AD00FF" })
-    ] }) }),
-    /* @__PURE__ */ o(
-      "circle",
-      {
-        cx: r / 2,
-        cy: r / 2,
-        strokeWidth: n,
-        r: e,
-        strokeOpacity: 0.8,
-        fill: "none",
-        style: {
-          stroke: "#ffffff"
-        }
-      }
-    ),
-    /* @__PURE__ */ o(
-      "circle",
-      {
-        cx: r / 2,
-        cy: r / 2,
-        strokeWidth: n,
-        r: e,
-        style: {
-          stroke: "url(#gradientStroke)",
-          strokeDasharray: t,
-          strokeDashoffset: i
-        },
-        transform: `rotate(-90 ${r / 2} ${r / 2})`,
-        fill: "none",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    /* @__PURE__ */ o(
-      k,
-      {
-        x: r / 2 - c / 2,
-        width: c
-      }
-    )
-  ] }) });
+import { jsx as s, jsxs as n } from "react/jsx-runtime";
+import d from "../../assets/icons/checklistIcon.svg.js";
+const u = ({ percentage: e, width: r = 200, containerStyle: l }) => {
+  const i = e < 0 ? 0 : e > 100 ? 100 : e, o = r / 2 - r / 10, t = o * Math.PI * 2, f = t - t * i / 100, a = r / 10, c = r / 3;
+  return /* @__PURE__ */ s("div", { style: l, "data-testid": "circular-progress-container", children: /* @__PURE__ */ n(
+    "svg",
+    {
+      width: r,
+      height: r,
+      viewBox: `0 0 ${r} ${r}`,
+      "data-testid": "circular-progress-svg",
+      children: [
+        /* @__PURE__ */ s("defs", { children: /* @__PURE__ */ n("linearGradient", { id: "gradientStroke", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+          /* @__PURE__ */ s("stop", { offset: "0%", stopColor: "#7000FF" }),
+          /* @__PURE__ */ s("stop", { offset: "100%", stopColor: "#AD00FF" })
+        ] }) }),
+        /* @__PURE__ */ s(
+          "circle",
+          {
+            cx: r / 2,
+            cy: r / 2,
+            strokeWidth: a,
+            r: o,
+            strokeOpacity: 0.8,
+            fill: "none",
+            style: {
+              stroke: "#ffffff"
+            },
+            "data-testid": "circular-progress-track"
+          }
+        ),
+        /* @__PURE__ */ s(
+          "circle",
+          {
+            cx: r / 2,
+            cy: r / 2,
+            strokeWidth: a,
+            r: o,
+            style: {
+              stroke: "url(#gradientStroke)",
+              strokeDasharray: t,
+              strokeDashoffset: f
+            },
+            transform: `rotate(-90 ${r / 2} ${r / 2})`,
+            fill: "none",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "data-testid": "circular-progress-fill"
+          }
+        ),
+        /* @__PURE__ */ s(
+          d,
+          {
+            x: r / 2 - c / 2,
+            width: c
+          }
+        )
+      ]
+    }
+  ) });
 };
 export {
-  p as default
+  u as default
 };
 //# sourceMappingURL=CircularProgressBar.js.map

package/dist/esm/components/progress-bar/CircularProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CircularProgressBar.js","sources":["../../../../src/components/progress-bar/CircularProgressBar.tsx"],"sourcesContent":["import CheckListIcon from '@src/assets/icons/checklistIcon.svg';\nimport React from 'react';\n\n//TODO: Make Inner icon dynamic and support text option also\nconst CircularProgressBar: React.FC<{\n\tpercentage: number;\n\twidth?: number;\n\tcontainerStyle?: React.CSSProperties;\n}> = ({ percentage, width = 200, containerStyle }) => {\n\tconst cleanedPercentage =\n\t\tpercentage < 0 ? 0 : percentage > 100 ? 100 : percentage;\n\tconst radius = width / 2 - width / 10;\n\tconst dashArray = radius * Math.PI * 2;\n\tconst dashOffset = dashArray - (dashArray * cleanedPercentage) / 100;\n\tconst strokeWidth = width / 10;\n\tconst innerIconWidth = width / 3;\n\treturn (\n\t\t<div style={containerStyle}>\n\t\t\t<svg ~~width~~={width} ~~height~~={width} ~~viewBox~~={`0 0 ${width} ${width}`}>\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id=\"gradientStroke\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n\t\t\t\t\t\t<stop offset=\"0%\" stopColor=\"#7000FF\" />\n\t\t\t\t\t\t<stop offset=\"100%\" stopColor=\"#AD00FF\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t\t<circle\n\t\t\t\t\tcx={width / 2}\n\t\t\t\t\tcy={width / 2}\n\t\t\t\t\tstrokeWidth={strokeWidth}\n\t\t\t\t\tr={radius}\n\t\t\t\t\tstrokeOpacity={0.8}\n\t\t\t\t\tfill={'none'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tstroke: '#ffffff',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<circle\n\t\t\t\t\tcx={width / 2}\n\t\t\t\t\tcy={width / 2}\n\t\t\t\t\tstrokeWidth={strokeWidth}\n\t\t\t\t\tr={radius}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tstroke: 'url(#gradientStroke)',\n\t\t\t\t\t\tstrokeDasharray: dashArray,\n\t\t\t\t\t\tstrokeDashoffset: dashOffset,\n\t\t\t\t\t}}\n\t\t\t\t\ttransform={`rotate(-90 ${width / 2} ${width / 2})`}\n\t\t\t\t\tfill={'none'}\n\t\t\t\t\tstrokeLinecap={'round'}\n\t\t\t\t\tstrokeLinejoin={'round'}\n\t\t\t\t/>\n\t\t\t\t<CheckListIcon\n\t\t\t\t\tx={width / 2 - innerIconWidth / 2}\n\t\t\t\t\twidth={innerIconWidth}\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</div>\n\t);\n};\n\nexport default CircularProgressBar;\n"],"names":["CircularProgressBar","percentage","width","containerStyle","cleanedPercentage","radius","dashArray","dashOffset","strokeWidth","innerIconWidth","jsx","jsxs","CheckListIcon"],"mappings":";;AAIA,MAAMA,IAID,CAAC,EAAE,YAAAC,GAAY,OAAAC,IAAQ,KAAK,gBAAAC,QAAqB;AACrD,QAAMC,IACLH,IAAa,IAAI,IAAIA,IAAa,MAAM,MAAMA,GACzCI,IAASH,IAAQ,IAAIA,IAAQ,IAC7BI,IAAYD,IAAS,KAAK,KAAK,GAC/BE,IAAaD,IAAaA,IAAYF,IAAqB,KAC3DI,IAAcN,IAAQ,IACtBO,IAAiBP,IAAQ;AAC/B,SACC,gBAAAQ,EAAC,OAAA,EAAI,OAAOP,~~GACX~~,~~4BAAC~~,~~OAAA~~,~~EAAI~~,~~OAAAD~~,~~GAAc~~,QAAQA,~~GAAO~~,SAAS,OAAOA,CAAK,IAAIA,CAAK,~~IAC/D~~,UAAA;AAAA,~~IAAA~~,gBAAAQ,EAAC,QAAA,EACA,UAAA,gBAAAC,EAAC,kBAAA,EAAe,IAAG,kBAAiB,IAAG,MAAK,IAAG,MAAK,IAAG,QAAO,IAAG,MAChE,UAAA;AAAA,~~MAAA~~,gBAAAD,EAAC,QAAA,EAAK,QAAO,MAAK,WAAU,WAAU;AAAA,~~MACtC~~,gBAAAA,EAAC,QAAA,EAAK,QAAO,QAAO,WAAU,UAAA,CAAU;AAAA,~~IAAA~~,EAAA,CACzC,EAAA,CACD;AAAA,~~IACA~~,gBAAAA;AAAA,~~MAAC~~;AAAA,~~MAAA~~;AAAA,~~QACA~~,IAAIR,IAAQ;AAAA,~~QACZ~~,IAAIA,IAAQ;AAAA,~~QACZ~~,aAAAM;AAAA,~~QACA~~,GAAGH;AAAA,~~QACH~~,eAAe;AAAA,~~QACf~~,MAAM;AAAA,~~QACN~~,OAAO;AAAA,~~UACN~~,QAAQ;AAAA,~~QAAA~~;AAAA,~~MACT~~;AAAA,~~IAAA~~;AAAA,~~IAED~~,gBAAAK;AAAA,~~MAAC~~;AAAA,~~MAAA~~;AAAA,~~QACA~~,IAAIR,IAAQ;AAAA,~~QACZ~~,IAAIA,IAAQ;AAAA,~~QACZ~~,aAAAM;AAAA,~~QACA~~,GAAGH;AAAA,~~QACH~~,OAAO;AAAA,~~UACN~~,QAAQ;AAAA,~~UACR~~,iBAAiBC;AAAA,~~UACjB~~,kBAAkBC;AAAA,~~QAAA~~;AAAA,~~QAEnB~~,WAAW,cAAcL,IAAQ,CAAC,IAAIA,IAAQ,CAAC;AAAA,~~QAC~~/C,MAAM;AAAA,~~QACN~~,eAAe;AAAA,~~QACf~~,gBAAgB;AAAA,~~MAAA~~;AAAA,~~IAAA~~;AAAA,~~IAEjB~~,gBAAAQ;AAAA,~~MAACE~~;AAAAA,~~MAAA~~;AAAA,~~QACA~~,GAAGV,IAAQ,IAAIO,IAAiB;AAAA,~~QAChC~~,OAAOA;AAAA,~~MAAA~~;AAAA,~~IAAA~~;AAAA,~~EACR~~,~~EAAA~~,~~CACD,~~EAAA,~~CACD~~;AAEF;"}
1	+ {"version":3,"file":"CircularProgressBar.js","sources":["../../../../src/components/progress-bar/CircularProgressBar.tsx"],"sourcesContent":["import CheckListIcon from '@src/assets/icons/checklistIcon.svg';\nimport React from 'react';\n\n//TODO: Make Inner icon dynamic and support text option also\nconst CircularProgressBar: React.FC<{\n\tpercentage: number;\n\twidth?: number;\n\tcontainerStyle?: React.CSSProperties;\n}> = ({ percentage, width = 200, containerStyle }) => {\n\tconst cleanedPercentage =\n\t\tpercentage < 0 ? 0 : percentage > 100 ? 100 : percentage;\n\tconst radius = width / 2 - width / 10;\n\tconst dashArray = radius * Math.PI * 2;\n\tconst dashOffset = dashArray - (dashArray * cleanedPercentage) / 100;\n\tconst strokeWidth = width / 10;\n\tconst innerIconWidth = width / 3;\n\treturn (\n\t\t<div style={containerStyle} data-testid=\"circular-progress-container\">\n\t\t\t<svg\n\t\t\t\twidth={width}\n\t\t\t\theight={width}\n\t\t\t\tviewBox={`0 0 ${width} ${width}`}\n\t\t\t\tdata-testid=\"circular-progress-svg\"\n\t\t\t>\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id=\"gradientStroke\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n\t\t\t\t\t\t<stop offset=\"0%\" stopColor=\"#7000FF\" />\n\t\t\t\t\t\t<stop offset=\"100%\" stopColor=\"#AD00FF\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t\t<circle\n\t\t\t\t\tcx={width / 2}\n\t\t\t\t\tcy={width / 2}\n\t\t\t\t\tstrokeWidth={strokeWidth}\n\t\t\t\t\tr={radius}\n\t\t\t\t\tstrokeOpacity={0.8}\n\t\t\t\t\tfill={'none'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tstroke: '#ffffff',\n\t\t\t\t\t}}\n\t\t\t\t\tdata-testid=\"circular-progress-track\"\n\t\t\t\t/>\n\t\t\t\t<circle\n\t\t\t\t\tcx={width / 2}\n\t\t\t\t\tcy={width / 2}\n\t\t\t\t\tstrokeWidth={strokeWidth}\n\t\t\t\t\tr={radius}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tstroke: 'url(#gradientStroke)',\n\t\t\t\t\t\tstrokeDasharray: dashArray,\n\t\t\t\t\t\tstrokeDashoffset: dashOffset,\n\t\t\t\t\t}}\n\t\t\t\t\ttransform={`rotate(-90 ${width / 2} ${width / 2})`}\n\t\t\t\t\tfill={'none'}\n\t\t\t\t\tstrokeLinecap={'round'}\n\t\t\t\t\tstrokeLinejoin={'round'}\n\t\t\t\t\tdata-testid=\"circular-progress-fill\"\n\t\t\t\t/>\n\t\t\t\t<CheckListIcon\n\t\t\t\t\tx={width / 2 - innerIconWidth / 2}\n\t\t\t\t\twidth={innerIconWidth}\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</div>\n\t);\n};\n\nexport default CircularProgressBar;\n"],"names":["CircularProgressBar","percentage","width","containerStyle","cleanedPercentage","radius","dashArray","dashOffset","strokeWidth","innerIconWidth","jsx","jsxs","CheckListIcon"],"mappings":";;AAIA,MAAMA,IAID,CAAC,EAAE,YAAAC,GAAY,OAAAC,IAAQ,KAAK,gBAAAC,QAAqB;AACrD,QAAMC,IACLH,IAAa,IAAI,IAAIA,IAAa,MAAM,MAAMA,GACzCI,IAASH,IAAQ,IAAIA,IAAQ,IAC7BI,IAAYD,IAAS,KAAK,KAAK,GAC/BE,IAAaD,IAAaA,IAAYF,IAAqB,KAC3DI,IAAcN,IAAQ,IACtBO,IAAiBP,IAAQ;AAC/B,SACC,gBAAAQ,EAAC,OAAA,EAAI,OAAOP,GAAgB,eAAY,+BACvC,UAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAAT;AAAA,MACA,QAAQA;AAAA,MACR,SAAS,OAAOA,CAAK,IAAIA,CAAK;AAAA,MAC9B,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EACA,UAAA,gBAAAC,EAAC,kBAAA,EAAe,IAAG,kBAAiB,IAAG,MAAK,IAAG,MAAK,IAAG,QAAO,IAAG,MAChE,UAAA;AAAA,UAAA,gBAAAD,EAAC,QAAA,EAAK,QAAO,MAAK,WAAU,WAAU;AAAA,UACtC,gBAAAA,EAAC,QAAA,EAAK,QAAO,QAAO,WAAU,UAAA,CAAU;AAAA,QAAA,EAAA,CACzC,EAAA,CACD;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,IAAIR,IAAQ;AAAA,YACZ,IAAIA,IAAQ;AAAA,YACZ,aAAAM;AAAA,YACA,GAAGH;AAAA,YACH,eAAe;AAAA,YACf,MAAM;AAAA,YACN,OAAO;AAAA,cACN,QAAQ;AAAA,YAAA;AAAA,YAET,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEb,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,IAAIR,IAAQ;AAAA,YACZ,IAAIA,IAAQ;AAAA,YACZ,aAAAM;AAAA,YACA,GAAGH;AAAA,YACH,OAAO;AAAA,cACN,QAAQ;AAAA,cACR,iBAAiBC;AAAA,cACjB,kBAAkBC;AAAA,YAAA;AAAA,YAEnB,WAAW,cAAcL,IAAQ,CAAC,IAAIA,IAAQ,CAAC;AAAA,YAC/C,MAAM;AAAA,YACN,eAAe;AAAA,YACf,gBAAgB;AAAA,YAChB,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEb,gBAAAQ;AAAA,UAACE;AAAAA,UAAA;AAAA,YACA,GAAGV,IAAQ,IAAIO,IAAiB;AAAA,YAChC,OAAOA;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEF;AAEF;"}

package/dist/esm/components/progress-bar/ProgressBarComponent.js CHANGED Viewed

@@ -1,28 +1,29 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { ProgressBar as e } from "react-bootstrap";
 import t from "styled-components";
-import { COLORS as m } from "../../constants/Theme.js";
-const d = (o) => /* @__PURE__ */ r(
-  n,
+import { COLORS as a } from "../../constants/Theme.js";
+const c = (r) => /* @__PURE__ */ o(
+  i,
   {
-    color: o.color ? o.color : m.content.brand,
-    children: /* @__PURE__ */ r(
+    color: r.color ? r.color : a.content.brand,
+    children: /* @__PURE__ */ o(
       e,
       {
-        animated: o.isAnimated,
-        now: o.completed,
-        style: { height: `${o.height ? o.height : 8}px` }
+        animated: r.isAnimated,
+        now: r.completed,
+        style: { height: `${r.height ? r.height : 8}px` },
+        "data-testid": "progress-bar-wrapper"
       }
     )
   }
-), n = t.div`
+), i = t.div`
 	flex: 50%;
 	.progress-bar {
-		background: ${(o) => o.color};
+		background: ${(r) => r.color};
 	}
 `;
 export {
-  d as ProgressBarComponent,
-  n as ProgressCompletedBar
+  c as ProgressBarComponent,
+  i as ProgressCompletedBar
 };
 //# sourceMappingURL=ProgressBarComponent.js.map

package/dist/esm/components/progress-bar/ProgressBarComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBarComponent.js","sources":["../../../../src/components/progress-bar/ProgressBarComponent.tsx"],"sourcesContent":["import { ProgressBar } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport interface ProgressBarProps {\n\tcompleted: number;\n\tisAnimated: boolean;\n\tcolor?: string;\n\theight?: number;\n}\n\nexport const ProgressBarComponent = (props: ProgressBarProps) => {\n\treturn (\n\t\t<ProgressCompletedBar\n\t\t\tcolor={props.color ? props.color : COLORS.content.brand}\n\t\t>\n\t\t\t<ProgressBar\n\t\t\t\tanimated={props.isAnimated}\n\t\t\t\tnow={props.completed}\n\t\t\t\tstyle={{ height: `${props.height ? props.height : 8}px` }}\n\t\t\t/>\n\t\t</ProgressCompletedBar>\n\t);\n};\n\nexport const ProgressCompletedBar = styled.div<{ color: string }>`\n\tflex: 50%;\n\t.progress-bar {\n\t\tbackground: ${(props) => props.color};\n\t}\n`;\n"],"names":["ProgressBarComponent","props","jsx","ProgressCompletedBar","COLORS","ProgressBar","styled"],"mappings":";;;;AAWO,MAAMA,IAAuB,CAACC,MAEnC,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,OAAOF,EAAM,QAAQA,EAAM,QAAQG,EAAO,QAAQ;AAAA,IAElD,UAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,UAAUJ,EAAM;AAAA,QAChB,KAAKA,EAAM;AAAA,QACX,OAAO,EAAE,QAAQ,GAAGA,EAAM,SAASA,EAAM,SAAS,CAAC,KAAA;AAAA,~~MAAK~~;AAAA,IAAA;AAAA,~~EACzD~~;AAAA,GAKUE,IAAuBG,EAAO;AAAA;AAAA;AAAA,gBAG3B,CAACL,MAAUA,EAAM,KAAK;AAAA;AAAA;"}
1	+ {"version":3,"file":"ProgressBarComponent.js","sources":["../../../../src/components/progress-bar/ProgressBarComponent.tsx"],"sourcesContent":["import { ProgressBar } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport interface ProgressBarProps {\n\tcompleted: number;\n\tisAnimated: boolean;\n\tcolor?: string;\n\theight?: number;\n}\n\nexport const ProgressBarComponent = (props: ProgressBarProps) => {\n\treturn (\n\t\t<ProgressCompletedBar\n\t\t\tcolor={props.color ? props.color : COLORS.content.brand}\n\t\t>\n\t\t\t<ProgressBar\n\t\t\t\tanimated={props.isAnimated}\n\t\t\t\tnow={props.completed}\n\t\t\t\tstyle={{ height: `${props.height ? props.height : 8}px` }}\n\t\t\t\tdata-testid=\"progress-bar-wrapper\"\n\t\t\t/>\n\t\t</ProgressCompletedBar>\n\t);\n};\n\nexport const ProgressCompletedBar = styled.div<{ color: string }>`\n\tflex: 50%;\n\t.progress-bar {\n\t\tbackground: ${(props) => props.color};\n\t}\n`;\n"],"names":["ProgressBarComponent","props","jsx","ProgressCompletedBar","COLORS","ProgressBar","styled"],"mappings":";;;;AAWO,MAAMA,IAAuB,CAACC,MAEnC,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,OAAOF,EAAM,QAAQA,EAAM,QAAQG,EAAO,QAAQ;AAAA,IAElD,UAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,UAAUJ,EAAM;AAAA,QAChB,KAAKA,EAAM;AAAA,QACX,OAAO,EAAE,QAAQ,GAAGA,EAAM,SAASA,EAAM,SAAS,CAAC,KAAA;AAAA,QACnD,eAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EACb;AAAA,GAKUE,IAAuBG,EAAO;AAAA;AAAA;AAAA,gBAG3B,CAACL,MAAUA,EAAM,KAAK;AAAA;AAAA;"}

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

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