@selfdecode/sd-component-library 4.0.107 → 4.0.109

package/lib/sd-component-library106.js

@@ -1,52 +1,86 @@
-import { j as t } from "./sd-component-library197.js";
-import { Flex as p } from "rebass";
-import { MaxWidthContainer as l } from "./sd-component-library45.js";
-import { TwelveSb as x } from "./sd-component-library161.js";
-import { PageSelector as c } from "./sd-component-library105.js";
-const S = ({
-  currentPage: e,
-  itemsTotal: i,
-  itemsPerPage: n,
-  onChange: r,
-  hideTotal: o,
-  bgSx: a,
-  innerSx: s
-}) => /* @__PURE__ */ t.jsxs(
-  l,
-  {
-    bgSx: a,
-    innerSx: { display: "flex", justifyContent: "space-between", ...s },
-    "data-testid": "pagination-bar",
-    children: [
-      /* @__PURE__ */ t.jsx(p, { flexDirection: "column", justifyContent: "center", children: /* @__PURE__ */ t.jsxs(
-        x,
-        {
-          color: "cl_darkGrey",
-          textTransform: "uppercase",
-          letterSpacing: ["2px"],
-          "data-testid": "pagination-bar-info",
-          children: [
-            `Showing ${(e - 1) * n + 1} - ${Math.min(
-              i,
-              e * n
-            )}`,
-            !o && ` / ${i}`
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ t.jsx(
-        c,
-        {
-          currentPage: e,
-          lastPage: Math.ceil(i / n),
-          onChange: r,
-          "data-testid": "page-selector"
-        }
-      )
-    ]
-  }
-);
+import { j as r } from "./sd-component-library198.js";
+import { useDependantState as j } from "./sd-component-library3.js";
+import { SquareButton as g } from "./sd-component-library262.js";
+import { ReactComponent as P } from "./sd-component-library259.js";
+import { CurrentPage as h } from "./sd-component-library263.js";
+import { ReactComponent as S } from "./sd-component-library261.js";
+import { GridCenter as R } from "./sd-component-library43.js";
+function x(m, t, o, n) {
+  t == null || t(o, n), m(o);
+}
+const D = (m) => {
+  const {
+    currentPage: t,
+    lastPage: o,
+    borderStyle: n,
+    borderWidth: s,
+    borderColor: i,
+    fill: a,
+    onChange: p,
+    m: u,
+    mt: C,
+    mr: f,
+    mb: l,
+    ml: c
+  } = m, [e, d] = j(t);
+  return /* @__PURE__ */ r.jsxs(
+    R,
+    {
+      sx: {
+        gridGap: 3,
+        gridTemplateColumns: "repeat(3, max-content)",
+        m: u,
+        mt: C,
+        mr: f,
+        mb: l,
+        ml: c
+      },
+      "data-testid": "page-selector",
+      children: [
+        /* @__PURE__ */ r.jsx(
+          g,
+          {
+            disabled: e <= 1,
+            onClick: () => {
+              x(
+                d,
+                p,
+                e - 1,
+                e
+              );
+            },
+            borderStyle: n,
+            borderWidth: s,
+            borderColor: i,
+            fill: a,
+            children: /* @__PURE__ */ r.jsx(P, { style: { marginRight: "3px" } })
+          }
+        ),
+        /* @__PURE__ */ r.jsx(h, { currentPage: e }),
+        /* @__PURE__ */ r.jsx(
+          g,
+          {
+            disabled: e >= o,
+            onClick: () => {
+              x(
+                d,
+                p,
+                e + 1,
+                e
+              );
+            },
+            borderStyle: n,
+            borderWidth: s,
+            borderColor: i,
+            fill: a,
+            children: /* @__PURE__ */ r.jsx(S, { style: { marginLeft: "3px" } })
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  S as PaginationBar
+  D as PageSelector
 };
 //# sourceMappingURL=sd-component-library106.js.map

package/lib/sd-component-library106.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library106.js","sources":["../src/components/pagination-bars/pagination-bar/pagination-bar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Flex } from \"rebass\";\n\nimport { MaxWidthContainer } from \"../../containers\";\nimport { PageSelector } from \"../../page-selectors\";\nimport { TwelveSb } from \"../../texts\";\nimport { PaginationBarProps } from \"./interfaces\";\n\nexport const PaginationBar: React.FC<PaginationBarProps> = ({\n  currentPage,\n  itemsTotal,\n  itemsPerPage,\n  onChange,\n  hideTotal,\n  bgSx,\n  innerSx,\n}) => {\n  return (\n    <MaxWidthContainer\n      bgSx={bgSx}\n      innerSx={{ display: \"flex\", justifyContent: \"space-between\", ...innerSx }}\n      data-testid=\"pagination-bar\"\n    >\n      <Flex flexDirection=\"column\" justifyContent=\"center\">\n        <TwelveSb\n          color=\"cl_darkGrey\"\n          textTransform=\"uppercase\"\n          letterSpacing={[\"2px\"]}\n          data-testid=\"pagination-bar-info\"\n        >\n          {`Showing ${(currentPage - 1) * itemsPerPage + 1} - ${Math.min(\n            itemsTotal,\n            currentPage * itemsPerPage\n          )}`}\n          {!hideTotal && ` / ${itemsTotal}`}\n        </TwelveSb>\n      </Flex>\n\n      <PageSelector\n        currentPage={currentPage}\n        lastPage={Math.ceil(itemsTotal / itemsPerPage)}\n        onChange={onChange}\n        data-testid=\"page-selector\"\n      />\n    </MaxWidthContainer>\n  );\n};\n"],"names":["PaginationBar","currentPage","itemsTotal","itemsPerPage","onChange","hideTotal","bgSx","innerSx","jsxs","MaxWidthContainer","jsx","Flex","TwelveSb","PageSelector"],"mappings":";;;;;AASO,MAAMA,IAA8C,CAAC;AAAA,EAC1D,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AACF,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,MAAAH;AAAA,IACA,SAAS,EAAE,SAAS,QAAQ,gBAAgB,iBAAiB,GAAGC,EAAQ;AAAA,IACxE,eAAY;AAAA,IAEZ,UAAA;AAAA,MAAAG,gBAAAA,EAAA,IAACC,GAAK,EAAA,eAAc,UAAS,gBAAe,UAC1C,UAAAH,gBAAAA,EAAA;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,eAAc;AAAA,UACd,eAAe,CAAC,KAAK;AAAA,UACrB,eAAY;AAAA,UAEX,UAAA;AAAA,YAAA,YAAYX,IAAc,KAAKE,IAAe,CAAC,MAAM,KAAK;AAAA,cACzDD;AAAA,cACAD,IAAcE;AAAA,YAAA,CACf;AAAA,YACA,CAACE,KAAa,MAAMH,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEnC;AAAA,MAEAQ,gBAAAA,EAAA;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,aAAAZ;AAAA,UACA,UAAU,KAAK,KAAKC,IAAaC,CAAY;AAAA,UAC7C,UAAAC;AAAA,UACA,eAAY;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"sd-component-library106.js","sources":["../src/components/page-selectors/page-selector/page-selector.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useDependantState } from \"../../../core/custom-hooks\";\nimport { SquareButton } from \"../../buttons/partials/square-button\";\nimport { GridCenter } from \"../../containers\";\nimport { Next, Previous } from \"./assets\";\nimport { PageSelectorProps } from \"./interfaces\";\nimport { CurrentPage } from \"./partials/current-page\";\n\n/**\n * Create an onChange function using the given setValue and callback.\n *\n * @param setValue The function used to set the component's value\n * @param callback The callback to run when the value changes.\n * @param newValue The new value after clicking next/previous.\n * @param setValue The old value before clicking next/previous.\n *\n */\n\nfunction changeWrapper(\n  setValue: React.Dispatch<React.SetStateAction<number>>,\n  callback: PageSelectorProps[\"onChange\"],\n  newValue: number,\n  oldValue: number\n) {\n  callback?.(newValue, oldValue);\n  setValue(newValue);\n}\n\n/**\n * Base page selector component. Other page selector components should be built from this.\n */\nexport const PageSelector: React.FunctionComponent<PageSelectorProps> = (\n  props: PageSelectorProps\n): React.ReactElement<PageSelectorProps> => {\n  const {\n    currentPage,\n    lastPage,\n    borderStyle,\n    borderWidth,\n    borderColor,\n    fill,\n    onChange,\n    m,\n    mt,\n    mr,\n    mb,\n    ml,\n  } = props;\n\n  const [mCurrentPage, setMCurrentPage] =\n    useDependantState<number>(currentPage);\n\n  return (\n    <GridCenter\n      sx={{\n        gridGap: 3,\n        gridTemplateColumns: \"repeat(3, max-content)\",\n        m,\n        mt,\n        mr,\n        mb,\n        ml,\n      }}\n      data-testid=\"page-selector\"\n    >\n      <SquareButton\n        disabled={mCurrentPage <= 1}\n        onClick={() => {\n          changeWrapper(\n            setMCurrentPage,\n            onChange,\n            mCurrentPage - 1,\n            mCurrentPage\n          );\n        }}\n        borderStyle={borderStyle}\n        borderWidth={borderWidth}\n        borderColor={borderColor}\n        fill={fill}\n      >\n        <Previous style={{ marginRight: \"3px\" }} />\n      </SquareButton>\n\n      <CurrentPage currentPage={mCurrentPage} />\n\n      <SquareButton\n        disabled={mCurrentPage >= lastPage}\n        onClick={() => {\n          changeWrapper(\n            setMCurrentPage,\n            onChange,\n            mCurrentPage + 1,\n            mCurrentPage\n          );\n        }}\n        borderStyle={borderStyle}\n        borderWidth={borderWidth}\n        borderColor={borderColor}\n        fill={fill}\n      >\n        <Next style={{ marginLeft: \"3px\" }} />\n      </SquareButton>\n    </GridCenter>\n  );\n};\n"],"names":["changeWrapper","setValue","callback","newValue","oldValue","PageSelector","props","currentPage","lastPage","borderStyle","borderWidth","borderColor","fill","onChange","m","mt","mr","mb","ml","mCurrentPage","setMCurrentPage","useDependantState","jsxs","GridCenter","jsx","SquareButton","Previous","CurrentPage","Next"],"mappings":";;;;;;;AAmBA,SAASA,EACPC,GACAC,GACAC,GACAC,GACA;AACA,EAAAF,KAAA,QAAAA,EAAWC,GAAUC,IACrBH,EAASE,CAAQ;AACnB;AAKa,MAAAE,IAA2D,CACtEC,MAC0C;AACpC,QAAA;AAAA,IACJ,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAAC;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,EACE,IAAAZ,GAEE,CAACa,GAAcC,CAAe,IAClCC,EAA0Bd,CAAW;AAGrC,SAAAe,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,SAAS;AAAA,QACT,qBAAqB;AAAA,QACrB,GAAAT;AAAA,QACA,IAAAC;AAAA,QACA,IAAAC;AAAA,QACA,IAAAC;AAAA,QACA,IAAAC;AAAA,MACF;AAAA,MACA,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAAM,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAUN,KAAgB;AAAA,YAC1B,SAAS,MAAM;AACb,cAAAnB;AAAA,gBACEoB;AAAA,gBACAP;AAAA,gBACAM,IAAe;AAAA,gBACfA;AAAA,cAAA;AAAA,YAEJ;AAAA,YACA,aAAAV;AAAA,YACA,aAAAC;AAAA,YACA,aAAAC;AAAA,YACA,MAAAC;AAAA,YAEA,gCAACc,GAAS,EAAA,OAAO,EAAE,aAAa,SAAS;AAAA,UAAA;AAAA,QAC3C;AAAA,QAEAF,gBAAAA,EAAAA,IAACG,GAAY,EAAA,aAAaR,EAAc,CAAA;AAAA,QAExCK,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAUN,KAAgBX;AAAA,YAC1B,SAAS,MAAM;AACb,cAAAR;AAAA,gBACEoB;AAAA,gBACAP;AAAA,gBACAM,IAAe;AAAA,gBACfA;AAAA,cAAA;AAAA,YAEJ;AAAA,YACA,aAAAV;AAAA,YACA,aAAAC;AAAA,YACA,aAAAC;AAAA,YACA,MAAAC;AAAA,YAEA,gCAACgB,GAAK,EAAA,OAAO,EAAE,YAAY,SAAS;AAAA,UAAA;AAAA,QACtC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library107.js

@@ -1,54 +1,52 @@
-import { j as e } from "./sd-component-library197.js";
-import { PaginationBarButton as i } from "./sd-component-library257.js";
-import { ReactComponent as h } from "./sd-component-library258.js";
-import { PaginationBarCurrentPage as u } from "./sd-component-library259.js";
-import { ReactComponent as f } from "./sd-component-library260.js";
-import { GridContainerV2 as s } from "./sd-component-library39.js";
-import { ResponsiveTextV2 as j } from "./sd-component-library151.js";
-const k = (a) => {
-  const {
-    currentPage: t,
-    itemsTotal: o,
-    itemsPerPage: r,
-    hideTotal: p,
-    onChange: n,
-    sx: m,
-    ...x
-  } = a, c = t > 1, l = t * r < o, g = () => n(t - 1), d = () => n(t + 1);
-  return /* @__PURE__ */ e.jsxs(
-    s,
-    {
-      gap: "20px",
-      justifyContent: "center",
-      sx: { cursor: "default", userSelect: "none", ...m },
-      ...x,
-      children: [
-        /* @__PURE__ */ e.jsxs(
-          j,
-          {
-            fontSizeWeight: [10, "semi-bold"],
-            letterSpacing: "1.8px",
-            textTransform: "uppercase",
-            textAlign: "center",
-            children: [
-              `Showing ${(t - 1) * r + 1} - ${Math.min(
-                o,
-                t * r
-              )}`,
-              !p && ` / ${o}`
-            ]
-          }
-        ),
-        /* @__PURE__ */ e.jsxs(s, { height: "42px", gap: "10px", gridTemplateColumns: "repeat(3, 42px)", children: [
-          /* @__PURE__ */ e.jsx(i, { disabled: !c, onClick: g, children: /* @__PURE__ */ e.jsx(h, { style: { marginRight: "2px" } }) }),
-          /* @__PURE__ */ e.jsx(u, { children: t }),
-          /* @__PURE__ */ e.jsx(i, { disabled: !l, onClick: d, children: /* @__PURE__ */ e.jsx(f, { style: { marginLeft: "2px" } }) })
-        ] })
-      ]
-    }
-  );
-};
+import { j as t } from "./sd-component-library198.js";
+import { Flex as p } from "rebass";
+import { MaxWidthContainer as l } from "./sd-component-library46.js";
+import { TwelveSb as x } from "./sd-component-library162.js";
+import { PageSelector as c } from "./sd-component-library106.js";
+const S = ({
+  currentPage: e,
+  itemsTotal: i,
+  itemsPerPage: n,
+  onChange: r,
+  hideTotal: o,
+  bgSx: a,
+  innerSx: s
+}) => /* @__PURE__ */ t.jsxs(
+  l,
+  {
+    bgSx: a,
+    innerSx: { display: "flex", justifyContent: "space-between", ...s },
+    "data-testid": "pagination-bar",
+    children: [
+      /* @__PURE__ */ t.jsx(p, { flexDirection: "column", justifyContent: "center", children: /* @__PURE__ */ t.jsxs(
+        x,
+        {
+          color: "cl_darkGrey",
+          textTransform: "uppercase",
+          letterSpacing: ["2px"],
+          "data-testid": "pagination-bar-info",
+          children: [
+            `Showing ${(e - 1) * n + 1} - ${Math.min(
+              i,
+              e * n
+            )}`,
+            !o && ` / ${i}`
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ t.jsx(
+        c,
+        {
+          currentPage: e,
+          lastPage: Math.ceil(i / n),
+          onChange: r,
+          "data-testid": "page-selector"
+        }
+      )
+    ]
+  }
+);
 export {
-  k as PaginationBarMobile
+  S as PaginationBar
 };
 //# sourceMappingURL=sd-component-library107.js.map

package/lib/sd-component-library107.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library107.js","sources":["../src/components/pagination-bars/pagination-bar-mobile/pagination-bar-mobile.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Grid } from \"../../containers\";\nimport { Next, Previous } from \"../../page-selectors/page-selector/assets\";\nimport { ResponsiveTextV2 } from \"../../texts\";\nimport { PaginationBarMobileProps as Props } from \"./interfaces\";\nimport { PaginationBarButton, PaginationBarCurrentPage } from \"./partials\";\n\nexport const PaginationBarMobile: React.FC<Props> = (props) => {\n  const {\n    currentPage,\n    itemsTotal,\n    itemsPerPage,\n    hideTotal,\n    onChange,\n    sx,\n    ...gridProps\n  } = props;\n\n  const hasPrevious = currentPage > 1;\n  const hasNext = currentPage * itemsPerPage < itemsTotal;\n\n  const onClickPrevious = () => onChange(currentPage - 1);\n  const onClickNext = () => onChange(currentPage + 1);\n\n  return (\n    <Grid\n      gap=\"20px\"\n      justifyContent=\"center\"\n      sx={{ cursor: \"default\", userSelect: \"none\", ...sx }}\n      {...gridProps}\n    >\n      <ResponsiveTextV2\n        fontSizeWeight={[10, \"semi-bold\"]}\n        letterSpacing=\"1.8px\"\n        textTransform=\"uppercase\"\n        textAlign=\"center\"\n      >\n        {`Showing ${(currentPage - 1) * itemsPerPage + 1} - ${Math.min(\n          itemsTotal,\n          currentPage * itemsPerPage\n        )}`}\n        {!hideTotal && ` / ${itemsTotal}`}\n      </ResponsiveTextV2>\n\n      <Grid height=\"42px\" gap=\"10px\" gridTemplateColumns=\"repeat(3, 42px)\">\n        <PaginationBarButton disabled={!hasPrevious} onClick={onClickPrevious}>\n          <Previous style={{ marginRight: \"2px\" }} />\n        </PaginationBarButton>\n\n        <PaginationBarCurrentPage>{currentPage}</PaginationBarCurrentPage>\n\n        <PaginationBarButton disabled={!hasNext} onClick={onClickNext}>\n          <Next style={{ marginLeft: \"2px\" }} />\n        </PaginationBarButton>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["PaginationBarMobile","props","currentPage","itemsTotal","itemsPerPage","hideTotal","onChange","sx","gridProps","hasPrevious","hasNext","onClickPrevious","onClickNext","jsxs","Grid","ResponsiveTextV2","jsx","PaginationBarButton","Previous","PaginationBarCurrentPage","Next"],"mappings":";;;;;;;AAQa,MAAAA,IAAuC,CAACC,MAAU;AACvD,QAAA;AAAA,IACJ,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,IAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAP,GAEEQ,IAAcP,IAAc,GAC5BQ,IAAUR,IAAcE,IAAeD,GAEvCQ,IAAkB,MAAML,EAASJ,IAAc,CAAC,GAChDU,IAAc,MAAMN,EAASJ,IAAc,CAAC;AAGhD,SAAAW,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAI;AAAA,MACJ,gBAAe;AAAA,MACf,IAAI,EAAE,QAAQ,WAAW,YAAY,QAAQ,GAAGP,EAAG;AAAA,MAClD,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAAK,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,gBAAgB,CAAC,IAAI,WAAW;AAAA,YAChC,eAAc;AAAA,YACd,eAAc;AAAA,YACd,WAAU;AAAA,YAET,UAAA;AAAA,cAAA,YAAYb,IAAc,KAAKE,IAAe,CAAC,MAAM,KAAK;AAAA,gBACzDD;AAAA,gBACAD,IAAcE;AAAA,cAAA,CACf;AAAA,cACA,CAACC,KAAa,MAAMF,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACjC;AAAA,+BAECW,GAAK,EAAA,QAAO,QAAO,KAAI,QAAO,qBAAoB,mBACjD,UAAA;AAAA,UAAAE,gBAAAA,EAAA,IAACC,GAAoB,EAAA,UAAU,CAACR,GAAa,SAASE,GACpD,UAACK,gBAAAA,EAAAA,IAAAE,GAAA,EAAS,OAAO,EAAE,aAAa,MAAA,EAAS,CAAA,GAC3C;AAAA,UAEAF,gBAAAA,EAAAA,IAACG,KAA0B,UAAYjB,EAAA,CAAA;AAAA,UAEtCc,gBAAAA,EAAA,IAAAC,GAAA,EAAoB,UAAU,CAACP,GAAS,SAASE,GAChD,UAACI,gBAAAA,EAAAA,IAAAI,GAAA,EAAK,OAAO,EAAE,YAAY,MAAA,EAAS,CAAA,GACtC;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library107.js","sources":["../src/components/pagination-bars/pagination-bar/pagination-bar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Flex } from \"rebass\";\n\nimport { MaxWidthContainer } from \"../../containers\";\nimport { PageSelector } from \"../../page-selectors\";\nimport { TwelveSb } from \"../../texts\";\nimport { PaginationBarProps } from \"./interfaces\";\n\nexport const PaginationBar: React.FC<PaginationBarProps> = ({\n  currentPage,\n  itemsTotal,\n  itemsPerPage,\n  onChange,\n  hideTotal,\n  bgSx,\n  innerSx,\n}) => {\n  return (\n    <MaxWidthContainer\n      bgSx={bgSx}\n      innerSx={{ display: \"flex\", justifyContent: \"space-between\", ...innerSx }}\n      data-testid=\"pagination-bar\"\n    >\n      <Flex flexDirection=\"column\" justifyContent=\"center\">\n        <TwelveSb\n          color=\"cl_darkGrey\"\n          textTransform=\"uppercase\"\n          letterSpacing={[\"2px\"]}\n          data-testid=\"pagination-bar-info\"\n        >\n          {`Showing ${(currentPage - 1) * itemsPerPage + 1} - ${Math.min(\n            itemsTotal,\n            currentPage * itemsPerPage\n          )}`}\n          {!hideTotal && ` / ${itemsTotal}`}\n        </TwelveSb>\n      </Flex>\n\n      <PageSelector\n        currentPage={currentPage}\n        lastPage={Math.ceil(itemsTotal / itemsPerPage)}\n        onChange={onChange}\n        data-testid=\"page-selector\"\n      />\n    </MaxWidthContainer>\n  );\n};\n"],"names":["PaginationBar","currentPage","itemsTotal","itemsPerPage","onChange","hideTotal","bgSx","innerSx","jsxs","MaxWidthContainer","jsx","Flex","TwelveSb","PageSelector"],"mappings":";;;;;AASO,MAAMA,IAA8C,CAAC;AAAA,EAC1D,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AACF,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,MAAAH;AAAA,IACA,SAAS,EAAE,SAAS,QAAQ,gBAAgB,iBAAiB,GAAGC,EAAQ;AAAA,IACxE,eAAY;AAAA,IAEZ,UAAA;AAAA,MAAAG,gBAAAA,EAAA,IAACC,GAAK,EAAA,eAAc,UAAS,gBAAe,UAC1C,UAAAH,gBAAAA,EAAA;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,eAAc;AAAA,UACd,eAAe,CAAC,KAAK;AAAA,UACrB,eAAY;AAAA,UAEX,UAAA;AAAA,YAAA,YAAYX,IAAc,KAAKE,IAAe,CAAC,MAAM,KAAK;AAAA,cACzDD;AAAA,cACAD,IAAcE;AAAA,YAAA,CACf;AAAA,YACA,CAACE,KAAa,MAAMH,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEnC;AAAA,MAEAQ,gBAAAA,EAAA;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,aAAAZ;AAAA,UACA,UAAU,KAAK,KAAKC,IAAaC,CAAY;AAAA,UAC7C,UAAAC;AAAA,UACA,eAAY;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/lib/sd-component-library108.js

@@ -1,16 +1,54 @@
-import { j as r } from "./sd-component-library197.js";
-import { ProgressBar as e } from "./sd-component-library109.js";
-const o = (t) => /* @__PURE__ */ r.jsx(
-  e,
-  {
-    ...t,
-    variant: "line",
-    totalSteps: t.totalSteps,
-    currentStep: t.currentStep,
-    "data-test": "line-progress-bar"
-  }
-);
+import { j as e } from "./sd-component-library198.js";
+import { PaginationBarButton as i } from "./sd-component-library258.js";
+import { ReactComponent as h } from "./sd-component-library259.js";
+import { PaginationBarCurrentPage as u } from "./sd-component-library260.js";
+import { ReactComponent as f } from "./sd-component-library261.js";
+import { GridContainerV2 as s } from "./sd-component-library40.js";
+import { ResponsiveTextV2 as j } from "./sd-component-library152.js";
+const k = (a) => {
+  const {
+    currentPage: t,
+    itemsTotal: o,
+    itemsPerPage: r,
+    hideTotal: p,
+    onChange: n,
+    sx: m,
+    ...x
+  } = a, c = t > 1, l = t * r < o, g = () => n(t - 1), d = () => n(t + 1);
+  return /* @__PURE__ */ e.jsxs(
+    s,
+    {
+      gap: "20px",
+      justifyContent: "center",
+      sx: { cursor: "default", userSelect: "none", ...m },
+      ...x,
+      children: [
+        /* @__PURE__ */ e.jsxs(
+          j,
+          {
+            fontSizeWeight: [10, "semi-bold"],
+            letterSpacing: "1.8px",
+            textTransform: "uppercase",
+            textAlign: "center",
+            children: [
+              `Showing ${(t - 1) * r + 1} - ${Math.min(
+                o,
+                t * r
+              )}`,
+              !p && ` / ${o}`
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(s, { height: "42px", gap: "10px", gridTemplateColumns: "repeat(3, 42px)", children: [
+          /* @__PURE__ */ e.jsx(i, { disabled: !c, onClick: g, children: /* @__PURE__ */ e.jsx(h, { style: { marginRight: "2px" } }) }),
+          /* @__PURE__ */ e.jsx(u, { children: t }),
+          /* @__PURE__ */ e.jsx(i, { disabled: !l, onClick: d, children: /* @__PURE__ */ e.jsx(f, { style: { marginLeft: "2px" } }) })
+        ] })
+      ]
+    }
+  );
+};
 export {
-  o as LineProgressBar
+  k as PaginationBarMobile
 };
 //# sourceMappingURL=sd-component-library108.js.map

package/lib/sd-component-library108.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library108.js","sources":["../src/components/progress-bars/line-progress-bar/line-progress-bar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ProgressBar } from \"../progress-bar\";\nimport { LineProgressBarProps } from \"./interfaces\";\n\n/**\n * The LineProgressBar component.\n */\nexport const LineProgressBar: React.FunctionComponent<LineProgressBarProps> = (\n  props: LineProgressBarProps\n): React.ReactElement<LineProgressBarProps> => {\n  return (\n    <ProgressBar\n      {...props}\n      variant=\"line\"\n      totalSteps={props.totalSteps}\n      currentStep={props.currentStep}\n      data-test=\"line-progress-bar\"\n    />\n  );\n};\n"],"names":["LineProgressBar","props","jsx","ProgressBar"],"mappings":";;AAQa,MAAAA,IAAiE,CAC5EC,MAGEC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,SAAQ;AAAA,IACR,YAAYA,EAAM;AAAA,IAClB,aAAaA,EAAM;AAAA,IACnB,aAAU;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"sd-component-library108.js","sources":["../src/components/pagination-bars/pagination-bar-mobile/pagination-bar-mobile.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Grid } from \"../../containers\";\nimport { Next, Previous } from \"../../page-selectors/page-selector/assets\";\nimport { ResponsiveTextV2 } from \"../../texts\";\nimport { PaginationBarMobileProps as Props } from \"./interfaces\";\nimport { PaginationBarButton, PaginationBarCurrentPage } from \"./partials\";\n\nexport const PaginationBarMobile: React.FC<Props> = (props) => {\n  const {\n    currentPage,\n    itemsTotal,\n    itemsPerPage,\n    hideTotal,\n    onChange,\n    sx,\n    ...gridProps\n  } = props;\n\n  const hasPrevious = currentPage > 1;\n  const hasNext = currentPage * itemsPerPage < itemsTotal;\n\n  const onClickPrevious = () => onChange(currentPage - 1);\n  const onClickNext = () => onChange(currentPage + 1);\n\n  return (\n    <Grid\n      gap=\"20px\"\n      justifyContent=\"center\"\n      sx={{ cursor: \"default\", userSelect: \"none\", ...sx }}\n      {...gridProps}\n    >\n      <ResponsiveTextV2\n        fontSizeWeight={[10, \"semi-bold\"]}\n        letterSpacing=\"1.8px\"\n        textTransform=\"uppercase\"\n        textAlign=\"center\"\n      >\n        {`Showing ${(currentPage - 1) * itemsPerPage + 1} - ${Math.min(\n          itemsTotal,\n          currentPage * itemsPerPage\n        )}`}\n        {!hideTotal && ` / ${itemsTotal}`}\n      </ResponsiveTextV2>\n\n      <Grid height=\"42px\" gap=\"10px\" gridTemplateColumns=\"repeat(3, 42px)\">\n        <PaginationBarButton disabled={!hasPrevious} onClick={onClickPrevious}>\n          <Previous style={{ marginRight: \"2px\" }} />\n        </PaginationBarButton>\n\n        <PaginationBarCurrentPage>{currentPage}</PaginationBarCurrentPage>\n\n        <PaginationBarButton disabled={!hasNext} onClick={onClickNext}>\n          <Next style={{ marginLeft: \"2px\" }} />\n        </PaginationBarButton>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["PaginationBarMobile","props","currentPage","itemsTotal","itemsPerPage","hideTotal","onChange","sx","gridProps","hasPrevious","hasNext","onClickPrevious","onClickNext","jsxs","Grid","ResponsiveTextV2","jsx","PaginationBarButton","Previous","PaginationBarCurrentPage","Next"],"mappings":";;;;;;;AAQa,MAAAA,IAAuC,CAACC,MAAU;AACvD,QAAA;AAAA,IACJ,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,IAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAP,GAEEQ,IAAcP,IAAc,GAC5BQ,IAAUR,IAAcE,IAAeD,GAEvCQ,IAAkB,MAAML,EAASJ,IAAc,CAAC,GAChDU,IAAc,MAAMN,EAASJ,IAAc,CAAC;AAGhD,SAAAW,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAI;AAAA,MACJ,gBAAe;AAAA,MACf,IAAI,EAAE,QAAQ,WAAW,YAAY,QAAQ,GAAGP,EAAG;AAAA,MAClD,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAAK,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,gBAAgB,CAAC,IAAI,WAAW;AAAA,YAChC,eAAc;AAAA,YACd,eAAc;AAAA,YACd,WAAU;AAAA,YAET,UAAA;AAAA,cAAA,YAAYb,IAAc,KAAKE,IAAe,CAAC,MAAM,KAAK;AAAA,gBACzDD;AAAA,gBACAD,IAAcE;AAAA,cAAA,CACf;AAAA,cACA,CAACC,KAAa,MAAMF,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACjC;AAAA,+BAECW,GAAK,EAAA,QAAO,QAAO,KAAI,QAAO,qBAAoB,mBACjD,UAAA;AAAA,UAAAE,gBAAAA,EAAA,IAACC,GAAoB,EAAA,UAAU,CAACR,GAAa,SAASE,GACpD,UAACK,gBAAAA,EAAAA,IAAAE,GAAA,EAAS,OAAO,EAAE,aAAa,MAAA,EAAS,CAAA,GAC3C;AAAA,UAEAF,gBAAAA,EAAAA,IAACG,KAA0B,UAAYjB,EAAA,CAAA;AAAA,UAEtCc,gBAAAA,EAAA,IAAAC,GAAA,EAAoB,UAAU,CAACP,GAAS,SAASE,GAChD,UAACI,gBAAAA,EAAAA,IAAAI,GAAA,EAAK,OAAO,EAAE,YAAY,MAAA,EAAS,CAAA,GACtC;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library109.js

@@ -1,50 +1,16 @@
-import { j as s } from "./sd-component-library197.js";
-import { Flex as i, Box as t } from "rebass";
-const g = ({
-  totalSteps: e,
-  currentStep: d,
-  variant: o,
-  ...r
-}) => {
-  const a = r.withBackgroundProps ? {
-    completed: {
-      background: r.completedBackground
-    },
-    remains: {
-      background: r.remainsBackground
-    }
-  } : {
-    completed: {
-      bg: r.completedColor || "cl_purple"
-    },
-    remains: {
-      bg: r.reaminsColor || "cl_lightGrey"
-    }
-  }, n = Math.max(0, Math.min(d, e));
-  return /* @__PURE__ */ s.jsxs(i, { ...r, sx: { width: "100%" }, "data-test": "progress-bar", children: [
-    /* @__PURE__ */ s.jsx(
-      t,
-      {
-        variant: `_progressBars.${o}.done`,
-        sx: {
-          width: `${n / e * 100}%`,
-          ...a.completed
-        }
-      }
-    ),
-    /* @__PURE__ */ s.jsx(
-      t,
-      {
-        variant: `_progressBars.${o}.remains`,
-        sx: {
-          width: `${(1 - n / e) * 100}%`,
-          ...a.remains
-        }
-      }
-    )
-  ] });
-};
+import { j as r } from "./sd-component-library198.js";
+import { ProgressBar as e } from "./sd-component-library110.js";
+const o = (t) => /* @__PURE__ */ r.jsx(
+  e,
+  {
+    ...t,
+    variant: "line",
+    totalSteps: t.totalSteps,
+    currentStep: t.currentStep,
+    "data-test": "line-progress-bar"
+  }
+);
 export {
-  g as ProgressBar
+  o as LineProgressBar
 };
 //# sourceMappingURL=sd-component-library109.js.map

package/lib/sd-component-library109.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library109.js","sources":["../src/components/progress-bars/progress-bar/progress-bar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { ProgressBarProps } from \"./interfaces\";\n\n/**\n * Base progress bar component. Other progress components should be built from this.\n */\nexport const ProgressBar: React.FC<ProgressBarProps> = ({\n  totalSteps,\n  currentStep,\n  variant,\n  ...props\n}) => {\n  const backgroundProps = props.withBackgroundProps\n    ? {\n        completed: {\n          background: props.completedBackground,\n        },\n        remains: {\n          background: props.remainsBackground,\n        },\n      }\n    : {\n        completed: {\n          bg: props.completedColor || \"cl_purple\",\n        },\n        remains: {\n          bg: props.reaminsColor || \"cl_lightGrey\",\n        },\n      };\n\n  const displayedStep = Math.max(0, Math.min(currentStep, totalSteps));\n\n  return (\n    <Flex {...props} sx={{ width: \"100%\" }} data-test=\"progress-bar\">\n      <Box\n        variant={`_progressBars.${variant}.done`}\n        sx={{\n          width: `${(displayedStep / totalSteps) * 100}%`,\n          ...backgroundProps.completed,\n        }}\n      />\n      <Box\n        variant={`_progressBars.${variant}.remains`}\n        sx={{\n          width: `${(1 - displayedStep / totalSteps) * 100}%`,\n          ...backgroundProps.remains,\n        }}\n      />\n    </Flex>\n  );\n};\n"],"names":["ProgressBar","totalSteps","currentStep","variant","props","backgroundProps","displayedStep","jsxs","Flex","jsx","Box"],"mappings":";;AASO,MAAMA,IAA0C,CAAC;AAAA,EACtD,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAAC,IAAkBD,EAAM,sBAC1B;AAAA,IACE,WAAW;AAAA,MACT,YAAYA,EAAM;AAAA,IACpB;AAAA,IACA,SAAS;AAAA,MACP,YAAYA,EAAM;AAAA,IACpB;AAAA,EAAA,IAEF;AAAA,IACE,WAAW;AAAA,MACT,IAAIA,EAAM,kBAAkB;AAAA,IAC9B;AAAA,IACA,SAAS;AAAA,MACP,IAAIA,EAAM,gBAAgB;AAAA,IAC5B;AAAA,EAAA,GAGAE,IAAgB,KAAK,IAAI,GAAG,KAAK,IAAIJ,GAAaD,CAAU,CAAC;AAGjE,SAAAM,gBAAAA,OAACC,GAAM,EAAA,GAAGJ,GAAO,IAAI,EAAE,OAAO,OAAU,GAAA,aAAU,gBAChD,UAAA;AAAA,IAAAK,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,iBAAiBP,CAAO;AAAA,QACjC,IAAI;AAAA,UACF,OAAO,GAAIG,IAAgBL,IAAc,GAAG;AAAA,UAC5C,GAAGI,EAAgB;AAAA,QACrB;AAAA,MAAA;AAAA,IACF;AAAA,IACAI,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,iBAAiBP,CAAO;AAAA,QACjC,IAAI;AAAA,UACF,OAAO,IAAI,IAAIG,IAAgBL,KAAc,GAAG;AAAA,UAChD,GAAGI,EAAgB;AAAA,QACrB;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library109.js","sources":["../src/components/progress-bars/line-progress-bar/line-progress-bar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ProgressBar } from \"../progress-bar\";\nimport { LineProgressBarProps } from \"./interfaces\";\n\n/**\n * The LineProgressBar component.\n */\nexport const LineProgressBar: React.FunctionComponent<LineProgressBarProps> = (\n  props: LineProgressBarProps\n): React.ReactElement<LineProgressBarProps> => {\n  return (\n    <ProgressBar\n      {...props}\n      variant=\"line\"\n      totalSteps={props.totalSteps}\n      currentStep={props.currentStep}\n      data-test=\"line-progress-bar\"\n    />\n  );\n};\n"],"names":["LineProgressBar","props","jsx","ProgressBar"],"mappings":";;AAQa,MAAAA,IAAiE,CAC5EC,MAGEC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,SAAQ;AAAA,IACR,YAAYA,EAAM;AAAA,IAClB,aAAaA,EAAM;AAAA,IACnB,aAAU;AAAA,EAAA;AAAA;"}

package/lib/sd-component-library11.js

@@ -1,25 +1,10 @@
-import { j as u } from "./sd-component-library197.js";
-import { useRef as a, useEffect as i } from "react";
-import { Box as f } from "rebass";
-const p = ({
-  onClickOutside: e,
-  children: n,
-  events: o = ["mousedown", "touchstart"],
-  ...c
-}) => {
-  const r = a(null);
-  return i(() => {
-    const s = (t) => {
-      r.current && !r.current.contains(t.target) && e(t);
-    };
-    return o.forEach(
-      (t) => document.addEventListener(t, s, { passive: !1 })
-    ), () => {
-      o.forEach((t) => document.removeEventListener(t, s));
-    };
-  }, [e, r, o]), /* @__PURE__ */ u.jsx(f, { "data-testid": "outside-click-box", ...c, ref: r, children: n });
+import { j as t } from "./sd-component-library198.js";
+import { Box as n } from "rebass";
+const x = (o) => {
+  const { children: r, ...s } = o;
+  return /* @__PURE__ */ t.jsx(n, { className: "no-translate", ...s, children: r });
 };
 export {
-  p as OutsideClickBox
+  x as NoTranslateBox
 };
 //# sourceMappingURL=sd-component-library11.js.map

package/lib/sd-component-library11.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library11.js","sources":["../src/components/boxes/outside-click-box/outside-click-box.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { OutsideClickBoxProps as Props } from \"./interfaces\";\n\nexport const OutsideClickBox: React.FC<Props> = ({\n  onClickOutside,\n  children,\n  events = [\"mousedown\", \"touchstart\"],\n  ...boxProps\n}) => {\n  const ref = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const handler = (event: any) => {\n      if (ref.current && !ref.current.contains(event.target)) {\n        onClickOutside(event);\n      }\n    };\n\n    events.forEach((event) =>\n      document.addEventListener(event, handler, { passive: false })\n    );\n    return () => {\n      events.forEach((event) => document.removeEventListener(event, handler));\n    };\n  }, [onClickOutside, ref, events]);\n\n  return (\n    <Box data-testid=\"outside-click-box\" {...boxProps} ref={ref}>\n      {children}\n    </Box>\n  );\n};\n"],"names":["OutsideClickBox","onClickOutside","children","events","boxProps","ref","useRef","useEffect","handler","event","Box"],"mappings":";;;AAMO,MAAMA,IAAmC,CAAC;AAAA,EAC/C,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS,CAAC,aAAa,YAAY;AAAA,EACnC,GAAGC;AACL,MAAM;AACE,QAAAC,IAAMC,EAAoB,IAAI;AAEpC,SAAAC,EAAU,MAAM;AACR,UAAAC,IAAU,CAACC,MAAe;AAC1B,MAAAJ,EAAI,WAAW,CAACA,EAAI,QAAQ,SAASI,EAAM,MAAM,KACnDR,EAAeQ,CAAK;AAAA,IACtB;AAGK,WAAAN,EAAA;AAAA,MAAQ,CAACM,MACd,SAAS,iBAAiBA,GAAOD,GAAS,EAAE,SAAS,IAAO;AAAA,IAAA,GAEvD,MAAM;AACX,MAAAL,EAAO,QAAQ,CAACM,MAAU,SAAS,oBAAoBA,GAAOD,CAAO,CAAC;AAAA,IAAA;AAAA,EAEvE,GAAA,CAACP,GAAgBI,GAAKF,CAAM,CAAC,yBAG7BO,GAAI,EAAA,eAAY,qBAAqB,GAAGN,GAAU,KAAAC,GAChD,UAAAH,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library11.js","sources":["../src/components/boxes/no-translate-box/no-translate-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { NoTranslateBoxProps as Props } from \"./interfaces\";\n\nexport const NoTranslateBox: React.FC<Props> = (props) => {\n  const { children, ...boxProps } = props;\n\n  return (\n    <Box className=\"no-translate\" {...boxProps}>\n      {children}\n    </Box>\n  );\n};\n"],"names":["NoTranslateBox","props","children","boxProps","Box"],"mappings":";;AAMa,MAAAA,IAAkC,CAACC,MAAU;AACxD,QAAM,EAAE,UAAAC,GAAU,GAAGC,EAAA,IAAaF;AAElC,+BACGG,GAAI,EAAA,WAAU,gBAAgB,GAAGD,GAC/B,UAAAD,EACH,CAAA;AAEJ;"}

package/lib/sd-component-library110.js

@@ -1,46 +1,50 @@
-import { j as s } from "./sd-component-library197.js";
-import { Box as i } from "rebass";
-const c = ({
-  currentStep: e,
-  totalSteps: o,
-  height: r = "6px",
-  borderRadius: t = "3px",
-  baseColor: n = "cl_lightGrey",
-  activeColor: p = "cl_purple",
-  containerSx: a
+import { j as s } from "./sd-component-library198.js";
+import { Flex as i, Box as t } from "rebass";
+const g = ({
+  totalSteps: e,
+  currentStep: d,
+  variant: o,
+  ...r
 }) => {
-  const x = Math.max(0, Math.min(e, o));
-  return /* @__PURE__ */ s.jsx(
-    i,
-    {
-      sx: {
-        position: "relative",
-        height: r,
-        borderRadius: t,
-        bg: n,
-        ...a
-      },
-      "data-test": "rounded-progress-bar",
-      children: /* @__PURE__ */ s.jsx(
-        i,
-        {
-          sx: {
-            position: "absolute",
-            left: 0,
-            top: 0,
-            width: `${Math.floor(x / o * 100)}%`,
-            minWidth: `calc(${t} * 2)`,
-            height: r,
-            borderRadius: t,
-            bg: p,
-            transition: "width 1s"
-          }
-        }
-      )
+  const a = r.withBackgroundProps ? {
+    completed: {
+      background: r.completedBackground
+    },
+    remains: {
+      background: r.remainsBackground
+    }
+  } : {
+    completed: {
+      bg: r.completedColor || "cl_purple"
+    },
+    remains: {
+      bg: r.reaminsColor || "cl_lightGrey"
     }
-  );
+  }, n = Math.max(0, Math.min(d, e));
+  return /* @__PURE__ */ s.jsxs(i, { ...r, sx: { width: "100%" }, "data-test": "progress-bar", children: [
+    /* @__PURE__ */ s.jsx(
+      t,
+      {
+        variant: `_progressBars.${o}.done`,
+        sx: {
+          width: `${n / e * 100}%`,
+          ...a.completed
+        }
+      }
+    ),
+    /* @__PURE__ */ s.jsx(
+      t,
+      {
+        variant: `_progressBars.${o}.remains`,
+        sx: {
+          width: `${(1 - n / e) * 100}%`,
+          ...a.remains
+        }
+      }
+    )
+  ] });
 };
 export {
-  c as RoundedProgressBar
+  g as ProgressBar
 };
 //# sourceMappingURL=sd-component-library110.js.map

package/lib/sd-component-library110.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library110.js","sources":["../src/components/progress-bars/rounded-progress-bar/rounded-progress-bar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { RoundedProgressBarProps as Props } from \"./interfaces\";\n\nexport const RoundedProgressBar: React.FC<Props> = ({\n  currentStep,\n  totalSteps,\n  height = \"6px\",\n  borderRadius = \"3px\",\n  baseColor = \"cl_lightGrey\",\n  activeColor = \"cl_purple\",\n  containerSx,\n}) => {\n  const displayedStep = Math.max(0, Math.min(currentStep, totalSteps));\n\n  return (\n    <Box\n      sx={{\n        position: \"relative\",\n        height,\n        borderRadius,\n        bg: baseColor,\n        ...containerSx,\n      }}\n      data-test=\"rounded-progress-bar\"\n    >\n      <Box\n        sx={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          width: `${Math.floor((displayedStep / totalSteps) * 100)}%`,\n          minWidth: `calc(${borderRadius} * 2)`,\n          height,\n          borderRadius,\n          bg: activeColor,\n          transition: \"width 1s\",\n        }}\n      />\n    </Box>\n  );\n};\n"],"names":["RoundedProgressBar","currentStep","totalSteps","height","borderRadius","baseColor","activeColor","containerSx","displayedStep","jsx","Box"],"mappings":";;AAMO,MAAMA,IAAsC,CAAC;AAAA,EAClD,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAM;AACE,QAAAC,IAAgB,KAAK,IAAI,GAAG,KAAK,IAAIP,GAAaC,CAAU,CAAC;AAGjE,SAAAO,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAAP;AAAA,QACA,cAAAC;AAAA,QACA,IAAIC;AAAA,QACJ,GAAGE;AAAA,MACL;AAAA,MACA,aAAU;AAAA,MAEV,UAAAE,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,UAAU;AAAA,YACV,MAAM;AAAA,YACN,KAAK;AAAA,YACL,OAAO,GAAG,KAAK,MAAOF,IAAgBN,IAAc,GAAG,CAAC;AAAA,YACxD,UAAU,QAAQE,CAAY;AAAA,YAC9B,QAAAD;AAAA,YACA,cAAAC;AAAA,YACA,IAAIE;AAAA,YACJ,YAAY;AAAA,UACd;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library110.js","sources":["../src/components/progress-bars/progress-bar/progress-bar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { ProgressBarProps } from \"./interfaces\";\n\n/**\n * Base progress bar component. Other progress components should be built from this.\n */\nexport const ProgressBar: React.FC<ProgressBarProps> = ({\n  totalSteps,\n  currentStep,\n  variant,\n  ...props\n}) => {\n  const backgroundProps = props.withBackgroundProps\n    ? {\n        completed: {\n          background: props.completedBackground,\n        },\n        remains: {\n          background: props.remainsBackground,\n        },\n      }\n    : {\n        completed: {\n          bg: props.completedColor || \"cl_purple\",\n        },\n        remains: {\n          bg: props.reaminsColor || \"cl_lightGrey\",\n        },\n      };\n\n  const displayedStep = Math.max(0, Math.min(currentStep, totalSteps));\n\n  return (\n    <Flex {...props} sx={{ width: \"100%\" }} data-test=\"progress-bar\">\n      <Box\n        variant={`_progressBars.${variant}.done`}\n        sx={{\n          width: `${(displayedStep / totalSteps) * 100}%`,\n          ...backgroundProps.completed,\n        }}\n      />\n      <Box\n        variant={`_progressBars.${variant}.remains`}\n        sx={{\n          width: `${(1 - displayedStep / totalSteps) * 100}%`,\n          ...backgroundProps.remains,\n        }}\n      />\n    </Flex>\n  );\n};\n"],"names":["ProgressBar","totalSteps","currentStep","variant","props","backgroundProps","displayedStep","jsxs","Flex","jsx","Box"],"mappings":";;AASO,MAAMA,IAA0C,CAAC;AAAA,EACtD,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAAC,IAAkBD,EAAM,sBAC1B;AAAA,IACE,WAAW;AAAA,MACT,YAAYA,EAAM;AAAA,IACpB;AAAA,IACA,SAAS;AAAA,MACP,YAAYA,EAAM;AAAA,IACpB;AAAA,EAAA,IAEF;AAAA,IACE,WAAW;AAAA,MACT,IAAIA,EAAM,kBAAkB;AAAA,IAC9B;AAAA,IACA,SAAS;AAAA,MACP,IAAIA,EAAM,gBAAgB;AAAA,IAC5B;AAAA,EAAA,GAGAE,IAAgB,KAAK,IAAI,GAAG,KAAK,IAAIJ,GAAaD,CAAU,CAAC;AAGjE,SAAAM,gBAAAA,OAACC,GAAM,EAAA,GAAGJ,GAAO,IAAI,EAAE,OAAO,OAAU,GAAA,aAAU,gBAChD,UAAA;AAAA,IAAAK,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,iBAAiBP,CAAO;AAAA,QACjC,IAAI;AAAA,UACF,OAAO,GAAIG,IAAgBL,IAAc,GAAG;AAAA,UAC5C,GAAGI,EAAgB;AAAA,QACrB;AAAA,MAAA;AAAA,IACF;AAAA,IACAI,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,iBAAiBP,CAAO;AAAA,QACjC,IAAI;AAAA,UACF,OAAO,IAAI,IAAIG,IAAgBL,KAAc,GAAG;AAAA,UAChD,GAAGI,EAAgB;AAAA,QACrB;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}