@selfdecode/sd-component-library 4.0.73-vite1 → 4.0.73-vite11

package/lib/sd-component-library10.js

@@ -1,10 +1,9 @@
 import { j as t } from "./sd-component-library195.js";
-import "./sd-component-library196.js";
+import { Box as e, Flex as o } from "rebass";
 import { MaxMaxContainer as d } from "./sd-component-library43.js";
-import { Box as e, Flex as o } from "./sd-component-library197.js";
 import { TenSb as p } from "./sd-component-library150.js";
-const j = function(i) {
-  const { leftColor: x, rightColor: n, icon: s, fillColor: a, text: l, textColor: c } = i, r = {
+const b = function(i) {
+  const { leftColor: x, rightColor: n, icon: l, fillColor: s, text: a, textColor: c } = i, r = {
     justifyContent: "center",
     alignItems: "center",
     height: "100%",
@@ -25,9 +24,9 @@ const j = function(i) {
         children: /* @__PURE__ */ t.jsx(o, { sx: r, children: /* @__PURE__ */ t.jsx(
           e,
           {
-            sx: { fill: a || "cl_white", width: "14px" },
+            sx: { fill: s || "cl_white", width: "14px" },
             "data-test": "icon-container",
-            children: s
+            children: l
           }
         ) })
       }
@@ -49,7 +48,7 @@ const j = function(i) {
             textTransform: "uppercase",
             letterSpacing: ["1px"],
             "data-test": "text-container",
-            children: l
+            children: a
           }
         ) })
       }
@@ -57,6 +56,6 @@ const j = function(i) {
   ] });
 };
 export {
-  j as BicolorBadge
+  b as BicolorBadge
 };
 //# sourceMappingURL=sd-component-library10.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library10.js","sources":["../src/components/bicolor-badge/bicolor-badge.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { MaxMaxContainer } from \"../containers/grid-containers/max-max-container\";\nimport { TenSb } from \"../texts/ten-sb\";\nimport { BicolorBadgeProps } from \"./interfaces\";\n\nexport const BicolorBadge: React.FC<BicolorBadgeProps> = function (\n  props: BicolorBadgeProps\n) {\n  const { leftColor, rightColor, icon, fillColor, text, textColor } = props;\n\n  const flexSx = {\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: \"100%\",\n    width: \"100%\",\n  };\n\n  return (\n    <MaxMaxContainer data-test=\"bicolor-badge\">\n      <Box\n        sx={{\n          bg: leftColor || \"cl_blue\",\n          width: \"36px\",\n          height: \"26px\",\n          borderRadius: \"13px 0 0 13px\",\n          pl: \"5px\",\n        }}\n        data-test=\"left-badge-container\"\n      >\n        <Flex sx={flexSx}>\n          <Box\n            sx={{ fill: fillColor || \"cl_white\", width: \"14px\" }}\n            data-test=\"icon-container\"\n          >\n            {icon}\n          </Box>\n        </Flex>\n      </Box>\n      <Box\n        sx={{\n          bg: rightColor || \"cl_darkGrey\",\n          height: \"26px\",\n          borderRadius: \"0  0 13px 0\",\n          p: \"0 20px\",\n        }}\n        data-test=\"right-badge-container\"\n      >\n        <Flex sx={flexSx}>\n          <TenSb\n            color={textColor || \"cl_white\"}\n            textTransform=\"uppercase\"\n            letterSpacing={[\"1px\"]}\n            data-test=\"text-container\"\n          >\n            {text}\n          </TenSb>\n        </Flex>\n      </Box>\n    </MaxMaxContainer>\n  );\n};\n"],"names":["BicolorBadge","props","leftColor","rightColor","icon","fillColor","text","textColor","flexSx","jsxs","MaxMaxContainer","jsx","Box","Flex","TenSb"],"mappings":";;;;;AAQa,MAAAA,IAA4C,SACvDC,GACA;AACA,QAAM,EAAE,WAAAC,GAAW,YAAAC,GAAY,MAAAC,GAAM,WAAAC,GAAW,MAAAC,GAAM,WAAAC,EAAc,IAAAN,GAE9DO,IAAS;AAAA,IACb,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAIP,SAAAC,gBAAAA,EAAA,KAACC,GAAgB,EAAA,aAAU,iBACzB,UAAA;AAAA,IAAAC,gBAAAA,EAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,IAAIV,KAAa;AAAA,UACjB,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,IAAI;AAAA,QACN;AAAA,QACA,aAAU;AAAA,QAEV,UAAAS,gBAAAA,EAAA,IAACE,GAAK,EAAA,IAAIL,GACR,UAAAG,gBAAAA,EAAA;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,IAAI,EAAE,MAAMP,KAAa,YAAY,OAAO,OAAO;AAAA,YACnD,aAAU;AAAA,YAET,UAAAD;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA;AAAA,IACF;AAAA,IACAO,gBAAAA,EAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,IAAIT,KAAc;AAAA,UAClB,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,GAAG;AAAA,QACL;AAAA,QACA,aAAU;AAAA,QAEV,UAAAQ,gBAAAA,EAAA,IAACE,GAAK,EAAA,IAAIL,GACR,UAAAG,gBAAAA,EAAA;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAOP,KAAa;AAAA,YACpB,eAAc;AAAA,YACd,eAAe,CAAC,KAAK;AAAA,YACrB,aAAU;AAAA,YAET,UAAAD;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library10.js","sources":["../src/components/bicolor-badge/bicolor-badge.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { MaxMaxContainer } from \"../containers/grid-containers/max-max-container\";\nimport { TenSb } from \"../texts/ten-sb\";\nimport { BicolorBadgeProps } from \"./interfaces\";\n\nexport const BicolorBadge: React.FC<BicolorBadgeProps> = function (\n  props: BicolorBadgeProps\n) {\n  const { leftColor, rightColor, icon, fillColor, text, textColor } = props;\n\n  const flexSx = {\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: \"100%\",\n    width: \"100%\",\n  };\n\n  return (\n    <MaxMaxContainer data-test=\"bicolor-badge\">\n      <Box\n        sx={{\n          bg: leftColor || \"cl_blue\",\n          width: \"36px\",\n          height: \"26px\",\n          borderRadius: \"13px 0 0 13px\",\n          pl: \"5px\",\n        }}\n        data-test=\"left-badge-container\"\n      >\n        <Flex sx={flexSx}>\n          <Box\n            sx={{ fill: fillColor || \"cl_white\", width: \"14px\" }}\n            data-test=\"icon-container\"\n          >\n            {icon}\n          </Box>\n        </Flex>\n      </Box>\n      <Box\n        sx={{\n          bg: rightColor || \"cl_darkGrey\",\n          height: \"26px\",\n          borderRadius: \"0  0 13px 0\",\n          p: \"0 20px\",\n        }}\n        data-test=\"right-badge-container\"\n      >\n        <Flex sx={flexSx}>\n          <TenSb\n            color={textColor || \"cl_white\"}\n            textTransform=\"uppercase\"\n            letterSpacing={[\"1px\"]}\n            data-test=\"text-container\"\n          >\n            {text}\n          </TenSb>\n        </Flex>\n      </Box>\n    </MaxMaxContainer>\n  );\n};\n"],"names":["BicolorBadge","props","leftColor","rightColor","icon","fillColor","text","textColor","flexSx","jsxs","MaxMaxContainer","jsx","Box","Flex","TenSb"],"mappings":";;;;AAQa,MAAAA,IAA4C,SACvDC,GACA;AACA,QAAM,EAAE,WAAAC,GAAW,YAAAC,GAAY,MAAAC,GAAM,WAAAC,GAAW,MAAAC,GAAM,WAAAC,EAAc,IAAAN,GAE9DO,IAAS;AAAA,IACb,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAIP,SAAAC,gBAAAA,EAAA,KAACC,GAAgB,EAAA,aAAU,iBACzB,UAAA;AAAA,IAAAC,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,IAAIV,KAAa;AAAA,UACjB,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,IAAI;AAAA,QACN;AAAA,QACA,aAAU;AAAA,QAEV,UAAAS,gBAAAA,EAAA,IAACE,GAAK,EAAA,IAAIL,GACR,UAAAG,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAI,EAAE,MAAMP,KAAa,YAAY,OAAO,OAAO;AAAA,YACnD,aAAU;AAAA,YAET,UAAAD;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA;AAAA,IACF;AAAA,IACAO,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,IAAIT,KAAc;AAAA,UAClB,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,GAAG;AAAA,QACL;AAAA,QACA,aAAU;AAAA,QAEV,UAAAQ,gBAAAA,EAAA,IAACE,GAAK,EAAA,IAAIL,GACR,UAAAG,gBAAAA,EAAA;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAOP,KAAa;AAAA,YACpB,eAAc;AAAA,YACd,eAAe,CAAC,KAAK;AAAA,YACrB,aAAU;AAAA,YAET,UAAAD;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/lib/sd-component-library100.js

@@ -1,17 +1,16 @@
 import { j as t } from "./sd-component-library195.js";
 import { useRef as B, useState as I, useEffect as R } from "react";
-import "./sd-component-library196.js";
+import { Box as s } from "rebass";
 import { useBodyScrollLock as E } from "./sd-component-library3.js";
 import { isIOS as F, isPDFFlow as T } from "./sd-component-library4.js";
-import X from "./sd-component-library268.js";
-import { Box as s } from "./sd-component-library197.js";
+import X from "./sd-component-library258.js";
 import { OutsideClickBox as P } from "./sd-component-library14.js";
-import { ReactComponent as _ } from "./sd-component-library269.js";
-import { FlexCenter as z } from "./sd-component-library37.js";
-import { Button as A } from "./sd-component-library28.js";
-const r = 500, K = (p) => {
+import { ReactComponent as z } from "./sd-component-library259.js";
+import { FlexCenter as A } from "./sd-component-library37.js";
+import { Button as D } from "./sd-component-library28.js";
+const r = 500, J = (d) => {
   const {
-    variant: d,
+    variant: p,
     children: l,
     containerBg: c,
     xIconColor: x,
@@ -30,7 +29,7 @@ const r = 500, K = (p) => {
     mountOnEnter: b = !0,
     unmountOnExit: j,
     intermediateContainerSx: y
-  } = p, o = B(null), [O, a] = I(null);
+  } = d, o = B(null), [O, a] = I(null);
   return R(() => {
     let e;
     return i ? a(l) : e = setTimeout(() => {
@@ -70,7 +69,7 @@ const r = 500, K = (p) => {
             },
             ref: o,
             children: /* @__PURE__ */ t.jsx(
-              z,
+              A,
               {
                 sx: {
                   position: "relative",
@@ -93,7 +92,7 @@ const r = 500, K = (p) => {
                       /* @__PURE__ */ t.jsx(
                         P,
                         {
-                          variant: `_modals.inner.${d}`,
+                          variant: `_modals.inner.${p}`,
                           sx: {
                             width: h,
                             borderRadius: f,
@@ -112,7 +111,7 @@ const r = 500, K = (p) => {
                         }
                       ),
                       m && /* @__PURE__ */ t.jsx(
-                        A,
+                        D,
                         {
                           onClick: n,
                           "data-test": "x-icon",
@@ -127,7 +126,7 @@ const r = 500, K = (p) => {
                             marginTop: "4px"
                           },
                           children: /* @__PURE__ */ t.jsx(
-                            _,
+                            z,
                             {
                               style: {
                                 fill: x || "#4568F9",
@@ -150,6 +149,6 @@ const r = 500, K = (p) => {
   );
 };
 export {
-  K as Modal
+  J as Modal
 };
 //# sourceMappingURL=sd-component-library100.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library100.js","sources":["../src/components/modals/modal/modal.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport { Box } from \"rebass\";\n\nimport { useBodyScrollLock } from \"../../../core/custom-hooks\";\nimport { isIOS, isPDFFlow } from \"../../../core/functions\";\nimport { OutsideClickBox } from \"../../boxes\";\nimport { Button } from \"../../buttons\";\nimport { FlexCenter } from \"../../containers\";\nimport { XIcon } from \"./assets\";\nimport { ModalProps } from \"./interfaces\";\n\nconst animationDuration = 500; // milliseconds\n\n/**\n * The modal container.\n */\nexport const Modal: React.FC<ModalProps> = (props) => {\n  const {\n    variant,\n    children,\n    containerBg,\n    xIconColor,\n    showXIcon = true,\n    onClickX,\n    coverBg = \"rgba(69,104,249, 0.4)\",\n    width = \"auto\",\n    isOpen,\n    borderRadius = [\"5px\"],\n    outerPadding = [\"30px\", \"auto\", \"150px\"],\n    innerPadding = [\"40px 20px\", \"50px\"],\n    popUpHeight = \"100%\",\n    containerSx,\n    innerSx,\n    closeOnClickOutside = false,\n    mountOnEnter = true,\n    unmountOnExit,\n    intermediateContainerSx,\n  } = props;\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const [content, setContent] = useState<React.ReactNode>(null);\n\n  useEffect(() => {\n    let timer: NodeJS.Timeout;\n    if (isOpen) {\n      setContent(children);\n    } else {\n      timer = setTimeout(() => {\n        setContent(null);\n      }, animationDuration);\n    }\n    return () => clearTimeout(timer);\n  }, [isOpen, children]);\n\n  useBodyScrollLock(ref.current, isOpen && !isIOS());\n\n  if (isPDFFlow()) return null;\n\n  return (\n    <Transition\n      nodeRef={ref}\n      in={isOpen}\n      timeout={{\n        enter: 0,\n        exit: animationDuration,\n      }}\n      mountOnEnter={mountOnEnter}\n      unmountOnExit={unmountOnExit}\n    >\n      {(state) => (\n        /** This most outer container is the background */\n        <Box\n          sx={{\n            width: \"100vw\",\n            minHeight: \"100vh\",\n            zIndex: \"150\",\n            position: \"fixed\",\n            overflowX: \"hidden\",\n            overflowY: \"scroll\",\n            top: 0,\n            left: 0,\n            bottom: 0,\n            backgroundColor: coverBg,\n            opacity: state === \"entered\" ? 1 : 0,\n            transition: `opacity ${animationDuration}ms ease-in-out`,\n            display: [\"entering\", \"entered\", \"exiting\"].includes(state)\n              ? \"block\"\n              : \"none\",\n            ...containerSx,\n          }}\n          ref={ref}\n        >\n          {/** This following container is the frame of the whole screen, used\n           * as an in-between relative-position container for the popup */}\n          <FlexCenter\n            sx={{\n              position: \"relative\",\n              width: \"100%\",\n              height: popUpHeight,\n            }}\n          >\n            {/** This following container is the complete popup,\n             * as in contents and the X close icon */}\n            <Box\n              sx={{\n                maxWidth: \"100vw\",\n                zIndex: \"180\",\n                margin: \"auto\",\n                whiteSpace: \"nowrap\",\n                padding: outerPadding,\n                ...intermediateContainerSx,\n              }}\n              data-test=\"modal\"\n            >\n              {/** This following container and its content is\n               *  the actual content of the popup */}\n              <OutsideClickBox\n                variant={`_modals.inner.${variant}`}\n                sx={{\n                  width,\n                  borderRadius,\n                  whiteSpace: \"normal\",\n                  textAlign: \"center\",\n                  display: \"inline-block\",\n                  alignSelf: \"top\",\n                  backgroundColor: containerBg || \"white\",\n                  padding: innerPadding,\n                  ...innerSx,\n                }}\n                onClickOutside={() => {\n                  if (closeOnClickOutside && onClickX) {\n                    onClickX();\n                  }\n                }}\n              >\n                {content}\n              </OutsideClickBox>\n\n              {/** This following container and its content is the X button */}\n              {showXIcon && (\n                <Button\n                  onClick={onClickX}\n                  data-test=\"x-icon\"\n                  sx={{\n                    p: 0,\n                    bg: \"cl_transparent\",\n                    display: \"inline-block\",\n                    verticalAlign: \"top\",\n                    width: \"20px\",\n                    height: \"20px\",\n                    marginLeft: \"6px\",\n                    marginTop: \"4px\",\n                  }}\n                >\n                  <XIcon\n                    style={{\n                      fill: xIconColor || \"#4568F9\",\n                      width: \"20px\",\n                      height: \"20px\",\n                    }}\n                  />\n                </Button>\n              )}\n            </Box>\n          </FlexCenter>\n        </Box>\n      )}\n    </Transition>\n  );\n};\n"],"names":["animationDuration","Modal","props","variant","children","containerBg","xIconColor","showXIcon","onClickX","coverBg","width","isOpen","borderRadius","outerPadding","innerPadding","popUpHeight","containerSx","innerSx","closeOnClickOutside","mountOnEnter","unmountOnExit","intermediateContainerSx","ref","useRef","content","setContent","useState","useEffect","timer","useBodyScrollLock","isIOS","isPDFFlow","jsx","Transition","state","Box","FlexCenter","jsxs","OutsideClickBox","Button","XIcon"],"mappings":"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"}
+{"version":3,"file":"sd-component-library100.js","sources":["../src/components/modals/modal/modal.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport { Box } from \"rebass\";\n\nimport { useBodyScrollLock } from \"../../../core/custom-hooks\";\nimport { isIOS, isPDFFlow } from \"../../../core/functions\";\nimport { OutsideClickBox } from \"../../boxes\";\nimport { Button } from \"../../buttons\";\nimport { FlexCenter } from \"../../containers\";\nimport { XIcon } from \"./assets\";\nimport { ModalProps } from \"./interfaces\";\n\nconst animationDuration = 500; // milliseconds\n\n/**\n * The modal container.\n */\nexport const Modal: React.FC<ModalProps> = (props) => {\n  const {\n    variant,\n    children,\n    containerBg,\n    xIconColor,\n    showXIcon = true,\n    onClickX,\n    coverBg = \"rgba(69,104,249, 0.4)\",\n    width = \"auto\",\n    isOpen,\n    borderRadius = [\"5px\"],\n    outerPadding = [\"30px\", \"auto\", \"150px\"],\n    innerPadding = [\"40px 20px\", \"50px\"],\n    popUpHeight = \"100%\",\n    containerSx,\n    innerSx,\n    closeOnClickOutside = false,\n    mountOnEnter = true,\n    unmountOnExit,\n    intermediateContainerSx,\n  } = props;\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const [content, setContent] = useState<React.ReactNode>(null);\n\n  useEffect(() => {\n    let timer: NodeJS.Timeout;\n    if (isOpen) {\n      setContent(children);\n    } else {\n      timer = setTimeout(() => {\n        setContent(null);\n      }, animationDuration);\n    }\n    return () => clearTimeout(timer);\n  }, [isOpen, children]);\n\n  useBodyScrollLock(ref.current, isOpen && !isIOS());\n\n  if (isPDFFlow()) return null;\n\n  return (\n    <Transition\n      nodeRef={ref}\n      in={isOpen}\n      timeout={{\n        enter: 0,\n        exit: animationDuration,\n      }}\n      mountOnEnter={mountOnEnter}\n      unmountOnExit={unmountOnExit}\n    >\n      {(state) => (\n        /** This most outer container is the background */\n        <Box\n          sx={{\n            width: \"100vw\",\n            minHeight: \"100vh\",\n            zIndex: \"150\",\n            position: \"fixed\",\n            overflowX: \"hidden\",\n            overflowY: \"scroll\",\n            top: 0,\n            left: 0,\n            bottom: 0,\n            backgroundColor: coverBg,\n            opacity: state === \"entered\" ? 1 : 0,\n            transition: `opacity ${animationDuration}ms ease-in-out`,\n            display: [\"entering\", \"entered\", \"exiting\"].includes(state)\n              ? \"block\"\n              : \"none\",\n            ...containerSx,\n          }}\n          ref={ref}\n        >\n          {/** This following container is the frame of the whole screen, used\n           * as an in-between relative-position container for the popup */}\n          <FlexCenter\n            sx={{\n              position: \"relative\",\n              width: \"100%\",\n              height: popUpHeight,\n            }}\n          >\n            {/** This following container is the complete popup,\n             * as in contents and the X close icon */}\n            <Box\n              sx={{\n                maxWidth: \"100vw\",\n                zIndex: \"180\",\n                margin: \"auto\",\n                whiteSpace: \"nowrap\",\n                padding: outerPadding,\n                ...intermediateContainerSx,\n              }}\n              data-test=\"modal\"\n            >\n              {/** This following container and its content is\n               *  the actual content of the popup */}\n              <OutsideClickBox\n                variant={`_modals.inner.${variant}`}\n                sx={{\n                  width,\n                  borderRadius,\n                  whiteSpace: \"normal\",\n                  textAlign: \"center\",\n                  display: \"inline-block\",\n                  alignSelf: \"top\",\n                  backgroundColor: containerBg || \"white\",\n                  padding: innerPadding,\n                  ...innerSx,\n                }}\n                onClickOutside={() => {\n                  if (closeOnClickOutside && onClickX) {\n                    onClickX();\n                  }\n                }}\n              >\n                {content}\n              </OutsideClickBox>\n\n              {/** This following container and its content is the X button */}\n              {showXIcon && (\n                <Button\n                  onClick={onClickX}\n                  data-test=\"x-icon\"\n                  sx={{\n                    p: 0,\n                    bg: \"cl_transparent\",\n                    display: \"inline-block\",\n                    verticalAlign: \"top\",\n                    width: \"20px\",\n                    height: \"20px\",\n                    marginLeft: \"6px\",\n                    marginTop: \"4px\",\n                  }}\n                >\n                  <XIcon\n                    style={{\n                      fill: xIconColor || \"#4568F9\",\n                      width: \"20px\",\n                      height: \"20px\",\n                    }}\n                  />\n                </Button>\n              )}\n            </Box>\n          </FlexCenter>\n        </Box>\n      )}\n    </Transition>\n  );\n};\n"],"names":["animationDuration","Modal","props","variant","children","containerBg","xIconColor","showXIcon","onClickX","coverBg","width","isOpen","borderRadius","outerPadding","innerPadding","popUpHeight","containerSx","innerSx","closeOnClickOutside","mountOnEnter","unmountOnExit","intermediateContainerSx","ref","useRef","content","setContent","useState","useEffect","timer","useBodyScrollLock","isIOS","isPDFFlow","jsx","Transition","state","Box","FlexCenter","jsxs","OutsideClickBox","Button","XIcon"],"mappings":"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"}

package/lib/sd-component-library102.js

@@ -1,9 +1,9 @@
 import { j as r } from "./sd-component-library195.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-library263.js";
-import { CurrentPage as h } from "./sd-component-library264.js";
-import { ReactComponent as S } from "./sd-component-library265.js";
+import { SquareButton as g } from "./sd-component-library254.js";
+import { ReactComponent as P } from "./sd-component-library255.js";
+import { CurrentPage as h } from "./sd-component-library256.js";
+import { ReactComponent as S } from "./sd-component-library257.js";
 import { GridCenter as R } from "./sd-component-library44.js";
 function x(m, t, o, n) {
   t == null || t(o, n), m(o);

package/lib/sd-component-library103.js

@@ -1,25 +1,24 @@
 import { j as t } from "./sd-component-library195.js";
-import "./sd-component-library196.js";
-import { MaxWidthContainer as p } from "./sd-component-library47.js";
-import { Flex as l } from "./sd-component-library197.js";
+import { Flex as p } from "rebass";
+import { MaxWidthContainer as l } from "./sd-component-library47.js";
 import { TwelveSb as x } from "./sd-component-library157.js";
 import { PageSelector as c } from "./sd-component-library102.js";
-const b = ({
+const S = ({
   currentPage: e,
-  itemsTotal: r,
-  itemsPerPage: n,
+  itemsTotal: n,
+  itemsPerPage: r,
   onChange: o,
   hideTotal: a,
   bgSx: i,
   innerSx: s
 }) => /* @__PURE__ */ t.jsxs(
-  p,
+  l,
   {
     bgSx: i,
     innerSx: { display: "flex", justifyContent: "space-between", ...s },
     "data-test": "pagination-bar",
     children: [
-      /* @__PURE__ */ t.jsx(l, { flexDirection: "column", justifyContent: "center", children: /* @__PURE__ */ t.jsxs(
+      /* @__PURE__ */ t.jsx(p, { flexDirection: "column", justifyContent: "center", children: /* @__PURE__ */ t.jsxs(
         x,
         {
           color: "cl_darkGrey",
@@ -27,11 +26,11 @@ const b = ({
           letterSpacing: ["2px"],
           "data-test": "pagination-bar-info",
           children: [
-            `Showing ${(e - 1) * n + 1} - ${Math.min(
-              r,
-              e * n
+            `Showing ${(e - 1) * r + 1} - ${Math.min(
+              n,
+              e * r
             )}`,
-            !a && ` / ${r}`
+            !a && ` / ${n}`
           ]
         }
       ) }),
@@ -39,7 +38,7 @@ const b = ({
         c,
         {
           currentPage: e,
-          lastPage: Math.ceil(r / n),
+          lastPage: Math.ceil(n / r),
           onChange: o,
           "data-test": "page-selector"
         }
@@ -48,6 +47,6 @@ const b = ({
   }
 );
 export {
-  b as PaginationBar
+  S as PaginationBar
 };
 //# sourceMappingURL=sd-component-library103.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library103.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-test=\"pagination-bar\"\n    >\n      <Flex flexDirection=\"column\" justifyContent=\"center\">\n        <TwelveSb\n          color=\"cl_darkGrey\"\n          textTransform=\"uppercase\"\n          letterSpacing={[\"2px\"]}\n          data-test=\"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-test=\"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,aAAU;AAAA,IAEV,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,aAAU;AAAA,UAET,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,aAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"sd-component-library103.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-test=\"pagination-bar\"\n    >\n      <Flex flexDirection=\"column\" justifyContent=\"center\">\n        <TwelveSb\n          color=\"cl_darkGrey\"\n          textTransform=\"uppercase\"\n          letterSpacing={[\"2px\"]}\n          data-test=\"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-test=\"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,aAAU;AAAA,IAEV,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,aAAU;AAAA,UAET,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,aAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/lib/sd-component-library104.js

@@ -1,8 +1,8 @@
 import { j as e } from "./sd-component-library195.js";
-import { PaginationBarButton as i } from "./sd-component-library266.js";
-import { ReactComponent as h } from "./sd-component-library263.js";
-import { PaginationBarCurrentPage as u } from "./sd-component-library267.js";
-import { ReactComponent as f } from "./sd-component-library265.js";
+import { PaginationBarButton as i } from "./sd-component-library264.js";
+import { ReactComponent as h } from "./sd-component-library255.js";
+import { PaginationBarCurrentPage as u } from "./sd-component-library265.js";
+import { ReactComponent as f } from "./sd-component-library257.js";
 import { GridContainerV2 as s } from "./sd-component-library41.js";
 import { ResponsiveTextV2 as j } from "./sd-component-library147.js";
 const k = (a) => {

package/lib/sd-component-library106.js

@@ -1,6 +1,5 @@
 import { j as s } from "./sd-component-library195.js";
-import "./sd-component-library196.js";
-import { Flex as i, Box as t } from "./sd-component-library197.js";
+import { Flex as i, Box as t } from "rebass";
 const g = ({
   totalSteps: e,
   currentStep: d,

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

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

@@ -1,16 +1,15 @@
 import { j as s } from "./sd-component-library195.js";
-import "./sd-component-library196.js";
-import { Box as i } from "./sd-component-library197.js";
-const d = ({
-  currentStep: p,
+import { Box as i } from "rebass";
+const c = ({
+  currentStep: e,
   totalSteps: o,
   height: r = "6px",
   borderRadius: t = "3px",
-  baseColor: e = "cl_lightGrey",
-  activeColor: n = "cl_purple",
+  baseColor: n = "cl_lightGrey",
+  activeColor: p = "cl_purple",
   containerSx: a
 }) => {
-  const x = Math.max(0, Math.min(p, o));
+  const x = Math.max(0, Math.min(e, o));
   return /* @__PURE__ */ s.jsx(
     i,
     {
@@ -18,7 +17,7 @@ const d = ({
         position: "relative",
         height: r,
         borderRadius: t,
-        bg: e,
+        bg: n,
         ...a
       },
       "data-test": "rounded-progress-bar",
@@ -33,7 +32,7 @@ const d = ({
             minWidth: `calc(${t} * 2)`,
             height: r,
             borderRadius: t,
-            bg: n,
+            bg: p,
             transition: "width 1s"
           }
         }
@@ -42,6 +41,6 @@ const d = ({
   );
 };
 export {
-  d as RoundedProgressBar
+  c as RoundedProgressBar
 };
 //# 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/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;AAAAA,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;AAAAA,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-library107.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-library108.js

@@ -1,6 +1,5 @@
 import { j as o } from "./sd-component-library195.js";
-import "./sd-component-library196.js";
-import { Box as n } from "./sd-component-library197.js";
+import { Box as n } from "rebass";
 import { ProgressBar as a } from "./sd-component-library106.js";
 const c = (r) => {
   const {

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

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

@@ -1,8 +1,7 @@
 import { j as p } from "./sd-component-library195.js";
-import "./sd-component-library196.js";
-import { Flex as x } from "./sd-component-library197.js";
-import { ProgressStep as n } from "./sd-component-library201.js";
-const j = ({
+import { Flex as n } from "rebass";
+import { ProgressStep as x } from "./sd-component-library199.js";
+const g = ({
   height: t,
   steps: s,
   step: i,
@@ -11,7 +10,7 @@ const j = ({
 }) => {
   const a = (e) => o ? () => o(e + 1) : void 0;
   return /* @__PURE__ */ p.jsx(
-    x,
+    n,
     {
       ...m,
       sx: {
@@ -23,7 +22,7 @@ const j = ({
       },
       "data-test": "progress-steps",
       children: [...Array(s)].map((e, r) => /* @__PURE__ */ p.jsx(
-        n,
+        x,
         {
           active: r < i,
           height: t || 16,
@@ -35,6 +34,6 @@ const j = ({
   );
 };
 export {
-  j as ProgressSteps
+  g as ProgressSteps
 };
 //# 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-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-test=\"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;AAAAA,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,aAAU;AAAA,MAET,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-library109.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-test=\"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,aAAU;AAAA,MAET,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;"}

package/lib/sd-component-library11.js

@@ -1,10 +1,9 @@
-import { j as r } from "./sd-component-library195.js";
-import "./sd-component-library196.js";
-import { Box as e } from "./sd-component-library197.js";
+import { j as e } from "./sd-component-library195.js";
+import { Box as r } from "rebass";
 const d = (o) => {
   const { children: t, ...s } = o;
-  return /* @__PURE__ */ r.jsx(
-    e,
+  return /* @__PURE__ */ e.jsx(
+    r,
     {
       "data-test": "desktop-hidden-box",
       sx: { display: ["block", "none"] },

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library11.js","sources":["../src/components/boxes/desktop-hidden-box/desktop-hidden-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { DesktopHiddenBoxProps as Props } from \"./interfaces\";\n\n/**\n * Desktop Hidden Box component. This component, and it's children,\n *  won't be visible on desktop screens\n *  @deprecated use useBreakPoints() hook instead\n */\nexport const DesktopHiddenBox: React.FC<Props> = (props) => {\n  const { children, ...boxProps } = props;\n\n  return (\n    <Box\n      data-test=\"desktop-hidden-box\"\n      sx={{ display: [\"block\", \"none\"] }}\n      {...boxProps}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"names":["DesktopHiddenBox","props","children","boxProps","jsx","Box"],"mappings":";;;AAWa,MAAAA,IAAoC,CAACC,MAAU;AAC1D,QAAM,EAAE,UAAAC,GAAU,GAAGC,EAAA,IAAaF;AAGhC,SAAAG,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,IAAI,EAAE,SAAS,CAAC,SAAS,MAAM,EAAE;AAAA,MAChC,GAAGF;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"sd-component-library11.js","sources":["../src/components/boxes/desktop-hidden-box/desktop-hidden-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { DesktopHiddenBoxProps as Props } from \"./interfaces\";\n\n/**\n * Desktop Hidden Box component. This component, and it's children,\n *  won't be visible on desktop screens\n *  @deprecated use useBreakPoints() hook instead\n */\nexport const DesktopHiddenBox: React.FC<Props> = (props) => {\n  const { children, ...boxProps } = props;\n\n  return (\n    <Box\n      data-test=\"desktop-hidden-box\"\n      sx={{ display: [\"block\", \"none\"] }}\n      {...boxProps}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"names":["DesktopHiddenBox","props","children","boxProps","jsx","Box"],"mappings":";;AAWa,MAAAA,IAAoC,CAACC,MAAU;AAC1D,QAAM,EAAE,UAAAC,GAAU,GAAGC,EAAA,IAAaF;AAGhC,SAAAG,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,IAAI,EAAE,SAAS,CAAC,SAAS,MAAM,EAAE;AAAA,MAChC,GAAGF;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/lib/sd-component-library110.js

@@ -1,18 +1,17 @@
 import { j as e } from "./sd-component-library195.js";
 import { useMemo as Z } from "react";
-import { Select as q } from "./sd-component-library213.js";
-import "./sd-component-library196.js";
-import { useDependantState as G } from "./sd-component-library3.js";
-import { Box as J } from "./sd-component-library197.js";
+import { Select as q } from "@rebass/forms";
+import { Box as G } from "rebass";
+import { useDependantState as J } from "./sd-component-library3.js";
 import { MaxMaxContainer as K } from "./sd-component-library43.js";
-import { BaseLabel as P } from "./sd-component-library234.js";
+import { BaseLabel as P } from "./sd-component-library228.js";
 import { ResponsiveTextV2 as Q } from "./sd-component-library147.js";
 const U = (r, a, t, d, o, n) => {
   const m = d.find(
     (p) => p[a].trim() === r
   );
   o == null || o(m, t), n(m);
-}, j = (r) => r ? "no-translate" : void 0, ne = (r) => {
+}, j = (r) => r ? "no-translate" : void 0, ae = (r) => {
   const {
     defaultValue: a,
     variant: t,
@@ -32,26 +31,26 @@ const U = (r, a, t, d, o, n) => {
     hideDefaultOnSelect: $,
     labelMargin: F,
     secondLabel: l,
-    selectElementHeight: B,
+    selectElementHeight: D,
     errorMessage: f,
     defaultOptionColor: g,
     selectedOptionColor: h,
-    onFocus: D,
-    errorBackground: E,
-    useValueInsteadOfTitle: _ = !1,
-    id: w,
+    onFocus: E,
+    errorBackground: w,
+    useValueInsteadOfTitle: y = !1,
+    id: z,
     translateSelect: C = !0,
     translateDefaultOption: v
-  } = r, i = _ ? "value" : "title", b = Z(
+  } = r, i = y ? "value" : "title", b = Z(
     () => n.find((s) => s[i] === a),
     [n, a, i]
-  ), [c, y] = G(b), u = n.length === 0, z = !t || !["compact", "tertiary"].includes(t), W = g && !c ? { color: g } : h ? { color: h } : {}, A = navigator.userAgent.toLowerCase().indexOf("firefox") > -1, I = j(
+  ), [c, B] = J(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(
-    J,
+    G,
     {
-      id: w,
+      id: z,
       variant: `_containers.selectors.${t}`,
       sx: {
         pt: "1px",
@@ -62,7 +61,7 @@ const U = (r, a, t, d, o, n) => {
         mb: V,
         ml: L,
         position: "relative",
-        ...z ? {
+        ...W ? {
           svg: {
             transform: `translate(-2px,${A ? 0 : 5}px) scale(.78)`,
             fill: "#4568F8"
@@ -103,10 +102,10 @@ const U = (r, a, t, d, o, n) => {
           {
             id: o,
             name: o,
-            height: B,
+            height: D,
             value: u ? x : c && c[i].trim() || a,
-            onFocus: D,
-            backgroundColor: E ? "rgba(255, 0, 0, 0.05)" : "",
+            onFocus: E,
+            backgroundColor: w ? "rgba(255, 0, 0, 0.05)" : "",
             variant: `_selectors.${t}${f ? "Error" : ""}`,
             onChange: (s) => U(
               s.target.value,
@@ -114,11 +113,11 @@ const U = (r, a, t, d, o, n) => {
               c,
               n,
               m,
-              (H) => y(H)
+              (H) => B(H)
             ),
             sx: {
               textTransform: N,
-              ...W
+              ..._
             },
             disabled: u,
             children: u ? /* @__PURE__ */ e.jsxs("option", { "data-test": "disabled-option", children: [
@@ -153,7 +152,7 @@ const U = (r, a, t, d, o, n) => {
   );
 };
 export {
-  ne as Selector,
+  ae as Selector,
   j as getNoTranslateClass
 };
 //# sourceMappingURL=sd-component-library110.js.map