@selfdecode/sd-component-library 4.0.91 → 4.0.93

package/lib/sd-component-library107.js

@@ -1,16 +1,54 @@
-import { j as r } from "./sd-component-library195.js";
-import { ProgressBar as e } from "./sd-component-library108.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-library196.js";
+import { PaginationBarButton as i } from "./sd-component-library261.js";
+import { ReactComponent as h } from "./sd-component-library258.js";
+import { PaginationBarCurrentPage as u } from "./sd-component-library262.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-library150.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-library107.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library107.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-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;"}

package/lib/sd-component-library108.js

@@ -1,50 +1,16 @@
-import { j as s } from "./sd-component-library195.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-library196.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"
+  }
+);
 export {
-  g as ProgressBar
+  o as LineProgressBar
 };
 //# 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/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-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;"}

package/lib/sd-component-library109.js

@@ -1,46 +1,50 @@
-import { j as s } from "./sd-component-library195.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-library196.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-library109.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library109.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-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;"}

package/lib/sd-component-library11.js

@@ -1,4 +1,4 @@
-import { j as u } from "./sd-component-library195.js";
+import { j as u } from "./sd-component-library196.js";
 import { useRef as a, useEffect as i } from "react";
 import { Box as f } from "rebass";
 const p = ({

package/lib/sd-component-library110.js

@@ -1,27 +1,46 @@
-import { j as o } from "./sd-component-library195.js";
-import { Box as n } from "rebass";
-import { ProgressBar as a } from "./sd-component-library108.js";
-const c = (r) => {
-  const {
-    firstStripeColor: t = "#F0C8FE",
-    secondStripeColor: e = "#FAEFFF",
-    remainingBarColor: i = "#713580"
-  } = r;
-  return /* @__PURE__ */ o.jsx(n, { children: /* @__PURE__ */ o.jsx(
-    a,
+import { j as s } from "./sd-component-library196.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
+}) => {
+  const x = Math.max(0, Math.min(e, o));
+  return /* @__PURE__ */ s.jsx(
+    i,
     {
-      variant: "stripedLine",
-      ...r,
-      withBackgroundProps: !0,
-      completedBackground: `repeating-linear-gradient(45deg, ${t}, ${t} 4px, ${e} 4px, ${e} 8px)`,
-      remainsBackground: i,
-      totalSteps: r.totalSteps,
-      currentStep: r.currentStep,
-      "data-test": "striped-line-progress-bar"
+      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"
+          }
+        }
+      )
     }
-  ) });
+  );
 };
 export {
-  c as StripedLineProgressBar
+  c as RoundedProgressBar
 };
 //# 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/striped-line-progress-bar/striped-line-progress-bar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ProgressBar } from \"../progress-bar\";\nimport { StripedLineProgressBarProps } from \"./interfaces\";\n\n/**\n * The StripedLineProgressBar component.\n */\nexport const StripedLineProgressBar: React.FunctionComponent<\n  StripedLineProgressBarProps\n> = (\n  props: StripedLineProgressBarProps\n): React.ReactElement<StripedLineProgressBarProps> => {\n  const {\n    firstStripeColor = \"#F0C8FE\",\n    secondStripeColor = \"#FAEFFF\",\n    remainingBarColor = \"#713580\",\n  } = props;\n\n  return (\n    <Box>\n      <ProgressBar\n        variant=\"stripedLine\"\n        {...props}\n        withBackgroundProps={true}\n        completedBackground={\n          `repeating-linear-gradient(45deg, ${firstStripeColor}, ${firstStripeColor} 4px,` +\n          ` ${secondStripeColor} 4px, ${secondStripeColor} 8px)`\n        }\n        remainsBackground={remainingBarColor}\n        totalSteps={props.totalSteps}\n        currentStep={props.currentStep}\n        data-test=\"striped-line-progress-bar\"\n      />\n    </Box>\n  );\n};\n"],"names":["StripedLineProgressBar","props","firstStripeColor","secondStripeColor","remainingBarColor","Box","jsx","ProgressBar"],"mappings":";;;AAUa,MAAAA,IAET,CACFC,MACoD;AAC9C,QAAA;AAAA,IACJ,kBAAAC,IAAmB;AAAA,IACnB,mBAAAC,IAAoB;AAAA,IACpB,mBAAAC,IAAoB;AAAA,EAClB,IAAAH;AAEJ,+BACGI,GACC,EAAA,UAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACP,GAAGN;AAAA,MACJ,qBAAqB;AAAA,MACrB,qBACE,oCAAoCC,CAAgB,KAAKA,CAAgB,SACrEC,CAAiB,SAASA,CAAiB;AAAA,MAEjD,mBAAmBC;AAAA,MACnB,YAAYH,EAAM;AAAA,MAClB,aAAaA,EAAM;AAAA,MACnB,aAAU;AAAA,IAAA;AAAA,EAEd,EAAA,CAAA;AAEJ;"}
+{"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;"}

package/lib/sd-component-library111.js

@@ -1,39 +1,27 @@
-import { j as i } from "./sd-component-library195.js";
-import { Flex as n } from "rebass";
-import { ProgressStep as x } from "./sd-component-library198.js";
-const g = ({
-  height: t,
-  steps: s,
-  step: p,
-  onStepClick: o,
-  ...m
-}) => {
-  const a = (e) => o ? () => o(e + 1) : void 0;
-  return /* @__PURE__ */ i.jsx(
-    n,
+import { j as o } from "./sd-component-library196.js";
+import { Box as n } from "rebass";
+import { ProgressBar as a } from "./sd-component-library109.js";
+const c = (r) => {
+  const {
+    firstStripeColor: t = "#F0C8FE",
+    secondStripeColor: e = "#FAEFFF",
+    remainingBarColor: i = "#713580"
+  } = r;
+  return /* @__PURE__ */ o.jsx(n, { children: /* @__PURE__ */ o.jsx(
+    a,
     {
-      ...m,
-      sx: {
-        position: "relative",
-        pl: t || 16,
-        "> *": {
-          width: [100 / (s - 1) + "%"]
-        }
-      },
-      "data-testid": "progress-steps",
-      children: [...Array(s)].map((e, r) => /* @__PURE__ */ i.jsx(
-        x,
-        {
-          active: r < p,
-          height: t || 16,
-          onClick: a(r)
-        },
-        r
-      ))
+      variant: "stripedLine",
+      ...r,
+      withBackgroundProps: !0,
+      completedBackground: `repeating-linear-gradient(45deg, ${t}, ${t} 4px, ${e} 4px, ${e} 8px)`,
+      remainsBackground: i,
+      totalSteps: r.totalSteps,
+      currentStep: r.currentStep,
+      "data-test": "striped-line-progress-bar"
     }
-  );
+  ) });
 };
 export {
-  g as ProgressSteps
+  c as StripedLineProgressBar
 };
 //# sourceMappingURL=sd-component-library111.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library111.js","sources":["../src/components/progress-steps/progress-steps.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Flex } from \"rebass\";\n\nimport { ProgressStepsProps } from \"./interfaces\";\nimport { ProgressStep } from \"./progress-step\";\n\n/**\n * Progress bar component. Accept step and steps attributes.\n */\nexport const ProgressSteps: React.FC<ProgressStepsProps> = ({\n  height,\n  steps,\n  step,\n  onStepClick,\n  ...props\n}) => {\n  const getOnStepClick = (idx: number) =>\n    onStepClick ? () => onStepClick(idx + 1) : undefined;\n  return (\n    <Flex\n      {...props}\n      sx={{\n        position: \"relative\",\n        pl: height || 16,\n        \"> *\": {\n          width: [100 / (steps - 1) + \"%\"],\n        },\n      }}\n      data-testid=\"progress-steps\"\n    >\n      {[...Array(steps)].map((_, i) => (\n        <ProgressStep\n          key={i}\n          active={i < step}\n          height={height || 16}\n          onClick={getOnStepClick(i)}\n        />\n      ))}\n    </Flex>\n  );\n};\n"],"names":["ProgressSteps","height","steps","step","onStepClick","props","getOnStepClick","idx","jsx","Flex","_","i","ProgressStep"],"mappings":";;;AAUO,MAAMA,IAA8C,CAAC;AAAA,EAC1D,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAAC,IAAiB,CAACC,MACtBH,IAAc,MAAMA,EAAYG,IAAM,CAAC,IAAI;AAE3C,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,IAAI;AAAA,QACF,UAAU;AAAA,QACV,IAAIJ,KAAU;AAAA,QACd,OAAO;AAAA,UACL,OAAO,CAAC,OAAOC,IAAQ,KAAK,GAAG;AAAA,QACjC;AAAA,MACF;AAAA,MACA,eAAY;AAAA,MAEX,UAAA,CAAC,GAAG,MAAMA,CAAK,CAAC,EAAE,IAAI,CAACQ,GAAGC,MACzBH,gBAAAA,EAAA;AAAA,QAACI;AAAA,QAAA;AAAA,UAEC,QAAQD,IAAIR;AAAA,UACZ,QAAQF,KAAU;AAAA,UAClB,SAASK,EAAeK,CAAC;AAAA,QAAA;AAAA,QAHpBA;AAAA,MAAA,CAKR;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"sd-component-library111.js","sources":["../src/components/progress-bars/striped-line-progress-bar/striped-line-progress-bar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { ProgressBar } from \"../progress-bar\";\nimport { StripedLineProgressBarProps } from \"./interfaces\";\n\n/**\n * The StripedLineProgressBar component.\n */\nexport const StripedLineProgressBar: React.FunctionComponent<\n  StripedLineProgressBarProps\n> = (\n  props: StripedLineProgressBarProps\n): React.ReactElement<StripedLineProgressBarProps> => {\n  const {\n    firstStripeColor = \"#F0C8FE\",\n    secondStripeColor = \"#FAEFFF\",\n    remainingBarColor = \"#713580\",\n  } = props;\n\n  return (\n    <Box>\n      <ProgressBar\n        variant=\"stripedLine\"\n        {...props}\n        withBackgroundProps={true}\n        completedBackground={\n          `repeating-linear-gradient(45deg, ${firstStripeColor}, ${firstStripeColor} 4px,` +\n          ` ${secondStripeColor} 4px, ${secondStripeColor} 8px)`\n        }\n        remainsBackground={remainingBarColor}\n        totalSteps={props.totalSteps}\n        currentStep={props.currentStep}\n        data-test=\"striped-line-progress-bar\"\n      />\n    </Box>\n  );\n};\n"],"names":["StripedLineProgressBar","props","firstStripeColor","secondStripeColor","remainingBarColor","Box","jsx","ProgressBar"],"mappings":";;;AAUa,MAAAA,IAET,CACFC,MACoD;AAC9C,QAAA;AAAA,IACJ,kBAAAC,IAAmB;AAAA,IACnB,mBAAAC,IAAoB;AAAA,IACpB,mBAAAC,IAAoB;AAAA,EAClB,IAAAH;AAEJ,+BACGI,GACC,EAAA,UAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACP,GAAGN;AAAA,MACJ,qBAAqB;AAAA,MACrB,qBACE,oCAAoCC,CAAgB,KAAKA,CAAgB,SACrEC,CAAiB,SAASA,CAAiB;AAAA,MAEjD,mBAAmBC;AAAA,MACnB,YAAYH,EAAM;AAAA,MAClB,aAAaA,EAAM;AAAA,MACnB,aAAU;AAAA,IAAA;AAAA,EAEd,EAAA,CAAA;AAEJ;"}

package/lib/sd-component-library112.js

@@ -1,158 +1,39 @@
-import { j as e } from "./sd-component-library195.js";
-import { useMemo as P } from "react";
-import { Select as Z } from "@rebass/forms";
-import { Box as q } from "rebass";
-import { useDependantState as G } from "./sd-component-library3.js";
-import { BaseLabel as J } from "./sd-component-library221.js";
-import { MaxMaxContainer as K } from "./sd-component-library41.js";
-import { ResponsiveTextV2 as Q } from "./sd-component-library149.js";
-const U = (s, r, t, d, a, n) => {
-  const m = d.find(
-    (p) => p[r].trim() === s
-  );
-  a == null || a(m, t), n(m);
-}, j = (s) => s ? "no-translate" : void 0, ae = (s) => {
-  const {
-    defaultValue: r,
-    variant: t,
-    selectorLabel: d,
-    name: a,
-    options: n,
-    onChange: m,
-    width: p,
-    m: S,
-    mt: O,
-    mr: T,
-    mb: V,
-    ml: L,
-    gap: M = ["20px"],
-    disabledTextValue: x = "No Options",
-    textTransform: N = "Capitalize",
-    hideDefaultOnSelect: $,
-    labelMargin: D,
-    secondLabel: l,
-    selectElementHeight: E,
-    errorMessage: f,
-    defaultOptionColor: g,
-    selectedOptionColor: h,
-    errorBackground: F,
-    useValueInsteadOfTitle: w = !1,
-    id: y,
-    translateSelect: C = !0,
-    translateDefaultOption: v,
-    ...z
-  } = s, i = w ? "value" : "title", b = P(
-    () => n.find((o) => o[i] === r),
-    [n, r, i]
-  ), [c, B] = G(b), u = n.length === 0, W = !t || !["compact", "tertiary"].includes(t), _ = g && !c ? { color: g } : h ? { color: h } : {}, A = navigator.userAgent.toLowerCase().indexOf("firefox") > -1, I = j(
-    v !== !0 && !C || v === !1
-  ), R = j(!C);
-  return /* @__PURE__ */ e.jsxs(
-    q,
+import { j as i } from "./sd-component-library196.js";
+import { Flex as n } from "rebass";
+import { ProgressStep as x } from "./sd-component-library199.js";
+const g = ({
+  height: t,
+  steps: s,
+  step: p,
+  onStepClick: o,
+  ...m
+}) => {
+  const a = (e) => o ? () => o(e + 1) : void 0;
+  return /* @__PURE__ */ i.jsx(
+    n,
     {
-      id: y,
-      variant: `_containers.selectors.${t}`,
+      ...m,
       sx: {
-        pt: "1px",
-        width: p,
-        m: S,
-        mt: O,
-        mr: T,
-        mb: V,
-        ml: L,
         position: "relative",
-        ...W ? {
-          svg: {
-            transform: `translate(-2px,${A ? 0 : 5}px) scale(.78)`,
-            fill: "#4568F8"
-          }
-        } : {},
-        path: {
-          d: "path('M12,8.6L6.72,3.29C6.32,2.9,5.68,2.9,5.29,3.29C4.90,3.69,4.9,4.33,5.29,4.73L11.23,10.7C11.44,10.91,11.72,11.01,12,11C12.27,11.01,12.55,10.91,12.76,10.7L18.7,4.73C19.09,4.33,19.09,3.69,18.7,3.29C18.31,2.9,17.67,2.9,17.27,3.29Z M12,8.6')"
-        },
-        gap: M
+        pl: t || 16,
+        "> *": {
+          width: [100 / (s - 1) + "%"]
+        }
       },
-      "data-testid": "base-selector",
-      children: [
-        d && /* @__PURE__ */ e.jsxs(K, { gap: ["0px"], children: [
-          /* @__PURE__ */ e.jsx(
-            J,
-            {
-              htmlFor: a,
-              variant: `selectors.${t}${f ? "Error" : ""}`,
-              label: d,
-              m: D
-            }
-          ),
-          l && /* @__PURE__ */ e.jsx(
-            Q,
-            {
-              letterSpacing: ["1px"],
-              textTransform: "uppercase",
-              mt: l.mt,
-              ml: l.ml || ["3px"],
-              color: l.color || "cl_grey",
-              fontSizeWeight: l.fontSizeWeight || [[10, "semi-bold"]],
-              children: l.text
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e.jsx(
-          Z,
-          {
-            id: a,
-            height: E,
-            value: u ? x : c && c[i].trim() || r,
-            backgroundColor: F ? "rgba(255, 0, 0, 0.05)" : "",
-            variant: `_selectors.${t}${f ? "Error" : ""}`,
-            onChange: (o) => U(
-              o.target.value,
-              i,
-              c,
-              n,
-              m,
-              (H) => B(H)
-            ),
-            sx: {
-              textTransform: N,
-              ..._
-            },
-            disabled: u,
-            "data-testid": "select-element",
-            ...z,
-            children: u ? /* @__PURE__ */ e.jsxs("option", { "data-testid": "disabled-option", children: [
-              x,
-              " "
-            ] }, "disabledTextValue") : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-              b === void 0 && // When defaultValue is not in the options list
-              (!c || !$) && /* @__PURE__ */ e.jsx(
-                "option",
-                {
-                  "data-testid": "selector-option",
-                  className: I,
-                  children: r
-                },
-                "defaultValue"
-              ),
-              s.options.map((o) => /* @__PURE__ */ e.jsx(
-                "option",
-                {
-                  value: o[i],
-                  "data-testid": "selector-option",
-                  className: R,
-                  children: o.title
-                },
-                o.id
-              ))
-            ] })
-          }
-        )
-      ]
+      "data-testid": "progress-steps",
+      children: [...Array(s)].map((e, r) => /* @__PURE__ */ i.jsx(
+        x,
+        {
+          active: r < p,
+          height: t || 16,
+          onClick: a(r)
+        },
+        r
+      ))
     }
   );
 };
 export {
-  ae as Selector,
-  j as getNoTranslateClass
+  g as ProgressSteps
 };
 //# sourceMappingURL=sd-component-library112.js.map