@selfdecode/sd-component-library 4.0.76-test2 → 4.0.76-test3

package/lib/sd-component-library84.js

@@ -1,11 +1,11 @@
-import { j as r } from "./sd-component-library190.js";
+import { j as r } from "./sd-component-library191.js";
 import { Box as P } from "rebass";
-import { labelWidth as H, defaultDistanceFromLabelToRanges as p, labelPaddingX as I, defaultArc as X, defaultWidth as A, defaultHeight as E, defaultDistanceBetweenRanges as G, defaultGaugeWidth as Y, defaultPointStrokeWidth as _, defaultInnerPointRadius as q, defaultDistanceFromRangesToNeedle as y, defaultInnerCircleStrokeWidth as z, defaultInnerCircleRadius as J, defaultNeedleWidth as K, defaultNumberOfDashes as Q, defaultDashHeight as U, defaultDashWidth as V, defaultDistanceFromRangesToScale as Z, defaultMaskBorderRadius as ee } from "./sd-component-library226.js";
+import { labelWidth as H, defaultDistanceFromLabelToRanges as p, labelPaddingX as I, defaultArc as X, defaultWidth as A, defaultHeight as E, defaultDistanceBetweenRanges as G, defaultGaugeWidth as Y, defaultPointStrokeWidth as _, defaultInnerPointRadius as q, defaultDistanceFromRangesToNeedle as y, defaultInnerCircleStrokeWidth as z, defaultInnerCircleRadius as J, defaultNeedleWidth as K, defaultNumberOfDashes as Q, defaultDashHeight as U, defaultDashWidth as V, defaultDistanceFromRangesToScale as Z, defaultMaskBorderRadius as ee } from "./sd-component-library229.js";
 import { isCorrectOutlineMeterConfig as te } from "./sd-component-library86.js";
-import { OutlineMeterRange as ae } from "./sd-component-library232.js";
-import { OutlineMeterScale as re } from "./sd-component-library233.js";
-import { OutlineMeterNeedle as ie } from "./sd-component-library234.js";
-import { OutlineMeterLabelBox as se } from "./sd-component-library235.js";
+import { OutlineMeterRange as ae } from "./sd-component-library235.js";
+import { OutlineMeterScale as re } from "./sd-component-library236.js";
+import { OutlineMeterNeedle as ie } from "./sd-component-library237.js";
+import { OutlineMeterLabelBox as se } from "./sd-component-library238.js";
 const ce = (R) => {
   const {
     marginTop: x = "50px",

package/lib/sd-component-library85.js

@@ -1,5 +1,5 @@
-import { j as u } from "./sd-component-library190.js";
-import { smallMeterWidth as g, smallMeterHeight as c, smallMeterPointStrokeWidth as R, smallMeterPointRadius as W, smallMeterInnerCircleStrokeWidth as k, smallMeterInnerCircleRadius as S, smallMeterGaugeWidth as p, smallMeterDistanceBetweenRanges as f, smallMeterDistanceFromRangesToNeedle as w, smallMeterNeedleWidth as x, smallMeterMaskBorderRadius as B } from "./sd-component-library226.js";
+import { j as u } from "./sd-component-library191.js";
+import { smallMeterWidth as g, smallMeterHeight as c, smallMeterPointStrokeWidth as R, smallMeterPointRadius as W, smallMeterInnerCircleStrokeWidth as k, smallMeterInnerCircleRadius as S, smallMeterGaugeWidth as p, smallMeterDistanceBetweenRanges as f, smallMeterDistanceFromRangesToNeedle as w, smallMeterNeedleWidth as x, smallMeterMaskBorderRadius as B } from "./sd-component-library229.js";
 import { OutlineMeter as C } from "./sd-component-library84.js";
 const T = (e) => {
   const {

package/lib/sd-component-library87.js

@@ -1,11 +1,11 @@
-import { j as o } from "./sd-component-library190.js";
+import { j as o } from "./sd-component-library191.js";
 import { Box as H } from "rebass";
-import { labelWidth as y, defaultDistanceFromLabelToRanges as R, labelPaddingX as E, defaultArc as G, defaultWidth as P, defaultHeight as X, defaultDistanceBetweenRanges as Y, defaultGaugeWidth as _, defaultDistanceFromRangesToNeedle as A, defaultInnerCircleStrokeWidth as V, defaultInnerCircleRadius as q, defaultNeedleWidth as J, defaultNumberOfDashes as K, defaultDashHeight as Q, defaultDashWidth as U, defaultDistanceFromRangesToScale as Z, defaultMaskBorderRadius as ee } from "./sd-component-library226.js";
-import { defaultPointerWidth as te } from "./sd-component-library225.js";
-import { DiscreteRange as ae } from "./sd-component-library236.js";
-import { OutlineMeterScale as oe } from "./sd-component-library233.js";
-import { DiscreteMeterNeedle as le } from "./sd-component-library237.js";
-import { MatchedRangeLabelBox as re } from "./sd-component-library238.js";
+import { labelWidth as y, defaultDistanceFromLabelToRanges as R, labelPaddingX as E, defaultArc as G, defaultWidth as P, defaultHeight as X, defaultDistanceBetweenRanges as Y, defaultGaugeWidth as _, defaultDistanceFromRangesToNeedle as A, defaultInnerCircleStrokeWidth as V, defaultInnerCircleRadius as q, defaultNeedleWidth as J, defaultNumberOfDashes as K, defaultDashHeight as Q, defaultDashWidth as U, defaultDistanceFromRangesToScale as Z, defaultMaskBorderRadius as ee } from "./sd-component-library229.js";
+import { defaultPointerWidth as te } from "./sd-component-library228.js";
+import { DiscreteRange as ae } from "./sd-component-library239.js";
+import { OutlineMeterScale as oe } from "./sd-component-library236.js";
+import { DiscreteMeterNeedle as le } from "./sd-component-library240.js";
+import { MatchedRangeLabelBox as re } from "./sd-component-library241.js";
 function me(x) {
   const {
     marginTop: b = "50px",

package/lib/sd-component-library88.js

@@ -1,5 +1,5 @@
-import { j as o } from "./sd-component-library190.js";
-import { smallMeterWidth as u, smallMeterHeight as M, smallMeterInnerCircleStrokeWidth as c, smallMeterInnerCircleRadius as h, smallMeterGaugeWidth as g, smallMeterDistanceBetweenRanges as R, smallMeterDistanceFromRangesToNeedle as W, smallMeterNeedleWidth as p, smallMeterMaskBorderRadius as f } from "./sd-component-library226.js";
+import { j as o } from "./sd-component-library191.js";
+import { smallMeterWidth as u, smallMeterHeight as M, smallMeterInnerCircleStrokeWidth as c, smallMeterInnerCircleRadius as h, smallMeterGaugeWidth as g, smallMeterDistanceBetweenRanges as R, smallMeterDistanceFromRangesToNeedle as W, smallMeterNeedleWidth as p, smallMeterMaskBorderRadius as f } from "./sd-component-library229.js";
 import { MultiOptionDiscreteOutlineMeter as k } from "./sd-component-library87.js";
 function C(e) {
   const {

package/lib/sd-component-library89.js

@@ -1,12 +1,12 @@
-import { j as r } from "./sd-component-library190.js";
+import { j as r } from "./sd-component-library191.js";
 import { Box as A } from "rebass";
-import { defaultWidth as H, defaultHeight as V, labelWidth as X, defaultDistanceFromLabelToRanges as p, labelPaddingX as Y, defaultGaugeWidth as _, defaultInnerPointRadius as z, defaultPointStrokeWidth as E, defaultArc as q, defaultDistanceFromRangesToScale as J, defaultDashHeight as K, defaultDashWidth as Q, defaultNumberOfDashes as U, defaultNeedleWidth as Z, defaultInnerCircleRadius as ee, defaultInnerCircleStrokeWidth as te, defaultDistanceFromRangesToNeedle as re, defaultMaskBorderRadius as ae } from "./sd-component-library226.js";
-import { mapAdjacent as oe, isLabelActive as x, flipPosition as R } from "./sd-component-library239.js";
-import { GradientMeterRange as ie } from "./sd-component-library240.js";
-import { OutlineMeterScale as ne } from "./sd-component-library233.js";
-import { GradientMeterNeedle as se } from "./sd-component-library241.js";
-import { OutlineMeterLabelPointer as de } from "./sd-component-library242.js";
-import { BaseMeterLabelBox as le } from "./sd-component-library243.js";
+import { defaultWidth as H, defaultHeight as V, labelWidth as X, defaultDistanceFromLabelToRanges as p, labelPaddingX as Y, defaultGaugeWidth as _, defaultInnerPointRadius as z, defaultPointStrokeWidth as E, defaultArc as q, defaultDistanceFromRangesToScale as J, defaultDashHeight as K, defaultDashWidth as Q, defaultNumberOfDashes as U, defaultNeedleWidth as Z, defaultInnerCircleRadius as ee, defaultInnerCircleStrokeWidth as te, defaultDistanceFromRangesToNeedle as re, defaultMaskBorderRadius as ae } from "./sd-component-library229.js";
+import { mapAdjacent as oe, isLabelActive as x, flipPosition as R } from "./sd-component-library242.js";
+import { GradientMeterRange as ie } from "./sd-component-library243.js";
+import { OutlineMeterScale as ne } from "./sd-component-library236.js";
+import { GradientMeterNeedle as se } from "./sd-component-library244.js";
+import { OutlineMeterLabelPointer as de } from "./sd-component-library245.js";
+import { BaseMeterLabelBox as le } from "./sd-component-library246.js";
 const be = (b) => {
   const {
     width: o = H,

package/lib/sd-component-library9.js

@@ -1,4 +1,4 @@
-import { j as a } from "./sd-component-library190.js";
+import { j as a } from "./sd-component-library191.js";
 import { Badge as o } from "./sd-component-library7.js";
 const c = (r) => {
   const { children: e, bg: t = "cl_grey" } = r;

package/lib/sd-component-library90.js

@@ -1,5 +1,5 @@
-import { j as m } from "./sd-component-library190.js";
-import { smallMeterWidth as h, smallMeterHeight as u, smallMeterGaugeWidth as M, smallMeterDistanceFromRangesToNeedle as c, smallMeterInnerCircleStrokeWidth as g, smallMeterInnerCircleRadius as W, smallMeterPointStrokeWidth as R, smallMeterPointRadius as S, smallMeterNeedleWidth as p } from "./sd-component-library226.js";
+import { j as m } from "./sd-component-library191.js";
+import { smallMeterWidth as h, smallMeterHeight as u, smallMeterGaugeWidth as M, smallMeterDistanceFromRangesToNeedle as c, smallMeterInnerCircleStrokeWidth as g, smallMeterInnerCircleRadius as W, smallMeterPointStrokeWidth as R, smallMeterPointRadius as S, smallMeterNeedleWidth as p } from "./sd-component-library229.js";
 import { GradientOutlineMeter as f } from "./sd-component-library89.js";
 const j = (e) => {
   const {

package/lib/sd-component-library91.js

@@ -1,4 +1,4 @@
-import { j as a } from "./sd-component-library190.js";
+import { j as a } from "./sd-component-library191.js";
 import { Box as d } from "rebass";
 import { BaseGridContainer as g } from "./sd-component-library36.js";
 const f = (h) => {

package/lib/sd-component-library92.js

@@ -1,4 +1,4 @@
-import { j as n } from "./sd-component-library190.js";
+import { j as n } from "./sd-component-library191.js";
 import { Box as h } from "rebass";
 import { GridContainerV2 as u } from "./sd-component-library39.js";
 const f = (c) => {

package/lib/sd-component-library93.js

@@ -1,8 +1,8 @@
-import { j as o } from "./sd-component-library190.js";
+import { j as o } from "./sd-component-library191.js";
 import { Box as j } from "rebass";
 import { isPDFFlow as g } from "./sd-component-library4.js";
-import { areSegmentsValid as v } from "./sd-component-library244.js";
-import { Segment as w } from "./sd-component-library245.js";
+import { areSegmentsValid as v } from "./sd-component-library247.js";
+import { Segment as w } from "./sd-component-library248.js";
 const E = ({
   segments: x,
   outlineWidth: e = 2,

package/lib/sd-component-library94.js

@@ -1,7 +1,7 @@
-import { j as n } from "./sd-component-library190.js";
-import { areSegmentsValid as h } from "./sd-component-library244.js";
-import { CompactDonutGaugeSegment as x } from "./sd-component-library246.js";
-import { CompactDonutGaugeValueIndicator as f } from "./sd-component-library247.js";
+import { j as n } from "./sd-component-library191.js";
+import { areSegmentsValid as h } from "./sd-component-library247.js";
+import { CompactDonutGaugeSegment as x } from "./sd-component-library249.js";
+import { CompactDonutGaugeValueIndicator as f } from "./sd-component-library250.js";
 const C = ({
   segments: e,
   size: r = 70,

package/lib/sd-component-library95.js

@@ -1,6 +1,6 @@
-import { j as r } from "./sd-component-library190.js";
-import { LinearGaugeSegment as c } from "./sd-component-library248.js";
-import { LinearGaugeLabel as d } from "./sd-component-library249.js";
+import { j as r } from "./sd-component-library191.js";
+import { LinearGaugeSegment as c } from "./sd-component-library251.js";
+import { LinearGaugeLabel as d } from "./sd-component-library252.js";
 import { GridCenter as f } from "./sd-component-library42.js";
 import { GridContainerV2 as h } from "./sd-component-library39.js";
 function $(l) {

package/lib/sd-component-library96.js

@@ -1,9 +1,9 @@
-import { j as e } from "./sd-component-library190.js";
-import { isMatchingRange as u } from "./sd-component-library250.js";
+import { j as e } from "./sd-component-library191.js";
+import { isMatchingRange as u } from "./sd-component-library253.js";
 import { GridCenter as c } from "./sd-component-library42.js";
 import { GridContainerV2 as f } from "./sd-component-library39.js";
-import { LinearGaugeSegment as d } from "./sd-component-library248.js";
-import { LinearGaugeLabel as j } from "./sd-component-library249.js";
+import { LinearGaugeSegment as d } from "./sd-component-library251.js";
+import { LinearGaugeLabel as j } from "./sd-component-library252.js";
 const M = ({
   gap: i = 3,
   segmentHeight: l = 8,

package/lib/sd-component-library97.js

@@ -1,55 +1,55 @@
-import { j as t } from "./sd-component-library190.js";
-import { useRef as B, useState as I, useEffect as R } from "react";
-import { Box as s } from "rebass";
+import { j as t } from "./sd-component-library191.js";
+import { r } from "./sd-component-library188.js";
+import { Box as d } 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-library223.js";
-import { OutsideClickBox as P } from "./sd-component-library11.js";
-import { ReactComponent as z } from "./sd-component-library224.js";
-import { FlexCenter as A } from "./sd-component-library35.js";
-import { Button as D } from "./sd-component-library25.js";
-const r = 500, J = (d) => {
+import { isIOS as I, isPDFFlow as R } from "./sd-component-library4.js";
+import F from "./sd-component-library254.js";
+import { OutsideClickBox as T } from "./sd-component-library11.js";
+import { ReactComponent as X } from "./sd-component-library255.js";
+import { FlexCenter as P } from "./sd-component-library35.js";
+import { Button as z } from "./sd-component-library25.js";
+const l = 500, q = (p) => {
   const {
-    variant: p,
-    children: l,
-    containerBg: c,
-    xIconColor: x,
-    showXIcon: m = !0,
+    variant: c,
+    children: a,
+    containerBg: x,
+    xIconColor: m,
+    showXIcon: u = !0,
     onClickX: n,
-    coverBg: u = "rgba(69,104,249, 0.4)",
-    width: h = "auto",
-    isOpen: e,
-    borderRadius: f = ["5px"],
-    outerPadding: g = ["30px", "auto", "150px"],
-    innerPadding: w = ["40px 20px", "50px"],
-    popUpHeight: C = "100%",
-    containerSx: k,
-    innerSx: v,
-    closeOnClickOutside: S = !1,
-    mountOnEnter: b = !0,
-    unmountOnExit: j,
-    intermediateContainerSx: y
-  } = d, o = B(null), [O, a] = I(null);
-  return R(() => {
-    let i;
-    return e ? a(l) : i = setTimeout(() => {
-      a(null);
-    }, r), () => clearTimeout(i);
-  }, [e, l]), E(o.current, e && !F()), T() ? null : /* @__PURE__ */ t.jsx(
-    X,
+    coverBg: h = "rgba(69,104,249, 0.4)",
+    width: f = "auto",
+    isOpen: i,
+    borderRadius: g = ["5px"],
+    outerPadding: w = ["30px", "auto", "150px"],
+    innerPadding: C = ["40px 20px", "50px"],
+    popUpHeight: k = "100%",
+    containerSx: v,
+    innerSx: S,
+    closeOnClickOutside: b = !1,
+    mountOnEnter: j = !0,
+    unmountOnExit: y,
+    intermediateContainerSx: O
+  } = p, o = r.useRef(null), [B, s] = r.useState(null);
+  return r.useEffect(() => {
+    let e;
+    return i ? s(a) : e = setTimeout(() => {
+      s(null);
+    }, l), () => clearTimeout(e);
+  }, [i, a]), E(o.current, i && !I()), R() ? null : /* @__PURE__ */ t.jsx(
+    F,
     {
       nodeRef: o,
-      in: e,
+      in: i,
       timeout: {
         enter: 0,
-        exit: r
+        exit: l
       },
-      mountOnEnter: b,
-      unmountOnExit: j,
-      children: (i) => (
+      mountOnEnter: j,
+      unmountOnExit: y,
+      children: (e) => (
         /** This most outer container is the background */
         /* @__PURE__ */ t.jsx(
-          s,
+          d,
           {
             sx: {
               width: "100vw",
@@ -61,57 +61,57 @@ const r = 500, J = (d) => {
               top: 0,
               left: 0,
               bottom: 0,
-              backgroundColor: u,
-              opacity: i === "entered" ? 1 : 0,
-              transition: `opacity ${r}ms ease-in-out`,
-              display: ["entering", "entered", "exiting"].includes(i) ? "block" : "none",
-              ...k
+              backgroundColor: h,
+              opacity: e === "entered" ? 1 : 0,
+              transition: `opacity ${l}ms ease-in-out`,
+              display: ["entering", "entered", "exiting"].includes(e) ? "block" : "none",
+              ...v
             },
             ref: o,
             children: /* @__PURE__ */ t.jsx(
-              A,
+              P,
               {
                 sx: {
                   position: "relative",
                   width: "100%",
-                  height: C
+                  height: k
                 },
                 children: /* @__PURE__ */ t.jsxs(
-                  s,
+                  d,
                   {
                     sx: {
                       maxWidth: "100vw",
                       zIndex: "180",
                       margin: "auto",
                       whiteSpace: "nowrap",
-                      padding: g,
-                      ...y
+                      padding: w,
+                      ...O
                     },
                     "data-testid": "modal",
                     children: [
                       /* @__PURE__ */ t.jsx(
-                        P,
+                        T,
                         {
-                          variant: `_modals.inner.${p}`,
+                          variant: `_modals.inner.${c}`,
                           sx: {
-                            width: h,
-                            borderRadius: f,
+                            width: f,
+                            borderRadius: g,
                             whiteSpace: "normal",
                             textAlign: "center",
                             display: "inline-block",
                             alignSelf: "top",
-                            backgroundColor: c || "white",
-                            padding: w,
-                            ...v
+                            backgroundColor: x || "white",
+                            padding: C,
+                            ...S
                           },
                           onClickOutside: () => {
-                            S && n && n();
+                            b && n && n();
                           },
-                          children: O
+                          children: B
                         }
                       ),
-                      m && /* @__PURE__ */ t.jsx(
-                        D,
+                      u && /* @__PURE__ */ t.jsx(
+                        z,
                         {
                           onClick: n,
                           "data-testid": "x-icon",
@@ -126,10 +126,10 @@ const r = 500, J = (d) => {
                             marginTop: "4px"
                           },
                           children: /* @__PURE__ */ t.jsx(
-                            z,
+                            X,
                             {
                               style: {
-                                fill: x || "#4568F9",
+                                fill: m || "#4568F9",
                                 width: "20px",
                                 height: "20px"
                               }
@@ -149,6 +149,6 @@ const r = 500, J = (d) => {
   );
 };
 export {
-  J as Modal
+  q as Modal
 };
 //# sourceMappingURL=sd-component-library97.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library97.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-testid=\"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-testid=\"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-library97.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-testid=\"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-testid=\"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-library98.js

@@ -1,4 +1,4 @@
-import { j as t } from "./sd-component-library190.js";
+import { j as t } from "./sd-component-library191.js";
 import { Modal as o } from "./sd-component-library97.js";
 import { EighteenRegular as a } from "./sd-component-library136.js";
 import { TwentyFourBold as e } from "./sd-component-library155.js";

package/lib/sd-component-library99.js

@@ -1,9 +1,9 @@
-import { j as r } from "./sd-component-library190.js";
+import { j as r } from "./sd-component-library191.js";
 import { useDependantState as j } from "./sd-component-library3.js";
-import { SquareButton as g } from "./sd-component-library255.js";
-import { ReactComponent as P } from "./sd-component-library252.js";
-import { CurrentPage as h } from "./sd-component-library256.js";
-import { ReactComponent as S } from "./sd-component-library254.js";
+import { SquareButton as g } from "./sd-component-library256.js";
+import { ReactComponent as P } from "./sd-component-library257.js";
+import { CurrentPage as h } from "./sd-component-library258.js";
+import { ReactComponent as S } from "./sd-component-library259.js";
 import { GridCenter as R } from "./sd-component-library42.js";
 function x(m, t, o, n) {
   t == null || t(o, n), m(o);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selfdecode/sd-component-library",
-  "version": "4.0.76-test2",
+  "version": "4.0.76-test3",
   "private": false,
   "license": "MIT",
   "files": [
@@ -10,6 +10,9 @@
     "lib": "lib"
   },
   "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-date-range": "1.4.0",
     "@rebass/forms": "^4.0.6",
     "body-scroll-lock": "^4.0.0-beta.0",
     "browserslist": "^4.18.1",
@@ -106,10 +109,7 @@
   "peerDependencies": {
     "date-fns": "^2.30.0",
     "lodash-es": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-router-dom": "^5.3.3",
-    "react-date-range": "1.4.0",
     "emotion-theming": "^10.0.28",
     "@rebass/forms": "^4.0.6",
     "rebass": "^4.0.7"